var omallTop, omallHight, video1, video2, video3;
var hadPlay1 = false, hadPlay2 = false, hadPlay3 = false;
var activityLength = 5, storyLength = 5;
var activityDrop = false, storyDrop = false; //绉诲姩鐘舵€佺殑鍒ゆ柇榧犳爣鎸変笅鎵嶈兘绉诲姩
var activityX, storyX; //榧犳爣鐩稿涓巇iv宸﹁竟锛屼笂杈圭殑鍋忕Щ
var shopkeeperData = {data: []};
var activityData = {data: []};

function changeWidth(){
    var docWidth = document.body.clientWidth;
    if(docWidth <= 1200){
        docWidth = 1200
    }
    $("#omall-activity .drag-box").css("width", 430 * activityLength + 20 * (activityLength - 1) + docWidth - 1180 + "px")
    $("#omall-shopkeeper .drag-box").css("width", 430 * storyLength + 20 * (storyLength - 1) + docWidth - 1180 + "px")
    $(".drag-empty").css({
        "width": (docWidth - 1180) / 2 + "px",
        "height": "454px"
    })
}

// O'Mall 娲诲姩
function getActivity() {
    $.ajax({
        type: 'GET',
        url: msonionUrl+"webSite/getTitlesFiveByCategoryId/v2",
        data:{categoryId: 3},
        dataType: 'json',
        success: function(msg){
            if(msg.errCode === 10000 && msg.data && msg.data.length) {
                activityData.data = msg.data;
                activityLength = activityData.data.length;
                jetpl("#activityData").render(activityData, function(result) {
                    $('#omall-activity').html(result);
                });
                changeWidth();
                wScroll();
                $("#omall-activity .detail-box").on("mousedown", function(e) {
                    $("#omall-activity .drag-box").addClass("small-cursor");
                    activityDrop = true;
                    var e = e || window.event;
                    activityX = e.clientX;
                    return false;
                })
                $("#omall-activity .drag-item").on('mousedown', function (evt) {
                    $("#omall-activity .drag-box").addClass("small-cursor");
                    $("#omall-activity .drag-item").on('mouseup mousemove', function handler(evt) {
                        if (evt.type === 'mouseup') {
                            $("#omall-activity .drag-box").removeClass("small-cursor");
                            // 璺宠浆
                            window.location.href = 'show.html?msid=' + evt.currentTarget.dataset.href;
                        }
                        $("#omall-activity .drag-item").off('mouseup mousemove', handler);
                    });
                });
            } else {
                isError('activity', msg.errMsg && msg.errCode !== 10000 ? msg.errMsg : '鏆傛棤鏁版嵁', 'getActivity')
            }
        },
        error: function(err){
            isError('activity', "O'Mall娲诲姩璇锋眰鍑洪敊浜?, 'getActivity')
        }
    });
}

// 搴椾富鐨勬晠浜
function getStory() {
    $.ajax({
        type: 'GET',
        url: msonionUrl+"webSite/getTitlesFiveByCategoryId/v2",
        data:{categoryId: 6},
        dataType: 'json',
        success: function(msg){
            if(msg.errCode === 10000 && msg.data && msg.data.length) {
                shopkeeperData.data = msg.data;
                storyLength = shopkeeperData.data.length;
                jetpl("#shopkeeperData").render(shopkeeperData, function(result) {
                    $('#omall-shopkeeper').html(result);
                });
                changeWidth();
                wScroll();
                $("#omall-shopkeeper .detail-box").on("mousedown", function(e) {
                    $("#omall-shopkeeper .drag-box").addClass("small-cursor");
                    storyDrop = true;
                    var e = e || window.event;
                    storyX = e.clientX;
                    return false;
                })
                $("#omall-shopkeeper .drag-item").on('mousedown', function (evt) {
                    $("#omall-shopkeeper .drag-box").addClass("small-cursor");
                    $("#omall-shopkeeper .drag-item").on('mouseup mousemove', function handler(evt) {
                        if (evt.type === 'mouseup') {
                            $("#omall-shopkeeper .drag-box").removeClass("small-cursor");
                            // 璺宠浆
                            window.location.href = 'show.html?msid=' + evt.currentTarget.dataset.href;
                        }
                        $("#omall-shopkeeper .drag-item").off('mouseup mousemove', handler);
                    });
                });
            } else {
                isError('story', msg.errMsg && msg.errCode !== 10000 ? msg.errMsg : '鏆傛棤鏁版嵁', 'getStory')
            }
        },
        error: function(err){
            isError('story', '搴椾富鐨勬晠浜嬭姹傚嚭閿欎簡', 'getStory')
        }
    });
}

$(function(){
    getActivity();

    getStory();

    function omallScroll() {
        omallTop = $(document).scrollTop();
        omallHight = $(window).height();
        if (!hadPlay1) {
            video1 = $("#captainYodel");
            if(video1.offset().top + video1.height() > omallTop && video1.offset().top < (omallTop + omallHight)) {
                video1[0].volume = 0.5;
                var vplay1 = video1[0].play();
                if (vplay1 !== undefined) {
                    vplay1
                        .catch(function (error) {
                            video1[0].muted = true;
                            video1[0].play();
                        })
                        .then(function () {
                            video1[0].play();
                        });
                    hadPlay1 = true;
                }
            }
        } else if (!(video1.offset().top + video1.height() > omallTop && video1.offset().top < (omallTop + omallHight))) {
            video1[0].pause();
        }

        if (!hadPlay2) {
            video2 = $("#omallRush");
            if(video2.offset().top + video2.height() > omallTop && video2.offset().top < (omallTop + omallHight)) {
                video2[0].volume = 0.5;
                var vplay2 = video2[0].play();
                if (vplay2 !== undefined) {
                    vplay2
                        .catch(function (error) {
                            video2[0].muted = true;
                            video2[0].play();
                        })
                        .then(function () {
                            video2[0].play();
                        });
                    hadPlay2 = true;
                }
            }
        } else if (!(video2.offset().top + video2.height() > omallTop && video2.offset().top < (omallTop + omallHight))) {
            video2[0].pause();
        }

        if (!hadPlay3) {
            video3 = $("#showYourself");
            if(video3.offset().top + video3.height() > omallTop && video3.offset().top < (omallTop + omallHight)) {
                video3[0].volume = 0.5;
                var vplay3 = video3[0].play();
                if (vplay3 !== undefined) {
                    vplay3
                        .catch(function (error) {
                            video3[0].muted = true;
                            video3[0].play();
                        })
                        .then(function () {
                            video3[0].play();
                        });
                    hadPlay3 = true;
                }
            }
        } else if (!(video3.offset().top + video3.height() > omallTop && video3.offset().top < (omallTop + omallHight))) {
            video3[0].pause();
        }
    }
    omallScroll();
    $(window).scroll(function (event) {
        omallScroll();
    });

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

    // 鎷栧姩鏉垮潡
    document.onmouseup = function() {
        $(".drag-box").removeClass("small-cursor");
        activityDrop = false;
        storyDrop = false;
    }
    document.onmousemove = function(e) {
        if(activityDrop) {
            var activityEvent = e || window.event;
            var activityMove = activityEvent.clientX - activityX;
            activityX = activityEvent.clientX;
            $("#omall-activity .detail-box")[0].scrollLeft -= activityMove
        } else if(storyDrop) {
            var storyEvent = e || window.event;
            var storyMove = storyEvent.clientX - storyX;
            storyX = storyEvent.clientX;
            $("#omall-shopkeeper .detail-box")[0].scrollLeft -= storyMove
        } else {
            return;
        }
    }
})