/**************************************************************

	Script	: Image Menu
	Version	: 2.2.1
	Authors	: Samuel Birch, ported to MooTools 1.2 by Marcus Sykes
	Desc	: 
	Licence	: Open Source MIT Licence

**************************************************************/

var ImageMenu = new Class({
	Implements : [Options,Events],
	
	options:{
		onOpen: function(){},
		onClose: function(){},
		openWidth: 200,
		peekWidth: 200,
		Peekstart: null,
		transition: Fx.Transitions.Bounce.easeOut,
		duration: 400,
		onComplete: null,
		open: null,
		peek: null,
		border: 0
	},

	initialize: function(elements, options){
		this.setOptions(options);
		this.elements = $$(elements);
		this.widths = {};
		this.widths.closed = this.elements[0].getStyle('width').toInt();
		this.widths.openSelected = this.options.openWidth;
		this.widths.openOthers = Math.round(((this.widths.closed*this.elements.length) - (this.widths.openSelected+this.options.border)) / (this.elements.length-1))
		this.widths.openPeek = this.options.peekWidth;
		this.widths.openSelectedPeek = this.widths.openSelected-this.widths.openPeek+this.widths.openOthers;
		
		
		this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition});
		this.fx.addEvent('complete', function() { 
		  //initVideo() 
		  });
		
		this.elements.each(function(el,i){
			el.addEvent('mouseenter', function(e){
				this.peek(i);
			}.bind(this));
			el.addEvent('mouseleave', function(e){
				this.peek();
			}.bind(this));
		}.bind(this));
		
		if(this.options.open){
			if($type(this.options.open) == 'number'){
				this.reset(this.options.open);
			}else{
				this.elements.each(function(el,i){
					if(el.id == this.options.open){
						this.reset(i);
					}
				},this);
			}
		}
		
	},
	peek: function(num){
		var obj = {};
		this.elements.each(function(el,i){
			var w = this.widths.closed;
			if($type(this.options.open) == 'number'){
				w = this.widths.openOthers
				obj[this.options.open] = {'width': this.widths.openSelected};
			}
			obj[i] = {'width': w};
		}.bind(this));
		if($type(num) == 'number'){
			if($type(this.options.open) == 'number' && num!=this.options.open){
				this.options.peek = num;
				obj[num] = {'width': this.widths.openPeek};
				obj[this.options.open] = {'width': this.widths.openSelectedPeek};
				this.fx.start(obj);
				tabAction(num,"v-fade")
			}
		}else{
			if($type(this.options.peek) == 'number'){
				tabAction(this.options.peek,"h-fade")
				if($type(this.options.open) == 'number'){
					obj[this.options.peek] = {'width': this.widths.openOthers};
					obj[this.options.open] = {'width': this.widths.openSelected};
				}
				this.options.peek = null;
				this.fx.start(obj);
			}
		}
	},
	reset: function(num){
		if($type(num) == 'number'){
			this.options.open = num
		}else{
			this.options.open = null;
		}
		var width = this.widths.closed;
		if($type(this.options.open) == 'number') {
			width = this.widths.openOthers;
			if(num+1 == this.elements.length) {width += this.options.border}
		}
		var obj = {};
		this.elements.each(function(el,i){
			var w = width;
			obj[i] = {'width': w};
		}.bind(this));

		if($type(num) == 'number'){
			obj[num] = {'width': this.widths.openSelected};
		}
		//this.fx.complete = function(){alert('done')}
		this.fx.start(obj);
	}
	
});


/*************************************************************/