/**
 * created by yang on 2015/10/22.
 */


$(function () {

    var $banner = $('.banner'),
        $bannerlist = $('.banner-list'),
        $bannerli = $bannerlist.find('li'),
        $bannerdot = $('.banner-dot'),
        $bannerbtn = $('.banner-btn');

    var bannerl = $bannerli.length;
    var bannerindex = 0;
    var timer, derection = 1, delay = 7000;

    var initbanner = function () {


        var initbannerdot = function () {
            var dothtml = [];
            for (var i = 0; i < bannerl; i++) {
                i == 0 ? dothtml.push('<li class="on"></li>') : dothtml.push('<li></li>');
            }
            $bannerdot.find('ul').html(dothtml.join(''));
        };

        var initbtnevents = function () {

            $bannerbtn.on('click', function () {
                if ($(this).hasclass('banner-btn-prev')) {
                    showprevbanner();
                    timer && clearinterval(timer);
                    timer = setinterval(showprevbanner, delay);

                } else {
                    shownextbanner();
                    timer && clearinterval(timer);
                    timer = setinterval(shownextbanner, delay);
                }
            })
                .on('mouseenter', function () {
                    timer && clearinterval(timer);
                })
                .on('mouseleave', function () {
                    timer && clearinterval(timer);
                    timer = setinterval(derection ? shownextbanner : showprevbanner, delay);
                });

            $bannerdot.find('li').on('click', function () {
                var idx = $(this).index();
                bannerindex = idx;
                showbanner();
            }).on('mouseenter', function () {
                timer && clearinterval(timer);
            })
                .on('mouseleave', function () {
                    timer && clearinterval(timer);
                    timer = setinterval(derection ? shownextbanner : showprevbanner, delay);
                });

        };

        var showbanner = function () {

            $bannerlist.find('.banner-active').css({
                'z-index': 1
            }).removeclass('banner-active').stop(true, true).fadeout(2000).find('strong').stop(true, true).fadeout(300);

            $bannerli.eq(bannerindex).addclass('banner-active').css({
                'z-index': 2
            }).stop(true, true).fadein(1500, function () {
                $(this).find('strong').stop(true, true).fadein(300);
            });

            $bannerdot.find('li').removeclass('on').eq(bannerindex).addclass('on');
        };

        var shownextbanner = function () {
            derection = 1;
            if (bannerindex == $bannerli.length - 1) {
                bannerindex = 0;
            } else {
                bannerindex++;
            }
            showbanner(bannerindex);
        };

        var showprevbanner = function () {
            derection = 0;
            if (bannerindex == 0) {
                bannerindex = $bannerli.length - 1;
            } else {
                bannerindex--;
            }
            showbanner(bannerindex);
        };

        showbanner();
        initbannerdot();
        initbtnevents();

        timer = setinterval(shownextbanner, delay);

    };

    initbanner();

});