// $Id$

/**
 * @author Henri MEDOT
 * @version last revision 2009-12-01
 */

$.fn.extend({
  scrollbarPaper: function() {
    this.each(function(i) {
      var $this = $(this);
      var paper = $this.data('paper');
      if (paper == null) {

        var barWidth = 25;


        $this.before('<div class="scrollbarpaper-container"><a href="#" class="scrollbarpaper-up"></a><div class="scrollbarpaper-track"><div class="scrollbarpaper-drag"><div class="scrollbarpaper-drag-top"></div><div class="scrollbarpaper-drag-bottom"></div></div></div><a href="#" class="scrollbarpaper-down"></a></div>');
        paper = $this.prev();
        $this.append('<div style="clear:both;"></div>');
        var content = $('> :first', $this);
        content.css('overflow', 'hidden');

        $this.data('barWidth',   barWidth);
        $this.data('paper',      paper);
        $this.data('up', 	     $('.scrollbarpaper-up', paper));
        $this.data('down',  	 $('.scrollbarpaper-down', paper));
        $this.data('track',      $('.scrollbarpaper-track', paper));
        $this.data('drag',       $('.scrollbarpaper-drag', paper));
        $this.data('dragTop',    $('.scrollbarpaper-drag-top', paper));
        $this.data('dragBottom', $('.scrollbarpaper-drag-bottom', paper));
        $this.data('content',    content);
        $this.data('clearer',    $('> :last', $this));
        paper.hide();
      }


      var barWidth =   $this.data('barWidth');
      var track =      $this.data('track');
      var up = 		   $this.data('up');
      var down = 	   $this.data('down');
      var drag =       $this.data('drag');
      var dragTop =    $this.data('dragTop');
      var dragBottom = $this.data('dragBottom');
      var content =    $this.data('content');
      var clearer =    $this.data('clearer');
	  var mouseIsOver =  false;
	  var mouseIsDragging =  false;
	  var delay;
	  var animW = 7;
	  var animX = 9;
	  var animWTo = 7;
	  var animXTo = 9;
	  var animButtonUp = 14;
	  var animButtonUpTo = 14;
	  var animButtonDown = -9;
	  var animButtonDownTo = -9;
	  	  
      var contentHeight = clearer.position().top - content.position().top;
      $this.data('height', $this.height());
      $this.data('contentHeight', contentHeight);
      $this.data('offset', $this.offset());

      $this.unbind();
      var ratio = $this.height() / contentHeight;
      if (ratio < 1) {


        paper.show();
        
        content.addClass('scrollbarpaper-visible');
        content.width($this.width() - content.innerWidth() + content.width() - barWidth);
        // paper.height($this.height());
        var offset = $this.offset();
        // paper.css('left', (offset.left + $this.innerWidth() - paper.width()) + 'px').css('top', offset.top);
       
		
		// paper.css('left', (offset.left + $this.innerWidth() - paper.width()) + 'px').css('top', offset.top);
        var dragHeight = Math.max(Math.round($this.height() * ratio), dragTop.height() + dragBottom.height());
        drag.height(dragHeight);
        var updateDragTop = function() {
        	drag.css('top', Math.min(Math.round($this.scrollTop() * ratio), $this.height() - dragHeight) + 'px');
        };
        updateDragTop();
        
        $this.scroll(function(event) {
          updateDragTop();
        });

        var unbindMousemove = function() {
          $('html').unbind('mousemove.scrollbarpaper');
        };
        
        var updateAnim = function() {
        	
        	animW += 0.2 * (animWTo - animW);
        	animX += 0.2 * (animXTo - animX);
        	var newX = Math.floor(animX);
        	var newW = Math.floor(animW);

        	track.css('left', newX + 'px');
        	track.css('width', newW + 'px');
        	
        	up.css('left', newX + 'px');
        	up.css('width', newW + 'px');
        	
        	down.css('left', newX + 'px');
        	down.css('width', newW + 'px');
        	
        	animButtonUp += 0.2 * (animButtonUpTo - animButtonUp);
        	animButtonDown += 0.2 * (animButtonDownTo - animButtonDown);
        	var newBUX = Math.floor(animButtonUp);
        	var newBDX = Math.floor(animButtonDown);
        	
        	up.css('background-position', '2px '+ newBUX+'px');
        	down.css('background-position', '2px '+ newBDX+'px');
        	
        	
    
        	
 			setTimeout(updateAnim, 10);
        };
         
        var onMouseOverAnim = function() {
        	animWTo = 16;
        	animXTo = 4;
        	delay = setTimeout(onMouseOverButtons, 100);
        	
        };
        
        var onMouseOverButtons = function() {
        	animButtonUpTo = 0;
        	animButtonDownTo = 5;
        }
        
        var onMouseOutButtons = function() {
        	if(mouseIsDragging == false && mouseIsOver == false) {
        		animButtonUpTo = 14;
        		animButtonDownTo = -9;
        	}
        	clearTimeout(delay);
        	delay = setTimeout(onMouseOutAnim, 120);
        }
        
        var onMouseOutAnim = function() {
        	if(mouseIsDragging == false && mouseIsOver == false) {
        		animWTo = 7;
        		animXTo = 9;
        	}
        };
                        
        drag.mousedown(function(event) {
          mouseIsDragging = true;
          unbindMousemove();
          var offsetTop = event.pageY - drag.offset().top;
          $('html').bind('mousemove.scrollbarpaper', function(event) {
            $this.scrollTop((event.pageY - $this.offset().top - offsetTop) / ratio);
            return false;
          }).mouseup(function(event) {
          	mouseIsDragging = false;
          	unbindMousemove();
        	clearTimeout(delay);
        	delay = setTimeout(onMouseOutButtons, 100);
          });
          return false;
        });  

        paper.mouseover(function(event) {
        	clearTimeout(delay);
        	mouseIsOver = true; 
        	onMouseOverAnim();
        });
        
        paper.mouseout(function(event) {
        	mouseIsOver = false; 
        	clearTimeout(delay);
        	delay = setTimeout(onMouseOutButtons, 100);
        	
        }); 
        
 		updateAnim();
 		 
      }
      else {
        $this.unbind();
        paper.hide();
        content.removeClass('scrollbarpaper-visible');
        content.width($this.width() - content.innerWidth() + content.width());
      }
		
	
	 
	  
      var setTimeout2 = function() {
        window.setTimeout(function() {
          var offset = $this.offset();
          var dataOffset = $this.data('offset');
          if (($this.height() != $this.data('height'))
           || (clearer.position().top - content.position().top != $this.data('contentHeight'))
           || (offset.top != dataOffset.top)
           || (offset.left != dataOffset.left)) {
            $this.scrollbarPaper();
          }
          else {
            setTimeout2();
          }
        }, 200);
      };
      setTimeout2();
    });
  }
});