<!--
/*
Script: imageMenu.js

Authors:
  Sam Birch

License:
  MIT-style license.

Edited by Romke van der Meulen: changed width to height to make it vertical
                itemHeight hard-coded, wasn't working
                no initial transition when start option supplied
                selected element not deselected when clicked twice

*/
var ImageMenu = new Class({

  initialize: function(myElements,options){
    options = Object.extend({
      onClick: Class.empty,
      start: -1,
      openHeight: 50,
      smallHeight: 30,
      itemHeight: 50,
      selected: -1,
      open: -1,
      transition: Fx.Transitions.quadOut
    }, options || {});

    this.myElements = myElements;
    this.options = options;

    options.itemHeight = myElements[0].getStyle('height').toInt();
    /*options.smallHeight = Math.round(((options.itemHeight*myElements.length)-options.openHeight)/(myElements.length-1));*/
    options.smallHeight = 50;

    var fx = new Fx.Elements(myElements, {wait: false, duration: 400, transition: options.transition});

    myElements.each(function(el, i){
      el.addEvent('mouseover', function(e){
        e = new Event(e).stop();
        el.show();
      });

      el.addEvent('click', function(e){
        el.select();
      });

      el.addEvent('mouseout', function(e){
        e = new Event(e).stop();
        el.hide();
      });

      el.show = function(){
        var obj = {};
        obj[i] = {'height': [el.getStyle('height').toInt(), options.openHeight]};
        myElements.each(function(other, j){
          if (other != el){
            var w = other.getStyle('height').toInt();
            if (w != options.smallHeight) obj[j] = {'height': [w, options.smallHeight]};
          }
        });
        fx.start(obj);
      };

      el.hide = function(){
        var obj = {};
        if(options.selected == -1){
          myElements.each(function(el,i){
            obj[i] = {'height': [el.getStyle('height').toInt(), options.itemHeight]};
          });
        }else{
          myElements.each(function(el,i){
            if(i != options.selected){
              var w = el.getStyle('height').toInt();
              if(w != options.smallHeight){obj[i] = {'height': [w, options.smallHeight]}};
            }else{
              obj[i] = {'height': [el.getStyle('height').toInt(), options.openHeight]};
            }
          });
        }
        fx.start(obj);
      };

      el.select = function(){
        options.selected = i;
        options.onClick(options.selected,options.open);
        options.open = options.selected;
      };
    });

    if(options.start != -1){
      fx = new Fx.Elements(myElements, {wait: false, duration: 0, transition: options.transition});
      myElements[options.start].show();
      myElements[options.start].select();
      fx = new Fx.Elements(myElements, {wait: false, duration: 400, transition: options.transition});
    }
  },

  reset: function(){
    this.options.selected = -1;
    this.options.open = -1;
    this.myElements.each(function(el, i){
      el.hide();
    });
  }

});
//-->