var vdom, tlInterval, tlLength, newsLength, newsInterval, videoSetTimeout;
var timelineNum = 1, newsNum = 1;
var isDrop = false; //绉诲姩鐘舵€佺殑鍒ゆ柇榧犳爣鎸変笅鎵嶈兘绉诲姩
var dropX; //榧犳爣鐩稿涓巇iv宸﹁竟锛屼笂杈圭殑鍋忕Щ
var timelineData = {
    data : [
        {
            year: "2015",
            title: "鍒涘浜烘潕娣欏垱鍔炴磱钁遍泦鍥?,
            detail: "鍒涘浜烘潕娣欙紙Kenny Li锛夊垱鍔炴磱钁憋紝鍒濆績浜庢垚涓轰竴瀹跺叏鐞冨寲鐨勫搧鐗屾ⅵ宸ュ巶銆傝嚧鍔涗笘鐣岀殑鎺㈢储锛屽缓璁句紭璐ㄥ搧鐗岀殑涓氭€佸拰鐢熸€侊紝鐢ㄤ骇鍝佸姏涓轰汉浠彁渚涗紭璐ㄧ殑娑堣垂閫夋嫨锛岀Н鏋佸鎵炬洿鏃跺皻鏇存柊椴滅殑鏂版秷璐瑰搧鐗岋紝涓鸿繖涓€浠ｃ€佷笅涓€浠ｄ汉鍒涢€犳洿缇庡ソ鐨勭敓娲绘柟寮忋€?,
            imgSrc: "https://img.51msyc.com/wxapp/pc/image/images/timeline_2015.jpg"
        },
        {
            year: "2016",
            title: "寮€鍒涘叏鐞冨搧鐗岃喘鐗╃媯娆€岀編鐗╄妭銆?,
            detail: "O'Mall骞冲彴寮€鍒涚殑鍏ㄧ悆鍝佺墝璐墿鐙傛鑺傘€岀編鐗╄妭銆嶏紝涔熸槸O'Mall鐨勫簵搴嗘棩銆傘€岀編鐗╄妭銆嶅彂灞曡嚦浠婏紝宸叉繁搴﹁仈鍔ㄥ叏鐞冩暟鍗冧釜鐭ュ悕鍝佺墝锛岀簿蹇冪爺閫変紭璐ㄥ晢鍝侊紝浠ユ洿缇庡ソ鐨勬姌鎵ｄ负涓浗娑堣垂鑰呮彁渚涙椂灏氥€佸鍏冨寲鐨勬秷璐硅喘鐗╀綋楠屻€?,
            imgSrc: "https://img.51msyc.com/wxapp/pc/image/images/timeline_2016.jpg"
        },
        {
            year: "2017",
            title: "鎵撻€犲叏鐞冨搧鐗岀鐞嗚鍒?,
            detail: "鎴戜滑鏁村悎浜嗗叏鐞冨搧鐗屽鍖栧強钀ラ攢鐨勫彂灞曠瓥鐣ワ紝鏉ヤ负鍝佺墝浼欎即瀹氬埗楂樻晥銆佺畝鍗曘€佸叏闈€佸揩閫熷闀跨殑鍙戝睍璺緞锛屽疄鐜板湪涓浗甯傚満鍏ㄩ噺銆佸叏鏃躲€佸叏鍩熺殑楂樻晥浜虹兢瑙﹁揪锛屽苟涓庝紬澶氬搧鐗屼紮浼磋揪鎴愭垬鐣ュ悎浣滐紝鍏卞悓绠＄悊甯傚満銆?,
            imgSrc: "https://img.51msyc.com/wxapp/pc/image/images/timeline_2017.png"
        },
        {
            year: "2018",
            title: "鎵撻€犺嚜鏈夊搧鐗岀兢",
            detail: "鍩轰簬杩囧幓鍑犲勾绉疮鐨勫叏鐞冧緵搴旈摼璧勬簮锛屾垜浠紑濮嬫墦閫犳垜浠殑鑷湁鍝佺墝缇わ紝骞跺湪杩欏勾棣栨鎺ㄥ嚭鑷湁鍝佺墝浜у搧锛屾瀯寤轰簡3F杩囨护鍣ㄧ殑鍝佺墝瀛靛寲鍙婂缓璁炬爣鍑嗐€?F鎰忔寚锛欶resh鏂伴矞鐨勩€丗ashionable鏃跺皻鐨勩€丗uture绉瀬鐨勯潰鍚戝競鍦烘湭鏉ュ闀跨孩鍒╋紝骞堕珮搴﹁繋鍚堟柊娑堣垂闇€姹傜殑鍝佺墝銆?,
            imgSrc: "https://img.51msyc.com/wxapp/pc/image/images/timeline_2018.jpg"
        },
        {
            year: "2019",
            title: "闆嗗洟鏃椾笅鐨凨OC绀句氦鍖栭攢鍞钩鍙版磱钁監'Mall 璺昏韩璺ㄥ鐢靛晢琛屼笟鍓嶄簲",
            detail: "鍊煎緱鑷豹鐨勬槸锛屾牴鎹法澧冨湪绾块浂鍞骇鐢熺殑GMV锛屼粎浠呯敤浜?骞存椂闂达紝鎴戜滑KOC绀句氦鍖栭攢鍞钩鍙版磱钁監'Mall 灏辫坊韬垚涓鸿法澧冨搧鐗岀數鍟嗚涓氬墠浜斻€?,
            imgSrc: "https://img.51msyc.com/wxapp/pc/image/images/timeline_2019.jpg"
        },
        {
            year: "2020",
            title: "鎻愪緵鍝佺墝鍏ㄧ敓鍛藉懆鏈熺殑瀹屾暣浠峰€奸摼鏈嶅姟",
            detail: "娲嬭懕闆嗗洟鏋勭瓚浠庝骇鍝佺爺绌跺埗閫?鍝佺墝鏋勫缓-钀ラ攢璧嬭兘-娓犻亾缁忚惀-鐢ㄦ埛瑙﹁揪鐨勫畬鏁 鍝佺墝涓氭€佸強鐢熸€佺鎺ч棴鐜紝鍏峰涓€绔欏紡鐨勫搧鐗屽鍖栥€佽惀閿€鍙婇攢鍞兘鍔涖€傚緱鐩婁簬鍝佺墝鍏ㄧ敓鍛藉懆鏈熺粡钀ョ殑鎴愬姛锛岃鎴戜滑杩涗竴姝ヨ繘鍏ヤ腑鍥藉搧鐗屽叕鍙稿墠鍗佺殑鍦颁綅銆?,
            imgSrc: "https://img.51msyc.com/wxapp/pc/image/images/timeline_2020.jpg"
        },
        {
            year: "2021",
            title: "绾戒氦鎵€鎴愬姛涓婂競",
            detail: "浣滀负鈥滃搧璐ㄧ敓娲诲搧鐗屽钩鍙扮饧€鑲♀€濇寮忓湪缇庡浗绾戒氦鎵€涓婂競锛岃偂绁ㄤ唬鐮併€孫G銆嶃€傛垜浠敱姝ょ櫥涓婃洿澶х殑鍥介檯鑸炲彴锛屽疄鐜拌窡鍏ㄧ悆鐨勫搧鐗屽璇濓紝鏇村ソ鍦版湇鍔″叏鐞冩秷璐硅€呫€傛湭鏉ユ垜浠皢鍊熷姪璧勬湰鐨勫紩鎿庯紝鑷村姏浜庢垜浠殑浣垮懡鎴愰暱锛屽苟鎸佺画涓轰腑鍥藉拰鏁翠釜浜氭床鐨勫勾杞讳汉閾炬帴鏉ヨ嚜浜庡叏鐞冩柊椴溿€佹椂灏氬拰鍏峰鎶€鏈湭鏉ョ殑鍝佺墝銆?,
            imgSrc: "https://img.51msyc.com/wxapp/pc/image/images/timeline_2021.png"
        }
    ]
}
var newsData = {data:[]};

