var UICtrl = function (){
    var _inst = this;
    // var listPoints = [
    //     {id:"10", top:370, left:10},
    //     {id:"11", top:250, left:50},
    //     {id:"12", top:340, left:50},
    //     {id:"13", top:440, left:50},
    //     {id:"14", top:100, left:100},
    //     {id:"15", top:370, left:100},
    //     {id:"16", top:120, left:160},
    //     {id:"17", top:200, left:170},
    //     {id:"18", top:300, left:150},
    //     {id:"19", top:360, left:170},
    //     {id:"20", top:450, left:170},
    //     {id:"21", top:120, left:240},
    //     {id:"22", top:200, left:270},
    //     {id:"23", top:370, left:230},

    //     {id:"24", top:140, left:340},
    //     {id:"25", top:260, left:350},
    //     {id:"26", top:430, left:410},
    //     {id:"27", top:290, left:450},
    //     {id:"28", top:90, left:460},
    // ]

    this.start = function (){
        this.initUI();
        this.updateUI();
    }
    this.initUI = function (){
        $("#closeDetial").click(function(){
            $("#showDetial").hide();
        });
        if(ToolMgr.isMobel()){
            $("#close")[0].style = " position: absolute;\n" +
                "    right: 0px;\n" +
                "    top: 22%;width: 60px;cursor: pointer;pointer-events: all";
            $("#map1")[0].style = "position: absolute;\n" +
                "     right: 0px; \n" +
                "     bottom: 0px; \n" +
                "    cursor: pointer;\n" +
                "    transform-origin: bottom right;\n" +
                "     transform: scale(0.3); \n" +
                "    pointer-events: all;\n" +
                "    margin: 1%;width: 571px;\n" +
                "    height: 524px;"+
                "    background: url(http://exhibition.szwyg.org.cn/resources/exhibition_hall/res/imgs/"+ModelConfig.smallMap+");\n" +
                "    background-size: 100% 100%;";
        } else {
            if (ModelConfig.type == 2) { // 古代
                $("#map1")[0].style = 
                "     position: absolute; \n" +
                "     right: 0px; \n" +
                "     bottom: 0px; \n" +
                "     transform: scale(0.5); \n" +
                "     margin: 1%; \n" +
                "    width:571px;"+
                "    height: 524px;"+
                "    transform-origin: bottom right;\n" +
                "    cursor: pointer;\n" +
                "    pointer-events: all;\n" +
                "    background: url(http://exhibition.szwyg.org.cn/resources/exhibition_hall/res/imgs/"+ModelConfig.smallMap+");\n" +
                "    background-size: 100% 100%;";
            } else if (ModelConfig.type == 1) { // 现代
                $("#map1")[0].style = 
                "     position: absolute; \n" +
                "     right: 0px; \n" +
                "     bottom: 0px; \n" +
                "     transform: scale(0.5); \n" +
                "     margin: 1%; \n" +
                "    width:812px;"+
                "    height: 645px;"+
                "    transform-origin: bottom right;\n" +
                "    cursor: pointer;\n" +
                "    pointer-events: all;\n" +
                "    background: url(http://exhibition.szwyg.org.cn/resources/exhibition_hall/res/imgs/"+ModelConfig.smallMap+");\n" +
                "    background-size: 100% 100%;";
            }
        }
        $("#points").hide();
        $("#close").hide();
        let mapbg = $("#map1")[0].parentNode;
        $("#map1").click(function(){
            $("#points").show();
            $("#close").show();
            mapbg.style = "position: absolute;\n" +
                "    left: 0px;\n" +
                "    width: 100%;\n" +
                "    height: 100%;\n" +
                "    touch-action: none;\n" +
                "    pointer-events: all;\n" +
                "    display: flex;\n" +
                "    justify-content: center;\n" +
                "    align-items: center;\n" +
                "    background: #00000088;";
            if(ToolMgr.isMobel()){
                if (ModelConfig.type == 2) { // 古代
                    $("#map1")[0].style = "position: absolute;\n" +
                    "    /* right: 0px; */\n" +
                    "    /* bottom: 0px; */\n" +
                    "    cursor: pointer;\n" +
                    "    transform-origin: center;\n" +
                    "     transform: scale(0.5); \n" +
                    "    pointer-events: none;\n" +
                    "    margin: 1%;width: 571px;\n" +
                    "    height: 524px;\n" +
                    "    background: url(http://exhibition.szwyg.org.cn/resources/exhibition_hall/res/imgs/"+ModelConfig.smallMap+");\n" +
                    "    background-size: 100% 100%;";
                } else if (ModelConfig.type == 1) { // 现代
                    $("#map1")[0].style = "position: absolute;\n" +
                    "    /* right: 0px; */\n" +
                    "    /* bottom: 0px; */\n" +
                    "    cursor: pointer;\n" +
                    "    transform-origin: center;\n" +
                    "     transform: scale(0.5); \n" +
                    "    pointer-events: none;\n" +
                    "    margin: 1%;width: 812px;\n" +
                    "    height: 645px;\n" +
                    "    background: url(http://exhibition.szwyg.org.cn/resources/exhibition_hall/res/imgs/"+ModelConfig.smallMap+");\n" +
                    "    background-size: 100% 100%;";
                }
            }
            else{
                if (ModelConfig.type == 2) { // 古代
                    $("#map1")[0].style = "position: absolute;\n" +
                    "    /* right: 0px; */\n" +
                    "    /* bottom: 0px; */\n" +
                    "    cursor: pointer;\n" +
                    "    transform-origin: bottom right;\n" +
                    "     transform: scale(1); \n" +
                    "    pointer-events: none;\n" +
                    "    margin: 1%;width: 571px;\n" +
                    "    height: 524px;\n" +
                    "    background: url(http://exhibition.szwyg.org.cn/resources/exhibition_hall/res/imgs/"+ModelConfig.smallMap+");\n" +
                    "    background-size: 100% 100%;";
                } else if (ModelConfig.type == 1) { // 现代
                    $("#map1")[0].style = "position: absolute;\n" +
                    "    /* right: 0px; */\n" +
                    "    /* bottom: 0px; */\n" +
                    "    cursor: pointer;\n" +
                    "    transform-origin: bottom right;\n" +
                    "     transform: scale(1); \n" +
                    "    pointer-events: none;\n" +
                    "    margin: 1%;width: 812px;\n" +
                    "    height: 645px;\n" +
                    "    background: url(http://exhibition.szwyg.org.cn/resources/exhibition_hall/res/imgs/"+ModelConfig.smallMap+");\n" +
                    "    background-size: 100% 100%;";
                }
            }

        });
        $("#close").click(function(){
            $("#close").hide();
            $("#points").hide();
            mapbg.style = "position: absolute;\n" +
                "    left: 0px;\n" +
                "    width: 100%;\n" +
                "    height: 100%;\n" +
                "    touch-action: none;\n" +
                "    pointer-events: none;";
            if(ToolMgr.isMobel()){
                if (ModelConfig.type == 2) { // 古代
                    $("#map1")[0].style = "position: absolute;\n" +
                    "     right: 0px; \n" +
                    "     bottom: 0px; \n" +
                    "    cursor: pointer;\n" +
                    "    transform-origin: bottom right;\n" +
                    "     transform: scale(0.3); \n" +
                    "    pointer-events: all;\n" +
                    "    margin: 1%;width: 571px;\n" +
                    "    height: 524px;"+
                    "    background: url(http://exhibition.szwyg.org.cn/resources/exhibition_hall/res/imgs/"+ModelConfig.smallMap+");\n" +
                    "    background-size: 100% 100%;";;
                } else if (ModelConfig.type == 1) { // 现代
                    $("#map1")[0].style = "position: absolute;\n" +
                    "     right: 0px; \n" +
                    "     bottom: 0px; \n" +
                    "    cursor: pointer;\n" +
                    "    transform-origin: bottom right;\n" +
                    "     transform: scale(0.3); \n" +
                    "    pointer-events: all;\n" +
                    "    margin: 1%;width: 812px;\n" +
                    "    height: 645px;"+
                    "    background: url(http://exhibition.szwyg.org.cn/resources/exhibition_hall/res/imgs/"+ModelConfig.smallMap+");\n" +
                    "    background-size: 100% 100%;";;
                }
            }
            else{
                if (ModelConfig.type == 2) { // 古代
                    $("#map1")[0].style = "position: absolute;\n" +
                    "     right: 0px; \n" +
                    "     bottom: 0px; \n" +
                    "    cursor: pointer;\n" +
                    "    transform-origin: bottom right;\n" +
                    "     transform: scale(0.5); \n" +
                    "    pointer-events: all;\n" +
                    "    margin: 1%;width: 571px;\n" +
                    "    height: 524px;"+
                    "    background: url(http://exhibition.szwyg.org.cn/resources/exhibition_hall/res/imgs/"+ModelConfig.smallMap+");\n" +
                    "    background-size: 100% 100%;";;
                } else if (ModelConfig.type == 1) { // 现代
                    $("#map1")[0].style = "position: absolute;\n" +
                    "     right: 0px; \n" +
                    "     bottom: 0px; \n" +
                    "    cursor: pointer;\n" +
                    "    transform-origin: bottom right;\n" +
                    "     transform: scale(0.5); \n" +
                    "    pointer-events: all;\n" +
                    "    margin: 1%;width: 812px;\n" +
                    "    height: 645px;"+
                    "    background: url(http://exhibition.szwyg.org.cn/resources/exhibition_hall/res/imgs/"+ModelConfig.smallMap+");\n" +
                    "    background-size: 100% 100%;";;
                }
            }
        });
        $("#playManYou").click(function (){
            camCtrl.playManYou(1);
        });
        $("#pauseManYou").click(function (){
            camCtrl.pauseManYou();
        });
        this.initJumpPoint();
    }
    this.initJumpPoint = function (){
        let points = document.getElementById('points');
        for(let i = 0; i < ModelConfig.mapPoints.length; i++){
            let pnt = document.createElement('img');
            pnt.style.top = ModelConfig.mapPoints[i].top + "px";
            pnt.style.left = ModelConfig.mapPoints[i].left + "px";
            pnt.id = ModelConfig.mapPoints[i].id;
            pnt.src = "http://exhibition.szwyg.org.cn/resources/exhibition_hall/res/imgs/point.png";
            pnt.onclick = function (evt){
                console.log(evt.currentTarget.id);
                _inst.jumpPos(evt.currentTarget.id)
            }

            points.appendChild(pnt);
        }
    }
    this.jumpPos = function (id){
        for(let i = 0; i < ModelConfig.mapPoints.length; i++){
            if(ModelConfig.mapPoints[i].id == id){
                let mapData = mapCtrl.getDataByID("11");
                let posX = 0
                let posZ = 0
                if (ModelConfig.type == 2) { // 古代
                    let left = ModelConfig.mapPoints[i].left+2;
                    let top = ModelConfig.mapPoints[i].top-21;

                    posX = (top-mapData.map[0].height-mapData.map[0].offset.h)/mapData.map[0].xH+mapData.startPos.x
                    posZ = (left-mapData.map[0].offset.w)/mapData.map[0].zW + mapData.startPos.z;
                } else if (ModelConfig.type == 1) { // 现代
                    let left = ModelConfig.mapPoints[i].left+245;
                    let top = ModelConfig.mapPoints[i].top+100;

                    posX = (top-mapData.map[0].height-mapData.map[0].offset.h)/mapData.map[0].xH+mapData.startPos.x
                    posZ = (left-mapData.map[0].width-mapData.map[0].offset.w)/mapData.map[0].zW + mapData.startPos.z;
                }
                //暂停漫游
                camCtrl.freeCamera.position.x = posX;
                camCtrl.freeCamera.position.z = posZ;
            }
        }
    }
    this.updateUI = function (){
        let ratio = document.body.clientWidth/1920;
    }
    this.setProgress = function(value){
        $('#progress')[0].innerHTML = value;
    };
    this.loadFinish = function () {
        document.body.removeChild($('.loading')[0]);
    }
    this.start();
}
