// JavaScript Document

function hoverRow(row)
{
	resetHoverRows();
	
	$('boxfirst'+row).className = 'hoverrow';
	$('boxcontent'+row).className = 'hoverrow';
}

function resetHoverRows()
{
	for(i=1; i<= 16; i++)
	{
		$('boxfirst'+i).className = '';
		$('boxcontent'+i).className = '';
	}
}

function ScrollBar()
{
	this.textbox;
	
	this.textboxPadding = 5;
	
	this.scroller;
	
	this.scrollElement;
	
	this.percent = 0;
	
	this.mouseScrollMultiplier = 5;
	
	this.barLeftVisible = false;
	this.barRightVisible = true;
	
	this.loadScrollbar = function()
	{
		that = this;
		
		scroller = $('scrollbar');
		
		textbox = $('boxcontent');
	
		this.scrollElement = new Control.Slider(scroller.down('.scroller'), scroller, {
		  range: $R(0, 100),
		  sliderValue: 0,
		  axis: 'horizontal',
		  onSlide: function(value) {
			that.setBoxPosition(value);
			that.showBars();
		  },
		  onChange: function(value) {
			that.setBoxPosition(value);
			that.showBars();
		  }
		});
		
		Event.observe($('boxcontent'), "mousewheel", function (evt) { that.wheel(evt, that); });//Interner Explorer, Safari and Opera
		Event.observe($('boxcontent'), "DOMMouseScroll", function (evt) { that.wheel(evt, that); });//FireFox
		//Event.observe($('boxcontent'), "ondraggesture", function (evt) { alert('HALLO'); });//FireFox
	}
	
	this.setBoxPosition = function(percent)
	{
		var widthContent = document.getElementById("boxcontent").offsetWidth;
		var widthBox = document.getElementById("box").offsetWidth;
		
		//$('debug').innerHTML = percent+" left:"+this.barLeftVisible+" right:"+this.barRightVisible;
		
		this.percent = percent;
		
		var range = widthContent - (widthBox);
		
		var position = range/100*percent;
		
		document.getElementById("boxcontent").style.marginLeft = "-"+position+"px";
	}
	
	this.showBars = function()
	{
		if(this.percent >= 100 && this.barRightVisible == true)
		{
			this.barRightVisible = false;
			$('forward').fade({ duration: 3.0, from: 0.9, to: 0.0 });
		}
		if(this.percent <= 0 && this.barLeftVisible == true)
		{
			this.barLeftVisible = false;
			$('backward').fade({ duration: 3.0, from: 0.9, to: 0.0 });
		}
		
		if(this.percent > 0 && $('backward').style.display == 'none')
		{
			this.barLeftVisible = true;
			$('backward').appear({ duration: 3.0, from: 0.0, to: 0.9 });
		}
		if(this.percent < 100 && $('forward').style.display == 'none')
		{
			this.barRightVisible = true;
			$('forward').appear({ duration: 3.0, from: 0.0, to: 0.9 });
		}
	}
	
	this.changePosition = function(change)
	{
		var newPercent = this.percent - (change*this.mouseScrollMultiplier);
		
		if(newPercent < 0) newPercent = 0;
		if(newPercent > 100) newPercent = 100;
		
		this.scrollElement.setValue(newPercent);
	}
	
	/** Event handler for mouse wheel event.
	 */
	this.wheel = function(event, element)
	{
		var delta = 0;
		if (!event) /* For IE. */
			event = window.event;
		if (event.wheelDelta) { /* IE/Opera. */
			delta = event.wheelDelta/120;
			/** In Opera 9, delta differs in sign as compared to IE.
			*/
			if (window.opera)
				delta = -delta;
		} else if (event.detail) { /** Mozilla case. */
			/** In Mozilla, sign of delta is different than in IE.
			* Also, delta is multiple of 3.
			*/
			delta = -event.detail/3;
		}
		/** If delta is nonzero, handle it.
		* Basically, delta is now positive if wheel was scrolled up,
		* and negative, if wheel was scrolled down.
		*/
		
		if(delta) element.changePosition(delta);
		/** Prevent default actions caused by mouse wheel.
		* That might be ugly, but we handle scrolls somehow
		* anyway, so don't bother here..
		*/
		if (event.preventDefault)
			event.preventDefault();
		event.returnValue = false;
	}
}