var ViewPort = new Class({
	Implements: [Options],
	options : {
		moveSize : 100,
		elementSelector:"",
		elementSize : 56,
		fxTransition : "Quint:out"
	},
	
	initialize: function(container, options){
		this.setOptions(options);
		this.container = $(container);
		this.elements = this.container.getElements(this.options.elementSelector);
		this.setContainerWidth();
		this.container.setStyle("position", "absolute");
		this.wrapper = new Element("div", {"class":"wrapperViewPort"});
		this.wrapper.wraps(this.container);
		this.moveLeft = this.options.moveSize;
		this.moveRight = this.options.moveSize;
		this.onTransition = false;
		this.container.set("morph", {transition:this.options.fxTransition,onComplete:this.onCompleteTransition.bind(this)});
	},
	
	setContainerWidth: function()
	{
		this.containerWidth = this.elements.length*this.options.elementSize;
		this.container.setStyle("width", this.containerWidth);
	},
	
	left: function()
	{
		if(this.containerWidth + this.container.getStyle("left").toInt() <= this.wrapper.getWidth()) 
		{
			return;
		}
		
		if(!this.onTransition && this.containerWidth + this.container.getStyle("left").toInt() > this.wrapper.getWidth())
		{
			this.container.morph({"left":-this.moveLeft});
			this.moveRight -= this.options.moveSize;
			this.moveLeft += this.options.moveSize;
			this.onTransition = true;
		}
	},
	
	right: function()
	{
		
		if(!this.onTransition && this.container.getStyle("left").toInt() != 0 && this.container.getStyle("left") != "auto")
		{
			this.container.morph({"left":this.moveRight});
			this.moveRight += this.options.moveSize;
			this.moveLeft -= this.options.moveSize;
			this.onTransition = true;
		}
	},
	onCompleteTransition: function()
	{
		this.onTransition = false;
	}
	
});