$(function() {
    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal',
        loop: true,

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination'
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar'
        }
    });

    $.scrollify({
        section:".panel",
        interstitialSection:"#layout-page-header,#layout-page-footer",
        scrollbars:false,
        before:function(i,panels) {
            var ref = panels[i].attr("data-section-name");
            $(".pagination .active").removeClass("active");
            $(".pagination").find("a[href=\"#" + ref + "\"]").addClass("active");
            $('.swiper-container').height('100%');
            $('section.panel div.container').each(function(elem){
                $(this).css({position: 'relative', top: ($(window).height() -$(this).height()) / 2 });
            });
        },
        afterRender:function() {
         var pagination = "<div class=\"pagination\">";
         var activeClass = "";
         $(".panel").each(function(i) {
             activeClass = "";
             if(i===0) {
                 activeClass = "active";
             }
             pagination += "<a class=\"" + activeClass + "\" href=\"#" + $(this).attr("data-section-name") + "\"><span class=\"hover-text\">" + $(this).attr("data-section-name") + "</span></a>";
         });

         pagination += "</div>";

         $(".home").append(pagination);
         /*

         Tip: The two click events below are the same:

         $(".pagination a").on("click",function() {
           $.scrollify.move($(this).attr("href"));
         });

         */
         $(".pagination a").on("click",$.scrollify.move);
        }
    });

    $('section.panel div.container').each(function(elem){
        $(this).css({position: 'relative', top: ($(window).height() -$(this).height()) / 2 });
    });
 });