/*  
  * jQuery UI MeltSlider   Ver 1.2 
  * 
  * 
  * (it doesn't really melt)
  * 
  * 
  * Depends:
  *   jquery.ui.core.js
  *   jquery.ui.widget.js
  *   jquery.easing.1.3.js
  *   
  * options
  *     slideClass: the class that slide elements have
  *     speed: speed of rotation
  *     btnKey: this is the key of the data- attribute. "data-"+btnKey will compelte the 
  *     index: first index of the panel
  *     autoRotate: if you set this to true, it will start auto rotating
  *     dur: durationg of the auto rotation
  *     rotateCoutns: if this is set to 3 it will auto rotate only 3 times.
  *     direction: if this is h, the slider slides horizontally. If not, it will slides vertically
  *     
  *  CSS needs to be applied to make this work properly.
  * 
  *  1.2
  *  using the "data-" attribute for detecting the button index. no more class
  *
  */
 
 
 (function( $, undefined ) {
 
  $.widget("ui.meltSlider", {
   // default options
    options: {
      slideSelector: "li",
      index: 0,
      autoRotate: false,
      speed: 400,
      dur: 3000,
      rotateCounts: null,
      direction: "h",
      arrowQueuing: true,
      activeClass: "active"
    },
   
    timer: null,
   
    paused: null,
   
    _create: function() {
      this._initDom();
      this._initEvents();
    },
   
    _initDom: function() {
     
      var opt = this.options,
          selector = "",
          _this = this;

      this.direction = (opt.direction=='h'? "left" : "top");
       
      this.animating = false;
       
      //assignig index
      this.index = opt.index;
      
      //adding class to the main element : ver 1.1
      this.element.addClass("ui-melt-slider");
      
      //finding elements for slides
     // selector = opt.slideClass? "."+opt.slideClass : opt.slideSelector;
      this.slides = $(opt.slideSelector,this.element);
      
      //finding the parent of slides ver 1.1
      this.container = this.slides.parent().css({
        "position":"absolute",
        "margin": 0,
        "padding": 0
      });     
      
      //getting the width of the slide
      this.distanceToMove =  opt.direction=='h'? this.slides.outerWidth() : this.slides.outerHeight();

      //showing all slides
      this.slides.show();
     
      //positioning slides to horizontally 
      this.slides.each(function(i){
        
        $(this).css({
          "position": "absolute",
          "top": 0,
          "left": 0,
          "display": "block"
        })
        
        $(this).css(_this.direction, _this.distanceToMove * i);
        
      })
     
      this.container.css(this.direction,-1*this.index*this.distanceToMove);
  
      if(opt.btnKey)$("*[data-"+opt.btnKey+"='"+this.index+"']").addClass(opt.activeClass);
    
      if(opt.activeClassTakerKey)$("*[data-"+opt.activeClassTakerKey+"='"+this.index+"']").addClass(opt.activeClass);
    
      if(this.options.autoRotate && this.options.dur) this._startRotation();
     
    },
   
    goToSlide: function(i,imidi) {

     var imidi = imidi? imidi : false;
   
      if(i===this.index || i<0 || i>this.slides.length-1) return; 
   
      var _this = this,
          animationCfg = {},
          opt = this.options;

      //setting the direction and distance of how it animates     
      animationCfg[this.direction] = -1*i*this.distanceToMove;
      
      _this.element.trigger("MeltSlider:animationStart",i);
      
      
      function onComplete(){
        
        if(opt.btnKey){ 
          $("*[data-"+opt.btnKey+"='"+_this.index+"']").removeClass(opt.activeClass);
          $("*[data-"+opt.btnKey+"='"+i+"']").addClass(opt.activeClass);
          
        }

        if(opt.activeClassTakerKey){ 
          $("*[data-"+opt.activeClassTakerKey+"='"+_this.index+"']").removeClass(opt.activeClass);
          $("*[data-"+opt.activeClassTakerKey+"='"+i+"']").addClass(opt.activeClass);
        }

      

        _this.index = i;
    
        _this.animating = false;
        
        _this.element.trigger("MeltSlider:animationComplete",_this.index);
        
      }
      
      
      
      if(imidi){
        this.container.css(animationCfg);
        onComplete();
        return;
      }
      
      _this.animating = true;
      
      this.container.animate(
      
        animationCfg,
         
        this.options.speed,
        
        "easeInOutCubic",
        
        onComplete
      
      )     
     

    },
   
    _initEvents: function() {
      
      var _this = this,
          opt = this.options;

     
      if(opt.btnKey){
        
        $("*[data-"+opt.btnKey+"]").live({
          
          "click": function(ev){ev.preventDefault();},
          
          "mousedown": function(){
            
            if(!_this.options.arrowQueuing && _this.animating) return;
            var k = opt.btnKey;
            _this.goToSlide($(this).data(opt.btnKey));
            if(_this.options.autoRotate) clearInterval(_this.timer);
           
          }
        })
        
      }

      
      this.slides.bind({
        "mouseover": function(){
          _this.paused = true;
        },
        "mouseout": function(){
          _this.paused = false;
        }
      })
      
    },
    
    _startRotation: function(){
      
      var i = 0,
          _this = this;
          
      this.timer = setInterval(function(){
        //if it's paused, ignore
        if(_this.paused) return;
        
        //if rotateCounts is defined and i is the rotateCoutns, stop the timer
        if(_this.options.rotateCounts && _this.options.rotateCounts == ++i) clearInterval(_this.timer);
        
        //finding the next index
        var nextIndex = _this.index+1>_this.slides.length-1? 0 : _this.index+1;
        _this.goToSlide(nextIndex);
        
      },_this.options.dur);
      
    },
    
    getIndex: function(){
      return this.index;
    },
    
    destroy: function() {
        $.Widget.prototype.destroy.apply(this, arguments); // default destroy
        // now do other stuff particular to this widget
    }
  });
 
})(jQuery);