/*
* Portfolio element
* @copyright Kameleon CMS Limited (info@kameleon-cms.com)
* @author Chris Peyton
* @requires Mootools 1.2
* @builddate 09/09/2009
* @tested IE6,IE7,IE8,FF3,Safari 3 (windows), Google Chrome
*/

var kamPortfolio = new Class({
	rootElement: null,
	cellWidth: 0,
	cellHeight: 0,	
	transition: null,
	loadingMask: null,
	grid: null,
	blockEvents:false,
	currentElement: null,
	transitionDuration: null,
	transitionType: null,
	
	initialize: function(rootElement, transitionDuration, transitionType){		
		var self = this;
		this.rootElement = $(rootElement);
		this.transitionDuration = transitionDuration;
		this.transitionType = transitionType;
		this.cellWidth = this.rootElement.getStyle("width").toInt();
		this.cellHeight = this.rootElement.getStyle("height").toInt(); 
		
		this.rootElement.setStyle("overflow","hidden");

		// create the grid
		this.grid = new Element("div",{
			id: "kamPortfolioGrid",
			styles: { 
				"width": (3*this.cellWidth)+"px",
				"height":(3*this.cellHeight)+"px",
				"overflow":"hidden",
				"margin-top": (0-this.cellHeight)+"px",				
				"margin-left": (0-this.cellWidth)+"px"				
			}
		});

		// inject cells into the grid with classes & unique ids
		for( var i=1; i<10; i++ ){
			this.grid.grab( new Element("div",{
				"class": "kamPortfolioCell",
				id: "kamPortfolioCell-"+i,
				styles: {
					width:this.cellWidth+"px",
					height:this.cellHeight+"px",
					overflow: "hidden",
					float:"left"					
				}
			}));
		}
				
		this.rootElement.grab(this.grid);
		this.transition = new Fx.Morph('kamPortfolioGrid', {
			duration: self.transitionDuration,
			transition: self.transitionType,
			onStart: function(){
				self.blockEvents = true;
			},
			onComplete: function(){
				self.resetGrid();
				self.blockEvents = false;
			}
		});

		this.currentElement = this.rootElement.getElement('div');
		
		this.resetGrid();
		
	},
	moveRight: function(elm){
		if( !this.blockEvents ){	
			$("kamPortfolioCell-6").grab(elm.clone());	
			this.transition.start({ "marginLeft": (0-(this.cellWidth*2)) });
			this.currentElement = elm.clone();
		}
	},
	moveLeft: function(elm){
		if( !this.blockEvents ){
			$("kamPortfolioCell-4").grab(elm.clone());	
			this.transition.start({ "marginLeft": "0" });
			this.currentElement = elm.clone();
		}
	},
	moveDown: function(elm){
		if( !this.blockEvents ){	
			$("kamPortfolioCell-8").grab(elm.clone());	
			this.transition.start({ "marginTop": (0-(this.cellHeight*2)) });
			this.currentElement = elm.clone();
		}
	},
	moveUp: function(elm){
		if( !this.blockEvents ){
			$("kamPortfolioCell-2").grab(elm.clone());	
			this.transition.start({ "marginTop": "0" });
			this.currentElement = elm.clone();
		}
	},

	resetGrid: function(){
		
		// clone current item into grid cell 1-1 and reset viewport
		var cell5 = $("kamPortfolioCell-5");
		cell5.set("html","");
		if(this.currentElement != null){
			cell5.grab(this.currentElement);
		}
		$$(".kamPortfolioCell").each( function(elm,index){
			if( index!=4 ){
				elm.set("html","");
			}
		});
		$("kamPortfolioGrid").setStyle("margin-left","-"+this.cellWidth+"px");
		$("kamPortfolioGrid").setStyle("margin-top","-"+this.cellHeight+"px");
	}
});