/*
---
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);

    }

});