///------------------------------------------------------------
	/*
	THE SCROLLER OBJECT
	CALLER			:	a script in the page
	PURPOSE			:	
	VAR					: id = the scroller id
								content_scroll_id = the div to be scrolled
	*/
///------------------------------------------------------------

function vp_scroller(id, content_scroll_id){
	
	//----------------------------------------------------------
	/*
	PURPOSE		:	init the scroller
	PROCESS		:	- 1 - We retrieve the reference of the active objects in the scroller.	
							- 2 - We place the bar cursor at the top of the bar.
	*/
	this.init  = function (id, content_scroll_id){
		
		//----------------------------------------------------------
		// - 1 - We set
		this.id = id;
		this.name = id;
		this.content_scroll = document.getElementById(content_scroll_id);
		this.div = document.getElementById(id);
		
		//----------------------------------------------------------
		// - 2 - We place the scroller bloc if a scroller is needed
		if (this.content_scroll.offsetHeight < this.content_scroll.scrollHeight){
			this.place_scroller();
		}else{ // No scroller needed, we hide.
			this.div.style.display = "none";
		}
		
		//----------------------------------------------------------
		// - 3 - We init the scrolling
		this.content_scroll.scrollTop = 0;
		
		//----------------------------------------------------------
		// - 4 - We retrieve the reference of the elements.	
		var l = this.div.childNodes;
		for(x in l){
			if (l[x] && l[x].className != undefined){
				if (l[x].className =='cursor') this.cursor = l[x];
				if (l[x].className =='bar') this.bar = l[x];
				if (l[x].className =='arrow_up1') this.arrow_up1 = l[x];
				if (l[x].className =='arrow_dw1') this.arrow_dw1 = l[x];
				if (l[x].className =='arrow_up10') this.arrow_up10 = l[x];
				if (l[x].className =='arrow_dw10') this.arrow_dw10 = l[x];
			}
		}
		
		//----------------------------------------------------------
		// - 2 - We give the height of the bar
		var h = this.arrow_up1.offsetHeight + 
						this.arrow_up10.offsetHeight + 
						this.arrow_dw1.offsetHeight + 
						this.arrow_dw10.offsetHeight;
		this.bar.style.height = this.content_scroll.offsetHeight - h+"px";
		this.bar.style.left = (this.div.offsetWidth / 2) - (this.bar.offsetWidth /2) +"px";
	
		//----------------------------------------------------------
		// - 5 - We give the actions and reactions to the arrows
		this.arrow_up1.parent = this;
		this.arrow_up1.onmouseover = function(evt){ this.parent.cursor_in(this); }
		this.arrow_up1.onmouseout = function(evt){ this.parent.cursor_out(this); }
		this.arrow_up1.onmousedown = function(evt){ this.parent.mouse_down('up',5); }
		this.arrow_up1.onmouseup = function(evt){ this.parent.mouse_up(); }
		
		this.arrow_dw1.parent = this;
		this.arrow_dw1.onmouseover = function(evt){ this.parent.cursor_in(this); }
		this.arrow_dw1.onmouseout = function(evt){ this.parent.cursor_out(this); }
		this.arrow_dw1.onmousedown = function(evt){ this.parent.mouse_down('down',5); }
		this.arrow_dw1.onmouseup = function(evt){ this.parent.mouse_up(); }
		
		this.arrow_up10.parent = this;
		this.arrow_up10.onmouseover = function(evt){ this.parent.cursor_in(this); }
		this.arrow_up10.onmouseout = function(evt){ this.parent.cursor_out(this); }
		this.arrow_up10.onmousedown = function(evt){ this.parent.mouse_down('up',20); }
		this.arrow_up10.onmouseup = function(evt){ this.parent.mouse_up(); }
		
		this.arrow_dw10.parent = this;
		this.arrow_dw10.onmouseover = function(evt){ this.parent.cursor_in(this); }
		this.arrow_dw10.onmouseout = function(evt){ this.parent.cursor_out(this); }
		this.arrow_dw10.onmousedown = function(evt){ this.parent.mouse_down('down',20); }
		this.arrow_dw10.onmouseup = function(evt){ this.parent.mouse_up(); }
		
		this.bar.parent = this;
		this.bar.onmousedown = function(evt){ this.parent.onBarClick(evt); }
		this.bar.onmouseover = function(evt){ this.parent.cursor_in(this); }
		this.bar.onmouseout = function(evt){ this.parent.cursor_out(this); }
		
		//----------------------------------------------------------
		// - 6 - We modify the height of the cursor
		var ts = this.content_scroll.scrollHeight;
		var to = this.content_scroll.offsetHeight;
		var b = this.bar.offsetHeight;
		this.cursor.style.height = to/ts *b +"px";

		//----------------------------------------------------------
		// - 7 - The mouse wheel
		this.content_scroll.parent = this;
		
		if (navigator.appName=="Netscape"){
			this.mousewheelFF();
			
		}else if (navigator.appName=="Microsoft Internet Explorer"){
			this.mousewheelIE();
			//this.content_scroll.onmousewheel = function(evt){debug('Wheel Delta '+ event.wheelDelta);}
		}else{
			//this.content_scroll.onmousewheel = function(evt){debug('Wheel Delta '+ event.wheelDelta);}
		}
		


		
		//----------------------------------------------------------
		// - 8 - We retrieve the scale factor
		var s = (this.content_scroll.scrollHeight  - this.content_scroll.offsetHeight);
		var b = this.bar.offsetHeight - this.cursor.offsetHeight;
		this.scale_factor = b / s;
	
		//----------------------------------------------------------
		// - 9 - we place the bar cursor at the top of the bar.
		this.place_cursor();
		

	}
	
	
	
	//----------------------------------------------------------
	/*
	PURPOSE		:	place the scroller according to the text div to scroll
	*/
	this.place_scroller = function(){
		this.div.style.top = this.content_scroll.offsetTop+"px";
		this.div.style.left = this.content_scroll.offsetLeft+this.content_scroll.offsetWidth +"px";
	}
	
	//--------------------------------------------------------------------
	// cursor = pointer
	this.cursor_in = function (o){
		o.style.cursor = 'pointer';
	}
	//--------------------------------------------------------------------
	// cursor = auto
	this.cursor_out = function (o){
		o.style.cursor = 'auto';
	}
	
	//----------------------------------------------------------
	/*
	* PURPOSE		:	Make the scroll
	* VAR				:	- dir:String = 'down' OR 'up'
	*							- step:Number = the scroll step
	*/
	this.action = function (dir, step){
		
		var f;
		if (dir == 'down') f = 1; else f = -1;
		this.content_scroll.scrollTop += step*f;
		
		this.place_cursor();
	}
	
	//----------------------------------------------------------
	/*
	PURPOSE		:	place the scroller according to the text div to scroll
	*/
	this.onBarClick = function (evt) {
	
		if (evt == null) { evt = window.event };
		var _mouseY = evt.clientY;
		barClick = _mouseY - findXY(this.bar).y;
		
		this.actionGoToCoord(barClick);
	}
		
	//----------------------------------------------------------
	/*
	* PURPOSE		:	Make the scroll
	* VAR				:	- barClick: the click position relative to the bar
	*/
	this.actionGoToCoord = function (barClick){
		var th = this.content_scroll.offsetHeight;
		var ts = this.content_scroll.scrollHeight;
		var bh = this.bar.offsetHeight;
		var bc = barClick;
		/*
		debug("th = "+th);
		debug("ts = "+ts);
		debug("bh = "+bh);
		debug("bc = "+bc);
		*/
		var f1 = bc/bh;
		var f2 = (ts-th) * f1;
		
		this.content_scroll.scrollTop = f2;
	
		this.place_cursor();
	}
	
	//----------------------------------------------------------
	/*
	* PURPOSE		:	this is the function called by the arrows on mouse down
	* VAR				:	- dir:String = 'down' OR 'up'
	*							- step:Number = the scroll step
	*/
	this.mouse_down  = function (dir, step) {
		// For security : we kill the former interval
		if (this.interval) clearInterval(this.interval);
		
		// Here you can change the speed of the auto increment (the less, the speeder)
		var timerSpeed = 10;
		var o = this; // this is usefull to specify from wich object the function action sould be called
		this.interval = setInterval(function(){ o.action(dir,step);},timerSpeed);
	
	}
	//----------------------------------------------------------
	/*
	* PURPOSE		:	Retreive the global x y coordonates of a DOM element 
	* VAR				:	- obj = a element
	*/
	function findXY(obj){
		var x=0,y=0;
		while (obj!=null){
			x+=obj.offsetLeft-obj.scrollLeft;
			y+=obj.offsetTop-obj.scrollTop;
			obj=obj.offsetParent;
		}
		return {x:x,y:y};
	}
	
	//----------------------------------------------------------
	/*
	* PURPOSE		:	this is the function called by the arrows on mouse up
	*/
	this.mouse_up  = function () {
		clearInterval(this.interval);
	}
	
	//----------------------------------------------------------
	/*
	* PURPOSE		:	place the cursor
	*/
	this.place_cursor = function (){
		this.cursor.style.top = (this.content_scroll.scrollTop * this.scale_factor)+this.bar.offsetTop +"px";
		this.cursor.style.left = (this.div.offsetWidth / 2) - (this.cursor.offsetWidth /2) +"px";
	}
	
	//----------------------------------------------------------
	/*
	PURPOSE		:	manage the mousewheel according to the browser
	*/
	this.mousewheelFF = function(){
		var dir;
		this.content_scroll.addEventListener('DOMMouseScroll', scroll, false);
		function scroll(e){
			if (e.detail > 0) dir = "down"; else dir = "up";
			this.parent.action(dir, 15);
		}
		
	}
	this.mousewheelIE = function(){
		var dir;
		this.content_scroll.onmousewheel = function(evt){
			if (event.wheelDelta > 0) dir = "up"; else dir = "down";
			this.parent.action(dir, 15);
		}
	}
	
	
	//------------------------------------------------------------------------------------
	// We call the init function ---------------
	this.init(id, content_scroll_id);
	// We call the init function ---------------
	//------------------------------------------------------------------------------------
	//scanObject(this.content_scroll);
}