/**************************************************************

	Script	: Image Menu
	Version	: 2.3
	Authors	: Samuel Birch
	Desc	:
	Licence	: Open Source MIT Licence

**************************************************************/

var ImageMenu = new Class({

	getOptions: function(){
		return {
			OnOpen: $lambda(false),
			OnClose: $lambda(false),
			OnClickOpen: $lambda(),
			OnClickClose: $lambda(),
			openWidth: 200,
			transition: Fx.Transitions.Quad.easeOut,
			duration: 400,
			open: null,
			border: 0,
			delay: 0 //added to support rotating. 
		};
	},

	initialize: function(elements, options){
		this.setOptions(this.getOptions(), options);

		this.elements = $$(elements);

		this.widths = {};
		this.widths.closed = this.elements[0].getStyle('width').toInt();
		this.widths.openSelected = this.options.openWidth;
		if(this.options.openWidth==this.widths.closed && this.elements[1].getStyle('width').toInt() < this.widths.closed)
			this.widths.closed = this.elements[1].getStyle('width').toInt();
		//this.widths.openOthers = Math.round(((this.widths.closed*this.elements.length) - (this.widths.openSelected+this.options.border)) / (this.elements.length-1))

		//Modified to retain width as when closed
		this.widths.openOthers = this.widths.closed;

		//added to control behaviour.
		this.currentOpen = -1;
		this.isFx = false;
		this.continueRotating = -1;
		this.lastSwitched = -1;

		this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition});

		this.elements.each(function(el,i){
			el.addEvent('mouseenter', function(e){
				new Event(e).stop();
				if(-1 != this.continueRotating) {
					clearTimeout(this.continueRotating);
					this.continueRotating = -1;
				}
				this.reset(i);
				if(this.options.OnOpen){
					this.options.OnOpen(el, i);
				}
			}.bind(this));

			el.addEvent('mouseleave', function(e){
				new Event(e).stop();
				if(0 < this.options.delay && -1==this.continueRotating) {
					this.continueRotating = this.play.periodical(this.options.delay, this);
				}
				/*Modified to handle neede behaviour.
				this.reset(this.options.open);
				if(this.options.OnClose){
					this.options.OnClose(el, i);
				}
				*/
			}.bind(this));

			var obj = this;

			el.addEvent('click', function(e){
				if(obj.options.OnClickOpen){
					if (e.target.get('tag') == "a")
						return;
					new Event(e).stop();
					if(obj.options.open == i){
						obj.options.open = null;
						obj.options.OnClickClose(this.href, i);
					}else{
						obj.options.open = i;
						obj.options.OnClickOpen(this.href, i);
					}

				}

			})

		}.bind(this));

		if(this.options.open != null){
			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);
			}
		}

		if(0 < this.options.delay && -1==this.continueRotating) {
			this.continueRotating = this.play.periodical(this.options.delay, this);
		}

	},

	reset: function(num){

		//added to handle open operation.
		if(this.isFx && (this.lastSwitched + 50) > (new Date()).getTime())
			return;
		if(this.isFx)
			this.stopFx();
		if(this.currentOpen == num)
			return;
		this.currentOpen = num;
		this.lastSwitched = (new Date()).getTime();
		//
		if($type(num) == 'number'){
			var width = this.widths.openOthers;
			if(num+1 == this.elements.length){
				width += this.options.border;
			}
		}else{
			var width = this.widths.closed;
		}

		var obj = {};
		this.elements.each(function(el,i){
			var w = width;
			if(i == this.elements.length-1){
				w = width+5
			}
			obj[i] = {'width': w};
		}.bind(this));

		if($type(num) == 'number'){
			obj[num] = {'width': this.widths.openSelected};
		}

		this.isFx = true;
		this.fx.start(obj).chain((function() { this.isFx = false; }).bind(this));
	},

// added to support rotating through images
	play: function() {
		if($type(this.currentOpen) != 'number'){
			this.elements.each(function(el,i){
				if(el.id == this.options.open){
					this.currentOpen = i;
				}
			},this);
		}
		if(isNaN(parseInt(this.currentOpen)))
			return;
		this.currentOpen = parseInt(this.currentOpen);
		if(this.currentOpen<0)
			return;
		this.reset((this.currentOpen + 1) % this.elements.length);
	},
	
	stopFx: function() {
		if(this.isFx)
			this.fx.cancel().chain((function() { this.isFx = false; }).bind(this));
		if($type(this.currentOpen) == 'number'){
			var width = this.widths.openOthers;
			if(this.currentOpen+1 == this.elements.length){
				width += this.options.border;
			}
		}else{
			var width = this.widths.closed;
		}

		var obj = {};
		this.elements.each(function(el,i){
			var w = width;
			if(i == this.elements.length-1){
				w = width+5
			}
			obj[i] = {'width': w};
		}.bind(this));

		if($type(this.currentOpen) == 'number'){
			obj[this.currentOpen] = {'width': this.widths.openSelected};
		}

		this.isFx = true;
		this.fx.set(obj).chain((function() { this.isFx = false; }).bind(this));
	}
});

ImageMenu.implement(new Options);
ImageMenu.implement(new Events);


/*************************************************************/
