var tokenMap = {};
var keyMap = {};

function getMapKey(key) {
	if(typeof keyMap[key] == "undefined") return key;	
	return keyMap[key];
}

function relocation(target) {
   var p = target.position();
   //origAlert("("+p.left+","+p.top+")");
   if( typeof offsetX=="undefined" ){ offsetX=-20; }
   if( typeof offsetY=="undefined" ){ offsetY=110; }
   //origAlert("offsetY:"+offsetY);
   var top = p.top+parseInt(offsetY);
   
   //origAlert("top:"+top);
   var left = p.left+parseInt(offsetX);
   
   //mouseX = e.pageX - 400 + parseInt(offsetX); 
   //mouseY = e.pageY + 120 + parseInt(offsetY);
   $('#keyboard').css({
           top: top,
           left: left
       }).fadeIn('slow');
}
var focusCtr = 1;
function getFocusID(){
	focusCtr = 1;	
	setAct();
}
function getFocusUserCode(){
	focusCtr = 2;
	setAct();
}
function getFocusPassword(){
	focusCtr = 3;
	setAct();
}
function getFocusICID(){
	focusCtr = 4;
	setAct();
}
function getFocusICUserCode(){
	focusCtr = 5;
	setAct();
}
function getFocusPIN(){
	focusCtr = 6;
	setAct();
}

function setAct() {
	if(1 == focusCtr){
		focusObj = $("#userid");
		keyMap = {};
	} else if(2 == focusCtr){
		focusObj = $("#usercode");
		keyMap = {};
	} else if(3 == focusCtr){
		focusObj = $("#password");
		keyMap = {};
	} else if(4 == focusCtr){
		focusObj = $("#icuserid");
		keyMap = {};
	} else if(5 == focusCtr){
		focusObj = $("#icusercode");
		keyMap = {};
	} else {
		focusObj = $("#pin");		
		keyMap = tokenMap;
	}
}

function debug(msg) {
	try {
		console.log(msg);
	} catch(e) {		
	}
}

