// JavaScript Document
var elemOnfocus, capsOn = false, shiftOn = false;

function keyOn(obj){obj.style.border = "1px solid red";}
function keyOff(obj){obj.style.border = "1px solid black"; }
function sendKey(k){
	postpone();
	elemOnfocus.focus()	
	var txt = (k.innerText!=undefined)?k.innerText:k.textContent;//IE or All others
	switch (k.textContent){
		case "Backspace": 
			elemOnfocus.value = elemOnfocus.value.substr(0,elemOnfocus.value.length-1);	break;
		case "Space": 
			elemOnfocus.value = elemOnfocus.value + " "; break;
		case "Shift": 
			elemOnfocus.value = elemOnfocus.value; 	shiftOn = !shiftOn; buildKB(); break;
		case "Caps": 
			k.style.background = "white"; capsOn = !capsOn; buildKB(); break;
		case "Tab":			
			if (elemOnfocus.name == "username"){elemOnfocus = document.getElementById("pwd");	elemOnfocus.focus();}
			else {	elemOnfocus = document.getElementById("username");	elemOnfocus.focus();}
			elemOnfocus.value = elemOnfocus.value; 	break;
		case "Enter": 
			if (validateFrm()){
				document.forms["theForm"].submit()				
			}
			 break;
			//alert("submitting"); document.getElmentById("theForm").submit();	break;
		default : 
			elemOnfocus.value = elemOnfocus.value + txt; if (shiftOn){shiftOn = false; buildKB()}; 
	}
}

function buildKB(){
	var shiftOff1 = "1,2,3,4,5,6,7,8,9,0,-,=,Backspace,nline,";
	var shiftOn1 = "!,@,#,$,%,^,&,*,(,),_,+,Backspace,nline,";
	var upper2 = "Tab,Q,W,E,R,T,Y,U,I,O,P,";
	var lower2 = "Tab,q,w,e,r,t,y,u,i,o,p,";
	var symUp2 = "{,},nline,";
	var symDown2 = "[,],nline,";
	var upper3 = "Caps,A,S,D,F,G,H,J,K,L,";
	var lower3 = "Caps,a,s,d,f,g,h,j,k,l,";
	var symUp3 = ":,Enter,nline,";
	var symDown3 = ";,Enter,nline,";
	var upper4 = "Shift,Z,X,C,V,B,N,M,";
	var lower4 = "Shift,z,x,c,v,b,n,m,";
	var symUp4 = "<,>,Shift,|,nline,,Space,";
	var symDown4 = ".,/,Shift,\\,nline,,Space,";
	
	if (!shiftOn){	
		if (!capsOn){strKeys = shiftOff1+lower2+symDown2+lower3+symDown3+lower4+symDown4}
		else{strKeys =shiftOff1+upper2+symDown2+upper3+symDown3+upper4+symDown4	}
	}	
	else{ //Shift is on
		if (!capsOn){strKeys = shiftOn1+upper2+symUp2+upper3+symUp3+upper4+symUp4}
		else{strKeys = shiftOn1+lower2+symUp2+lower3+symUp3+lower4+symUp4 }
	}
	var keys = strKeys.split(",")
	var tblBody = document.createElement("tbody");
	tblBody.setAttribute("id","keyboard")
	var row = document.createElement("tr"); 
	for (var cnt=0;cnt<keys.length;cnt++) { 
		if (keys[cnt]=="nline") {//Create new row.			
			tblBody.appendChild(row) 
			var row = document.createElement("tr"); 
			cnt++;
		}
		var cell = document.createElement("td");
		if (keys[cnt].length!=1){setKeyStyle(cell, keys[cnt], shiftOn)}
		if (keys[cnt].length){			
			cell.innerText = keys[cnt]; //IE
			cell.textContent = keys[cnt]; //Others		
			cell.onmouseover = new Function("keyOn(this)");
			cell.onmouseout = new Function("keyOff(this)");
			cell.onclick = new Function("event","sendKey(this,event)")
			cell.className = "keys"
		}
		row.appendChild(cell);				
	}

	tblBody.appendChild(row);
	var tbl = document.createElement("table");
	tbl.setAttribute("border", "1");
	tbl.setAttribute("cellSpacing", "4");
	tbl.setAttribute("id","keyboardTbl")
	tbl.appendChild(tblBody);
	//document.body.appendChild(tbl);
	if (!document.getElementById("td").hasChildNodes()){document.getElementById("td").appendChild(tbl)}
	else {document.getElementById("td").innerHTML = ""; document.getElementById("td").appendChild(tbl)}
}

function setKeyStyle(cell, v, shiftOn){
	cell.setAttribute("colSpan", "2")
	switch (v){
		//case "BackSpace" || "Tab": 
		//	break;
		case "": 
			cell.setAttribute("colSpan", "3");	break;
		case "Space": 
			cell.setAttribute("colSpan", "6");	break;
		case "Caps": 
			if (capsOn) {cell.style.background = "lightgrey"; cell.setAttribute("title", "Caps on");} break;
		case "Shift": 
			if (shiftOn) {cell.style.background = "lightgrey"};	break;
		default : v;
	}
	return cell
}