/**
 * 星潮教室首页
 * @author: wsl<shuiling.wang@yoho.cn>
 * @date: 2016/5/31
 */

var $ = require('yoho-jquery'),
    Swiper = require('yoho-swiper'),

    // inView = require('in-view'),
    loading = require('../plugin/loading'),
    PullRefresh = require('../plugin/pull-refresh');

var $window = $(window),
    stopLoading = false,
    $mainContent = $('.main-content'),
    $loadingTip = $('.loading-tip'),
    u = navigator.userAgent,
    isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

/*
    $swiperView = $('.swiper-view'),
    $viewImg = $('.view-img'),
    $body = $('body'),
    imgs = [],
    allImgs = {};

var mySwiper;
*/

var avatarKey, bannerLen, res, avatarSwiper, avatarSwiperClone, getIndexHtml, bannerSwiper,
    $avatarClone, $avatarWrap, starIScroll;

var swiperNum = $('.avatar-wrap .swiper-slide').width() / 2;

// var $gif = $('img[data-original*="gif"]');

if ($('.star-main').css('height') === '0px') {
    $('.star-main').css('height', $window.height() - $('.head-tab').height());
}

if ($window.width() === 375 && isiOS) {
    swiperNum = 32;
}

require('../common');
require('yoho-jquery-lazyload');

// require('yoho-jquery-inview');

$window.on('mousewheel', false);
$('#yoho-header, .head-tab').on('touchmove', function() {
    return false;
});

// inView(document.querySelectorAll('img[data-original*="gif"]'))
//     .on('enter', function() {
//         console.log(1);
//     })
//     .on('exit', function() {
//         console.log(2);
//     });

// $('img[data-original*="gif"]').on('inview', function(event, isInView) {
//     if (isInView) {
//         $(this).css('display', 'block');
//     } else {
//         $(this).css('display', 'none');
//     }
// });

// 限制标题字数
// function txtLimit() {
//
// }

// // 设置默认头像
// function setAvatar($userAvatar) {
//     var myImage = new Image(),
//         avatar = '';
//
//     // 部分老用户没有头像，显示默认头像
//     avatar = $userAvatar.data('avatar');
//
//     // myImage.onload = function() {
//     //     $userAvatar.css('background-image', 'url(' + avatar + ')');
//     // };
//     //
//     // if (avatar) {
//     //     myImage.src = avatar;
//     // } else {
//     //     $userAvatar.addClass('default-avater');
//     // }
// }


// 明星头像点击居中显示或跳转
function bindAvatar(dom) {
    avatarKey = dom.index();

    if (!dom.hasClass('swiper-slide-active')) {
        //if (avatarKey >= (2 * bannerLen + 1)) {
        //    avatarSwiperClone && avatarSwiperClone.slideTo(bannerLen + 1, 0);
        //    avatarSwiper.slideTo(bannerLen + 1, 0);
        //} else if (avatarKey <= (bannerLen - 1)) {
        //    avatarSwiperClone && avatarSwiperClone.slideTo(2 * bannerLen - 1, 0);
        //    avatarSwiper.slideTo(2 * bannerLen - (bannerLen - avatarKey), 0);
        //} else {
            avatarSwiperClone && avatarSwiperClone.slideTo(avatarKey, 200);
            avatarSwiper.slideTo(avatarKey, 200);
        //}

        return false;
    }
}

function setIndexAction() {
     $('.avatar').each(function(key, item) {
         $(item).addClass('avatar-' + key);
     });

    // 明星头像 swiper 初始化
    if (bannerLen > 1) {
        avatarSwiper = new Swiper($avatarWrap.find('.avatar-swiper')[0], {
            lazyLoading: true,
            lazyLoadingInPrevNextAmount: 3,

            //loop: true,
            initialSlide: 2,
            centeredSlides: true,
            slidesPerView: 'auto',
            loopedSlides: bannerLen,
            spaceBetween: 10,
            slidesOffsetBefore: -swiperNum,
            watchSlidesProgress: true,
            watchSlidesVisibility: true,
            onInit: function() {
                $avatarWrap.on('click', 'li', function() {
                    res = bindAvatar($(this));
                    return res;
                });
            }
        });
    }

    // 明星动态头像左右滑动
    // if ($('.article-avatar-swiper').find('li').length > 1) {
    //     new Swiper('.article-avatar-swiper', {
    //         initialSlide: 0,
    //         lazyLoading: true,
    //         lazyLoadingInPrevNext: true,
    //         loop: true,
    //         autoplay: 5000
    //     });
    // }

    // banner swiper 初始化
    if ($('.banner-swiper').find('li').length > 1) {
        bannerSwiper = new Swiper('.banner-swiper', {
            lazyLoading: true,
            lazyLoadingInPrevNext: true,
            loop: true,
            autoplay: 3000,
            autoplayDisableOnInteraction: false,
            paginationClickable: true,
            slideElement: 'li',
            pagination: '.banner-top .pagination-inner'
        });
    }

    // if ($('.star-info').find('li').length > 0) {
    //     $starArticle.each(function(key, item) {
    //         txtLimit($(item), '.article-title', 'p');
    //
    //         // articleImgAction($(item), key);
    //     });
    // }

    // $('.rank-avatar').each(function(key, item) {
    //     setAvatar($(item));
    // });
}

