if( isUndefinedOrNull(Widget) ){
    var Widget = {};
}

// Widget.ScrollableContent = Class.create();
/**
 * Example:
 *	new Widget.ScrollableContent( 'scrolling', { up:'move_up', down:'move_down', x: 10, y:10, width:418, height:385 } );
 *
 * Options:
 *  container:          <required> Container object containing scrollable area.
 *	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.
 */
Widget.ScrollableContent = function( content_id, options )
{
    this.content = $(content_id);
    this.valid = true;
    if( ! this.content ){
        this.valid = false;
        return;
    }

    this.options = options;

    if( ! this.options['container'] ){
        throw "No container object specified.";
    }
    this.container = $(this.options['container']);

    this.up = null;
    if( this.options['up'] ){
        this.up = $(options['up']);
        connect( this.up, 'onmouseover', this, this.startUp );
        connect( this.up, 'onmouseout', this, this.stop );
        connect( this.up, 'onmousedown', this, this.accelerate );
        connect( this.up, 'onmouseup', this, this.unaccelerate );
    }
    this.down = null;
    if( this.options['down'] ){
        this.down = $(options['down']);
        connect( this.down, 'onmouseover', this, this.startDown );
        connect( this.down, 'onmouseout', this, this.stop );
        connect( this.down, 'onmousedown', this, this.accelerate );
        connect( this.down, 'onmouseup', this, this.unaccelerate );
    }

    this.recalculateHeight();
    this.positionY		= 0;
    this.deltaY			= 0;
    this.timeout		= null;
    this.basescrollspeed= 2;
    this.fastscrollspeed= 10;
    this.startX = 0;
    this.startY = 0;
    // logDebug( 'Totalheight: ' + this.totalHeight );

    if (this.totalHeight > elementDimensions(this.content).h - 10){
        //this.up.innerHTML = "<a href='#'><img src='image/up.gif' alt='Up' /></a>";
        //this.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'];
    }

    // 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)';
}

Widget.ScrollableContent.prototype = {
    recalculateHeight: function() {
        this.totalHeight	= elementDimensions( this.content ).h;

        if( this.options['width'] ) {
            this.width = this.options['width'];
        }
        else {
            this.width = elementDimensions( this.content ).w;
        }
        if( this.options['height'] ) {
            this.height = this.options['height'];
        }
        else {
            this.height = elementDimensions( this.content ).h;
        }

        // console.log("Height:", this.totalHeight);
    },

	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)
	{
        // logDebug( 'startup' );
		this.deltaY = this.scrollspeed;
		this.timeout = setTimeout( bind(this.doScroll, this), 100 );
	},

	startDown: function(e)
	{
        // logDebug( 'startdown' );
		this.deltaY = -this.scrollspeed;
		this.timeout = setTimeout( bind(this.doScroll, this), 100 );
	},

	stop: function(e)
	{
        // logDebug( 'stop' );
		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()
	{
        // logDebug( 'scrolling' );
        // logDebug( 'totalHeight:', this.totalHeight, 'dim:', repr(elementDimensions(this.content)) );
        // logDebug( 'startY:', this.startY, 'posY:', this.positionY, '<', -this.totalHeight+elementDimensions(this.content).h - 10 );
        if( this.deltaY > 0 && this.positionY < 0 ){ // this.startY ){
			this.positionY += this.deltaY;
			this.content.style.top = (this.positionY + this.startY) + 'px';
			this.timeout = setTimeout( bind(this.doScroll, this), 20 );
		}
		//else if( this.deltaY < 0 && -this.totalHeight + this.height < this.positionY ){
		else if( this.deltaY < 0 && this.positionY > -this.totalHeight+elementDimensions(this.container).h - this.startY - 60){
            this.positionY += this.deltaY;
			this.content.style.top = (this.positionY + this.startY)+ 'px';
			this.timeout = setTimeout( bind(this.doScroll, this), 20 );
		}
		this.updateClip();

	}
}