var isUserInteracting = false,
onMouseDownMouseX = 0,
onMouseDownMouseY = 0,
lon = 0,
onMouseDownLon = 0,
lat = 0,
onMouseDownLat = 0,
phi = 0,
theta = 0;

const house ={
    idx:0,
    nextId:null,
    title:'瑶里景区',
    backurl:'../',
    descript:'瑶里，古名“窑里”，因是景德镇陶瓷发祥地而得名，从唐代中叶开始便有生产陶瓷的手工作坊。瑶里位于举世闻名的瓷都东北端，地处三大世界文化遗产的中心，素有“瓷之源，茶之乡，林之海”的美称，是国家重点风景名胜区、国家历史文化名镇、国家AAAA级风景区、国家矿山公园、国家森林公园、国家重点文物保护单位、国家自然与文化双遗产。',
    src:[
    {id:1,name:"guzhen",title:'千年古镇',thumb:"yao/guzhen1k_b.jpg",descript:'瑶里景区标志是“垚”字造型，古代同“尧”，形容山体的高大。传说瑶里古时曾叫做“垚里”，意为高山中的部落，垚也是文字中最土的字，暗含了这里“筑土为器”，是景德镇陶瓷的发祥地。垚也曾是中古帝陶唐氏之号，后用来借指贤明、能干的君主或圣人。这一艺术造型即由垚字变化而来。'},
    {id:2,name:"fangmingqingguqiao",title:'仿明清古桥',thumb:"yao/fangmingqingguqiao1k_b.jpg",descript:'这座石拱桥是仿照明清时期的风格所建，依然成为这里居民和游客提供了很多便利'},
    {id:3,name:"fuwuqu",title:'服务区',thumb:"yao/fuwuqu1k_b.jpg",descript:'无'},
    {id:4,name:"chengshicitang",title:'程氏祠堂',thumb:"yao/chengshicitang1k_b.jpg",descript:'程氏宗祠又名“惇睦”堂，背靠狮山，面临瑶河，始建于明代中叶，清代道光年间重新整修过。由于风水的缘故，其建筑风格不同于其他祠堂，上、中、下三堂的朝向各不相同。建筑内砖雕、石雕和木雕的题材丰富、玲珑剔透、层次分明、栩栩如生，显示了雕刻工匠高超的艺术才能。'},
    {id:5,name:"chenyiju",title:'陈毅居',thumb:"yao/chenyiju1k_b.jpg",descript:'现在来到的是陈毅旧居。首先和大家介绍下这栋房子。这栋房子是清朝嘉庆年间吴氏家族登仕郎吴容光家的敬义堂。是给吴氏子孙读书所用的书斋。这个房子落成的时候特意在院子里种了棵桂花树，寓意家中如有中举的士子能够蟾宫折桂受到世人的尊捧。后来废除私塾后空置。而在1937年陈毅到达瑶里，就把这栋房子作为陈毅办公和居住的场所。在一楼办公，二楼居住。'},
    {id:6,name:"guchengqiang",title:'古城墙',thumb:"yao/guchengqiang1k_b.jpg",descript:'无'},
    {id:7,name:"gushu",title:'古树',thumb:"yao/gushu1k_b.jpg",descript:'无'},
    {id:8,name:"shoupiaochu",title:'售票处',home:{T:90,R:100},thumb:"yao/shoupiaochu1k_b.jpg",descript:'汪胡生态旅游区距瑶里瓷茶古镇13公里，平均海拔七百多米。区内峰峦叠嶂，山奇石秀，到处古木参天，翠竹如海，森林覆盖率达到98%，景色十分怡人。由于海拔高度和自然环境的原因，那里经常是云雾缭绕，四季气候分明。'},
    {id:9,name:"xianrenqiao",title:'仙人桥',home:{T:80,R:90},thumb:"yao/xianrenqiao1k_b.jpg",descript:'无'},
    {id:10,name:"nanshanpubu",title:'南山瀑布',home:{T:70,R:100},thumb:"yao/nanshanpubu1k_b.jpg",descript:'南山瀑布就位于瑶里汪湖的高际山下，是一个跌水瀑布，主要由主瀑、石花瀑、飞龙瀑、飘锦瀑组成，四瀑景致瀑不同。瀑布群全长400余米，总落差220米，内有缓坡、有断岩、山体岩石通体光滑完整，四周毛竹林密集，众多奇石出露。其主瀑南山瀑布宽有二十多米，落差一百多米，真是“岩同干仞、瀑布飞流、声如霹雳、势如云霞”。洪水季节，只见飞流直下，声震山野，数里之外可闻其声，干旱季节也是牵丝垂链，且刚中带柔，别具风采。'},
    {id:11,name:"xiannvtan",title:'仙女潭',home:{T:85,R:70},thumb:"yao/xiannvtan1k_b.jpg",descript:'汪胡生态旅游区距瑶里瓷茶古镇13公里，平均海拔七百多米。区内峰峦叠嶂，山奇石秀，到处古木参天，翠竹如海，森林覆盖率达到98%，景色十分怡人。由于海拔高度和自然环境的原因，那里经常是云雾缭绕，四季气候分明。'},
    {id:12,name:"kaitianpidi",title:'开天辟地',home:{T:80,R:60},thumb:"yao/kaitianpidi1k_b.jpg",descript:'瑶里的森林覆盖率是非常高的，在大片树林中，许多是保存完好的原始植被和原始次生植被，这片对外开放的原始林只是其中的一小部分，是当地宗族的风水林。提起原始森林，总是给人们一种阴森、神秘、恐怖感觉，但这片森林不但是春华秋实、冬暖夏凉，而且给人的是一种深邃、幽静和浪漫的感觉。'},
    {id:13,name:"yaolihangpai",title:'瑶里航拍',home:{T:95,R:70},thumb:"yao/yaolihangpai1k_b.jpg",descript:'无人机航拍瑶里景区，从空中鸟瞰瑶里美景'},
],

} 


