$(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 });
    });

    var video = document.querySelector('video')
        , container = document.querySelector('#video_silder');

    var setVideoDimensions = function () {
        var w = video.videoWidth
            , h = video.videoHeight;
        var videoRatio = (w / h).toFixed(2);

        var containerStyles = window.getComputedStyle(container)
            , minW = parseInt( containerStyles.getPropertyValue('width') )
            , minH = parseInt( containerStyles.getPropertyValue('height') );
        var widthRatio = minW / w
            , heightRatio = minH / h;

        if (widthRatio > heightRatio) {
            var newWidth = minW;
            var newHeight = Math.ceil( newWidth / videoRatio );
        }
        else {
            var newHeight = minH;
            var newWidth = Math.ceil( newHeight * videoRatio );
        }

        video.style.width = newWidth + 'px';
        video.style.height = newHeight + 'px';
    };

    video.addEventListener('loadedmetadata', setVideoDimensions, false);
    window.addEventListener('resize', setVideoDimensions, false);
 });