/////////////////////////////////////////////////////////////////////////////////////
// Arabic Virtual Keyboard
// Used to input Arabic in HTML form fields
//
// (c) 2005 Borninteractive
//	v0.9  10/03/2005 --- show KB over dropdowns (fix IE z-index bug)
//	v0.8  03/03/2005
//	
//  :: USAGE ::
//  1. Include this JavaScript file in the head of your HTML page
// 	2. Use this line *after* the form field to define a new keyboard:
//			myKB = new vkb("FieldName");
//		- myKB 			Instance name of the keyboard
//		- FieldName 	Form field string name/id 
//
/////////////////////////////////////////////////////////////////////////////////////

var n = -1;
var vkb_array = [];

// MAIN CLASS
function vkb(field)
{
	if (typeof field == "string"){
		this.field = document.getElementById(field);
	} else {
		this.field = field;
	}
	
	this.num = ++n;
	vkb_array.push(this);
	this.visibility = "hidden";
	this.drawKB();
}

function del(kb) {
	board = vkb_array[kb];
	if (board.field.value.length>0)
	{board.field.value=board.field.value.substring(0,board.field.value.length-1)};board.field.focus();
}

function putchar(character, kb) {
	board = vkb_array[kb];
	board.field.value += character;
	board.field.focus();
}

// Asign the prototye functions
vkb.prototype.putchar = putchar;
vkb.prototype.del = del;

function clearContent(kb){
	board = vkb_array[kb];
	board.field.value = "";
}


