var PrettyPanels = new Class({
	Implements: [Options, Events],
	panels: [],
	triggers: [],
	container: null,
	containerDims: null,
	mode: 'horizontal',
	hiddenDims: [],
	showDims: {},
	zindexOffset: 4,
	squeeze: 0.2,
	addEventsToPanels: true,
	hideMorph: {'opacity': 0.8},
	showMorph: [ ],
	initialize: function(options){
		this.setOptions(options);

		if(this.options.mode) this.mode = this.options.mode;
		this.setContainer(this.options.container);
		if(this.options.showMorphs) this.setMorphs(this.options.showMorphs);
		if(this.options.hideMorph) this.setHideMorph(this.options.hideMorph);
		if(this.options.squeeze) this.squeeze = this.options.squeeze;		
		this.addTriggers(this.options.triggers);
		this.addPanels(this.options.panels);
		this.configureLayout( );
		this.showPanel(this.options.initialPanel ? this.options.initialPanel : 0);
	},
	setHideMorph: function(els) {
		this.hideMorph = els;
		console.log(this.hideMorph);
	},
	setMorphs: function(els) {
		this.showMorph = $splat(els);
	},
	addPanels: function(els) {
		$$(els).each(function(ele) {	
			$(ele).set('morph', {'transition': Fx.Transitions.Expo.easeOut, 'duration': 1200});	
			this.panels.include($(ele));
			if(this.addEventsToPanels) {
				/*$(ele).addEvent("click", function(ev) {
					new Event(ev).stop( );
					this.showPanel(this.panels.length - 1);				
				}.bind(this));*/
			}
		}.bind(this));
	},
	configureLayout: function( ) {
		this.hiddenDims = [];

		var w = this.mode == 'horizontal' ? ((this.containerDims.x / this.panels.length) * this.squeeze) :
			this.containerDims.x;
		var h = this.mode == 'horizontal' ? this.containerDims.y : 
			 ((this.containerDims.y / this.panels.length) * this.squeeze);
		this.panels.each(function(el, i) {
			console.log(this.triggers[i]);
			this.triggers[i].inject(this.container);
			this.panels[i].inject(this.container);
			this.hiddenDims[i] = {
				'x': 	this.mode =='horizontal' ? (this.containerPos.x + w) * i : this.containerPos.x,
				'y':	this.mode =='horizontal' ? this.containerPos.y : (this.containerPos.y + h) * i, 				'w':	this.mode =='horizontal' ? w : this.containerDims.x,
				'h':	this.mode =='horizontal' ? this.containerDims.y : h
			};
			el.setStyle("z-index", this.zindexOffset + i);
			el.setStyle("position", "absolute");
			el.setStyle("left", this.hiddenDims[i]['x']);
			el.setStyle("top", this.hiddenDims[i]['y']);
			el.setStyle("width", this.hiddenDims[i]['w']);
			el.setStyle("height", this.hiddenDims[i]['h']);
			console.log(this.hiddenDims[i]['x']+","+this.hiddenDims[i]['y']+","+this.hiddenDims[i]['w']+","+ this.hiddenDims[i]['h']);
		}.bind(this));
		this.showDims.x = this.mode == 'horizontal' ?
			this.containerDims.x - (w * (this.panels.length - 1)) : this.containerDims.x;
		this.showDims.y = this.mode == 'horizontal' ? this.containerDims.y : 
			this.containerDims.y - (h * (this.panels.length - 1));
		console.log("Show dimensions: ",this.showDims.x, this.showDims.y);
		console.log("'Hidden' state dimensions: ", this.hiddenDims);		
	},
	addTriggers: function(els) {
		$$(els).each(function(ele, i) {
			$(ele).addEvent("click", function(ev) {
				new Event(ev).stop( );
				this.showPanel(i);
			}.bind(this));
			this.triggers.include($(ele));
		}.bind(this));
	},
	setContainer: function(c) {
		this.container = $$(c)[0]; 

		if(!this.containerDims) {
			this.container.setStyle("position", "relative");
			this.containerDims = this.container.getSize( );	
			this.containerDims.x = this.containerDims.x - this.container.getStyle("padding-left").toInt() - 
				this.container.getStyle("padding-right").toInt();
			this.containerDims.y = this.containerDims.y - this.container.getStyle("padding-top").toInt() - 
				this.container.getStyle("padding-bottom").toInt();
			this.containerPos = {};

			this.containerPos.x = this.container.getStyle("padding-left").toInt();
			this.containerPos.y = this.container.getStyle("padding-top").toInt();
			console.log(this.container.getStyle("height"));
			console.log("Container dimensions: "+this.containerDims.x+","+this.containerDims.y+", "+this.containerPos.x+","+this.containerPos.y);
		}
		
		this.container.getChildren( ).each(function(el) { el.dispose( ); });
	},
	showPanel: function(index) {
		console.log(this.hideMorph);
		var i;
		this.triggers.each(function(el, i) {
			el.setStyle("z-index", this.zindexOffset + this.panels.length + i + 1);
			el.morph(this.hideMorph);
		}.bind(this));
		if(this.showMorph[index]) {
			this.triggers[index].setStyle(
				"z-index", this.zindexOffset + this.panels.length + i + 1
			);
			this.triggers[index].morph(this.showMorph[index]);
		}

		var x = 0, y = 0;
		var z = this.zindexOffset;
		for(var i = 0; i< index; i++) {
			this.panels[i].setStyle("z-index", z + i);
			var p = {
				'width': this.hiddenDims[i].w, 'height': this.hiddenDims[i].h,
				'left': this.hiddenDims[i].x, 'top': this.hiddenDims[i].y
			};
			for(j in this.hideMorph) p[j] = this.hideMorph[j];
			this.panels[i].morph(p);
			if(this.mode=='horizontal') x=this.hiddenDims[i].x+this.hiddenDims[i].w;
				else y=this.hiddenDims[i].y+this.hiddenDims[i].h;
		}
		var xloc = this.containerPos.x + x;
		var yloc = this.containerPos.y + y;
		this.panels[index].setStyle("z-index", this.zindexOffset + this.panels.length + 1);
		var m = {
			'width': this.showDims.x, 'height': this.showDims.y,
			'left': xloc, 'top': yloc, 'opacity': 1.0
		};
		if(this.showMorph[index])
			for(k in this.showMorph[index]) m[k] = this.showMorph[index][k];

		this.panels[index].morph(m);
		var remain = this.panels.length - (index+1);
		var posx = this.mode == 'horizontal' ? xloc + this.showDims.x : this.hiddenDims[0].x;
		var posy = this.mode == 'horizontal' ? this.hiddenDims[0].y : yloc + this.showDims.y;
		var step = this.mode == 'horizontal' ? (this.containerDims.x - xloc - this.showDims.x) / remain:
			(this.containerDims.y - yloc - this.showDims.y) / remain;
		for(var i=index+1; i<this.panels.length; i++) {
			this.panels[index].setStyle("z-index", this.zindexOffset + i);
			var p = {
				'width': this.mode == 'horizontal' ? step : this.hiddenDims[i].w,
				'height': this.mode == 'horizontal' ? this.hiddenDims[i].h : step,
				'left': posx, 'top': posy
			};
			for(j in this.hideMorph) p[j] = this.hideMorph[j];
			this.panels[i].morph(p);				
			if(this.mode == 'horizontal') posx+=step; else posy+=step;
		}
	}
});