var hSlider = new Class({
	initialize: function(area, items, direction)
	{
		this.area = $(area);
		this.items = $$(items);
		this.direction = direction;
		var pos = this.area.getPosition();
		this.top = pos['y'];
		this.left = pos['x'];
		this.isPlay = true;
		this.start_item = 0;
		this.moving_step=0;
		this.play();
	},
	play: function()
	{
		for(i=0; i<this.items.length; i++)
		{
			this.items[i].setStyle('position', 'absolute');
			this.items[i].setStyle('visibility', 'hidden');
		}
		this.set();
	},
	set: function()
	{
		$clear(this.timer);
		var cur = this.start_item;
		var cnt = 0;
		var step = 0;
		var rect_top = 0;
		var rect_right = 0;
		var rect_bottom = 0;
		var rect_left = 0;
		var next = false;
		if(this.direction=='left')
		{
			if(this.moving_step>this.items[this.start_item].offsetWidth)
				this.moving_step = this.items[this.start_item].offsetWidth;
			step = this.left-this.moving_step;
		}
		else
		{
			if(this.moving_step>this.items[this.start_item].offsetHeight)
				this.moving_step = this.items[this.start_item].offsetHeight;
			step = this.top-this.moving_step;
		}
		for(i=0; i<this.items.length; i++)
		{
			if(this.direction=='left')
			{
				if(step<this.left+this.area.offsetWidth || i<2)
				{
					this.items[cur].setStyle('left', step);
					this.items[cur].setStyle('visibility', 'visible');
					rect_top = 0;
					rect_bottom = this.area.offsetHeight;
					rect_left = this.left-step;
					if(step+this.items[cur].offsetWidth>this.left+this.area.offsetWidth)
						rect_right = this.items[cur].offsetWidth-((step+this.items[cur].offsetWidth)-(this.left+this.area.offsetWidth));
					else
						rect_right = this.items[cur].offsetWidth;
					this.items[cur].setStyle('clip', 'rect('+rect_top+'px '+rect_right+'px '+rect_bottom+'px '+rect_left+'px)');
					step = step + this.items[cur].offsetWidth;
					cur++;
					if(cur==this.items.length)	cur = 0;
				}
				else
				{
					this.items[cur].setStyle('visibility', 'hidden');
				}
			}
			else
			{
				if(step<this.top+this.area.offsetHeight || i<2)
				{
					this.items[cur].setStyle('top', step);
					this.items[cur].setStyle('visibility', 'visible');
					rect_top = this.top-step;
					if(step>=this.top+this.area.offsetHeight)
						rect_bottom = 0;
					else
						rect_bottom = rect_top+this.area.offsetHeight;
					rect_right = this.area.offsetWidth;
					this.items[cur].setStyle('clip', 'rect('+rect_top+'px '+rect_right+'px '+rect_bottom+'px '+rect_left+'px)');
					step = step + this.items[cur].offsetHeight;
					cur++;
					if(cur==this.items.length)	cur = 0;
				}
				else
				{
					this.items[cur].setStyle('visibility', 'hidden');
				}
			}
		}
		this.moving_step = this.moving_step+3;
		var next_item = this.start_item+1;
		if(next_item==this.items.length)	next_item = 0;
		if(this.direction=='left')
		{
			if(parseInt(this.items[next_item].getStyle('left'))<=this.left)	next = true;
		}
		else
		{
			if(parseInt(this.items[next_item].getStyle('top'))<=this.top)	next = true;
		}
		if(this.isPlay)
		{
			if(next)
			{
				this.start_item = next_item;
				this.moving_step = 0;
				this.timer = this.set.delay(3000, this);
			}
			else
			{
				this.timer = this.set.delay(100, this);
			}
		}
	},
	stop : function()
	{
		this.isPlay = false;
	},
	start : function()
	{
		this.isPlay = true;
		$clear(this.timer);
		this.set();
	},
	next : function()
	{
		this.start_item++;
		if(this.start_item==this.items.length)	this.start_item = 0;
		this.moving_step = 0;
		$clear(this.timer);
		this.play();
	},
	prev : function()
	{
		if(this.start_item==0)	 this.start_item = this.items.length-1;
		else	this.start_item--;
		this.moving_step = 0;
		$clear(this.timer);
		this.play();
	}
});