var targetObject=null;
var CapsLockValue=0;
var screenW = screen.width;
var screenH = screen.height;

// find element in document by id
function $find(o)
{
  return document.getElementById(o);
}

/*
 * trim the component's value
 */
String.prototype.trim = function() 
{
  return this.replace(/^\s+|\s+$/g,"");
}

function $setfocus(o)
{
  return $find(o).focus();
}

function showkeyboardXY(object,screenX,screenY)
{
  targetObject = object;
  $find("softkeyboard").style.display="block";
  setKeyboardLocation(screenX,screenY);
}

function showkeyboard(object)
{
  showkeyboardXY(object, 100, 380);
}

// close keyboard
function closekeyboard()
{
  $find("softkeyboard").style.display="none";
}

// input the digit/character/symbol
function addValue(newValue)
{
  //var musicObj = $find("softkeyboard_music");
  //musicObj.innerHTML="<embed src=\"trackdemo/blue/kb_01/key_sound.wav\" autostart=\"true\" loop=\"false\" hidden=\"true\">";
  if (CapsLockValue==0)
  {
	targetObject.value+=newValue.toLowerCase();
  }
  else
  {
	targetObject.value+=newValue.toUpperCase();
  }
}

// call backspace key
function callbackspace()
{
  var length=targetObject.value.length;
  var num=targetObject.value.substring(0,length-1);
  targetObject.value=num;
}

// clear input context
function clearkeyboard()
{
  targetObject.value="";
}

// switch uppercase / lowercase
function setCapsLock(obj)
{
  if (CapsLockValue==0)
  {
    CapsLockValue=1;
	obj.style.background="url(/kiosk_resources/blue/kb/capslock_off.png)";
  }
  else
  {
	CapsLockValue=0;
	obj.style.background="url(/kiosk_resources/blue/kb/capslock_on.png)";
  }
}

// set keyboard's position on the screen
function setKeyboardLocation(screenX,screenY)
{
  var kb = $find("softkeyboard");
  kb.style.position="absolute";
  kb.style.left=screenX;
  kb.style.top=screenY;
}

function imgSwap(oImg)
{
  var strOver= "_on"    // image to be used with mouse over
  var strOff = "_off"   // normal image

  var strImg = oImg.style.background
  if (strImg.indexOf(strOver) != -1)
    oImg.style.background = strImg.replace(strOver,strOff)
  else
    oImg.style.background = strImg.replace(strOff,strOver)
}

var style="<style>";
style+="@media print {.keyboardNoPrint{display:none;}}";
style+="</style>";

document.write(style);

document.write ('<div class=\"keyboardNoPrint\">');
document.write ('  <div align=\"center\" id=\"softkeyboard\" name=\"softkeyboard\" style=\"position:absolute;left:0;top:0;width:517px;z-index:180;display:none\">');
document.write ('  <table width=\"780\" height=\"200\" border=\"0\" align=\"left\" cellpadding=\"0\" cellspacing=\"0\">');
document.write ('  <tr>');
document.write ('  <td width=\"590\">');
document.write ('    <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">');
document.write ('    <tr>');
document.write ('    <td>');
document.write ('      <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">');
document.write ('      <tr>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/q_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'q\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/w_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'w\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/e_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'e\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/r_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'r\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/t_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'t\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/y_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'y\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/u_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'u\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/i_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'i\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/o_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'o\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/p_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'p\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      </tr>');
document.write ('      </table>');
document.write ('    </td>');
document.write ('    </tr>');

document.write ('    <tr>');
document.write ('    <td align=\"center\">');
document.write ('      <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">');
document.write ('      <tr>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/a_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'a\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/s_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'s\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/d_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'d\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/f_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'f\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/g_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'g\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/h_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'h\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/j_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'j\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/k_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'k\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/l_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'l\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/line_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'-\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      </tr>');
document.write ('      </table>');
document.write ('    </td>');
document.write ('    </tr>');

document.write ('    <tr>');
document.write ('    <td align=\"center\">');
document.write ('      <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">');
document.write ('      <tr>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/z_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'z\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/x_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'x\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/c_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'c\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/v_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'v\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/b_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'b\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/n_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'n\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/m_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'m\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/underscore_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'_\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/backspace_off.png);width:120px;height:60px;cursor:pointer;border:0;\" onclick=\"callbackspace();\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      </tr>');
document.write ('      </table>');
document.write ('    </td>');
document.write ('    </tr>');