var caps = false;
//動態鍵盤
$(function(){
    //selectorLabel = "keyText";  // default
    focusObj = $("input[id='keyText']"); 
    
    $("a.showkeyboard").click(function(e){
        //targetTB = $(this).attr("outputTB");
        offsetX = $(this).attr("offsetX");
        offsetY = $(this).attr("offsetY");

        //if( targetTB=="undefined" ){ targetTB="keyText"; }
        if( typeof offsetX=="undefined" ){ offsetX=-20; }
        if( typeof offsetY=="undefined" ){ offsetY=110; }
                
        //selectorLabel = "input[id='"+targetTB+"']";
        //var p = $(this).position();
        //var top = p.top+110;
        //var left = p.left-20;
        //mouseX = e.pageX - 400 + parseInt(offsetX); 
        //mouseY = e.pageY + 120 + parseInt(offsetY);
        
        //$('#keyboard').css({
        //        top: top,
        //        left: left
        //    }).fadeIn('slow');
        relocation($(this));
    });
	
    $("a#closekeyboard").click(function(){
        //$("#keyboard").hide(0);
    	$("a#showkeyboard").trigger("click");
        
    });

    //清除輸入欄
    $(".Keyboard_re").click(function() {
        //$(selectorLabel).val("");
    	focusObj.val("");
    })

    //從一個給定的arr陣列中，隨機返回num個不重複項
    function getArrayItems(arr, num) {
        //新鍵一個陣列，將傳入的陣列複製過來，用於運算，不直接操作傳入的陣列
        var temp_array = new Array();
        for (var index in arr) {
            temp_array.push(arr[index]);
        }
        //取出的項目，保存在此陣列
        var return_array = new Array();
        for (var i = 0; i<num; i++) {
            //判斷如果陣列還有可以取出的元素，以防下標越界
            if (temp_array.length>0) {
                //在陣列中產生一個隨機索引
                var arrIndex = Math.floor(Math.random()*temp_array.length);
                return_array[i] = temp_array[arrIndex];
                //刪掉此索引的陣列元素，此時temp_array變為新的陣列
                temp_array.splice(arrIndex, 1);
            } else {
                //陣列項目取完後，退出迴圈，比如陣列本來只有10項，但要求取出20項
                break;
            }
        }
        return return_array;
    }
    //產生0~9的html存入陣列
	num_array = new Array();
	for (i = 0; i < 10; i++){
		num_array[i] = "<td><a class='kb_num' style='cursor:pointer;' title='"+i+"'></a></td>"
	}

    //產生a~z的html存入陣列
    var en_b_array = new Array();
    en_b_array[0] = "<td><a class='kb_en' style='cursor:pointer;' title='a'></a></td>";
    en_b_array[1] = "<td><a class='kb_en' style='cursor:pointer;' title='b'></a></td>";
    en_b_array[2] = "<td><a class='kb_en' style='cursor:pointer;' title='c'></a></td>";
    en_b_array[3] = "<td><a class='kb_en' style='cursor:pointer;' title='d'></a></td>";
    en_b_array[4] = "<td><a class='kb_en' style='cursor:pointer;' title='e'></a></td>";
    en_b_array[5] = "<td><a class='kb_en' style='cursor:pointer;' title='f'></a></td>";
    en_b_array[6] = "<td><a class='kb_en' style='cursor:pointer;' title='g'></a></td>";
    en_b_array[7] = "<td><a class='kb_en' style='cursor:pointer;' title='h'></a></td>";
    en_b_array[8] = "<td><a class='kb_en' style='cursor:pointer;' title='i'></a></td>";
    en_b_array[9] = "<td><a class='kb_en' style='cursor:pointer;' title='j'></a></td>";
    en_b_array[10] = "<td><a class='kb_en' style='cursor:pointer;' title='k'></a></td>";
    en_b_array[11] = "<td><a class='kb_en' style='cursor:pointer;' title='l'></a></td>";
    en_b_array[12] = "<td><a class='kb_en' style='cursor:pointer;' title='m'></a></td>";
    en_b_array[13] = "<td><a class='kb_en' style='cursor:pointer;' title='n'></a></td>";
    en_b_array[14] = "<td><a class='kb_en' style='cursor:pointer;' title='o'></a></td>";
    en_b_array[15] = "<td><a class='kb_en' style='cursor:pointer;' title='p'></a></td>";
    en_b_array[16] = "<td><a class='kb_en' style='cursor:pointer;' title='q'></a></td>";
    en_b_array[17] = "<td><a class='kb_en' style='cursor:pointer;' title='r'></a></td>";
    en_b_array[18] = "<td><a class='kb_en' style='cursor:pointer;' title='s'></a></td>";
    en_b_array[19] = "<td><a class='kb_en' style='cursor:pointer;' title='t'></a></td>";
    en_b_array[20] = "<td><a class='kb_en' style='cursor:pointer;' title='u'></a></td>";
    en_b_array[21] = "<td><a class='kb_en' style='cursor:pointer;' title='v'></a></td>";
    en_b_array[22] = "<td><a class='kb_en' style='cursor:pointer;' title='w'></a></td>";
    en_b_array[23] = "<td><a class='kb_en' style='cursor:pointer;' title='x'></a></td>";
    en_b_array[24] = "<td><a class='kb_en' style='cursor:pointer;' title='y'></a></td>";
    en_b_array[25] = "<td><a class='kb_en' style='cursor:pointer;' title='z'></a></td>";
    
    function new_keybord() {    	
    	//TODO: 修改成為編碼後的鍵盤
        //取出已亂數的數字陣列，並插入至keyboard下第1個tr    	
        num_array = getArrayItems(num_array,10);
        for (i = 0; i < num_array.length; i++)
        {
           $("#keyboard tr:eq(0)").append(num_array[i]);
        }
        
        //取出已亂數的小寫陣列，並插入至keyboard下第2~4個tr
        en_b_array = getArrayItems(en_b_array,26);
        for (i = 0; i < 26; i++)
        {
                if (i<10){
                        $("#keyboard tr:eq(1)").append(en_b_array[i]);
                }else if (i>=10 && i<20) {
                        $("#keyboard tr:eq(2)").append(en_b_array[i]);
                }else if (i==20) {
                        $("#keyboard tr:eq(3)").append("<td colspan='2'><a class='Keyboard_r' style='cursor:pointer;'></a></td>"+en_b_array[i]);
                }else if (i==25) {
                        $("#keyboard tr:eq(3)").append(en_b_array[i]+"<td colspan='2'><a class='Keyboard_caps' style='cursor:pointer;'></a></td>");
                }else {
                        $("#keyboard tr:eq(3)").append(en_b_array[i]);
                }  
        }//dom建立完畢
            
        //將背景圖的class加入含有.kb class的td中
        $(".kb_num").each(function() {
            var kbNum = $(this).attr("title");
            $(this).addClass("n_"+kbNum);
        });
        
        $(".kb_en").each(function() {
            var kbNum = $(this).attr("title");
            $(this).addClass("l_"+kbNum);
        });
            
        //按下小鍵盤
        $(".kb_num, .kb_en").click(function(){
            //取值寫入inputText
        	var len = focusObj.val().length;
        	var key = $(this).attr("title");
        	//判斷哪一個欄位用動態鍵盤
        	if(1==focusCtr )
        		altMessage('userid','userid_alt','0');
        	else if(2==focusCtr )
        		altMessage('usercode','usercode_alt','0');
        	else if(3==focusCtr )
        		altMessage('password','pwd_alt','0');
        	else if(4==focusCtr )
        		altMessage('icuserid','icuserid_alt','0');
        	else if(5==focusCtr )
        		altMessage('icusercode','icusercode_alt','0');
        	else
        		altMessage('pin','pin_alt','0');
        	
			if((1==focusCtr||4==focusCtr) && len>=10)return false;
            if(6==focusCtr) {
                if(len >= 12) return false;
                
                if(isNaN(key)) return false;
            }
			if(3==focusCtr && len>=16)return false;
            if((2==focusCtr||5==focusCtr) && len>=16)return false;
        	var keyText = focusObj.val();
            
            keyText += getMapKey(key);
            focusObj.val(keyText);
            if(1==focusCtr||4==focusCtr) $("#userid").trigger('keyup');
        });
            
        //按下更新
        $(".Keyboard_r").click(function(){
            $("#keyboard tr:lt(4)").html("");            
            new_keybord(); 
            if(caps) {
            	$(".Keyboard_caps").toggleClass("capsDown");
            	$("#keyboard a[class^='kb_en']").each(function() {
            		//切換大寫class
            		var className = $(this).attr("class")
            		$(this).removeClass(className);
            		className = className.replace("l_","u_");
            		$(this).addClass(className);					
            		//切換大寫title
            		var titleName = $(this).attr("title");
            		titleName = titleName.toUpperCase();
            		$(this).attr("title", titleName);
            	});
            }
        });
            
        //按下大寫切換
        $(".Keyboard_caps").click(function(){
            //判斷是否按下[大寫]
            if($(".Keyboard_caps").hasClass("capsDown")) {
                $(this).toggleClass("capsDown");
                caps = false;
                $("#keyboard a[class^='kb_en']").each(function() {
                    //切換小寫class
                    var className = $(this).attr("class")
                    $(this).removeClass(className);
                    className = className.replace("u_","l_");
                    $(this).addClass(className);	
                    //切換小寫title
                    var titleName = $(this).attr("title");
                    titleName = titleName.toLowerCase();
                    $(this).attr("title", titleName);	
                    
                });
            }else {
            	caps = true;
                $(this).toggleClass("capsDown");
                $("#keyboard a[class^='kb_en']").each(function() {
                    //切換大寫class
                    var className = $(this).attr("class")
                    $(this).removeClass(className);
                    className = className.replace("l_","u_");
                    $(this).addClass(className);					
                    //切換大寫title
                    var titleName = $(this).attr("title");
                    titleName = titleName.toUpperCase();
                    $(this).attr("title", titleName);
                    
                });
            }
        })
    }
    //執行產生新鍵盤
    new_keybord();
    setAct();
});