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

var $ = require('yoho-jquery'),
    Swiper = require('yoho-swiper'),
    lazyLoad = require('yoho-jquery-lazyload'),
    ellipsis = require('yoho-mlellipsis');

var $window = $(window),
    $starMain = $('.star-main'),
    $bannerTop = $('.banner-top'),
    $starArticle = $('.star-article'),
    $avatarWrap = $('.avatar-wrap'),
    bannerLen = $avatarWrap.find('.swiper-slide').length,
    avatarTop = parseInt($starMain.find('.avatar').css('margin-top'), 10),
    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 res, avatarSwiper, avatarSwiperClone, $avatarClone;

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

require('../common');

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

lazyLoad($('img.lazy'));
ellipsis.init();

// 限制标题字数
function txtLimit(dom, item1, item2) {
    var $title = dom.find(item1),
        $cont = dom.find(item2);

    $title[0].mlellipsis(2);
    $cont[0].mlellipsis(3);
}

// 设置默认头像
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) {
    var 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 cloneAvatarInit() {
    if ($window.scrollTop() >= $bannerTop.height() + avatarTop) {
        $avatarClone.show();

        if (!avatarSwiperClone) {
            avatarSwiperClone = new Swiper('.avatar-0', {
                loop: true,
                initialSlide: $('.avatar-1').find('.swiper-slide-active').index() % bannerLen,
                centeredSlides: true,
                slidesPerView: 'auto',
                loopedSlides: bannerLen,
                spaceBetween: 10,
                slidesOffsetBefore: -swiperNum,
                watchSlidesProgress: true,
                watchSlidesVisibility: true,
                onInit: function() {
                    $('.avatar-0 li').on('click', function() {
                        res = bindAvatar($(this));
                        return res;
                    });
                }
            });

            avatarSwiperClone.params.control = avatarSwiper;
            avatarSwiper.params.control = avatarSwiperClone;
        }
    } else {
        $avatarClone.hide();
    }
}

// 初始化首页各种效果
function initAction() {
    $starMain.before($('.avatar-swiper').clone().addClass('avatar-clone').hide());
    $avatarClone = $('.avatar-clone');

    // 限制标题字数
    $('.cont-area').each(function() {
        txtLimit($(this), '.title', '.cont-txt');
    });

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

    // 明星头像 swiper 初始化
    if (bannerLen > 1) {
        avatarSwiper = new Swiper('.avatar-1', {
            loop: true,
            initialSlide: 2,
            centeredSlides: true,
            slidesPerView: 'auto',
            loopedSlides: bannerLen,
            spaceBetween: 10,
            slidesOffsetBefore: -swiperNum,
            watchSlidesProgress: true,
            watchSlidesVisibility: true,
            onInit: function() {
                $('.avatar-1 li').on('click', 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) {
        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));
    });

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

    cloneAvatarInit();
}

initAction();

$window.scroll(function() {
    cloneAvatarInit();
});

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

// 明星动态文章图片相关操作
/*
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>');
    }
}
*/