// ==S 页面轮播器，可单个,多个样式切换
// 
// 调用方式，现在下面的是默认调用方式
// CAROU({
//     oCon : '.rotator-con',              //外层，包涵整个轮播器的外层
//     oul : '.rotator-ul',                //每个里的父级
    // oList : '.rotator-list',            //切换的每一个li
//     oPrev : '.rotator-prev',            //左按钮箭头
//     oNext : '.rotator-next',            //右按钮箭头
//     oPoint : '.rotator-point',          //每个小点点
//     showNum : 1                         //每次轮播，需要轮播几个
// });
var CAROU = function (options){
     new Carousel(options)
}

var Carousel = function (options){

    //默认参数
    this.defaluts = {
        oCon : '.rotator-con',
        oul : '.rotator-ul',
        oList : '.rotator-list',
        oPrev : '.rotator-prev',
        oNext : '.rotator-next',
        oPoint : '.rotator-point',
        showNum : 1,
        winWidthBanRotator : 0
    };

    this._language = $('html').attr('lang');

    //使用jQuery.extent覆盖插件默认参数
    this.opts = $.extend({}, this.defaluts, options);

    var winW = $(window).width();

    if (winW > this.opts.winWidthBanRotator) {
        // 获取对象
        this.oCon = $(this.opts.oCon);
        this.oul = $(this.opts.oul);
        this.oList = $(this.opts.oList);
        this.oPrev = $(this.opts.oPrev);
        this.oNext = $(this.opts.oNext);
        this.oPoint = $(this.opts.oPoint);
        this.oPointChild = '';

        // 设置变量
        _this = this;
        this.topic_index = 0;
        this.con_w;
        this.li_point;

        $(window).resize(function(){
            _this.init();
        });
        _this.init();
        _this.clocked();
    };
};

Carousel.prototype.init = function(){

    // 初始化
    var winW = $(window).width();
    var li_w = '';
    var li_length = this.oList.length;

    this.oul.css('marginLeft',0);
    this.oPrev.css('display','none');
    this.oNext.css('display','block');

    // 设置变量
    this.topic_index = 0;
    this.con_w = this.oCon.width();

    // 获取ul，li的宽度
    if (this.opts.showNum == 4) {
        if (winW > 1366) {
            li_w = this.con_w/4;
        }else if (winW > 1024) {
            li_w = this.con_w/3;
        }else if (winW > 480) {
            li_w = this.con_w/2;
        }else {
            li_w = this.con_w/1;
        }
    };
    if (this.opts.showNum == 3) {
        if (winW > 1200) {
            li_w = this.con_w/3;
        }else if (winW > 768) {
            li_w = this.con_w/2;
        }else {
            li_w = this.con_w/1;
        }
    };
    if (this.opts.showNum == 2) {
        if (winW > 1024) {
            li_w = this.con_w/2;
        }else {
            li_w = this.con_w/1;
        }
    };
    if (this.opts.showNum == 1) {
        li_w = this.con_w/1;
    };

    //获取点数量并添加到页面
    this.li_point = li_length/(this.con_w/li_w),
    point_span= '';

    if (this.li_point <= 1) {
        this.oPrev.hide();
        this.oNext.hide();
        this.oPoint.hide();
    }else{
        for (var i = 0; i < Math.ceil(this.li_point); i++) {
            point_span += '<span></span>';
        };
        this.oPoint.empty().append(point_span);
    }

    // 获取点的对象
    this.oPointChild = $(this.opts.oPoint).find('span');
    this.oPointChild.eq(0).addClass('hover');

    //设置ul和li的width
    this.oList.width(li_w);
    this.oul.width(li_w*li_length);

}

