var ScrollGallery = Class.create({

	holder 			: null,
	mask 			: null,
	left 			: null,
	right 			: null,
	currentPosition : 0,
	maxPosition		: 0,
	
	timeout			: null,
	continueMove	: 0,
	
	interval		: 50,  	//ms
	step			: 7,    //px
	
	initialize :
	function ( holderID, maskID, leftID, rightID )
	{
		var intialize = 'Just for eclipse';

		this.holder	= $(holderID);
		this.mask	= $(maskID);
		this.left	= $(leftID);
		this.right	= $(rightID);
		
		this.maxPosition = this.holder.getWidth() - this.mask.getWidth();
			
		this.initializeEvents();
	},
	
	initializeEvents:
	function ()
	{
		this.left.observe( "mousedown", this.onMouseDownLeftArrow.bind(this));
		this.right.observe( "mousedown", this.onMouseDownRightArrow.bind(this));
		
		this.left.observe( "mouseup", this.onMouseUpLeftArrow.bind(this));
		this.right.observe( "mouseup", this.onMouseUpRightArrow.bind(this));
	}
	,
	
	onMouseDownLeftArrow:
	function( event )
	{
		this.continueMove = 1;
		this.moveLeft();
	},
	
	onMouseDownRightArrow:
	function( event )
	{
		this.continueMove = 1;
		this.moveRight();
	},
	
	moveRight:
	function()
	{
		if( this.currentPosition + this.step <= this.maxPosition ) 	this.currentPosition += this.step;
		else														this.currentPosition = this.maxPosition;
		
		this.display();
		
		var thisObject = this;
		if( this.continueMove == 1)
			this.timeout = setTimeout( this.moveRight.bind(this), thisObject.interval );
	},
	
	moveLeft:
	function()
	{
		if( this.currentPosition - this.step >= 0 ) this.currentPosition -= this.step;
		else										this.currentPosition = 0;
		
		this.display();
		
		var thisObject = this;
		if( this.continueMove == 1)
			this.timeout = setTimeout( this.moveLeft.bind(this), thisObject.interval );
	},
	
	onMouseUpLeftArrow:
	function( event )
	{
		this.continueMove = 0;
		clearTimeout( this.tiemout );
	},
	
	onMouseUpRightArrow:
	function( event )
	{
		this.continueMove = 0;
		clearTimeout( this.tiemout );
	},
	
	display:
	function( )
	{
		this.holder.style.left = ( -1 * this.currentPosition ) + "px"; 
	}
});