document.write ('    <tr>');
document.write ('    <td align=\"center\">');
document.write ('      <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">');
document.write ('      <tr>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/capslock_off.png);width:120px;height:60px;cursor:pointer;border:0;\" onclick=\"setCapsLock(this);\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/space_off.png); width:180px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\' \');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('      </tr>');
document.write ('      </table>');
document.write ('    </td>');
document.write ('    </tr>');
document.write ('    </table>');
document.write ('  </td>');

document.write ('  <td valign=\"middle\">');
document.write ('    <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">');
document.write ('    <tr>');
document.write ('    <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/divider.png); width:24px;height:230px;border:0;\"></td>');
document.write ('    </tr>');
document.write ('    </table>');
document.write ('  </td>');

document.write ('  <td>');
document.write ('    <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">');
document.write ('    <tr>');
document.write ('    <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/1_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'1\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('    <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/2_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'2\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('    <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/3_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'3\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('    </tr>');

document.write ('    <tr>');
document.write ('    <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/4_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'4\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('    <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/5_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'5\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('    <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/6_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'6\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('    </tr>');

document.write ('    <tr>');
document.write ('    <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/7_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'7\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('    <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/8_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'8\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('    <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/9_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'9\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('    </tr>');

document.write ('    <tr>');
document.write ('    <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/dot_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'.\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('    <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/0_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'0\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('    <td><input type=button style=\"background:url(/kiosk_resources/blue/kb/jin_off.png);width:60px;height:60px;cursor:pointer;border:0;\" onclick=\"addValue(\'#\');\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\"></td>');
document.write ('    </tr>');
document.write ('    </table>');
document.write ('  </td>');

document.write ('  </tr>');
document.write ('  </table>');

document.write ('  </div>');
document.write ('</div>');

function showError(vis, errMsg, errId)
{
  popUp=$find("errorPopUp");
  if(!popUp)
  {
	tbody = document.getElementsByTagName("body")[0];
	tnode = document.createElement("div");         // Create the layer.
	tnode.style.position="absolute";               // Position absolutely
    tnode.style.top="0px";                         // In the top
    tnode.style.left="0px";                        // Left corner of the page
	tnode.style.width="1024px";
	tnode.style.height="768px";
    tnode.style.overflow="hidden";                 // Try to avoid making scroll bars            
    tnode.style.display="none";                    // Start out Hidden
	tnode.style.background = "url('/kiosk_resources/blue/msg_bg.png') no-repeat";
    tnode.id="errorPopUp";                   	   // Name it so we can find it later
	tbody.appendChild(tnode);                      // Add it to the web page
	popUp=$find("errorPopUp");   // Get the object.		
  }	
  if(vis)
  {
    popUp.innerHTML = "<div style='position:absolute;top:245px;left:285px;'>" 
		            + "<table width='450' height='280' border='0' cellspacing='0' cellpadding='0'>" 
	                + "<tr><td align='center' valign='bottom' height='40' style='font-size:1.7em;font-family:Arial;color:#FFFFFF;'>Information</td></tr>"
   	                + "<tr><td align='center' valign='center' height='180' style='font-size:1.2em;font-family:Arial;'>" + errMsg + "</td></tr>"
	                + "<tr><td align='center' valign='bottom' height='40'><input type='button' id='embedOKBTN' style=\"background:url(/kiosk_resources/blue/ok_btn_off.png);width:137px;height:54px;border:0;\" onmouseover=\"imgSwap(this)\" onmouseout=\"imgSwap(this)\" onclick='showError(false, \"\", \"" + errId + "\");'></td></tr>"
					+ "</table>" 
					+ "</div>";
	popUp.style.zIndex = 1500;
	popUp.style.display = "block";
    $find('embedOKBTN').focus();	
  }
  else
  {
	popUp.style.display = "none";
 	eval($find(errId));
	$find(errId).focus();
	inFocus($find(errId));
  }  
}

function showMsg(msg,id)
{
  showError(true, msg, id);
}

function imgSwap(oImg)
{
  var strOver= "_on";    // image to be used with mouse over
  var strOff = "_off";   // normal image

  var strImg = oImg.style.background;
  if (strImg.indexOf(strOver) != -1)
    oImg.style.background = strImg.replace(strOver,strOff);
  else
    oImg.style.background = strImg.replace(strOff,strOver);
}

function inFocus(theInput)
{
  if(!theInput.disabled)
  {
 	theInput.focus();
	if(theInput.type == "text")	theInput.select();
  }
  theInput.style.color = "red";
}