var fade=(function () {
    function Carsoule(el,options) {
        this.$el=$(el);
        this.$opts=options;
        this.$list=this.$el.find(".carousel-list");
        this.$next=this.$el.find("#next-btn");
        this.$prev=this.$el.find("#prev-btn");
        this.$item=this.$el.find(".carousel-icons .item");
        this.$timer=null;
    }

    var defualts={
        time:3000,
        i:0,
        fading:false,
        firstLoad:false
    };

    Carsoule.prototype.init=function () {
        this.settingDisplay();
        this.nextBtn();
        this.prevBtn();
        this.changeItem();
        this.settingTimer(this);
    };

    Carsoule.prototype.nextBtn=function () {
        var self=this;
        this.$next.on("click",function () {
            self.$opts.fading=true;
            self.timerFn(self);
        });
        self.$opts.fading=false;
    };

    Carsoule.prototype.timerFn=function (self) {
        if(self.$opts.i>=self.$list.find("li").length-1){
            self.$opts.i=0;
        }else{
            self.$opts.i++;
        }
        self.display(self,self.$opts.i);
    };

    Carsoule.prototype.prevBtn=function () {
        var self=this;
        this.$prev.on("click",function () {
            if(self.$opts.i<=0){
                self.$opts.i=self.$list.find("li").length-1;
            }else{
                self.$opts.i--;
            }
            self.display(self,self.$opts.i);
        })
    };

    Carsoule.prototype.changeItem=function () {
        var self=this;
        this.$item.find("li").on("mouseover",function () {
            var index=$(this).index();
            self.$opts.i=index;
            self.display(self,self.$opts.i);
        })
    };

    Carsoule.prototype.settingDisplay=function () {
        this.$list.find("li").eq(0).show().siblings("li").hide();
    };

    Carsoule.prototype.display=function ($self,$index) {
        $self.$list.find("li").eq($index).fadeIn("slow").siblings("li").fadeOut("slow");
        $self.$item.find("li").eq($index).addClass("active").siblings().removeClass("active");
    };

    var init=function (el,options) {
        var opt=$.extend({},defualts,options);
        new Carsoule(el,options).init();
    };

    Carsoule.prototype.settingTimer=function(){
        var self=this;
        clearInterval(this.$timer);
        this.$timer=setInterval(function () {
            self.timerFn(self);
        },self.$opts.time);
    }

    return{
        init:init
    }

})();

fade.init("#carousel",{

          time:3000,
          i:0
      });