// scrollbar.js: let a nice looking scrollbar appear instead of the browser standard scrollbar;
// version 1.1, based on the famous Mootools :-))
// written 2007, 2009 by Sabine Weiss
// Warning: this script is _not_ meant to be generic; functionality depends on the individual layout
// and CSS of the HTML within which it is being used

window.addEvent('domready', function(){

	// override the overflow and positioning settings in case javascript is enabled
	
      var midCol = new Fx.Tween($('rightColumnW'));   
      midCol.set('overflow', 'hidden');
      
      var scro = new Fx.Tween($('scrollableRW'));
      scro.set('overflow-y','hidden');
      
      var up = new Fx.Tween($('up'));
      up.set('visibility','visible');
      
      var down = new Fx.Tween($('down'));
      down.set('visibility','visible');

      // initiate the scrollbar
	var scrollbar = new Element('div', {'id':'scroll'});
	scrollbar.inject($('rightColumnW'));
      // calculate the height of the scrollbar between the up and down buttons
	var height= $('containerRW').getSize().y - $('up').getSize().y - $('down').getSize().y;
      // calculate the width of the up and down button via the up button
	var width = $('up').getSize().x;
      // calculate top and left for the scrollbar to be inserted between the up and down buttons
	var top = $('up').getPosition().y + $('up').getSize().y - $('rightColumnW').getPosition().y;
	var left = $('up').getPosition().x - $('rightColumnW').getPosition().x;
	
	// set the styles for the scrollbar
	
	var scroB = new Fx.Tween(scrollbar);
	scroB.set('position','absolute');
	scroB.set('width',width);
	scroB.set('height',height);
	scroB.set('left',left);
	scroB.set('top',top);
	
	// now create the knob for scrolling
	var knob = new Element('div', {'id':'knob'});
	knob.inject($('scroll'));
	var knobTopPos = $('scroll').getPosition().y;
	
	// determine the knob's height as relation of the srollable item's height to scrollbar height
	var heightScrollItem=$('scrollableRW').getScrollSize().y;
  var heightViewport=$('containerRW').getStyle('height').toInt(); 
  var heightKnob = heightViewport/heightScrollItem*height;
  heightKnob = parseInt(heightKnob);
  // if there is not enough content to be scrolled, make the knob fill the height fully 
  if (height>heightScrollItem){
  	heightKnob = height;
  };

	// determine the relation of knob size to height of the scrollableRW item including its overflow
	var offsetscrollableRW=heightScrollItem-height;  // this may be negative!
	var offsetKnob=height-heightKnob;  // this may be zero!
	var relation= offsetscrollableRW/offsetKnob;
	relation=relation.toInt();
	var widthKnob=width;
	knob.setStyles({
		position: 'absolute',
		width: widthKnob,
		height: heightKnob
		});
  //if (heightKnob != height) {              // in case there is effectively something to scroll
  //	knob.setStyle('cursor','s-resize');
  //  knob.setStyle('background-position','top left');
  //  knob.setStyle('top',0);
  //  knob.setStyle('left',0);
  //	knob.setStyle('background-repeat','repeat');
  //	knob.setStyle('background-image','url(http://www.gh-design.de/fileadmin/templates/images/handle_bg.jpg)');
  //  $('up').setStyle('cursor','pointer');
  //  $('down').setStyle('cursor','pointer');
  //  }

	var cursorPos;
	var limitTop=$('knob').getPosition().y;
  var limitBottom=limitTop + height - parseInt(heightKnob);
	var timerUp;
  var timerDown;
  var timerPageUp;
  var timerPageDown;
  
  $('scrollableRW').scrollTo('0', '0');
  
	var draggableOptions={
		containerRW:	scrollbar,
		snap: 3,
		onDrag: function()
			{  
				cursorPos=$('knob').getPosition().y;
				offset=cursorPos-limitTop;
				$('scrollableRW').scrollTo('0', (offset*heightScrollItem/height).toInt()); 
			}
		};

	knob.makeDraggable(draggableOptions);

	function mover(){
		// this function is called by either a click above or below the knob within the scrollbar
    
    param=this;
		direction=param[0];			// 'up' or 'down'  
		var limTop=param[1];		// upper limit  
    var limBottom=param[2];		// lower limit   
		var step=param[3].toInt();			// velocity = heightKnob
		knobYPos=param[4];			// knob's y position 
		
		if (!knobYPos) {knobYPos=$('knob').getPosition().y};
	
		if(direction=='up'){
			knobYPos-=step;
			knobYPos-=limTop;
		}
		else{
			knobYPos+=step;
			knobYPos-=limTop;
		}

		// re-position the knob
    knob.setStyle('top',knobYPos);
		var cursorCase;
		if (knobYPos+heightKnob>height) {
      cursorCase='exceedBottom';
      }
		  else if (knobYPos<0) {
              cursorCase='exceedTop';
              }
              else {
                cursorCase='inBetween';
                scrollto=knobYPos*heightScrollItem/height;
                scrollto=scrollto.toInt();
                }
		switch(cursorCase)
		{
			case 'exceedBottom':   
              if (timerPageDown) {timerPageDown=$clear(timerPageDown)};
              if (timerDown) {timerDown=$clear(timerDown)};
              $('scrollableRW').scrollTo('0', heightScrollItem);
              knob.setStyle('top',(height-heightKnob));
							break;
			case 'exceedTop': 
              if (timerPageUp) {timerPageUp=$clear(timerPageUp)}; 
              if (timerUp) {timerUp=$clear(timerUp)}; 
              $('scrollableRW').scrollTo('0', '0');
              knob.setStyle('top',0);
							break;
			default: 
              if (timerPageDown) {timerPageDown=$clear(timerPageDown)};
              if (timerPageUp) {timerPageUp=$clear(timerPageUp)}; 
              $('scrollableRW').scrollTo('0', scrollto);
		}
	}

	$('up').addEvent('mouseover', function(){
	  var param=['up',limitTop,limitBottom,'1'];
		timerUp=mover.periodical(60,param);
		$('up').setStyle('background-image','url(http://www.gh-design.de/fileadmin/templates/images/up.gif)');
		$('up').setStyle('cursor','pointer');
		});

	$('up').addEvent('mouseleave', function(){
		$clear(timerUp);
		$('up').setStyle('background-image','url(http://www.gh-design.de/fileadmin/templates/images/up.gif)');
		$('up').setStyle('cursor','default');
		});

	$('down').addEvent('mouseover', function(){
	  var param=['down',limitTop,limitBottom,'1'];
		timerDown=mover.periodical(60, param);
		$('down').setStyle('background-image','url(http://www.gh-design.de/fileadmin/templates/images/down.gif)');
		$('down').setStyle('cursor','pointer');
		});

	$('down').addEvent('mouseleave', function(){
		$clear(timerDown);
		$('down').setStyle('background-image','url(http://gh-design.de/fileadmin/templates/images/down.gif)');
		$('down').setStyle('cursor','default');
		});

	$('scroll').addEvent('click', function(event){
		event= new Event(event);
	    mouseY=event.page.y;                     // get the 'y' coordinate of the mouse
	    if(mouseY > ($('knob').getPosition().y + heightKnob)){  // in case click is done below the knob
    		var param=['down',limitTop,limitBottom,heightKnob,$('knob').getPosition().y];
        timerPageDown=mover.periodical(10,param);
    	}
    	if(mouseY < $('knob').getPosition().y){ // in case click is done above the knob
    		var param=['up',limitTop,limitBottom,heightKnob,$('knob').getPosition().y];
    		timerPageUp=mover.periodical(10, param);
    	}
    	// in case click is done on the knob, rather a drag is expected; nothing triggered from here
  	});

});