if( ! Widget ) var Widget = {};

Widget.ScrollableContent = Class.create();

Widget.ScrollableContent.prototype = {
	/**
	 * Example:
	 *	new Widget.ScrollableContent( 'scrolling', { up:'move_up', down:'move_down', x: 10, y:10, width:418, height:385 } );
	 *
	 * Options:
	 *	up:					Div element of 'up' button.
	 *	down:				Div element of 'up' button.
	 *	scrollspeed:		Normal scroll speed.
	 *	fastscrollspeed:	Accelerated scroll speed.
	 *	x:					Absolute x position.
	 *	y:					Absolute y position.
	 *	width:				Width of area.
	 *	height:				Height of area.
	 */
	initialize: function( content_id, options )
	{
		this.content = $(content_id);
		this.valid = true;
		if( ! this.content ){
			this.valid = false;
			return;
		}

		this.options = $H(options);

		this.up = null;
		if( this.options['up'] ){
			this.up = $(options['up']);
			Event.observe( this.up, 'mouseover', this.startUp.bindAsEventListener( this ) );
			Event.observe( this.up, 'mouseout', this.stop.bindAsEventListener( this ) );
			Event.observe( this.up, 'mousedown', this.accelerate.bindAsEventListener( this ) );
			Event.observe( this.up, 'mouseup', this.unaccelerate.bindAsEventListener( this ) );
		}
		this.down = null;
		if( this.options['down'] ){
			this.down = $(options['down']);
			Event.observe( this.down, 'mouseover', this.startDown.bindAsEventListener( this ) );
			Event.observe( this.down, 'mouseout', this.stop.bindAsEventListener( this ) );
			Event.observe( this.down, 'mousedown', this.accelerate.bindAsEventListener( this ) );
			Event.observe( this.down, 'mouseup', this.unaccelerate.bindAsEventListener( this ) );
		}

		this.totalHeight	= Element.getHeight( this.content );
		this.positionY		= 0;
		this.deltaY			= 0;
		this.timeout		= null;
		this.basescrollspeed= 2;
		this.fastscrollspeed= 10;
		this.startX = 0;
		this.startY = 0;
		
		if (this.totalHeight > Element.getHeight($("main_content"))-10){
			$("move_up").innerHTML = "<a href='#'><img src='image/up.gif' alt='Up' /></a>";
			$("move_down").innerHTML = "<a href='#'><img src='image/down.gif' alt='Down' /></a>";
		}
		
		if( this.options['scrollspeed'] )
			this.basescrollspeed = this.options['scrollspeed'];
		if( this.options['fastscrollspeed'] )
			this.fastscrollspeed = this.options['fastscrollspeed'];
		this.scrollspeed	= this.basescrollspeed;

		if( this.options['x'] ){
			this.startX = this.options['x'];
		}
		if( this.options['y'] ){
			this.startY = this.options['y'];
		}

		if( this.options['width'] ) {
			this.width = this.options['width'];
		}
		else {
			this.width = Element.getWidth( this.content );
		}
		if( this.options['height'] ) {
			this.height = this.options['height'];
		}
		else {
			this.height = Element.getHeight( this.content );
		}

		// Init the main element:
		var st = this.content.style;
		st.position	= 'absolute';
		st.width	= this.width + 'px';
		st.left		= this.startX + 'px';
		st.top		= this.startY + 'px';
		// this.setClip( 0, this.width, 0, this.height);
		
		this.updateClip();

		//st.clip = 'rect(10px,110px,210px,10px)';
	},

	setClipExtends: function( top, right, bottom, left )
	{
		var st = this.content.style;
		var clip = 'rect(' + top + 'px, ' + right + 'px, ' + bottom + 'px, ' + left + 'px)';
		st.clip = clip;
	},

	setClip: function( x, width, y, height )
	{
		var st = this.content.style;
		var clip = 'rect(' +
					(y) + 'px, ' +
					(x+width) + 'px, ' +
					(y+height) + 'px, ' +
					(x) + 'px)';
		st.clip = clip;
	},

	updateClip: function()
	{
		this.setClip( 0, this.width, -this.positionY, this.height );
	},

	startUp: function(e)
	{
		// alert('up');
		this.deltaY = this.scrollspeed;
		this.timeout = setTimeout( this.doScroll.bindAsEventListener(this), 100 );
	},

	startDown: function(e)
	{
		this.deltaY = -this.scrollspeed;
		this.timeout = setTimeout( this.doScroll.bindAsEventListener(this), 100 );
	},

	stop: function(e)
	{
		if( this.timeout )
			clearTimeout( this.timeout );
	},

	accelerate: function(e)
	{
		this.scrollspeed = this.fastscrollspeed;
		this.scrollspeedUpdated();
	},
	unaccelerate: function(e)
	{
		this.scrollspeed = this.basescrollspeed;
		this.scrollspeedUpdated();
	},
	scrollspeedUpdated: function()
	{
		if( this.deltaY > 0 ) this.deltaY = this.scrollspeed;
		if( this.deltaY < 0 ) this.deltaY = -this.scrollspeed;
	},

	doScroll: function()
	{
		if( this.deltaY > 0 && this.positionY < this.startY ){
			this.positionY += this.deltaY;
			this.content.style.top = (this.positionY + this.startY) + 'px';
			this.timeout = setTimeout( this.doScroll.bindAsEventListener(this), 20 );
		}
		//else if( this.deltaY < 0 && -this.totalHeight + this.height < this.positionY ){
		else if( this.deltaY < 0 && this.positionY > -this.totalHeight+Element.getHeight($("main_content"))-10){
			this.positionY += this.deltaY;
			this.content.style.top = (this.positionY + this.startY)+ 'px';
			this.timeout = setTimeout( this.doScroll.bindAsEventListener(this), 20 );
		}
		this.updateClip();

	}

}