Carousel.prototype.clocked = function(){
    var _this = this;
    this.oNext.on('click',function(){
        _this.oPrev.css('display','block');
        _this.topic_index ++;
        animed(_this.topic_index);
        //懒加载显示对应图片
        for (var i=_this.topic_index*_this.opts.showNum; i < (_this.topic_index+1)*_this.opts.showNum; i++){
            _this.oul.find("img").eq(i).trigger("appear");
        }
    })

    this.oPrev.on('click',function(){  
        _this.oNext.css('display','block');
        _this.topic_index --;
        animed(_this.topic_index);
    })
    this.oPoint.on('click','span',function(){
        _this.oPrev.css('display','block');
        _this.oNext.css('display','block');
        _this.topic_index = $(this).index();
        animed(_this.topic_index);
        //懒加载显示对应图片
        for (var i=_this.topic_index*_this.showNum; i < (_this.topic_index+1)*_this.showNum; i++){
            _this.oul.find("img").eq(i).trigger("appear");
        }
    })


    if (!navigator.userAgent.match('MSIE') && this.oCon.length > 0){
        var mouse = captureTouch(this.oCon[0]);
        var x,y,L,T;
        this.oCon[0].addEventListener('touchstart', function () {
            L = 0;
            T = 0;
            x = mouse.x;
            y = mouse.y;
        }, false);
        this.oCon[0].addEventListener('touchmove', function () {
            L = mouse.x - x;
            T = mouse.y - y;
            _this.oCon.css('left', L);
        }, false);
        this.oCon[0].addEventListener('touchend', function () {
            if (L<-20) {
                _this.oPrev.css('display','block');
                _this.topic_index ++;
                if (_this.topic_index >= _this.li_point-1) {
                    _this.topic_index = _this.li_point-1;
                    _this.oNext.css('display','none');
                };
                _this.oul.animate({'marginLeft': -_this.con_w * _this.topic_index});
                _this.oPoint.removeClass('hover').eq(Math.ceil(_this.topic_index)).addClass('hover');
            }else if (L > 20) {
                _this.oNext.css('display','block');
                _this.topic_index --;
                if (_this.topic_index <= 0) {
                    _this.topic_index = 0;
                    _this.oPrev.css('display','none');
                };
                _this.oul.animate({'marginLeft': -_this.con_w * _this.topic_index});
                _this.oPoint.removeClass('hover').eq(Math.ceil(_this.topic_index)).addClass('hover');
            };
            return false;
        }, false);
    }

    function animed(num){
        if (num >= _this.li_point-1) {
            num = _this.li_point-1;
            _this.oNext.css('display','none');
            _this.topic_index = num;
        }else if (num <= 0) {
            num = 0;
            _this.oPrev.css('display','none');
            _this.topic_index = num;
        };
        if (_this._language == "ar-SA") {
            _this.oul.animate({'marginRight': -_this.con_w * num});
        }else{
            _this.oul.animate({'marginLeft': -_this.con_w * num});
        };
        _this.oPointChild.removeClass('hover').eq(Math.ceil(num)).addClass('hover');
        _this.topic_index = num;
    }

    //计算触摸时的位置
    function captureTouch(element) {
        var x, y;
        var touch = {x: null, y: null, isPressed: false, event: null},
            body_scrollLeft = document.body.scrollLeft,
            element_scrollLeft = document.documentElement.scrollLeft,
            body_scrollTop = document.body.scrollTop,
            element_scrollTop = document.documentElement.scrollTop,
            offsetLeft = element.offsetLeft,
            offsetTop = element.offsetTop;

        element.addEventListener('touchstart', function (event) {
            touch_event = event.touches[0]; //first touch
            if (touch_event.pageX || touch_event.pageY) {
                x = touch_event.pageX;
                y = touch_event.pageY;
            } else {
                x = touch_event.clientX + body_scrollLeft + element_scrollLeft;
                y = touch_event.clientY + body_scrollTop + element_scrollTop;
            }
            touch.x = x;
            touch.y = y;
            touch.isPressed = true;
            touch.event = event;
        }, false);

        element.addEventListener('touchend', function (event) {
            touch.isPressed = false;
            touch.x = null;
            touch.y = null;
            touch.event = event;
        }, false);

        element.addEventListener('touchmove', function (event) {
            touch_event = event.touches[0]; //first touch

            if (touch_event.pageX || touch_event.pageY) {
                x = touch_event.pageX;
                y = touch_event.pageY;
            } else {
                x = touch_event.clientX + body_scrollLeft + element_scrollLeft;
                y = touch_event.clientY + body_scrollTop + element_scrollTop;
            }
            x -= offsetLeft;
            y -= offsetTop;
            touch.x = x;
            touch.y = y;

            touch.event = event;
        }, false);

        return touch;
    } 
}