function throttle(func, wait) {
    var previous = 0;
    return function() {
        var now = Date.now();
        var context = this;
        var args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}
function changeTimeline(nextVal, realVal) {
    var tltextWidth = document.body.clientWidth > 1920 ? 1920 : document.body.clientWidth
    $(".timg-box .je-poa").css("opacity", "0").each(function (index) {
        if (index + 1 === realVal) {
            $(this).css("opacity", "1")
            return false
        }
    });
    if (nextVal === realVal) {
        $(".ttext-box").css("left", "-" + (nextVal * tltextWidth * 0.48) + "px")
    } else {
        $(".ttext-box").css("left", "-" + (nextVal * tltextWidth * 0.48) + "px")
            .one('transitionend', function () {
                $(".ttext-box").hide().offset()
                $(".ttext-box").css("left", "-" + (realVal * tltextWidth * 0.48) + "px").show()
            })
    }
    $(".one-year").removeClass("is-active").each(function (index) {
        if (index + 1 === realVal) {
            $(this).addClass("is-active");
            return false
        }
    });
    $("#tltext-page").text(realVal);
    timelineNum = realVal;
}
function setTimeline() {
    tlInterval = setInterval(function() {
        if (timelineNum >= tlLength) {
            changeTimeline(timelineNum + 1, 1)
        } else {
            changeTimeline(timelineNum + 1, timelineNum + 1)
        }
    }, 10000);
}
function clickTimePoint(val) {
    clearInterval(tlInterval);
    changeTimeline(val, val);
    setTimeline();
}
function setNews() {
    newsInterval = setInterval(function() {
        if (newsNum >= newsLength) {
            changeNews(newsNum + 1, 1)
        } else {
            changeNews(newsNum + 1, newsNum + 1)
        }
    }, 10000);
}
function changeNews(nextVal, realVal) {
    $(".nimg-box").css("opacity", "0").each(function (index) {
        if (index + 1 === realVal) {
            $(this).css("opacity", "1")
            return false
        }
    });
    if (nextVal === realVal) {
        $(".all-ntext").css("left", "-" + (nextVal * 440) + "px")
    } else {
        $(".all-ntext").css("left", "-" + (nextVal * 440) + "px")
            .one('transitionend', function () {
                $(".all-ntext").hide().offset()
                $(".all-ntext").css("left", "-" + (realVal * 440) + "px").show()
            })
    }

    $(".news-page").text(realVal + "/" + newsLength);
    newsNum = realVal;
}
function newsDetail() {
    window.location.href = 'show.html?msid=' + newsData.data[newsNum - 1].id;
}

function changeWidth(){
    var docWidth = document.body.clientWidth;
    if(docWidth <= 1200){
        docWidth = 1200
    }

    $(".drag-box").css("width", 3700 + docWidth - 1180 + "px")
    $(".drag-empty").css({
        "width": (docWidth - 1180) / 2 + "px",
        "height": "540px"
    })

    var tlWidth = docWidth > 1920 ? 1920 : docWidth;
    $(".timg-box").css({
        "width": tlWidth * 0.52 + 'px'
    });
    $(".timg-box .je-poa").css("width", tlWidth * 0.52 + 'px');
    $(".ttext-box").css({
        "width": tlWidth * 0.48 * (tlLength + 2) + 'px',
        "left": tlWidth * 0.48 + 'px'
    });
    $(".ttext-box .je-fl").css({
        "width": tlWidth * 0.48 + 'px',
    });
    clickTimePoint(1);
}

// 鎴戜滑鐨勫姩鎬
function getOurDynamic() {
    $.ajax({
        type: 'GET',
        url: msonionUrl+"webSite/getFrontPage/v2",
        data:{},
        dataType: 'json',
        success: function(msg){
            if(msg.errCode === 10000 && msg.data && msg.data.length) {
                newsData.data = msg.data;
                newsLength = newsData.data.length;
                jetpl("#newsData").render(newsData, function(result) {
                    $('#news-box').html(result);
                });
                changeWidth();
                $(".all-ntext").css("width", 440 * (newsLength + 2));
                setNews();
                $(".news-right").click(
                    throttle(function() {
                        clearInterval(newsInterval);
                        if (newsNum >= newsLength) {
                            changeNews(newsNum + 1, 1)
                        } else {
                            changeNews(newsNum + 1, newsNum + 1)
                        }
                        setNews();
                    }, 400)
                )
                $(".news-left").click(
                    throttle(function() {
                        clearInterval(newsInterval);
                        if (newsNum <= 1) {
                            changeNews(newsNum - 1, newsLength)
                        } else {
                            changeNews(newsNum - 1, newsNum - 1)
                        }
                        setNews();
                    }, 400)
                )
            } else {
                isError('home', msg.errMsg && msg.errCode !== 10000 ? msg.errMsg : '鏆傛棤鏁版嵁', 'getOurDynamic')
            }
        },
        error: function(err){
            isError('home', '鎴戜滑鐨勫姩鎬佽姹傚嚭閿欎簡', 'getOurDynamic')
        }
    });
}

$(function(){
    tlLength = timelineData.data.length;
    jetpl("#timelineDate").render(timelineData, function(result) {
        $('#timeline').html(result);
    });

    getOurDynamic();

    var vplay = $("#homeVideo")[0].play();
    $("#homeVideo")[0].volume = 0.5;
    if (vplay !== undefined) {
        vplay
            .catch(function (error) {
                $("#homeVideo")[0].muted = true;
                $("#homeVideo")[0].play();
                $(".vbtn-volume").toggleClass('no-voice');
            })
            .then(function () {
                $("#homeVideo")[0].play();
            });
    }
    $(".volume-on").click(function() {
        $("#homeVideo")[0].muted = true;
        $("#homeVideo")[0].volume = 0;
        $(".vbtn-volume").toggleClass('no-voice');
    })
    $(".volume-off").click(function() {
        $("#homeVideo")[0].muted = false;
        $("#homeVideo")[0].volume = 0.5;
        $(".vbtn-volume").toggleClass('no-voice');
    })
    vdom = $("#homeVideo")[0];
    $(".full-on").click(function() {
        if (vdom.requestFullscreen) {
            vdom.requestFullscreen()
        } else if (vdom.mozRequestFullScreen) {
            vdom.mozRequestFullScreen()
        } else if (vdom.msRequestFullscreen) {
            vdom.msRequestFullscreen()
        } else if (vdom.webkitRequestFullscreen) {
            vdom.webkitRequestFullScreen()
        }
    })

    //  鐩戝惉鍏ㄥ睆浜嬩欢瑙﹀彂
    function fullscreenchange() {
        var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
        if (isFullScreen) {
            //  杩涘叆鍏ㄥ睆
        } else {
            //  閫€鍑哄叏灞
            if ($("#homeVideo")[0].muted || $("#homeVideo")[0].volume === 0) {
                $(".vbtn-volume").addClass('no-voice');
            } else {
                $(".vbtn-volume").removeClass('no-voice');
            }
        }
    }
    var fullList = ['fullscreenchange','webkitfullscreenchange','mozfullscreenchange']
    for (var index = 0; index < fullList.length; index++) {
        window.addEventListener(fullList[index], function () {
            fullscreenchange()
        })
    }
    $(".video-box").on("mousemove", 
        throttle(function () {
            if (videoSetTimeout) clearTimeout(videoSetTimeout)
            $(this).addClass("show-btn")
            videoSetTimeout = setTimeout(function () {
                $(".video-box").removeClass("show-btn")
            }, 3000);
        }, 200)
    )
    $(".video-box").on("mouseover", function () {
        if (videoSetTimeout) clearTimeout(videoSetTimeout)
        $(this).addClass("show-btn")
        videoSetTimeout = setTimeout(function () {
            $(".video-box").removeClass("show-btn")
        }, 3000);
    })
    $(".video-box").on("mouseout", function () {
        if (videoSetTimeout) clearTimeout(videoSetTimeout)
        $(this).removeClass("show-btn")
    })

    // 灞忓箷瀹藉害
    changeWidth();
    window.onresize = function(){
        changeWidth();
    };

    // 鎷栧姩鏉垮潡
    $(".detail-box").on("mousedown", function(e) {
        $(".drag-box").addClass("small-cursor");
        isDrop = true;
        var e = e || window.event;
        dropX = e.clientX;
        return false;
    })
    document.onmouseup = function() {
        $(".drag-box").removeClass("small-cursor");
        isDrop = false;
    }
    document.onmousemove = function(e) {
        if(isDrop) {
            var e = e || window.event;
            var moveX = e.clientX - dropX;
            dropX = e.clientX;
            $(".detail-box")[0].scrollLeft -= moveX
        } else {
            return;
        }
    }
    $(".drag-item").on('mousedown', function (evt) {
        $(".drag-item").on('mouseup mousemove', function handler(evt) {
            if (evt.type === 'mouseup') {
                // 璺宠浆
                window.location.href = 'zoology.html#' + evt.currentTarget.dataset.href;
            }
            $(".drag-item").off('mouseup mousemove', handler);
        });
    });

    // 鏃堕棿绾挎澘鍧
    if (tlInterval) { clearInterval(tlInterval); }
    setTimeline();
    $(".tltext-right").click(
        throttle(function() {
            clearInterval(tlInterval);
            if (timelineNum >= tlLength) {
                changeTimeline(timelineNum + 1, 1)
            } else {
                changeTimeline(timelineNum + 1, timelineNum + 1)
            }
            setTimeline();
        }, 400)
    )
    $(".tltext-left").click(
        throttle(function() {
            clearInterval(tlInterval);
            if (timelineNum <= 1) {
                changeTimeline(timelineNum - 1, tlLength)
            } else {
                changeTimeline(timelineNum - 1, timelineNum - 1)
            }
            setTimeline();
        }, 400)
    )
    $(".one-year").css("width", 600 / tlLength + "px")
});