var function_box_shown = false;
var last_info_button_clicked = null;

var floatLayerOffsetY = 150;
var floatLayerOffsetX = 400;
var keyboardLayerOffsetY = 160;
var keyboardLayerOffsetX = 600;
var moveKeyBoard=false;

function getMouseDown(e) {
	
	// var keyboardLayer = document.getElementById('keyboardLayer');
	// if (keyboardLayer.style.display=='') {
	//	moveKeyBoard=false;
	// }

	deMagnify();
}

function getMousePosition(e) {
  posx = 0;
  posy = 0;

  if (!e)
    var e = window.event;
  if (e.pageX || e.pageY) {
    posx = e.pageX;
    posy = e.pageY;
  }
  else if (e.clientX || e.clientY) {
    posx = e.clientX + document.body.scrollLeft
                     + document.documentElement.scrollLeft;
    posy = e.clientY + document.body.scrollTop
                     + document.documentElement.scrollTop;
  }

	var floatLayer = document.getElementById("floatLayer");
	// var keyboardLayer = document.getElementById("keyboardLayer");
  floatLayer.style.top = (posy-floatLayerOffsetY+50) + "px";
  floatLayer.style.left = (posx-floatLayerOffsetX) + "px";
  if (moveKeyBoard) {
	  //keyboardLayer.style.top = (posy-keyboardLayerOffsetY+50) + "px";
	  //keyboardLayer.style.left = (posx-keyboardLayerOffsetX) + "px";
	}
  
  return true;
}
var leftOffset = 170;

function function_box_toggle(o, isLeft) {
	hideLayers();
	  if (!function_box_shown || o != last_info_button_clicked) {
	    var fBox = document.getElementById(o);
	    var Xposition = posx - document.body.scrollLeft - document.documentElement.scrollLeft + 20;
	    var Yposition = posy - document.body.scrollTop - document.documentElement.scrollTop;
	    fBox.style.top = Yposition - 25 + "px";
	    if (isLeft) {
	    	Xposition = Xposition-leftOffset-20;
	    }
	    fBox.style.left = Xposition + "px";
	    fBox.style.display = "block";
	    last_info_button_clicked = o;
	    function_box_shown = true;
	  }
	  else {
	    document.getElementById(o).style.display = "none";
	    last_info_button_clicked = o;
	    function_box_shown = false;
	  }
  }

function show_highlight(o) {
  o.style.background = "url('/images/highlight.png') scroll no-repeat center center";
}

function hide_highlight(o) {
  o.style.background = "none";
}

function show_highlight_ie(o) {
  o.style.background = "#bdd3ea";
}

function hide_highlight_ie(o) {
  o.style.background = "none";
}

function create_bindings() {

  IE6=(navigator.userAgent.toLowerCase().indexOf('msie 6') != -1) && (navigator.userAgent.toLowerCase().indexOf('msie 7') == -1);
  for (var i = 1; ele=document.getElementById("function"+i); i++) {
    if (!IE6) {
      ele.onmouseover = function () { show_highlight(this); };
      ele.onmouseout = function () { hide_highlight(this); };
    }
    else {
      ele.onmouseover = function () { show_highlight_ie(this); };
      ele.onmouseout = function () { hide_highlight_ie(this); };
    }
  }
  //IE6 hack - iepngfix skips over invisible elements, so show the function box in IE6 initially but hide it here.
//  document.getElementById('function_box').style.display = "none";
}


function magnify(id, text) {
	var floatLayer = document.getElementById("floatLayer");
	var className = document.getElementById(id).className;
	 
	if (text=="") {
		text = document.getElementById(id).innerHTML;
	}
	else {
		className = 'transliteration_magnify';
	}
	if (floatLayer.style.display=='none') {
		floatLayer.innerHTML="<CENTER><table width='400px' height='150px'><tr><td width='100%'  valign='middle' align='center'><span class='"+className+"' style='color:black; font-size:46pt; font-weight:bold; '>"+text+"</span></td></tr></tr></CENTER>";
		floatLayer.style.top = posy-floatLayerOffsetY;
  	floatLayer.style.left = posx-floatLayerOffsetX;
		floatLayer.style.display= 'inline';
		
	}
	else
		deMagnify();
}

function deMagnify() {
	var floatLayer = document.getElementById("floatLayer");
	floatLayer.style.display= 'none';
}

function changeRowFont(id) {
    var fontRow = document.getElementById(id);
    var index = getIndexOfNextFont(fontRow.className);
    fontRow.className=classNames[index];
}

function hideLayers() {
	var divs = document.getElementsByTagName('div'); 
	for(var i=0;i<divs.length;i++){
		var divName = divs[i].getAttribute('name');
		if (divName=='functionLayer') {
			divs[i].style.display= 'none';		
		}
	}
}
 
function showKeyboard() {
	deMagnify();
  var keyboardLayer = document.getElementById('keyboardLayer');
  
  keyboardLayer.style.left=posx-keyboardLayerOffsetX;
  keyboardLayer.style.top=posy-keyboardLayerOffsetY-100;
  keyboardLayer.style.display= '';
  moveKeyBoard=true;
  Erase();
}

function hideKeyBoard() {
	var keyboardLayer = document.getElementById('keyboardLayer');
	keyboardLayer.style.display= 'none';
}

document.onmousedown = getMouseDown;
document.onmousemove = getMousePosition;
window.onload = create_bindings;