init()


function init(){



    const queryString = window.location.search;

    const urlParams = new URLSearchParams(queryString);

    let pano_Id = urlParams.get('id')?urlParams.get('id'):-1

    let panoId = pano_Id>house.src.length?house.src.length-1:pano_Id

    let backurl= urlParams.get('backurl')?urlParams.get('backurl'):'../'

    house.backurl = backurl

    if(panoId!==-1){
        document.getElementById('descriptTitle').innerHTML = house.src[panoId].title
        document.getElementById('descriptContent').innerHTML = limitWords(house.src[panoId].descript)

        // update conver
        const conver = document.getElementById('cover')
        conver.src='./thumb2k/'+house.src[panoId].name +"2k_f.jpg"
        conver.setAttribute('data-id',panoId)
    }else{

        panoId  =0
        const descriptTitle=document.getElementById("descriptTitle");
        // descriptTitle.innerHTML = house.src[house.idx].title
        descriptTitle.innerHTML = house.title
    
        const descriptContent=document.getElementById("descriptContent");
        descriptContent.innerHTML = limitWords(house.descript)
    
        const conver = document.getElementById('cover')

        conver.setAttribute('data-id',panoId)
    
    }

    house.idx = panoId

    const listTitle = document.getElementById('listTitle')
    listTitle.innerHTML = "剧集列表（"+ house.src.length +"集全）"


    var listContent=document.getElementById("listContent");
    while (listContent.firstChild) {
        listContent.removeChild(listContent.firstChild);
    }

    let mid = 0

    for(let item of house.src){


        const dpano = document.createElement("div");
        dpano.className = 'pano'

        if(item.id-1==pano_Id*1){
            dpano.className = 'panoSelect'
        }

        mid = item.id

        if(mid==1){
            dpano.style.marginLeft=0
        }
        

        dpano.setAttribute('data-id',mid);
        const title = document.createElement("div");
        title.className = 'title'
        title.innerHTML = item.title
        const thumb = document.createElement("div");
        thumb.className = 'thumb'
        // thumb.innerHTML = house.src[i].name
        const img=document.createElement("img");

        img.src= './thumb1k/'+item.name + '1k_f.jpg';


        thumb.appendChild(img);

        dpano.appendChild(title);
        dpano.appendChild(thumb);

        listContent.appendChild(dpano);
    }


    if(pano_Id!=-1){

        const offset = document.getElementsByClassName("thumb")
            const offset_width = offset.length>1&&offset[1].clientWidth?offset[1].clientWidth:180

            // document.getElementById('listContent').scrollLeft =offset_width*pano_select;

            const fromLeft = document.getElementById('listContent').scrollLeft
            const toLeft = offset_width*pano_Id

            const coords = {x: fromLeft, y: 0} // Start at (0, 0)
            const tween = new TWEEN.Tween(coords) // Create a new tween that modifies 'coords'.
                .to({x: toLeft, y: 200}, 1000) // Move to (300, 200) in 1 second.
                .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
                .onUpdate(() => {

                    document.getElementById('listContent').scrollLeft = coords.x
                })
                .start() // Start the tween immediately.

    }

    


    document.addEventListener('keyup', onKeyUp);

    document.getElementById('play').addEventListener('click', enterPano);

}



