document.write( "<style>.keyButton{font-family:tahoma;font-size:11px;text-align:center;border-top:solid 1px white;border-left:solid 1px white;border-bottom:solid 1px gray;border-right:solid 1px gray;width:20px;cursor:hand;direction=rtl;}</style>" );
document.write( "<style>.keyPressedButton{height:18px;font-family:tahoma;font-size:11px;text-align:center;border-top:solid 1px gray;border-left:solid 1px gray;border-bottom:solid 1px white;border-right:solid 1px white;width:20px;cursor:hand;}</style>" );

var gKeyboardBag = new ActiveXObject("Scripting.Dictionary");


var arabic_keys = new Array (
	new Array("ذ","1","2","3","4","5","6","7","8","9","0","-","="),
	new Array("ض","ص","ث","ق","ف","غ","ع","ه","خ","ح","ج","د" ),
	new Array("ش","س","ي","ب","ل","ا","ت","ن","م","ك","ط"),
	new Array("ئ","ء","ؤ","ر","لا","ى","ة","و","ز","ظ"),
	
	new Array("ّ","!","@","#","$","%","^","&","*",")","(","_","+"),
	new Array(" ََ"," ً","ُ","ٌٌ","لإ","إ","‘","÷","×","؛","<",">"),
	new Array("ِ","ٍ","]","[","لأ","أ","ـ","،","/",":","\""),
	new Array("~","ْ","}","{","لآ","آ","’",",",".","؟")
);

var english_keys = new Array (
	"`1234567890-=", "qwertyuiop[]", "asdfghjkl;'", "zxcvbnm,./", 
	"~!@#$%^&*()_+", "QWERTYUIOP{}", "ASDFGHJKL:\"", "ZXCVBNM<>?"
);

