var keys_numbers=['1','2','3','4','5','6','7','8','9','0'];
var keys_alphabets=['a','b','c','d','e','f','g','h','i','j',
				    'k','l','m','n','o','p','q','r','s','t',
				    'u','v','w','x','y','z'];
var keys_signs=['[',']','<','>','(',')','~','!','@','#',
				 '$','%','^','&','*',',','.','?','|','=','-','_',';','+'];
var g_binder,g_x,g_y;

function clickKey(v){
	g_binder.focus();
	g_binder.value += v;
}
function backSpace(){
	g_binder.focus();
	var l = g_binder.value.length;
	if (l == 0) return false;
    var new_v = g_binder.value.substr(0, l - 1);
    g_binder.value = new_v;
}
function upperCase_keyboard(){
	display_keyboard(g_binder.id,g_x,g_y,true);
}
function lowerCase_keyboard(){
	display_keyboard(g_binder.id,g_x,g_y,false);
}
function createButton(){
	var btn = document.createElement("input");
	btn.style.width = "30px";
	return btn;
}
function buildKeys(){
	keys_numbers.sort(function(){return Math.random()>0.5?-1:1;});
	keys_alphabets.sort(function(){return Math.random()>0.5?-1:1;});
	keys_signs.sort(function(){return Math.random()>0.5?-1:1;});
}
function getKey(k,upperCase){
	var kv;
	if (k<10)
		kv = keys_numbers[k];
	else if (k > 9 && k < 36)
		kv = keys_alphabets[k-10];
	else
		kv = keys_signs[k-36];
	if (upperCase)
		return kv.toUpperCase();
	else
		return kv;
}
function close_keyboard(){
	var div = document.getElementById('keyboard_div');
	if (div)
		document.body.removeChild(div);
}
function display_keyboard(binder_id,x,y,upperCase){
	var tr;
	var td;
	var newInput;
	var mydiv;
	var mytable;
	var myTbody;
	var k = 0;
	mydiv = document.getElementById('keyboard_div');
	if (mydiv)
		document.body.removeChild(mydiv);
	
	g_binder = document.getElementById(binder_id);
	g_x = x;
	g_y = y;
	mydiv = document.createElement("div");
	mydiv.id = 'keyboard_div';
	mydiv.name = 'keyboard_div';
	mydiv.style.background="#FFFFFF"; 
	mydiv.style.position="absolute";
	mydiv.style.left=x; 
	mydiv.style.top=y;
	mydiv.style.zindex=1009;
	mydiv.style.padding="3px";
	mydiv.style.border = '1px solid #FF9900';
	mydiv.style.display='block';
	document.body.appendChild(mydiv);
	
	mytable = document.createElement("table");
	mytable.style.border = "1px solid #FF9990";
	mytable.setAttribute('cellpadding',"1px");
	mytable.setAttribute('cellspacing',"1px");
	
	myTbody = document.createElement("tbody");
	mytable.appendChild(myTbody);
	
	buildKeys();
	for(var i=1; i<7; i++){
		tr = document.createElement("tr");
		for (var j=1; j<11; j++){
			td = document.createElement("td");
			newInput = createButton();
			newInput.type="button";
			newInput.value = getKey(k++,upperCase);
			//newInput.setAttribute('onclick',"clickKey(this.value);");
			newInput.onclick = function (){clickKey(this.value)};
			td.appendChild(newInput);
			tr.appendChild(td);
		}
		td = document.createElement("td");
		switch (i){
			case 1:
				newInput = document.createElement("input");
				newInput.type="button";
				newInput.value='退格';
//					newInput.setAttribute('onclick',"backSpace();");
				newInput.onclick = function (){backSpace()};
				td.appendChild(newInput);
				break;
			case 2:
				newInput = document.createElement("input");
				newInput.type="button";
				if (upperCase){
					newInput.value='小写';
//						newInput.setAttribute('onclick',"lowerCase_keyboard();");
					newInput.onclick = function (){lowerCase_keyboard()};
				}else{
					newInput.value='大写';
//						newInput.setAttribute('onclick',"upperCase_keyboard();");
					newInput.onclick = function (){upperCase_keyboard()};
				}
				td.appendChild(newInput);
				break;
			case 6:
				newInput =document.createElement("input");
				newInput.type="button";
				newInput.value='关闭';
//					newInput.setAttribute('onclick',"clickKey('<-');");
				newInput.onclick = function (){close_keyboard()};
				td.appendChild(newInput);
				break;
		}
		tr.appendChild(td);
		myTbody.appendChild(tr);
	}
	mydiv.appendChild(mytable);
}