var arrVN = new Array("à", "á", "ả", "ã", "ạ", "ă", "ắ", "ằ", "ẳ", "ẵ", "ặ", "â", "ấ", "ầ", "ẩ", "ẫ", "ậ", "é", "è", "ẻ", "ẽ", "ẹ", "ê", "ế", "ề", "ể", "ễ", "ệ", "í", "ì", "ỉ", "ĩ", "ị", "ó", "ò", "ỏ", "õ", "ọ", "ố", "ồ", "ổ", "ỗ", "ộ", "ơ", "ớ", "ờ", "ở", "ỡ", "ợ", "ú", "ù", "ủ", "ũ", "ụ", "ư", "ứ", "ừ", "ử", "ữ", "ự", "ý", "ỳ", "ỷ", "ỹ", "ỵ", "đ");
var arrEN = new Array("q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "<-", "a", "s", "d", "f", "g", "h", "j", "k", "l", "'", "-", "z", "x", "c", " ", "v", "b", "n", "m");
var arrFR = new Array("à", "â", "ä", "è", "é", "ê", "ë", "î", "ï", "ô", "œ", "ù", "û", "ü", "ÿ", "ç", "€");
var arrJP = new Array(new Array(new Array("ぁ", "ぃ", "ぅ", "ぇ", "ぉ", "か", "き", "く", "け", "こ", "さ", "し", "す", "せ", "そ", "た"), new Array("ち", "っ", "づ", "で", "ど", "に", "ね", "は", "ぱ", "び", "ふ", "ぷ", "べ", "ほ", "ぽ", "み"), new Array("め", "ゃ", "ゅ", "ょ", "ら", "る", "ろ", "わ", "ゑ", "ん", "ゝ"), new Array("あ", "い", "う", "え", "お", "が", "ぎ", "ぐ", "げ", "ご", "ざ", "じ", "ず", "ぜ", "ぞ", "だ"), new Array("ぢ", "つ", "て", "と", "な", "ぬ", "の", "ば", "ひ", "ぴ", "ぶ", "へ", "ぺ", "ぼ", "ま", "む"), new Array("も", "や", "ゆ", "よ", "り", "れ", "ゎ", "ゐ", "を", "ゔ", "ゞ")), new Array(new Array("ァ", "ィ", "ゥ", "ェ", "ォ", "カ", "キ", "ク", "ケ", "コ", "サ", "シ", "ス", "セ", "ソ", "タ"), new Array("チ", "ッ", "ヅ", "デ", "ド", "ヽ", "ア", "イ", "ウ", "エ", "オ", "ガ", "ギ", "グ", "ゲ", "ゴ"), new Array("ザ", "ジ", "ズ", "ゼ", "ゾ", "ダ", "ヂ", "ツ", "テ", "ト", "ナ"), new Array("ニ", "ヌ", "ネ", "ノ", "ハ", "バ", "パ", "ヒ", "ビ", "ピ", "フ", "ブ", "プ", "ヘ", "ベ", "ペ"), new Array("ホ", "ボ", "ポ", "マ", "ミ", "ム", "メ", "モ", "ャ", "ヤ", "ュ", "ユ", "ョ", "ヨ", "ラ", "リ"), new Array("ル", "レ", "ロ", "ヮ", "ワ", "ヰ", "ヱ", "ヲ", "ン", "ヴ", "ヵ", "ヶ", "ヷ", "ヸ", "ヹ", "ヺ")));
var arrCN = new Array("01", "一", "丨", "丶", "丿", "乙", "亅", "02", "二", "亠", "人", "儿", "入", "八", "冂", "冖", "冫", "几", "凵", "刀", "力", "勹", "匕", "匚", "匸", "十", "卜", "卩", "厂", "厶", "又", "03", "口", "囗", "土", "士", "夂", "夊", "夕", "大", "女", "子", "宀", "寸", "小", "尢", "尸", "屮", "山", "巛", "工", "己", "巾", "干", "幺", "广", "廴", "廾", "弋", "弓", "彐", "彡", "彳", "04", "心", "戈", "戶", "手", "支", "攴", "文", "斗", "斤", "方", "无", "日", "曰", "月", "木", "欠", "止", "歹", "殳", "毋", "比", "毛", "氏", "气", "水", "火", "爪", "父", "爻", "爿", "片", "牙", "牛", "犬", "05", "玄", "玉", "瓜", "瓦", "甘", "生", "用", "田", "疋", "疒", "癶", "白", "皮", "皿", "目", "矛", "矢", "石", "示", "禸", "禾", "穴", "立", "06", "竹", "米", "糸", "缶", "羊", "羽", "老", "而", "耒", "耳", "聿", "肉", "臣", "自", "至", "臼", "舌", "舛", "舟", "艮", "色", "艸", "虍", "虫", "血", "行", "衣", "襾", "07", "見", "角", "言", "谷", "豆", "豕", "豸", "貝", "赤", "走", "足", "身", "車", "辛", "辰", "辵", "邑", "酉", "釆", "里", "08", "金", "長", "門", "阜", "隶", "隹", "雨", "青", "非", "面", "革", "韋", "韭", "音", "頁", "風", "飛", "食", "首", "香", "10", "馬", "骨", "高", "髟", "鬥", "鬯", "鬲", "鬼", "11", "魚", "鳥", "鹵", "鹿", "麥", "麻", "12", "黄", "黍", "黑", "黹", "13", "黽", "鼎", "鼓", "鼠", "14", "鼻", "齊", "15", "齒", "16", "龍", "龜", "17", "龠");
function initKeyboard(){
    document.write('<div class="ui-draggable" id="keyboard">');
    document.write('<div id="row0">');
    document.write('<div id="row_lang">');
    document.write('<input name="vn" value="vn" type="image" src="images/flag_vn.png" style="margin: 0px 0px 0px 0px; width: 16px;">');
    document.write('<input name="fr" value="fr" type="image" src="images/flag_fr.png" style="margin: 0px 0px 0px 0px; width: 16px;">');
    document.write('<input name="jp" value="jp" type="image" src="images/flag_jp.png" style="margin: 0px 0px 0px 0px; width: 16px;">');
    document.write('<input name="cn" value="cn" type="image" src="images/flag_cn.png" style="margin: 0px 0px 0px 0px; width: 16px;">');
    document.write('</div>');
    document.write('<div id="keyboard_close"><a href="#" id="kb_close">X</a></div>');
    document.write('<div id="keyboard_title">Bàn phím</span></div>');
    document.write('</div>');
    initVN()
    document.write('</div>');
}

function initVN(){
    document.write('<div id="row_vn">');
    var k = 0;
    for (var i = 0; i < arrVN.length; i++) {
        var c = arrVN[i];
        if (k % 16 == 0) 
            document.write("<ul class='ul'>");
        k++;
        if (c == "í" || c == 'ì' || c == 'ỉ' || c == 'ĩ' || c == 'ị') 
            document.write("<li class='Selected'><a href='#' id='" + c + "' style='padding-left:2px;padding-right:2px;'>" + c + "</a></li>");
        else 
            if (c == "ó" || c == "ò" || c == "ỏ" || c == "õ" || c == "ọ" || c == "ô" || c == "ố" || c == "ồ" || c == "ổ" || c == "ỗ" || c == "ộ" || c == "ơ" || c == "ớ" || c == "ờ" || c == "ở" || c == "ỡ" || c == "ợ" || c == "ú" || c == "ù" || c == "ủ" || c == "ũ" || c == "ụ") 
                document.write("<li class='Selected'><a href='#' id='" + c + "' style='margin-right:-1px;'>" + c + "</a></li>");
            else 
                if (c == "ư" || c == "ứ" || c == "ừ" || c == "ử" || c == "ữ" || c == "ự") 
                    document.write("<li class='Selected'><a href='#' id='" + c + "' style='margin-left:-1px;margin-right:-1px;'>" + c + "</a></li>");
                else 
                    document.write("<li class='Selected'><a href='#' id='" + c + "'>" + c + "</a></li>");
        if (k % 16 == 0) 
            document.write("</ul>");
    }
    document.write('<hr color="#CCCCCC" size="1" style="margin-left:-14px;margin-bottom:-30px;">');
    document.write('</div>');
}

function initEN(){
    document.write('<div id="row1">');
    var k = 0;
    for (var i = 0; i < arrEN.length; i++) {
        var c = arrEN[i];
        if (k % 11 == 0) 
            document.write("<ul class='ul'>");
        k++;
        if (c == "w") 
            document.write("<li class='Selected'><a href='#' id='" + c + "' style='margin-right:-2px;'>" + c + "</a></li>");
        else 
            if (c == "r" || c == "t" || c == "f") 
                document.write("<li class='Selected'><a href='#' id='" + c + "' style='padding-left:1px;padding-right:1px;'>" + c + "</a></li>");
            else 
                if (c == "i" || c == "l" || c == "'") 
                    document.write("<li class='Selected'><a href='#' id='" + c + "' style='padding-left:3px;padding-right:3px;'>" + c + "</a></li>");
                else 
                    if (c == "s" || c == "k" || c == "z" || c == "c") 
                        document.write("<li class='Selected'><a href='#' id='" + c + "' style='padding-right:1px;'>" + c + "</a></li>");
                    else 
                        if (c == "j") 
                            document.write("<li class='Selected'><a href='#' id='" + c + "' style='padding-left:2px;padding-right:2px;'>" + c + "</a></li>");
                        else 
                            if (c == "g") 
                                document.write("<li class='Selected'><a href='#' id='" + c + "' style='margin-right:-1px'>" + c + "</a></li>");
                            else 
                                if (c == " ") 
                                    document.write("<li class='Selected'><a href='#' id='" + c + "' style='margin-right:2px'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a></li>");
                                else 
                                    document.write("<li class='Selected'><a href='#' id='" + c + "'>" + c + "</a></li>");
        if (k % 11 == 0) 
            document.write("</ul>");
    }
    document.write('</div>');
}

function initFR(){
    document.write('<div id="row_fr">');
    var k = 0;
    for (var i = 0; i < arrFR.length; i++) {
        var c = arrFR[i];
        if (k % 11 == 0 && k != 11) 
            document.write("<ul class='ul'>");
        else 
            if (k == 11) 
                document.write("<ul class='ul' style='margin-left:20px;'>");
        k++;
        document.write("<li class='Selected'><a href='#' id='" + c + "' style=''>" + c + "</a></li>");
        if (k % 11 == 0) 
            document.write("</ul>");
    }
    document.write("<br /><div><hr color='#CCCCCC' size='1' style='margin-left:-130px;margin-bottom:-18px;'></div>");
    document.write('</div>');
}

function initJP(){
    document.write('<div id="row_jp">');
    for (var i = 0; i < arrJP.length; i++) {
        for (var j = 0; j < arrJP[i].length; j++) {
            var arr = arrJP[i][j];
            document.write("<ul class='ul'>");
            for (var k = 0; k < arr.length; k++) {
                var c = arr[k];
                document.write("<li class='Selected'><a href='#' id='" + c + "' style=''>" + c + "</a></li>");
            }
            document.write("</ul>");
        }
    }
    document.write('</div>');
}

function initCN(){
    document.write('<div id="row_cn">');
    document.write('<div>');
    document.write('<div id="net">');
    document.write('<span style="font-size:13px;margin-left:4px; font-weight:bold">Nét:</span>');
    document.write('<select  id="cbnet">');
    document.write('<option selected="selected">*</option>');
    for (var i = 1; i <= 33; i++) {
        document.write('<option>' + i + '</option>');
    }
    document.write('</select>');
    document.write('</div>');
    document.write('</div>');
    document.write('<div id="row_cn1">');
    var k = 0;
    for (var i = 0; i < arrCN.length; i++) {
        var c = arrCN[i];
        if (k % 16 == 0) 
            document.write("<ul class='ul'>");
        k++;
        if (c == "01" || c == "02" || c == "03" || c == "04" || c == "05" || c == "06" || c == "07" || c == "08" || c == "09" || c == "10" || c == "11" || c == "12" || c == "13" || c == "14" || c == "15" || c == "16" || c == "17") 
            document.write("<li class='bo'>" + c + "</li>");
        else 
            document.write("<li class='Selected'><a href='#' id='" + c + "' style=''>" + c + "</a></li>");
        if (k % 16 == 0) 
            document.write("</ul>");
    }
    document.write('</div>');
    document.write('<div id="han"></div> ');
    document.write('<div id="mybo" title=""></div>');
    document.write('<div id="mynet" title="*"></div>');
    document.write('</div>');
    document.write('<div id="drawDisplay"></div> ');
    document.write('</div>');
}

jQuery.noConflict();
jQuery(document).ready(function(){
    var shifton = false;
    jQuery("#showkeyboard").click(function(e){
        var height = jQuery('#keyboard').height();
        var width = jQuery('#keyboard').width();
        var widthW = 0;
        if (navigator.appName == "Netscape" || navigator.appName == "Opera") 
            widthW = window.innerWidth;
        else 
            if (navigator.appName == "Microsoft Internet Explorer") 
                widthW = jQuery(window).innerWidth() - 25;
            else 
                widthW = jQuery(window).innerWidth();
        leftVal = (widthW - width - 20) + "px";
        topVal = e.pageY + 20 + "px";
        jQuery('#keyboard').css({
            left: leftVal,
            top: topVal
        }).toggle("slow");
    });
    jQuery('#keyboard').draggable();
    jQuery('#keyboard').draggable('disable');
    jQuery("#row0").bind("mouseenter", function(e){
        jQuery('#keyboard').draggable('enable');
    });
    jQuery("#row0").bind("mouseleave", function(e){
        jQuery('#keyboard').draggable('disable');
    });
    jQuery("#kb_close").click(function(e){
        jQuery('#keyboard').toggle("slow");
    });
    function onShift(e){
        var i;
        if (e == 1) {
            for (i = 0; i < 4; i++) {
                var rowid = "#row" + i;
                jQuery(rowid).hide();
                jQuery(rowid + "_shift").show();
            }
        }
        else {
            for (i = 0; i < 4; i++) {
                var rowid = "#row" + i;
                jQuery(rowid).show();
                jQuery(rowid + "_shift").hide();
            }
        }
    }
    function onLang(type){
        if (type == "vn") {
            jQuery("#row_cn").hide();
            jQuery("#row_jp").hide();
            jQuery("#row_fr").hide();
            jQuery("#drawDisplay").hide();
            jQuery("#row1").show();
            jQuery("#row_vn").show();
            type = type + "1";
        }
        else 
            if (type == "jp") {
                jQuery("#row1").hide();
                jQuery("#row_vn").hide();
                jQuery("#row_fr").hide();
                jQuery("#row_cn").hide();
                jQuery("#drawDisplay").hide();
            }
            else 
                if (type == "cn") {
                    jQuery("#row1").hide();
                    jQuery("#row_vn").hide();
                    jQuery("#row_jp").hide();
                    jQuery("#drawDisplay").hide();
                    jQuery('#net').show();
                    jQuery("#row_cn1").show();
                }
                else 
                    if (type == "fr") {
                        jQuery("#row_cn").hide();
                        jQuery("#row_jp").hide();
                        jQuery("#row_vn").hide();
                        jQuery("#drawDisplay").hide();
                        jQuery("#row1").show();
                        jQuery("#row_fr").show();
                    }
        jQuery("#row_fr").hide();
        var rowType = "#row_" + type;
        jQuery(rowType).show();
    }
    jQuery("#keyboard input").bind("click", function(e){
        if (jQuery(this).val() == "Shift") {
            if (shifton == false) {
                onShift(1);
                shifton = true;
            }
            else {
                onShift(0);
                shifton = false;
            }
        }
        else 
            if (jQuery(this).val() == "vn") {
                type = jQuery(this).val()
                onLang(type)
            }
            else 
                if (jQuery(this).val() == "fr") {
                    type = jQuery(this).val()
                    onLang(type)
                }
                else 
                    if (jQuery(this).val() == "jp") {
                        type = jQuery(this).val()
                        onLang(type)
                    }
                    else 
                        if (jQuery(this).val() == "cn") {
                            type = jQuery(this).val()
                            onLang(type)
                        }
                        else 
                            if (jQuery("#row_cn1 input").bind("click", function(e){
                            })) {
                            }
                            else {
                                jQuery('#q').replaceSelection(jQuery(this).val(), true);
                                showcont();
                                if (shifton == true) {
                                    onShift(0);
                                    shifton = false;
                                }
                            }
    });
    jQuery("#keyboard_title a").bind("click", function(e){
        onLang("vn");
    });
    jQuery("#row1 a").bind("click", function(e){
        if (jQuery(this).attr("id") == '<-') {
            jQuery('#q').replaceSelection("", true);
            showcont();
        }
        else {
            if (isAddFav == true) {
                jQuery('#favW').replaceSelection(jQuery(this).attr("id"), true);
            }
            else {
                jQuery('#q').replaceSelection(jQuery(this).attr("id"), true);
                showcont();
            }
        }
    });
    jQuery("#row_vn a").bind("click", function(e){
        if (isAddFav == true) {
            jQuery('#favW').replaceSelection(jQuery(this).attr("id"), true);
        }
        else {
            jQuery('#q').replaceSelection(jQuery(this).attr("id"), true);
            showcont();
        }
    });
    jQuery("#row_fr a").bind("click", function(e){
        if (isAddFav == true) {
            jQuery('#favW').replaceSelection(jQuery(this).attr("id"), true);
        }
        else {
            jQuery('#q').replaceSelection(jQuery(this).attr("id"), true);
            showcont();
        }
    });
    jQuery("#row_jp a").bind("click", function(e){
        if (isAddFav == true) {
            jQuery('#favW').replaceSelection(jQuery(this).attr("id"), true);
        }
        else {
            jQuery('#q').replaceSelection(jQuery(this).attr("id"), true);
            showcont();
        }
    });
    jQuery("#row_cn1 a").bind("click", function(e){
        if (jQuery("#mynet").attr("title") != "") {
            var bo = jQuery(this).attr("id");
            var sonet = jQuery("#mynet").attr("title");
            bo = encodeURIComponent(bo);
            var html = jQuery.ajax({
                url: "./?d=pc&net=net&t=bo&bo=" + bo + "&net=" + sonet,
                async: false
            }).responseText;
            jQuery('#row_cn2').show();
            jQuery('#han').html(html);
            jQuery("#han a").bind("click", function(e){
                if (isAddFav == true) {
                    jQuery('#favW').replaceSelection(jQuery(this).attr("id"), true);
                }
                else {
                    jQuery('#q').replaceSelection(jQuery(this).attr("id"), true);
                    showcont();
                }
            });
            jQuery("#mybo").attr("title", jQuery(this).attr("id"));
        }
        else {
            var bo = jQuery(this).attr("id");
            bo = encodeURIComponent(bo);
            var html = jQuery.ajax({
                url: "./?d=pc&net=net&t=bo&bo=" + bo,
                async: false
            }).responseText;
            jQuery('#row_cn2').show();
            jQuery('#han').html(html);
            jQuery("#han a").bind("click", function(e){
                if (isAddFav == true) {
                    jQuery('#favW').replaceSelection(jQuery(this).attr("id"), true);
                }
                else {
                    jQuery('#q').replaceSelection(jQuery(this).attr("id"), true);
                    showcont();
                }
            });
            jQuery("#mybo").attr("title", jQuery(this).attr("id"));
        }
    });
    jQuery("#cbnet").change(function(){
        if (jQuery("#mybo").attr("title") != "") {
            var mybo = jQuery("#mybo").attr("title");
            mybo = encodeURIComponent(mybo);
            var sonet = "";
            jQuery("#cbnet option:selected").each(function(){
                sonet += jQuery(this).text() + " ";
                var html = jQuery.ajax({
                    url: "./?d=pc&net=net&t=net&sn=" + sonet + "&bo=" + mybo,
                    async: false
                }).responseText;
                jQuery('#row_cn2').show();
                jQuery('#han').html(html);
                jQuery('#row_cn2').html(html);
                jQuery("#mynet").attr("title", sonet);
            });
        }
        else {
            var sonet = "";
            jQuery("#cbnet option:selected").each(function(){
                sonet += jQuery(this).text() + " ";
                var html = jQuery.ajax({
                    url: "./?d=pc&net=net&t=net&sn=" + sonet,
                    async: false
                }).responseText;
                jQuery('#row_cn2').show();
                jQuery('#han').html(html);
                jQuery('#row_cn2').html(html);
                jQuery("#mynet").attr("title", sonet);
            });
        }
        jQuery("#han a").bind("click", function(e){
            if (isAddFav == true) {
                jQuery('#favW').replaceSelection(jQuery(this).attr("id"), true);
            }
            else {
                jQuery('#q').replaceSelection(jQuery(this).attr("id"), true);
                showcont();
            }
        });
    });
    jQuery("#draw a").bind("click", function(e){
        var html = jQuery.ajax({
            url: "hw/hw.php",
            async: false
        }).responseText;
        jQuery('#row_cn').hide();
        jQuery('#row_fr').hide();
        jQuery('#row_vn').hide();
        jQuery('#row_jp').hide();
        jQuery('#row1').hide();
        jQuery('#drawDisplay').show();
        jQuery('#drawDisplay').html(html);
        jQuery('#keyboard').draggable('disable');
    });
});