/*-----------------------------------------------------------*/
/*copyright by 动力无限  www.btoe.cn*/
/*邮箱 btoe@btoe.cn*/
/*合作电话 400-0599-360*/
/*版权所有违者必究*/
/*-----------------------------------------------------------*/

/**
 * osslider 阳光轮播插件 v1.0
 * objs 传送对象
 */
function osslider(objs) {
    var that = this; //that获得this的作用域 后面都是that 防止干扰
    that.objs = objs; //将传送来的对象赋予this
    that.pnode = $(that.objs.pnode); //pnode轮播容器对象
    that.cnodes = that.pnode.find(that.objs.cnode); //cnodes轮播子节点对象集合
    that.cnodenums = that.cnodes.length; //预存轮播体的总数
    that.nownodekey = 0; //初始第一次默认显示节点为第一个
    that.width = that.cnodes.width();//得到容器的宽度
    that.height = that.cnodes.height();//得到容器的高度
    that.moveflag = true;//添加是否可以进行下一个轮播状态
    that.ispause = false;//是否暂停状态
    that.speednum = 0;//自动轮播的计数
    if (!that.objs.speed) {//添加默认时间
        that.objs.speed = 3000;
    }
    if (!that.objs.autoplay) {//添加默认自动播放
        that.objs.autoplay = true;
    }
    that.init = function() {//轮播的初始化
        that.pnode.addclass('osslider-main');
        that.pnode.css({//轮播容器的大小控制 启用bfc模式
            // 'width':that.width,
            // 'height':that.height,
            'overflow':'hidden',
            'position':'relative'
        });
        //创建上下条切换按钮
        var $togglebtn = $('<ul class="slider-btn"><li class="slider-btn-prev">prev</li><li class="slider-btn-next">next</li></ul>');
        $togglebtn.appendto(that.pnode);
        //为切换按钮绑定事件
        $(that.pnode).find('.slider-btn-prev').bind('click',function(){
            that.togglemove('prev');
        });
        $(that.pnode).find('.slider-btn-next').bind('click',function(){
            that.togglemove('next');
        });
        //为高亮导航创建节点
        var $navparent = $('<ul class="slider-nav"></ul>');
        $navparent.appendto(that.pnode);
        that.cnodes.each(function(index, el) {//采用遍历，添加前后顺序
            if (index==0) {//让第一个显示在前面 同时为每个轮播体创建对应nav点
                var indexnum = 20;
                $navparent.append('<li class="active">'+(index+1)+'</li>');
            } else {
                var indexnum = index;
                $navparent.append('<li>'+(index+1)+'</li>');
            }
            $(this).css({//为每一个轮播体添加样式和顺序
                // 'width':that.width + 'px',
                // 'height':that.height + 'px',
                'overflow':'hidden',
                'position':'absolute',
                'top':'0px',
                'left':'0px',
                'z-index':indexnum
            });
        });
        //为高亮导航节点绑定事件
        $(that.pnode).find('.slider-nav li').each(function(index, el) {
            $(this).bind('click',function(){
                that.togglemove(false,index);
            });
        });
        //判断是否自动播放
        if (that.objs.autoplay) {
            that.movetime();
        }
    }
    /**
     * 切换轮播后 轮播导航的高亮
     * @param {number} tid
     */
    that.slidernavtoggle = function(tid,nid) {
        $('.slider-nav li').each(function(index, el) {
            if (index==tid||index==nid) {
                $(this).toggleclass('active');
            }
        });
    }
    /**
     * 切换效果指令函数 避免bug
     * @param {string} command 'prev'|'next'
     * @param {number} tid 下一个要切换的tid
     * command与tid可以缺省一个，函数自动判断
     */
    that.togglemove = function(command,tid) {
        if (that.moveflag) {
            if (!command) {
                if (that.nownodekey==tid) {
                    return;
                } else if ((that.nownodekey==0&&tid==that.cnodenums-1)||tid<that.nownodekey) {
                    command = 'prev';
                } else {
                    command = 'next';
                }
            }
            if (!tid) {
                if(tid==0) {
                } else if (command=='prev') {
                    tid = that.nownodekey-1;
                    if (that.nownodekey==0) {
                        tid = that.cnodenums-1;
                    }
                } else {
                    tid = that.nownodekey+1;
                    if (that.nownodekey==that.cnodenums-1) {
                        tid = 0;
                    }
                }
            }
            /**
             * 随机函数
             */
            function random(min,max) {
                return math.floor(math.random()*(max+1)-min);
            }
            that.moveswitch(random(0,6),command,tid);
        }
    }
    /**
     * 根据分配的切换指令执行效果
     * @param {number} mid 动画指令
     * @param {string} command 'prev'|'next'
     * @param {number} tid 下一个要切换的tid
     */
    that.moveswitch = function(mid,command,tid) {
        nid = that.nownodekey;
        that.moveflag = false;
        that.speednum = 0;
        that.slidernavtoggle(nid,tid);
        switch (mid) {
            case 0:
                that.gridtop(tid,0);
                break;
            case 1:
                that.gridtop(tid,1);
                break;
            case 2:
                that.gridtop(tid,2);
                break;
            case 3:
                that.gridleft(tid,0);
                break;
            case 4:
                that.gridleft(tid,1);
                break;
            case 5:
                that.gridleft(tid,2);
                break;
            // case 6:
            //     that.celltoggle(tid);
            //     break;
            default:
                that.gridtop(tid);
                break;
        }
    }
    /**
     * 栅格上下切换
     */
    that.gridtop = function(tid,shownum) {
        that.cnodes[tid].style.zindex = 19;//让下个节点准备好
        var $backhtml = that.cnodes[that.nownodekey].innerhtml;//备份当前节点的内容
        that.cnodes[that.nownodekey].innerhtml = '';//清空节点，方便使用
        for (var i = 0; i < 12; i++) {//利用循环 创建出栅格节点
            var $cvnode = $('<div class="cvnode"></div>');
            $(that.cnodes[that.nownodekey]).append($cvnode);
            $cvnode.html($backhtml);
            $cvnode.css({//为每个栅格节点添加css样式
                'position':'absolute',
                'width':that.width/12+'px',
                'height':that.height+'px',
                'zindex':20,
                'overflow':'hidden',
                'left':that.width/12*i+'px',
                'top':'0'
            });
            $cvnode.find('*').first().css({
                'display':'block',
                'margin-left':that.width/-12*i+'px'
            });
        }

        //分配对应效果
        switch (shownum) {
            default:
            case 0:
                //添加动画过渡效果 张牙舞爪
                $(that.cnodes[that.nownodekey]).find('.cvnode').each(function(index,el){
                    if (index%2==0) {
                        var topnums = that.height;
                    } else {
                        var topnums = that.height*-1;
                    }
                    $(this).animate({
                        top:topnums + 'px'
                    },1500);
                });
                settimeout(function(){//动画结束后开始恢复原有状态
                    that.moveflag = true;
                    that.cnodes[tid].style.zindex = 20;
                    that.cnodes[that.nownodekey].style.zindex = that.nownodekey;
                    $(that.cnodes[that.nownodekey]).html($backhtml);//清除动画产生的多余内容
                    that.nownodekey = tid;//得到新的当前节点key
                },1500);
                break;
            case 1:
                //兼容到下面
            case 2:
                if (shownum==1) {
                    //添加动画过渡效果 下降
                    $(that.cnodes[that.nownodekey]).find('.cvnode').each(function(index,el){
                        var sp = 80*index;
                        $(this).animate({
                            top: $(this).height() + 'px'
                        },500+sp);
                    });
                } else {
                    //添加动画过渡效果 上升
                    $(that.cnodes[that.nownodekey]).find('.cvnode').each(function(index,el){
                        var sp = 80*index;
                        $(this).animate({
                            top: $(this).height()*-1 + 'px'
                        },500+sp);
                    });
                }
                settimeout(function(){//动画结束后开始恢复原有状态
                    that.moveflag = true;
                    that.cnodes[tid].style.zindex = 20;
                    that.cnodes[that.nownodekey].style.zindex = that.nownodekey;
                    $(that.cnodes[that.nownodekey]).html($backhtml);//清除动画产生的多余内容
                    that.nownodekey = tid;//得到新的当前节点key
                },1380);
                break;
        }
    }

    /**
     * 栅格左右张牙舞爪切换
     */
    that.gridleft = function(tid,shownum) {
        that.cnodes[tid].style.zindex = 19;//让下个节点准备好
        var $backhtml = that.cnodes[that.nownodekey].innerhtml;//备份当前节点的内容
        that.cnodes[that.nownodekey].innerhtml = '';//清空节点，方便使用
        for (var i = 0;i<12;i++) {//利用循环 创建出栅格节点
            var $cvnode = $('<div class="cvnode"></div>');
            $(that.cnodes[that.nownodekey]).append($cvnode);
            $cvnode.html($backhtml);
            $cvnode.css({//为每个栅格节点添加css样式
                'position':'absolute',
                'width':that.width+'px',
                'height':that.height/12+'px',
                'zindex':20,
                'overflow':'hidden',
                'left':'0',
                'top':that.height/12*i+'px',
            });
            $cvnode.find('*').first().css({
                'display':'block',
                'margin-top':that.height/-12*i+'px'
            });
        }
        switch (shownum) {
            default:
            case 0:
                //添加动画过渡效果 张牙舞爪
                $(that.cnodes[that.nownodekey]).find('.cvnode').each(function(index,el){
                    if (index%2==0) {
                        var leftnums = that.width;
                    } else {
                        var leftnums = that.width*-1;
                    }
                    $(this).animate({
                        'left':leftnums + 'px'
                    },1500);
                });
                break;
            case 1:
            case 2:
                if (shownum==1) {
                    //添加动画过渡效果 向左
                    $(that.cnodes[that.nownodekey]).find('.cvnode').each(function(index,el){
                        var sp = 80*index;
                        $(this).animate({
                            'left':that.width*-1 + 'px'
                        },620+sp);
                    });
                } else {
                    //添加动画过渡效果 向右
                    $(that.cnodes[that.nownodekey]).find('.cvnode').each(function(index,el){
                        var sp = 80*index;
                        $(this).animate({
                            'left':that.width + 'px'
                        },620+sp);
                    });
                }
                break;
        }
        settimeout(function(){//动画结束后开始恢复原有状态
            that.moveflag = true;
            that.cnodes[tid].style.zindex = 20;
            that.cnodes[that.nownodekey].style.zindex = that.nownodekey;
            $(that.cnodes[that.nownodekey]).html($backhtml);//清除动画产生的多余内容
            that.nownodekey = tid;//得到新的当前节点key
        },1500);
    }

    //格子切换效果
    that.celltoggle = function(tid) {
        that.cnodes[tid].style.zindex = 19;//让下个节点准备好
        var $backhtml = that.cnodes[that.nownodekey].innerhtml;//备份当前节点的内容
        that.cnodes[that.nownodekey].innerhtml = '';//清空节点，方便使用
        for (var i = 0;i<20;i++) {//利用循环 创建出栅格节点
            if (i<5) {//行数判断
                var rows = 0;
            } else if (i<10) {
                var rows = 1;
            } else if (i<15) {
                var rows = 2;
            } else {
                var rows = 3;
            }
            var $cvnode = $('<div class="cvnode"></div>');
            $(that.cnodes[that.nownodekey]).append($cvnode);
            $cvnode.html($backhtml);
            $cvnode.css({//为每个栅格节点添加css样式
                'position':'absolute',
                'width':that.width/5+'px',
                'height':that.height/4+'px',
                'zindex':20,
                'overflow':'hidden',
                'left':that.width/5*(i%5)+'px',
                'top':that.height/4*rows+'px',
            });
            $cvnode.find('*').first().css({
                'display':'block',
                'margin-left':that.width/-5*(i%5)+'px',
                'margin-top':that.height/-4*rows+'px',
            });
        }
        //添加动画过渡效果
        $(that.cnodes[that.nownodekey]).find('.cvnode').each(function(index,el){
            if (index%2==0) {
                $(this).find('*').first().animate({
                    "margin-left": $(this).width() + 'px'
                }, 500);
            }
        });
        settimeout(function(){
            $(that.cnodes[that.nownodekey]).find('.cvnode').each(function(index,el){
                if (index%1==0) {
                    $(this).find('*').first().animate({
                        "margin-left": $(this).width() + 'px'
                    }, 500);
                }
            });
        },600);
        settimeout(function(){//动画结束后开始恢复原有状态
            that.moveflag = true;
            that.cnodes[tid].style.zindex = 20;
            that.cnodes[that.nownodekey].style.zindex = that.nownodekey;
            $(that.cnodes[that.nownodekey]).html($backhtml);//清除动画产生的多余内容
            that.nownodekey = tid;//得到新的当前节点key
        },1100);
    }

    //自动播放控制方法
    that.movetime = function() {
        settimeout(function(){
            if (that.moveflag) {
                that.speednum++;
                if (that.speednum>=that.objs.speed/100) {
                    that.speednum = 0;
                    that.togglemove('next');
                }
            }
            if (!that.ispause) {
                settimeout(arguments.callee,100);
            }
        },100);
    }

    that.init();
}

$(document).ready(function(){
    var bannerslider = new osslider({ //开始创建效果
        pnode:'.slider', //容器的选择器 必填
        cnode:'.slider-main li', //轮播体的选择器 必填
        speed:5000, //速度 默认3000 可不填写
        autoplay:true //是否自动播放 默认true 可不填写
    });
}); 


// $(function () {
//     var stop = 0;
//     var y = $(".banner").offset().top;
//     $(window).scroll(function () {
//         stop = $(this).scrolltop();
//         if (stop >= y) {
//             $(".banner .slider").css({"position":"absolute","transform":"translate(0px,"+ (stop-y)/2 +"px)"});
//         } else {
//             $(".banner .slider").css({"position":"relative","transform":"translate(0px,0px"});
//         }
//     });
// });