//////////////////////////////////////////////////////////////////
//
//////////////////////////////////////////////////////////////////
function createKeys( arKeys, sKeyboardID )
{
	var sHTML = "";
	var sHooverEffect= " onmouseover=\"this.style.background='#FFFFAA'\" onmouseout=\"this.style.background=''\" ";
	var shiftButtonClass = "keyButton";

	if (gKeyboardBag(sKeyboardID).shift)
	{
		shiftButtonClass = "keyPressedButton";
	}

	for (var row= 0; row<4; row++)
	{
		var rowIndex = row;
		
		if (gKeyboardBag(sKeyboardID).shift)
		{
			 rowIndex += 4;
		}

		switch(row)
		{
		case 0:
			break;
		case 1:
			sHTML += "<span class='keyButton' style='width:30px'" +  sHooverEffect +
					 " onmousedown=\"javascript:gKeyboardBag('" + sKeyboardID + "').addChar(' ')\">Tab</span>";
			break;
		case 2:
			sHTML += "<span class='keyButton' style='width:35px'>&nbsp;</span>";
			break;
		case 3:
			sHTML += "<span class=" + shiftButtonClass + " style='width:47px'" +  sHooverEffect +
					 " onclick=\"javascript:gKeyboardBag('" + sKeyboardID + "').toggleShift()\">Shift</span>";
			
			break;
		}


		for( var keyIndex=0; keyIndex < arKeys[rowIndex].length; keyIndex ++ )
		{
			var sChar, sDispChar;

			sChar = arKeys[rowIndex][ keyIndex ];
			sDispChar = sChar;

			if (sChar == "\"")
			{
				sChar = "\\x22";
			}

			sHTML += "<span class='keyButton' " + sHooverEffect +
					 " ondblclick=\"javascript:gKeyboardBag('" + sKeyboardID + "').addChar('" + sChar + "')\" onmousedown=\"javascript:gKeyboardBag('" + sKeyboardID + "').addChar('" + sChar + "')\">" + sDispChar + "</span>";
		}
		
		switch(row)
		{
		case 0:
			sHTML += "<span class='keyButton' style='width:55px'" +  sHooverEffect +
					 " onmousedown=\"javascript:gKeyboardBag('" + sKeyboardID + "').addChar('BS')\" ondblclick=\"javascript:gKeyboardBag('" + sKeyboardID + "').addChar('BS')\">BkSpace</span>";
			break;
		case 1:
			if( gKeyboardBag(sKeyboardID).shift ) {
				sHTML += "<span class='keyButton' style='width:45px'" +  sHooverEffect +
						 " onmousedown=\"javascript:gKeyboardBag('" + sKeyboardID + "').addChar('|')\">|</span>";
			}
			else{
				sHTML += "<span class='keyButton' style='width:45px'" +  sHooverEffect +
						 " onmousedown=\"javascript:gKeyboardBag('" + sKeyboardID + "').addChar('\\\\')\">\\</span>";
			}
			break;
		case 2:
			if (gKeyboardBag(sKeyboardID).sOnEnter.length)
			{
				sHTML += "<span class='keyButton' style='width:60px'" + sHooverEffect + 
					 " onclick=\"javascript:" + gKeyboardBag(sKeyboardID).sOnEnter + ";HideElement('" + sKeyboardID + "_keyboard',0);\">Enter</span>";
			}
			else
			{
				sHTML += "<span class='keyButton' style='width:60px'" + 
					 " onmousedown=\"javascript:gKeyboardBag('" + sKeyboardID + "').addChar(' ')\">&nbsp;</span>";
			}
			break;
		case 3:
			sHTML += "<span class=" + shiftButtonClass + " style='width:68px'" +  sHooverEffect +
					 " onclick=\"javascript:gKeyboardBag('" + sKeyboardID + "').toggleShift()\">Shift</span>";
			break;
		}


		sHTML +=  "<br>";
	}


	for(i=0;i<3;i++)
	{
		sHTML += "<span class='keyButton' style='width:25px'>&nbsp</span>";
	}

	sHTML += "<span class='keyButton' style='width:140px' " +  sHooverEffect + " onmousedown=\"javascript:gKeyboardBag('" + sKeyboardID + "').addChar(' ')\">Space</span>";
	
	for(i=0;i<4;i++)
	{
		sHTML += "<span class='keyButton' style='width:25px'>&nbsp</span>";
	}
	
	return sHTML;
}
//////////////////////////////////////////////////////////////////
//
//////////////////////////////////////////////////////////////////
function xcreateKeys( arKeys, sKeyboardID )
{
	var sHTML = "";
	
	for (var i=0; i<arKeys.length; i++)
	{
		var sChar;

		if(i%5 == 0 && i>0)
			sHTML +=  "<br>";

		sChar = arKeys[i];

		if (sChar == " ")
		{
			sChar = "&nbsp;";
		}

		sHTML += "<span style='font-family:tahoma;font-size:11px;text-align:center;border-top:solid 1px white;border-left:solid 1px white;border-bottom:solid 1px gray;border-right:solid 1px gray;width:20px;cursor:hand;background:#efefde;' " + 
				 " onmousedown=\"javascript:gKeyboardBag('" + sKeyboardID + "').addChar('" + arKeys[i] + "')\">" + sChar + "</span>";
	}
	
	return sHTML;
} 
//////////////////////////////////////////////////////////////////
//
//////////////////////////////////////////////////////////////////
function CKeyboard(sTextBoxID, arKeys, sOnEnter)
{
	var oTextBox = document.getElementById( sTextBoxID );
	
	if( null == oTextBox )
	{
		alert("not found");
		return null;
	}

	this.text_box = oTextBox;
	this.shift = false;
	this.addChar   = CKeyboard_addChar;
	this.clearChar = CKeyboard_clearChar;
	this.toggleShift = CKeyboard_toggleShift;
	this.keys = arKeys;
	this.sOnEnter = "";

	if (sOnEnter)
	{
		this.sOnEnter = sOnEnter;
	}
	
	gKeyboardBag(sTextBoxID) = this; // create a reference to the object

	var mySpan = document.createElement("div");

	mySpan.sTextBoxID  = sTextBoxID;
	mySpan.onmousemove = showKeyboard;
	mySpan.onmouseout  = hideKeyboard;
	//mySpan.style.border = "solid 1px yellow";
	//mySpan.style.position = "absolute";
	
	// apply the frame on the target element
	oTextBox.applyElement(mySpan) ;
	
	mySpan.insertAdjacentHTML(
					"beforeEnd", 
					"<br><img align='left' src=keyboard.gif >" + 
					"<div dir=LTR onselectstart=\"javascript:window.event.returnValue=false\" NOWRAP " + 
					" id=" + sTextBoxID + "_keyboard " + 
					" style='filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=70);padding:4px;z-index:0;position:absolute;display:none;border:1px solid yellow;background:#D7D7D7;color:blue;font-weight:bold;font-size:8px;' >" + 
						createKeys( arKeys, sTextBoxID ) + 
					"</div>" 
					);
	
	return this;
}
//////////////////////////////////////////////////////////////////
//
//////////////////////////////////////////////////////////////////
function showKeyboard()
{
	var sTextBoxID;
	var oElement = event.srcElement ;
	
	while( oElement && !sTextBoxID )
	{ 
		sTextBoxID = oElement.sTextBoxID;
		oElement = oElement.parentElement;
	}
	if( sTextBoxID )
		ShowElement(sTextBoxID + "_keyboard", 300);
}
//////////////////////////////////////////////////////////////////
//
//////////////////////////////////////////////////////////////////
function hideKeyboard()
{
	var sTextBoxID;
	var oElement = event.srcElement ;
	
	while( oElement &&	!sTextBoxID )
	{ 
		sTextBoxID = oElement.sTextBoxID;
		oElement = oElement.parentElement;
	}
	if( sTextBoxID )
		HideElement(sTextBoxID + "_keyboard", 800);
}
//////////////////////////////////////////////////////////////////
//
//////////////////////////////////////////////////////////////////
function CKeyboard_toggleShift()
{
	this.shift = (this.shift == true)? false:true;
	document.getElementById(this.text_box.id + "_keyboard").innerHTML = createKeys(this.keys, this.text_box.id);
}
//////////////////////////////////////////////////////////////////
//
//////////////////////////////////////////////////////////////////
function CKeyboard_clearChar()
{
	this.text_box.value = this.text_box.value.substring(0,this.text_box.value.length-1);
}
//////////////////////////////////////////////////////////////////
//
//////////////////////////////////////////////////////////////////
function CKeyboard_addChar( sChar )
{
	//alert(this.text_box.id);
	if (sChar == "BS")
	{
		this.text_box.value = this.text_box.value.substring(0,this.text_box.value.length-1);
	}
	else if (sChar == "&nbsp;")
	{
		this.text_box.value += " ";
	}
	else if (sChar == "CL")
	{
		this.text_box.value = "";
	}
    else if (sChar == "CL")
	{
		this.text_box.value = "";
	}
	else
		this.text_box.value += sChar;
	
	var sFocusScript = "if( document.getElementById(\"" + this.text_box.id + "\") ) {" +
		"document.getElementById(\"" + this.text_box.id + "\").focus() }";
	
	window.setTimeout( sFocusScript, 10 );
}
//////////////////////////////////////////////////////////////////
//
//////////////////////////////////////////////////////////////////
function ShowElement( sID, delay )
{
	var idElement = document.getElementById(sID);

	if( null == idElement )
		return;
	
	if( idElement.idDelayedShowHide )
	{
		window.clearTimeout( idElement.idDelayedShowHide );
		idElement.idDelayedShowHide = null;
	}

	if( 0 == delay )
	{
		idElement.style.zIndex  = 1;
		idElement.style.display = "";
	}
	else
	{
		idElement.idDelayedShowHide = window.setTimeout("ShowElement('" + sID + "', 0)", delay);
	}
}
//////////////////////////////////////////////////////////////////
//
//////////////////////////////////////////////////////////////////
function HideElement( sID, delay )
{
	var idElement = document.getElementById(sID);
	
	if( null == idElement )
		return;

	if( idElement.idDelayedShowHide )
	{
		window.clearTimeout( idElement.idDelayedShowHide );
		idElement.idDelayedShowHide = null;
	}

	if( delay == 0 )
	{
		idElement.style.display = "none";
	}
	else
	{
		idElement.idDelayedShowHide = window.setTimeout("HideElement('" + sID + "', 0)", delay);
	}
}