function selectUpnDown(is_down){
    const nodess = document.getElementById("listContent").childNodes;
    for(let i =0;i<nodess.length-1;i++){
        if(nodess[i].className==='panoSelect'){
            nodess[i].className = 'pano'
        } 
    }

    if(is_down){
        const firstChild = document.getElementById('listContent').firstChild
        firstChild.className = 'panoSelect'

        const playdiv = document.getElementById('play')

        playdiv.style.backgroundImage='url("./yaoimages/play4.png")'

        document.getElementById('listContent').scrollLeft =0;

        let panoId = 0

        document.getElementById('descriptTitle').innerHTML = house.src[panoId].title
        document.getElementById('descriptContent').innerHTML = limitWords(house.src[panoId].descript)

        // update conver
        const conver = document.getElementById('cover')
        conver.src='./thumb1k/'+house.src[panoId].name +"1k_f.jpg"
        conver.setAttribute('data-id',panoId)



    }else{
        const playdiv = document.getElementById('play')
        // playdiv.className = 'playSelect'
        playdiv.style.backgroundImage='url("./yaoimages/play_click.png")'

    }
}

function limitWords(txt){
    var str = txt;
    if(str.length>160){
        str = str.substr(0,160) + '...';
    }
    
    return str;
}

function selectLeftnRight(is_right){

    const nodess = document.getElementById("listContent").childNodes;

    for(let i =0;i<nodess.length;i++){

        if(nodess[i].className==='panoSelect'){
            nodess[i].className = 'pano'

            let pano_select = -1

            if(is_right){
                pano_select = i===nodess.length -1? 0:i+1
            }else{
                pano_select = i===0? nodess.length -1:i-1
            }

            house.idx = pano_select

            nodess[pano_select].className='panoSelect'

            // update description
            
            document.getElementById('descriptTitle').innerHTML = house.src[house.idx].title
            document.getElementById('descriptContent').innerHTML = limitWords(house.src[house.idx].descript)

            // update conver
            const conver = document.getElementById('cover')
            conver.src='./thumb2k/'+house.src[pano_select].name +"2k_f.jpg"
            conver.setAttribute('data-id',pano_select)

            const offset = document.getElementsByClassName("thumb")
            const offset_width = offset.length>1&&offset[1].clientWidth?offset[1].clientWidth:180

            // document.getElementById('listContent').scrollLeft =offset_width*pano_select;

            const fromLeft = document.getElementById('listContent').scrollLeft
            const toLeft = offset_width*pano_select

            const coords = {x: fromLeft, y: 0} // Start at (0, 0)
            const tween = new TWEEN.Tween(coords) // Create a new tween that modifies 'coords'.
                .to({x: toLeft, y: 200}, 1000) // Move to (300, 200) in 1 second.
                .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
                .onUpdate(() => {
                    document.getElementById('listContent').scrollLeft = coords.x
                })
                .start() // Start the tween immediately.
    


            i = nodess.length
        } 
    } 
}

function enterPano(){
    const conver = document.getElementById('cover')

    const panoId = conver.getAttribute('data-id')


    const backurl = house.backurl

    const url = "ypano.html?id="+panoId+"&backurl="+backurl
     window.location.href = url  

}



function onKeyUp(e){
    switch(e.keyCode){
        case 38://ArrowUp
            selectUpnDown(false)
            break
        case 40://ArrowDown
            selectUpnDown(true)
            break
        case 37: //ArrowLeft
            selectLeftnRight(false)
            break
        case 39://ArrowRight
            selectLeftnRight(true)
            break
        case 13://Enter
            // enterPano() // 会触发两次
        case 48: // auto play
            break
        case 49:
            break
        default:
            break
    }
}


animate()

function animate() {
	requestAnimationFrame(animate)

	TWEEN.update()

}


var btn = new tvSysBtnBind({
    id: "Jdoc",
    className: "ctrlBtn",
    currentClass: "current",
    keyRemoveDefault: false,
    effect: "base",
    currentIndex: 0,
    onLoad: function(e) {

    },
    onPress:function() {
        var keyCode = this.event.keyCode;
        // alert('tvSysBtnBind:'+keyCode+" - " + this.event.key)
        switch (keyCode) {
            case 37: // left
            // reloadData();
            break;
            case 39: // right
            
            break;
            case 38: //up
            
            break;
            case 40: //down
            
            break;
            case 13: //enter
                enterPano() 
            // break;
            case 33: //chanel +
            
            break;
            case 34: //chanel -
            
            break;
            case 48: //0
            
            break;
            default:
                break;
        }
    },
    onEnterPress: function() {
        
    },
    onBack: function() {

        const backurl = house.backurl

        window.location.href = backurl 
        return
        
    }
});



window.onBackEvent= function(){

    const backurl = house.backurl

    window.location.href = backurl 

    return
}