function initAction() {
    $avatarWrap = $('.avatar-wrap');
    bannerLen = $('.avatar-wrap').find('.swiper-slide').length;

    if ($avatarClone) {
        $avatarClone.remove();
    }

    $loadingTip.before($('.avatar-swiper').clone().addClass('avatar-clone').hide());

    $avatarClone = $('.avatar-clone');

    $('img.lazy').lazyload({
        effect: 'fadeIn'
    });

    setIndexAction();
}

initAction();

// 首页数据请求
getIndexHtml = function() {
    loading.showLoadingMask();
    $.ajax({
        url: '/guang/star/getIndexHtml',
        dataType: 'html',
        timeout: 5000
    })
    .done(function(data) {
        if (data) {
            if (avatarSwiperClone) {
                avatarSwiperClone.destroy(true, true);
                avatarSwiperClone = null;
            }

            $mainContent.html(data);

            initAction();
        }
    })
    .always(function() {
        stopLoading = false;
        loading.hideLoadingMask();
    });
};

// 下拉刷新，上拉加载
starIScroll = new PullRefresh('.star-main', {
    pullDown: function() {
        if (!stopLoading) {
            stopLoading = true;
            getIndexHtml();
        }
    }
});

starIScroll.iScroll.on('scrollStart', function() {
    // 下拉
    // if (this.directionY === -1) {
    //     $loadingTip.slideDown();
    // }
    // $gif.css('display', 'none');
    bannerSwiper && bannerSwiper.startAutoplay();
});

starIScroll.iScroll.on('scroll', function() {
    // var avatarOffsetT;
    //
    // if (this.directionY !== -1) {
    //     setTimeout(function() {
    //         starIScroll.iScroll.refresh();
    //     }, 0);
    // }
    //
    // avatarOffsetT = $avatarWrap[0].offsetTop;
    //
    // if (-this.y >= avatarOffsetT) {
    //     $avatarClone.show();
    //
    //     if (!avatarSwiperClone) {
    //         avatarSwiperClone = new Swiper($avatarClone[0], {
    //             lazyLoading: true,
    //             lazyLoadingInPrevNext: true,
    //
    //             // loop: true,
    //             initialSlide: $avatarWrap.find('.swiper-slide-active').index() % bannerLen,
    //             centeredSlides: true,
    //             slidesPerView: 'auto',
    //             loopedSlides: bannerLen,
    //             spaceBetween: 10,
    //             slidesOffsetBefore: -swiperNum,
    //             watchSlidesProgress: true,
    //             watchSlidesVisibility: true,
    //             onInit: function() {
    //                 $avatarClone.find('li').on('click', function() {
    //                     res = bindAvatar($(this));
    //                     return res;
    //                 });
    //             }
    //         });
    //
    //         avatarSwiperClone.params.control = avatarSwiper;
    //         avatarSwiper.params.control = avatarSwiperClone;
    //     }
    // } else {
    //     $avatarClone.hide();
    // }
});

starIScroll.iScroll.on('scrollEnd', function() {
    // $loadingTip.slideUp();
    // $gif.css('display', 'block');
    bannerSwiper && bannerSwiper.stopAutoplay();
});

window.setCookie('guangStarUid', window.queryString.uid);

// $('img').on('load', function() {
//     starIScroll && starIScroll.iScroll.refresh();
// });

// 明星动态文章图片相关操作
/*
function articleImgAction(dom, key) {
    var $articeImgs = dom.find('.artice-imgs'),
        $li = $articeImgs.find('li'),
        imgLen = $articeImgs.find('img').length,
        addFlagDom = $li.eq(2);

    var i;

    imgs = [];

    $li.each(function() {
        imgs.push($(this).find('img').attr('src'));
    });

    allImgs[key] = imgs;

    $li.on('click', function() {
        for (i = 0; i < imgLen; i++) {
            $swiperView.find('ul').append('<li class="swiper-slide">' +
            '<img class="swiper-lazy" data-src="' + allImgs[key][i] + '">' +
            '<div class="swiper-lazy-preloader"></div></li>');
        }
        setTimeout(function() {
            mySwiper = new Swiper('.swiper-view', {
                lazyLoading: true,
                lazyLoadingInPrevNext: true,
                slideElement: 'li'
            });

            $('.swiper-view li').on('click', function(e) {
                if (e.target.nodeName === 'IMG') {
                    return;
                }
                $viewImg.hide();
                $body.css({
                    overflow: 'auto'
                });
                $viewImg.find('li').remove();
                mySwiper.destroy(false);
            });
        }, 100);

        $viewImg.show();

        $body.css({
            overflow: 'hidden'
        });
    });

    if (imgLen > 3 && addFlagDom.find('.img-size').length < 1) {
        addFlagDom.append('<div class="img-size"><i class="pic-icon"></i>' + imgLen + '</div>');
    }
}
*/