var PagingScroller = Class.create({
		
	container	: null,
	cntrWidth	: null,
	content		: null,
	cntWidth	: null,
	cntYpos		: null,
	btnLeft		: null,
	btnRight	: null,	
	atStart		: null,		
	atFinish	: null,
	speed		: 10,
	scrollLeft	: false,	
	pointTo		: null,
	scrollTimer	: null,
	jumpToPos	: null,
	args		: null,
	
	
	initialize:function(args){	 			
						
		this.args		= args;
		this.container	= $(args.container);
		this.cntrWidth	= this.container.getWidth();
		this.content	= $(args.content);
		this.cntWidth	= args.contentwidth;
		this.cntYpos	= (this.content.getStyle('left') == null) ? 0 : parseInt(this.content.getStyle('left'));
		this.btnLeft	= $(args.leftButton);
		this.btnRight	= $(args.rightButton);
		this.speed		= args.speed;				
		
		Event.observe(this.btnLeft,'mouseover',this.onMouseOver.bindAsEventListener(this));			
		Event.observe(this.btnLeft,'mouseout',this.onMouseOut.bindAsEventListener(this));
		
		Event.observe(this.btnRight,'mouseover',this.onMouseOver.bindAsEventListener(this));			
		Event.observe(this.btnRight,'mouseout',this.onMouseOut.bindAsEventListener(this));				
		
		//if the jump to property is set the paging icon lies outside of the viewpoint
		//the scroller scrolls to the point where the selected paging icons is visible
		if(args.jumpto){			
			this.jumpToPos = args.jumpto;
			this.jumpTo();
			this.jumpToPos = null;
		}
	},
		
	
	
	onMouseOver: function(e){		
		//get element
		var el	= e.element();
		
		//see which scroll button
		this.scrollLeft 	= (el.id == this.btnLeft.id) ? true : false;
		this.pointTo		= (this.scrollLeft) ? 0 : parseInt(this.cntrWidth - this.cntWidth);
						
		this.scrollTimer	= new PeriodicalExecuter(this.doScroll.bind(this), 0.05);						
	}, 

	
	onMouseOut: function(){				
		
		if(this.scrollTimer){
			this.scrollTimer.stop();
		}
	},
	
	jumpTo: function(){
		this.scrollLeft		= false;
		this.pointTo		= (this.cntrWidth - this.jumpToPos);	
		this.speed			= 15;
		this.scrollTimer	= new PeriodicalExecuter(this.doScroll.bind(this), 0.05);
	}, 
	
	doScroll: function(){				
		if(this.scrollLeft){								
			if(this.cntYpos < this.pointTo){				
				var newPos = ((this.cntYpos + this.speed) < this.pointTo) ? (this.cntYpos + this.speed) : this.pointTo;
				
				this.content.setStyle({
					left: newPos + 'px'
				});
				this.cntYpos = newPos;
			} else {
				this.scrollTimer.stop();
				this.speed = this.args.speed;
			}
		} else {			
			if(this.cntYpos > this.pointTo){												
				var newPos = ((this.cntYpos - this.speed) > this.pointTo) ? (this.cntYpos - this.speed) : this.pointTo;				
				
				this.content.setStyle({
					left: newPos + 'px'
				});
				this.cntYpos = newPos;
			} else {
				this.scrollTimer.stop();
				this.speed = this.args.speed;
			}
		}		
	}
	
});