/**
 * Scroll dynamique en JavaScript utilisant le framework Prototype et la librairie Script Aculo
 * 
 * @package ScrollerJS
 * @author Julien Peltier <julien.peltier83@gmail.com>
 * @copyright Gnu/GPL 2008
 * @version 1.0 
 */
var DynamicScrollObjects = new Array();
var DynamicScroller = Class.create();
DynamicScroller.prototype = {
	
	initialize: function(element1, element2, options)
	{
		this.options = Object.extend(
			{
				direction: "vertical",
				displaySlideBar: true,
				draggableSlideBar: true,
				imgDown: {'src':'../img/arrow-down.gif','height':'7','width':'9'},
				imgLeft: {'src':'../img/arrow-left.gif','height':'7','width':'9'},
				imgRight: {'src':'../img/arrow-right.gif','height':'7','width':'9'},
				imgUp: {'src':'../img/arrow-up.gif','height':'7','width':'9'},
				rollOverOnImg: false,
				slideBarMinSize: null,
				speed: 2,
				timeout: 20
			}, 
			options || {}
		);
		this.isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
		this.isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
		
		this.slideWay = null;
		this.element1 = element1;
		if( this.options.displaySlideBar == true )
			this.element2 = element2;
		
		this.timer = null;
		this.slidePosition = 0;
		DynamicScrollObjects.push(this);
		this.load();
	},
	
	load: function()
	{
		this.scrollTextBox = $( this.element1 );
		if( this.options.displaySlideBar == true )
			this.scrollSliderBox = $( this.element2 );

		if(this.needScroll())
		{
			this.scrollBoxSize = (this.options.direction == 'vertical') ? this.scrollTextBox.clientHeight : this.scrollTextBox.clientWidth;
			
			this.imgUp = Builder.node( 'img', this.options.imgUp );
			this.imgDown = Builder.node( 'img', this.options.imgDown );
			this.imgLeft = Builder.node( 'img', this.options.imgLeft );
			this.imgRight = Builder.node( 'img', this.options.imgRight );
			
			this.cursor = Builder.node( this.getSliderTagName(), { 'class':'slideBar' } );
			this.slideArea = Builder.node( 'div', { 'class':'scrollSlider' }, this.cursor );
			if(this.options.displaySlideBar == true)
			{
				this.scrollSliderBox.appendChild( this.slideArea );
				this.slideBarMaxSize = (this.options.direction == 'vertical') ? this.slideArea.clientHeight : this.slideArea.clientWidth;
				this.slideBarSize = this.getSlideBarSize();
				this.cursor.style.height = Math.ceil(this.slideBarSize) + "px";
			}
			
			if( typeof this.scrollTextBox == "undefined" ) return;
			
			if( this.options.direction == 'vertical' )
			{
				this.btn1 = Builder.node( 'a', { 'class':'up' }, this.imgUp );
				this.btn2 = Builder.node( 'a', { 'class':'down' }, this.imgDown );
			}
			else
			{
				this.btn1 = Builder.node( 'a', { 'class':'left' }, this.imgLeft );
				this.btn2 = Builder.node( 'a', { 'class':'right' }, this.imgRight );
			}
			if(this.options.displaySlideBar == true)
			{
				this.scrollSliderBox.appendChild( this.btn1 );
				this.scrollSliderBox.appendChild( this.btn2 );
			}
			
			this.initEvents(this);
			this.makeDraggableSlideBar();
		}
	},
	
	getSlideBarSize: function()
	{
		if( this.options.direction == 'vertical' )
			size = this.scrollBoxSize * this.slideBarMaxSize / this.scrollTextBox.scrollHeight;
		else
			size = this.scrollBoxSize * this.slideBarMaxSize / this.scrollTextBox.scrollWidth;
		if( ( isNaN ( parseInt(this.options.slideBarMinSize * 1) ) == false && size < this.options.slideBarMinSize ) || this.options.slideBarUpdateSize == false)
			size = this.options.slideBarMinSize;
		return size;
	},
	
	moveSlider: function()
	{
		if( this.slideWay == null )
			return false;
		var sLDir = this.slideWay.toLowerCase();
		
		switch(sLDir)
		{
			case "up":
				this.scrollTextBox.scrollTop -= this.options.speed;
				break;
			case "down":
				this.scrollTextBox.scrollTop += this.options.speed;
				break;
			case "left":
				this.scrollTextBox.scrollLeft -= this.options.speed;
				break;
			case "right":
				this.scrollTextBox.scrollLeft += this.options.speed;
				break;
		}
		
		scrollPercent = this.scrollTextBox.scrollTop / ( this.scrollTextBox.scrollHeight - this.scrollBoxSize );
		this.slidePosition = scrollPercent * ( this.slideArea.clientHeight - this.slideBarSize );
		
		if(this.options.direction == 'vertical')
		{
			if( this.slidePosition >= 0 && this.slidePosition <= ( this.slideArea.clientHeight - this.slideBarSize ) )
				this.cursor.style.top = this.slidePosition + "px";
		}
		else
		{	
			if( this.slidePosition >= 0 && this.slidePosition <= ( this.slideArea.clientWidth - this.slideBarSize ) )
				this.cursor.style.left = this.slidePosition + "px";
		}
		object = this;
		this.timer = setTimeout(function() { object.moveSlider(); }, this.options.timeout);
	},
	
	imgRollOver: function(e)
	{
		eval( "roll = this.img"+ucfirst(e.className) );
		eval( "imgOver = this.options.img"+ucfirst(e.className)+"['over']" );
		if( this.options.rollOverOnImg == true && imgOver != undefined )
		{
			roll.initsrc = roll.src;
			roll.src= imgOver;
		}
	},
	
	imgRollOut: function(e)
	{
		eval( "roll = this.img"+ucfirst(e.className) );
		if( this.options.rollOverOnImg == true && imgOver != undefined )
		{
			roll.src= roll.initsrc;
		}
	},
	
	needScroll: function()
	{
		if( this.scrollTextBox != undefined )
		{
			if( this.options.direction == 'vertical' )
				return ( this.scrollTextBox.scrollHeight > this.scrollTextBox.clientHeight ) ? true : false;
			else
				return ( this.scrollTextBox.scrollWidth > this.scrollTextBox.clientWidth ) ? true : false;
		}
	},
	
	getSliderTagName: function()
	{
		return ( this.options.draggableSlideBar == true ) ? "a" : "span";
	},
	
	initEvents: function(e)
	{
		if(this.isIE)
		{
			this.btn1.attachEvent("onmouseover", function(event){e.imgRollOver(e.btn1);e.slideWay = e.btn1.className;e.moveSlider()});
			this.btn1.attachEvent("onmouseout", function(event){e.imgRollOut(e.btn1);e.moveBreak()});
			this.btn2.attachEvent("onmouseover", function(event){e.imgRollOver(e.btn2);e.slideWay = e.btn2.className;e.moveSlider()});
			this.btn2.attachEvent("onmouseout", function(event){e.imgRollOut(e.btn2);e.moveBreak()});
		}
		else
		{
			this.btn1.addEventListener("mouseover", function(event){e.imgRollOver(e.btn1);e.slideWay = e.btn1.className;e.moveSlider()}, false);
			this.btn1.addEventListener("mouseout", function(event){e.imgRollOut(e.btn1);e.moveBreak()}, false);
			this.btn2.addEventListener("mouseover", function(event){e.imgRollOver(e.btn2);e.slideWay = e.btn2.className;e.moveSlider()}, false);
			this.btn2.addEventListener("mouseout", function(event){e.imgRollOut(e.btn2);e.moveBreak()}, false);
		}
	},
	
	makeDraggableSlideBar: function()
	{
		if( this.options.draggableSlideBar == true )
		{
			new Control.Slider(this.cursor,this.slideArea,{axis:this.options.direction, onSlide:scrollWithSlider, onChange:scrollWithSlider});
		}
	},
	
	scrollWithSlider: function( percent )
	{
		if( this.options.direction == 'vertical' )
			this.scrollTextBox.scrollTop = percent * ( this.scrollTextBox.scrollHeight - this.scrollBoxSize );
		else if( this.options.direction == 'horizontal' )
			this.scrollTextBox.scrollLeft = percent * ( this.scrollTextBox.scrollWidth - this.scrollBoxSize );
		else return false;
	},
	
	moveBreak: function()
	{
		this.slideWay = null;
		clearTimeout(this.timer);
		this.timer = null;
	}
}

function ucfirst( str ) 
{
	str += '';
	var f = str.charAt(0).toUpperCase();
	return f + str.substr(1, str.length-1);
}

function scrollWithSlider(v, object)
{
	for(i=0;i<DynamicScrollObjects.length;i++)
	{
		obj = DynamicScrollObjects[i];
		if(obj.element2 == object.track.parentNode.id)
			obj.scrollWithSlider(v);
	}
}