Preview = new Class({
	options : {
		width : false,
		height : false,
		step : 65,
		fxDelay : 100,
		delay : 6000,
		startDisplayed : true,
		imgPath : ''
	},
	
	Implements : [Events, Options],
	initialize : function(container, options){
		this.container = document.id(container);
		this.setOptions(options);
		
		var containerSize = this.container.getSize();
		
		if(!this.options.width)
			this.options.width = containerSize.x;
		if(!this.options.height)
			this.options.height = containerSize.y;
			
		this.images = [];	
		this.boxes = [];
		
		this.boxCount = Math.ceil(this.options.width / this.options.step);
		this.period = 0;
	},
	makeBoxes : function(display){
		if(this.period + 1 > this.images.length)
			this.period = 0;
			
		this.fireEvent('change', this.period);
		
		var display = display || false;	
		var image = this.images[this.period];
		
		if(this.dummy)
			this.dummy.destroy();
		
		for(var i = 0; i < this.boxCount; i++){
			var box = new Element('div').setStyles({
				left : (this.options.step * i), 
				top : 0,
				opacity : display ? 1 : 0,
				width : this.options.step,
				height : display ? this.options.height : 0,
				position : 'absolute',
				background: 'url(' + image + ') no-repeat -' + ((this.options.step + (i * this.options.step)) - this.options.step) +'px 0%'
			}).inject(this.container);
			
			box.destroy.delay(this.options.delay * 2, box);
			
			this.boxes[i] = box;
		}
		
		this.period++;
		
		if(!display)
			this.dummy = new Element('img').addEvent('load', this.showBoxes.bind(this)).set('src', image);
	},
	showBoxes : function(){
		this.boxes.each(function(box, index){
			(function(box){
				new Fx.Tween(box, {property :'height', transition : Fx.Transitions.Quad.easeInOut}).start(0, this.options.height);
				new Fx.Tween(box, {property :'opacity'}).start(0, 1);
			}).delay(index * this.options.fxDelay, this, box);	
		}, this);
	},
	start : function(){
		if(!this.heartBeat)
			this.makeBoxes(this.options.startDisplayed);

		this.heartBeat = this.makeBoxes.periodical(this.options.delay, this);
	},
	stop : function(){
		
	},
	addImage : function(image){
		this.images.push(this.options.imgPath + image);
		return this;
	},
	addImages : function(images){
		var images = Array.from(images);
		images.each(this.addImage, this);
		return this;
	}
});
