Element.implement({
	instance : $empty
});

/**
 * Item class
 *
 * @author Martin Bartels <martin@apollomedia.nl>
 *
 */
var Item = new Class({
	
	Implements 		: [Class.Occlude, Options],
	
	width 			: 0,
	height 			: 0,
	left			: 'left',
	top				: 'top',
	offsetY			: 0,
	offsetX			: 0,
	relativeTo		: null,
	fps				: 70,
	
	
	container		: null,
	property 		: 'item',
	row 			: null,
	index 			: 0,
	mover 			: $empty,
	morpher 		: $empty,
	isTweening 		: false,
	tweenProps 		: null,
	
	intitialize : function(element, options) {
		this.initItem(element, options);
	},
	
    initItem: function(element, options){
		this.setOptions(options);
		
		this.element = element;
		this.element.instance = this;
		
		var tweenInit = {
			fps: this.fps,
			duration: 650
		};
		this.morpher = new Fx.Morph(this.element,tweenInit);
		this.morpher.addEvent('start', this.onTweenStart.bind(this));	
		this.morpher.addEvent('complete', this.onTweenComplete.bind(this));	
		
		this.mover = new Fx.Move(this.element, tweenInit);

	},
	
	move : function(oInit) {
		this.mover.cancel();
		this.mover.start(oInit);
	},
	
	morph : function(oInit) {
		this.tweenProps = oInit;
		this.morpher.cancel();
		this.morpher.start(oInit);
	},
	
	getSize : function() {
		if(this.isTweening) {
			return {
				x:this.tweenProps.width, 
				y:this.tweenProps.height
			};
		}
		return this.element.getSize();
	},
	
	position : function(oInit) {
		this.element.position(oInit);
	},
	
	instance : function() {
		return this.element.instance;
	},
	
	onTweenStart : function() {
		this.isTweening = true;
	},
	
	setRow : function(oRow) {
		this.row = oRow;	
	},
	
	onTweenComplete : function() {
		this.isTweening = false;
	}

});


/**
 * Animated grid class
 *
 * @author Martin Bartels <martin@apollomedia.nl>
 *
 */
var AnimatedGrid = new Class({
	Implements : Options,
	options: {
		cols 			: 3,
		colMargin 		: 30,
		rowMargin 		: 30,
		container 		: $empty,
		items			: $empty,
		rowMarginLeft	: 0,
	},
	
	row 	 : null,
	items 	 : $empty,
	rows 	 : $empty,
	vbox 	 : null,
	
    initialize: function(options){
		this.initAnimatedGrid(options);
	},
	
	initAnimatedGrid : function(options) {
		this.setOptions(options);
		this.items = this.options.items;
		this.addRows();
	},
	
	addRows : function() {
		this.rows = new Array();
		
		var current_row;
		this.items.each(function(item, i){
			var new_row = (i%this.options.cols==0);
			
			if(new_row) {
				current_row = new HBox({
					margin : this.options.colMargin,
					container : this.options.container,
					x : 0,
					y : 0
				});	

				this.rows.push(current_row);
			}
			
			item.instance().offsetX = this.options.rowMarginLeft;
			item.instance().container = this;
			item.instance().index = i;
			item.instance().row = current_row;
			item.instance().width =  item.instance().getSize().x;
			item.instance().height = item.instance().getSize().y;
			
			current_row.add(item, false);
			
		}.bind(this));
		
		this.vbox = new VBox({
					margin : this.options.rowMargin,
					container : this.options.container,
					x : 0,
					y : 0
		});
		
		this.rows.each(function(row,i){
			this.vbox.add(row, false);
		}.bind(this));
		
	},
	
	addRow : function(oRow) {
		this.rows.push(oRow);
	},
	
	addRowAt : function(oRow, i) {
		this.items.splice(i,0,oRow);
	},
	
	getItems : function() {
		return this.items;
	},
	
	getLength : function() {
		return this.item.length;
	}

});