var provinces = new Array("京", "沪", "浙", "苏", "粤", "鲁", "晋", "冀",
            "豫", "川", "渝", "辽", "吉", "黑", "皖", "鄂",
            "津", "贵", "云", "桂", "琼", "青", "新", "藏",
            "蒙", "宁", "甘", "陕", "闽", "赣", "湘","X");
function provinceSelect() {
    showProvince();
}
function parkSelect() {

    alert("选择停车场");
}
function confirm() {

    alert("确定");
}

function showProvince() {
    var screenWidth = window.screen.width;
    //求出列数，向下取整
    var columns = Math.floor((screenWidth - 9) / 42);
    //求出行数，向上取整
    var rows = Math.ceil(31 / columns);
    //算出按键背景的高度，为每个按键的高度+间隔+上下边距，48为每个按键的高度+距下一个按键的距离
    var key_bg_height = rows * 48 + 16;
    var x_space = (screenWidth - 9 - 42 * columns) / (columns);
    var start_x = 9 + x_space;
    var start_y = 12;
    var keyboard_province = document.getElementById("id_keyboard_province");
    keyboard_province.style.position = "absolute";//fixed absolute
    keyboard_province.style.bottom = "0px";
    //keyboard_province.style.top = (window.screen.height - key_bg_height) + "px";
    keyboard_province.style.left = 0;
    keyboard_province.style.backgroundColor = "#f2f2f2";
    keyboard_province.style.width = "100%";
    keyboard_province.style.height = key_bg_height + "px";
    //keyboard_province.style.display="block";
    keyboard_province.innerHTML = '';

    for (var i = 0; i < rows; i++) {
        for (var j = 0; j < columns; j++) {
            var provinceIds = i * columns + j;
            if (provinceIds < provinces.length) {
                var x = 9 + (j + 1) * x_space + j * 42;
                var y = 12 + i * 48;
                /* var addHtml = addKeyProvince(x,y,provinceIds);
                alert(addHtml); */
                $("#id_keyboard_province").append(addKeyProvince(x, y, provinceIds));
            }
            else {
                keyboard_province.style.display = "block";
                return;
            }
        }
    }
    //var tmpClose = "<div style='width:32px;height:32px;'>X</div>";
    //$("#id_keyboard_province").append(tmpClose);

}

function addKeyProvince(x, y, provinceIds) {

    var addHtml = '<div style="position:absolute;left:' + x + 'px;top:' + y + 'px;width:42px;height:48px;">';
    addHtml += '<label for="id_' + provinceIds + '"></label>';
    addHtml += '<input id="id_' + provinceIds + '" type="text" readonly="readonly" class="key_province" value="' + provinces[provinceIds] + '" onclick="chooseProvince(this.value);">';
    addHtml += '</div>';
    return addHtml;
}


function chooseProvince(province) {
    /* alert(province+"======"+provinces[7]); */
    if (province == "X") {
        $("#id_keyboard_province").hide();
    } else {
        document.getElementById("selProvince").value = province;
        $("#id_keyboard_province").hide();
    }
}