/* jquery.nc.slider.js */

(function($) {
   var methods;
   methods = {
      valueFromMouseX : function(mouseX) {
         var $this = $(this);
         var speed;
         var sliderVal = Math.floor ( mouseX * 100 / $this.width() );
         speed = (sliderVal - 50)*2 ;
         return speed;
      },
      setHandleAction : function(e) {
         var $this = $(this);
         var offSet = $($this).offset();
//         $.log('$this.offset(): '+ offSet.left)

         var elemPos = $this.position();
         var mouseX =   e.pageX - offSet.left;
//         $.log('mouseX: '+mouseX)

         var animVal  = methods.valueFromMouseX.call($this, mouseX );         // value between -100 and 100
//         $.log('place hadle : animVal: ' + animVal)
         // keep the handle restraind on the left and right
         //         if(mouseX < ( $this.find('#media-scroller-slider-handle').outerWidth()/2) ||
         //            mouseX > $this.outerWidth() -  ( $this.find('#media-scroller-slider-handle').outerWidth()/2) ){
         //               $.log('place hadle 0')
         //            return;
         //         }
         if(mouseX < 0 ||
            mouseX > $this.outerWidth() ){
//            $.log('place hadle 0')
            return;
         }
         // center the handle, snap to 0 if between -10 and 10
         if(animVal < 10 && animVal > -10){
//            $.log('place hadle 1')
            methods.centerHandle.call($this);
            animVal = 0;
         }
         // place the handle on the slide
         else{
//            $.log('place hadle 3 : ' + ( mouseX - ( $this.find('#media-scroller-slider-handle').outerWidth()/2)) )
            var hPos = 0;
            hPos = mouseX - ( $this.find('#media-scroller-slider-handle').outerWidth()/2)
//            $.log('hpos: ' + ( mouseX - ( $this.find('#media-scroller-slider-handle').outerWidth()/2)) )

            if(hPos < 0){
               hPos = 0;
            }
            if(hPos > $this.width()- ( $this.find('#media-scroller-slider-handle').outerWidth()) ){
               
               hPos = $this.width()- ( $this.find('#media-scroller-slider-handle').outerWidth());
            }

             $this.find('#media-scroller-slider-handle').css('left', hPos );
         }
         $this.trigger('sliding', animVal);
      },
      bindSliderMouseMove : function(){
         var $this = $(this);
         $('HTML').bind("mousedown",function (e) {
//            $.log('mouse down')
            if(e.target !== $this[0] && e.target !==  $this.find('#media-scroller-slider-handle')[0]){
//               $.log('mouse down 2')
               return;
            }
            methods.setHandleAction.call($this, e);
            $('HTML').bind("mousemove", function(e){
               methods.setHandleAction.call($this, e);
            });
            return false;
         });
         $('HTML').bind("mouseup",function (e) {
            // center handle and stop animation
            $this.trigger('stop', 0)
            //methods.animEngine.call($this, 0);
            methods.centerHandle.call($this);
            $('HTML').unbind("mousemove")
         });
      },
      centerHandle : function(){
         var $this = $(this);
         var centerPoint = ($this.outerWidth()/2 ) - ( $this.find('#media-scroller-slider-handle').outerWidth()/2) ;
          $this.find('#media-scroller-slider-handle').css('left', centerPoint ) ; // centerHandle
      }
   };
   $.fn.slider = function() {
      return this.each(function() {
         var $this = $(this)
         //$this.data('handle', $this.find('#media-scroller-slider-handle'));
         methods.centerHandle.call($this);
         methods.bindSliderMouseMove.call($this);
         $(window).resize(function() {
            methods.centerHandle.call($this);
         });
      // set the DOM element to the handle property
      //$this.data('handle',  $this.find('#media-scroller-slider-handle'));

      });
   };
}( jQuery ));