function drawKB(){
	with(document){
		open();
		writeln('<style>input.key {font-size:14px; width:20px; background-color:#E5E5E5; margin:1px; font-family:Arial} input.diacritic {font-size:40;width:.7em;height=1.2em;} .sb {font-size:10px; background-color:#CCCCCC}</style>');
		writeln('<div style="position:relative;">');
		writeln('<a href="#" onClick="toggleKB('+this.num+')"><img src="btn-kbd.gif" border="0"></a>');
		this.divID = "vkb"+this.num;
		writeln('<div id="'+this.divID+'_fr" style="position:absolute; visibility:hidden; z-index:'+(100-this.num)+'"><iframe name="fr'+this.num+'" width="320" frameborder="0" height="130"></iframe></div>');
		writeln('<div id="'+this.divID+'" style="position:absolute; background-color:#F3F3F3; padding:5px; border:1px solid #cccccc; visibility:hidden; width:320px; z-index:'+(1000-this.num)+'">');
		writeln('<table align="center" cellpadding="0" cellspacing="0"><tbody><tr>');
		writeln('<td align="center"><input value="&#8249;&#8211;" onclick="del('+this.num+')" type="button" class="key" style="width:2em">&nbsp;&nbsp;&nbsp;</td>');
		writeln('<td rowspan="2" align="center" nowrap dir="ltr"><p>');
		writeln('<input onclick=\'putchar("١",'+this.num+')\' value="١" class="key" type="button"><input onclick=\'putchar("٢",'+this.num+')\' value="٢" class="key" type="button"><input onclick=\'putchar("٣",'+this.num+')\' value="٣" class="key" type="button"><input onclick=\'putchar("٤",'+this.num+')\' value="٤" class="key" type="button"><input onclick=\'putchar("٥",'+this.num+')\' value="٥" class="key" type="button"><input onclick=\'putchar("٦",'+this.num+')\' value="٦" class="key" type="button"><input onclick=\'putchar("٧",'+this.num+')\' value="٧" class="key" type="button"><input onclick=\'putchar("٨",'+this.num+')\' value="٨" class="key" type="button"><input onclick=\'putchar("٩",'+this.num+')\' value="٩" class="key" type="button"><input onclick=\'putchar("٠",'+this.num+')\' value="٠" class="key" type="button"><input onclick=\'putchar("ذ",'+this.num+')\' value="ذ" class="key" type="button"><br>');
		writeln('<input onclick=\'putchar("ض",'+this.num+')\' value="ض" class="key" type="button"><input onclick=\'putchar("ص",'+this.num+')\' value="ص" class="key" type="button"><input onclick=\'putchar("ث",'+this.num+')\' value="ث" class="key" type="button"><input onclick=\'putchar("ق",'+this.num+')\' value="ق" class="key" type="button"><input onclick=\'putchar("ف",'+this.num+')\' value="ف" class="key" type="button"><input onclick=\'putchar("غ",'+this.num+')\' value="غ" class="key" type="button"><input onclick=\'putchar("ع",'+this.num+')\' value="ع" class="key" type="button"><input onclick=\'putchar("ه",'+this.num+')\' value="ه" class="key" type="button"><input onclick=\'putchar("خ",'+this.num+')\' value="خ" class="key" type="button"><input onclick=\'putchar("ح",'+this.num+')\' value="ح" class="key" type="button"><input onclick=\'putchar("ج",'+this.num+')\' value="ج" class="key" type="button"><input onclick=\'putchar("د",'+this.num+')\' value="د" class="key" type="button"><br>');
		writeln('<input onclick=\'putchar("ش",'+this.num+')\' value="ش" class="key" type="button"><input onclick=\'putchar("س",'+this.num+')\' value="س" class="key" type="button"><input onclick=\'putchar("ي",'+this.num+')\' value="ي" class="key" type="button"><input onclick=\'putchar("ب",'+this.num+')\' value="ب" class="key" type="button"><input onclick=\'putchar("ل",'+this.num+')\' value="ل" class="key" type="button"><input onclick=\'putchar("ا",'+this.num+')\' value="ا" class="key" type="button"><input onclick=\'putchar("ت",'+this.num+')\' value="ت" class="key" type="button"><input onclick=\'putchar("ن",'+this.num+')\' value="ن" class="key" type="button"><input onclick=\'putchar("م",'+this.num+')\' value="م" class="key" type="button"><input onclick=\'putchar("ك",'+this.num+')\' value="ك" class="key" type="button"><input onclick=\'putchar("ط",'+this.num+')\' value="ط" class="key" type="button"><br>');
		writeln('<input onclick=\'putchar("ئ",'+this.num+')\' value="ئ" class="key" type="button"><input onclick=\'putchar("ء",'+this.num+')\' value="ء" class="key" type="button"><input onclick=\'putchar("ؤ",'+this.num+')\' value="ؤ" class="key" type="button"><input onclick=\'putchar("ر",'+this.num+')\' value="ر" class="key" type="button"><input onclick=\'putchar("لا",'+this.num+')\' value="لا" class="key" type="button"><input onclick=\'putchar("ى",'+this.num+')\' value="ى" class="key" type="button"><input onclick=\'putchar("ة",'+this.num+')\' value="ة" class="key" type="button"><input onclick=\'putchar("و",'+this.num+')\' value="و" class="key" type="button"><input onclick=\'putchar("ز",'+this.num+')\' value="ز" class="key" type="button"><input onclick=\'putchar("ظ",'+this.num+')\' value="ظ" class="key" type="button"><br>');
		writeln('<input onclick=\'putchar(" ",'+this.num+')\' value="" style="width: 8em;" type="button" class="key">');
		writeln('</p></td></tr><tr><td valign="bottom"><input type="button" value="حذف" class="sb" onClick="clearContent('+this.num+')"><br><input type="button" value="إنتهاء" class="sb" onClick="toggleKB('+this.num+');"></td></tr></tbody></table>');
		writeln('</div>');
		close();
	}
}

////// MM functions to be used for handeling DIVs
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { 
		obj=obj.style; 
		v=(v=='show') ? 'visible' : (v=='hide') ? 'hidden' : v; 
	}
	obj.visibility=v; }
}

function hideKB() {
	MM_showHideLayers(this.divID+"_fr", "", "hide");
	MM_showHideLayers(this.divID, "", "hide");
	this.visibility = "hidden"
}
function showKB() 
{
	// Hide all other keyboards before showing this one
	for (var i=0;i<vkb_array.length;i++){
		if (vkb_array[i] != this){
			vkb_array[i].hideKB();
		}
	}
	// Now show the div of this keyboard
	MM_showHideLayers(this.divID+"_fr", "", "show");
	MM_showHideLayers(this.divID, "", "show");
	this.visibility = "visible";
}

vkb.prototype.hideKB = hideKB;
vkb.prototype.showKB = showKB;

function toggleKB(kb)
{
	board = vkb_array[kb];
	var bd =  MM_findObj(board.divID);
	if (bd.style.visibility != "visible"){
		board.showKB();
	} else {
		board.hideKB();
	}
}

vkb.prototype.drawKB = drawKB;