scrollingHList = function()
{
	this.lenght = 0;
	this.width = 0;
	this.forwardButton = '';
	this.backButton = '';
	this.list = '';
	this.current = 1;
	this.visible = 3;
	this.scrollCount = 1;
	this.startItem = 1;
	this.itemSize = 0;
	
	this.create=function ( params )
	{
		var list = $("#" + params.list);
	
		this.list   = list;
		this.width  = list.find("li").width();
		this.lenght = params.lenght;
		this.forwardButton = params.forwardButton;
		this.backButton = params.backButton;
		this.scrollCount = params.scrollCount;
		this.visible = params.visible;
		this.startItem = params.startItem;
		this.itemSize = params.itemSize > 0 ? params.itemSize : this.width;
		
		var self = this;
		
		$("#" + this.forwardButton).click( function(){ self.scrollForward() } );
		$("#" + this.backButton).click( function(){ self.scrollBack() } );

		this.startItem = this.startItem + this.visible <= this.lenght ? 
			this.startItem : 
			this.lenght - this.visible + 1;
			
		if(this.startItem + this.visible > this.lenght)
			$("#" + this.forwardButton).addClass('scroll-inactive');

		if(this.startItem > 1)
			list.css("margin-left", "-" + (this.itemSize * (this.startItem - 1)) + "px");
		else
			$("#" + this.backButton).addClass('scroll-inactive');
		
		this.current = this.startItem;
	}
	
	this.scrollForward=function()
	{
		var scrollCount = this.current + this.scrollCount + this.visible <= this.lenght ? 
			this.scrollCount : 
			this.lenght - this.current - this.visible + 1;

		if(this.lenght > this.visible && scrollCount > 0)
		{
			$("#" + this.backButton).removeClass('scroll-inactive');
			
			$(this.list).animate({"margin-left": "-=" + (this.itemSize * scrollCount) + "px"}); 
			this.current+=scrollCount;
		}
		
		if(this.current + this.visible - 1 >= this.lenght)
			$("#" + this.forwardButton).addClass('scroll-inactive');
	}
	
	this.scrollBack=function ()
	{
		var scrollCount = this.current - this.scrollCount > 0 ? 
			this.scrollCount : 
			this.current - 1;
				
		if(this.current > 1 && scrollCount > 0)
		{
			$("#" + this.forwardButton).removeClass('scroll-inactive');
			
			$(this.list).animate({"margin-left": "+=" + (this.itemSize * scrollCount) + "px"});
			this.current-=scrollCount;
		}
		
		if(this.current <= 1)
			$("#" + this.backButton).addClass('scroll-inactive');
	}
}

scrollingVList = function()
{
	this.lenght = 0;
	this.height = 0;
	this.forwardButton = '';
	this.backButton = '';
	this.list = '';
	this.current = 1;
	this.visible = 3;
	this.startItem = 1;
	
	this.create=function ( params )
	{
		var list = $("#" + params.list);
	
		this.list   = list;
		//this.height = list.find("li").height();		
		this.lenght = params.lenght;
		this.forwardButton = params.forwardButton;
		this.backButton = params.backButton;
		this.visible = params.visible;
		this.startItem = params.startItem;
				
		var self = this;
		
		$("#" + this.forwardButton).click( function(){ self.scrollForward() } );
		$("#" + this.backButton).click( function(){ self.scrollBack() } );
		
		if(1 + this.visible > this.lenght)
			$("#" + this.forwardButton).addClass('scroll-inactive');

		$("#" + this.backButton).addClass('scroll-inactive');
	}
	
	this.scrollForward=function ()
	{
		if( !this.height )
			this.height = this.list.height() / this.lenght;
		
		var scrollCount = this.current + this.scrollCount + this.visible <= this.lenght ? 
			this.scrollCount : 
			this.lenght - this.current - this.visible + 1;
		
		if( this.lenght > this.visible && (this.current + this.visible <= this.lenght) )
		{
			$("#" + this.backButton).removeClass('scroll-inactive');
			
			$(this.list).animate({"margin-top": "-=" + this.height + "px"}); 
			this.current++;
		}
		
		if(this.current + this.visible - 1 >= this.lenght)
			$("#" + this.forwardButton).addClass('scroll-inactive');
	}
	
	this.scrollBack=function ()
	{
		if( !this.height )
			this.height = this.list.height() / this.lenght;
		
		var scrollCount = this.current - this.scrollCount > 0 ? 
			this.scrollCount : 
			this.scrollCount - this.current;
		
		if(this.current > 1)
		{
			$("#" + this.forwardButton).removeClass('scroll-inactive');
			
			$(this.list).animate({"margin-top": "+=" + this.height + "px"});
			this.current--;
		}
		
		if(this.current <= 1)
			$("#" + this.backButton).addClass('scroll-inactive');
	}
}