/*  Vertical DHTML Scroller
 *
 *	Author : Sujoy Kumar Roy (sujoykroy@gmail.com)
 *
 *  This script requires Prototype.js 1.6.0, this can be downloaded from http://www.prototypejs.org/
 *
 *	You are free to use,modify or distribute the below javascript codes for any purpose.
 *
 *	It will be appreciated if you drop me a line in case you make innovative addition.
 *
 *
 *
 *
 *  Usage:
 *
 *  new pVscroller(divId,height,width,increment,content);
 *
 *  params:
 * 	divId 		: ID of the HTML container where scrolling content of will shown.
 *  height		: height of the scrolling content , must be numeric
 *  width		: width of the scrolling content , must be numeric
 *  increment	: The height in pixel by which the scroller will move up or down in each step.
 *  content		: Raw HTML content will be scroller in side container of ID divId.
 *   			  If you do not provide the content, then the content of divId wil be used to scroll.
 */


var pVscroller=Class.create({
	initialize :function (divId,height,width,increment,content){

		if(!content){
			content=$(divId).innerHTML;
		}

		this.scProp={'divId': divId,'height'  : height, 'width' : width,'state':'none','increment':increment};

		var scArea=new Element('div',{'class' : 'scArea'});

		scArea.makeClipping().setStyle({width: this.scProp.width + 'px',height: this.scProp.height + 'px', 'overflow':'hidden'});

		var scAreaContent=new Element('div',{'class' : 'scAreaContent'});
		$(this.scProp.divId).update();
		scAreaContent.update(content);
		content=null;
		scArea.appendChild(scAreaContent);



		$(this.scProp.divId).appendChild(scArea);
		$(this.scProp.divId).show();

		if (scAreaContent.getDimensions().height >= scArea.getDimensions().height)
		{
			$('pager-up').setStyle({
				display: 'block'
			});
			$('pager-down').setStyle({
				display: 'block'
			});
		}

		Event.observe($('pager-up'),'mouseover'	,function(event){this.scProp.state='down'	;}.bind(this));
		Event.observe($('pager-up'),'mouseout'	,function(event){this.scProp.state='none'	;}.bind(this));

		Event.observe($('pager-down'),'mouseover'	,function(event){this.scProp.state='up'	;}.bind(this));
		Event.observe($('pager-down'),'mouseout'	,function(event){this.scProp.state='none'	;}.bind(this));

		this.scArea=scArea;

		new PeriodicalExecuter(function(pe) {
			if  (this.scProp.state=='up'){
				if (this.scArea.scrollTop< scArea.scrollHeight)
					this.scArea.scrollTop += this.scProp.increment;
				else
					this.scProp.state=='none';
			}else if  (this.scProp.state=='down'){
				if (this.scArea.scrollTop>0)
					this.scArea.scrollTop -= this.scProp.increment;
				else
					this.scProp.state=='none';
			}
		}.bind(this), .01);
	}
});