/*
---
name: ImageMenu
description: horizontal menu, reveals more of the image as you rollover it.

license: Open Source MIT Licence
authors: Samuel Birch

requires: [Core/Fx.CSS, Core/Fx.Transitions, More/Fx.Elements]
provides: ImageMenu

...
*/


var ImageMenu = new Class({

Implements: [Options, Events],

options: {/*
onOpen: function(){},
onClose: function(){},
onClick: function(){},
onClickOpen: function(){},
onClickClose: function(){},*/
openWidth: 200,
openOnClick: true,
transition: Fx.Transitions.Quad.easeOut,
duration: 400,
open: null,
border: 0
},

initialize: function(elements, options){
this.elements = $$(elements);
this.setOptions(options);

this.widths = {
closed: this.elements[0].getStyle('width').toInt(),
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.fx = new Fx.Elements(this.elements, {
link: 'cancel',
duration: this.options.duration,
transition: this.options.transition
});

var self = this;

this.elements.each(function(el, i){

el.addEvents({

mouseenter: function(e){
self.reset(i);
self.fireEvent('open', [el, i]);
},

mouseleave: function(e){
self.reset(self.options.open);
self.fireEvent('close', [el, i]);
}

});

if (self.options.openOnClick) el.addEvent('click', function(e){
e.stop();
self.options.open = (self.options.open == i) ? null : i;
var event = (self.options.open == i) ? 'Close' : 'Open';
self.fireEvent('click' + event, [this.href, i])
.fireEvent('click', [this.href, i]);
});

});


if (this.options.open != null){
var isNumber = typeOf(this.options.open) == 'number',
open = isNumber ? this.options.open : this.elements.indexOf(document.id(this.options.open));

this.reset(open);
}

},

reset: function(num){

var isNumber = typeOf(num) == 'number',
obj = {},
width;

if (isNumber){
width = this.widths.openOthers;
if ((num + 1) == this.elements.length) width += this.options.border;
} else {
width = this.widths.closed;
}

this.elements.each(function(el, i){
var w = width;
if (i == (this.elements.length - 1)) w = width + 5;
obj[i] = {width: w};
}, this);

if (isNumber) obj[num] = {width: this.widths.openSelected};

this.fx.start(obj);

}

});