// scrollbar.js: let a nice looking scrollbar appear instead of the browser standard scrollbar;
// version 1.0, based on the famous Mootools :-))
// written 2007 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
      $('middlecolumn').setStyles({
      	overflow: 'hidden'
           });
      $('scrollable').setStyles({
 	      width:295,
 	      height:270,
 	      overflow: 'hidden'
            });
      $('scrollable').setStyle('margin-left',10);
      $('up').setStyles({
  	      visibility: 'visible'
            });
      $('down').setStyles({
 	      visibility: 'visible'
            });

      // initiate the scrollbar
	var scrollbar = new Element('div');
	scrollbar.setAttribute('id','scroll');
	scrollbar.injectInside($('middlecolumn'));
      // calculate the height of the scrollbar between the up and down buttons
	var height= $('scrollable').getSize().size.y - $('up').getSize().size.y - $('down').getSize().size.y - 10;
      // calculate the width of the up and down button via the up button
	var width = $('up').getSize().size.x;
      // calculate top and left for the scrollbar to be inserted between the up and down buttons
	var top = $('up').getPosition().y+ $('up').getSize().size.y - $('middlecolumn').getPosition().y;
	var left = $('up').getPosition().x - $('middlecolumn').getPosition().x;
	// finally set the styles for the scrollbar
	scrollbar.setStyles({
		position: 'absolute',
		width: width,
		height: height,
		left: left,
		top: top
//		backgroundColor:"#555555"
		});

	// now create the knob for scrolling
	var knob = new Element('div');
	knob.setAttribute('id','knob');
	knob.injectInside($('scroll'));

	// determine the knob's height as relation of the srollable item's height to scrollbar height
	var heightScrollItem=$('scrollable').getSize().scrollSize.y;
      var heightViewport=$('scrollable').getStyle('height').toInt();
      var heightKnob = heightViewport/heightScrollItem*height;
      heightKnob = parseInt(heightKnob);
      if (height>heightScrollItem){
      	heightKnob = height;
      };

	// determine the relation of knob size to height of the scrollable item including its overflow
	var offsetScrollable=heightScrollItem-height;
	var offsetKnob=height-parseInt(heightKnob);
	var relation= offsetScrollable/offsetKnob;
	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('background-repeat','repeat');
      	knob.setStyle('background-image','url(http://www.netz-schmiede.de/fileadmin/templates/000_netz-schmiede/grfx/knob.gif)');
           $('up').setStyle('cursor','pointer');
           $('down').setStyle('cursor','pointer');
           }


	var cursorPos=0;
	var limitTop=$('knob').getPosition().y;
  	var limitBottom=limitTop + height - parseInt(heightKnob);
	var timerUp,timerDown,timerPageUp,timerPageDown;

	var draggableOptions={
		container:	scrollbar,
		onDrag: function()
			{
				cursorPos=$('knob').getPosition().y;
				offset=cursorPos-limitTop;
				$('scrollable').scrollTo('0', offset*relation);
			}
		};

	knob.makeDraggable(draggableOptions);

	function mover(){
		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
		cursorPos=$('knob').getPosition().y;
		if(direction=='up'){
			cursorPos-=step;
		}
		else{
			cursorPos+=step;
		}

		// calculate the offset of the dragged knob, to be applied to the scrollable item later on
		offset=cursorPos-limTop;

		// adjustment in case the dragging exceeds the limits of the scrollbar
		if(cursorPos>limBottom) {
			offset=cursorPos-limBottom;
			cursorPos=limBottom;
		}
		if(cursorPos<limTop) {
			offset=limTop-cursorPos;
			cursorPos=limTop;
		}

		position=cursorPos-top-$('middlecolumn').getPosition().y;
		var positioning=new Fx.Style('knob','top',{duration:1});
		positioning.start(cursorPos,position);
		switch(cursorPos)
		{
			case limitBottom:   $clear(timerDown);$('scrollable').scrollTo('0', heightScrollItem);
							break;
			case limitTop: $clear(timerUp); $('scrollable').scrollTo('0', '0');
							break;
			default: $('scrollable').scrollTo('0', offset*relation);
		}

		// resetting of timers
		if(cursorPos<=limTop){
			if(timerUp) $clear(timerUp);
			if(timerPageUp) $clear(timerPageUp);
		}
		if(cursorPos>=limBottom){
			if(timerDown) $clear(timerDown);
			if(timerPageDown) $clear(timerPageDown);
		}

	}

	$('up').addEvent('mouseover', function(){
	  var param=['up',limitTop,limitBottom,'1'];
		timerUp=mover.periodical(10,param);
		});

	$('up').addEvent('mouseleave', function(){
		$clear(timerUp);
		});

	$('down').addEvent('mouseover', function(){
	  var param=['down',limitTop,limitBottom,'1'];
		timerDown=mover.periodical(10, param);
		});

	$('down').addEvent('mouseleave', function(){
		$clear(timerDown);
		});

	$('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){  // in case click is done below the knob
    		var param=['up',mouseY,limitBottom,'20'];
      		timerPageUp=mover.periodical(10,param);
    	}
    	if(mouseY > $('knob').getPosition().y + parseInt(heightKnob)){
      		var param=['down',limitTop,mouseY-parseInt(heightKnob),'20'];
      		timerPageDown=mover.periodical(10, param);
    	}
  	});

});