var MainMenu2 = new Class({

  Implements: Options,

  options: {
    activateOnClick: false
  },

  initialize: function(element, options){
    this.element = document.id(element);
    this.setOptions(options);
    this.tabButtons = this.element.getElements('.tabButton');
    this.tabButtons.each(function(item){
      if (!item.hasClass('inactive')) this.uuid = MainMenu2.getUUID(item);
    }, this);
    this.tabButtons.each(function(button){
      if (button.hasClass('hasContent')){
        var uuid = MainMenu2.getUUID(button);
        if (this.options.activateOnClick) button.addEvent('click', this.buttonClick.bindWithEvent(this, uuid));
        else button.addEvent('mouseenter', this.buttonEnter.bind(this, uuid));
      }
    }, this);
    this.tabContents = {};
    this.element.getElements('.tabContent').map(function(content){
      return new MainMenu2.TabContent(content);
    }, this).each(function(item){
      this.tabContents[MainMenu2.getUUID(item.element)] = item;
    }, this);
  },

  buttonClick: function(e, uuid){
    e.stop();
    this.activateButton(uuid);
  },

  buttonEnter: function(uuid){
    this.activate(uuid);
  },

  activate: function(uuid){
    if (uuid == this.uuid) return;
    if (this.uuid){
      document.id('tabButton-' + this.uuid).addClass('inactive');
      document.id('tabContent-' + this.uuid).removeClass('active');
    }
    this.uuid = uuid;
    document.id('tabButton-' + this.uuid).removeClass('inactive');
    this.tabContents[this.uuid].infoLayer.get('tween').start('height', 0, 62);
    document.id('tabContent-' + this.uuid).addClass('active');
  }

});

MainMenu2.getUUID = function(element){
  var el = document.id(element);
  return el ? el.id.replace(/^[^\-]*\-/, '') : null;
};

MainMenu2.TabContent = new Class({

  initialize: function(element){
    this.element = document.id(element);
    this.gallery = this.element.getElement('.gallery');
    this.background = this.element.getElement('.background');
    this.infoLayer = this.element.getElement('.infoLayer');
    this.background.getElements('img').each(function(visual){
      if (visual.hasClass('default')) this.defaultVisual = visual;
      else visual.set('opacity', 0);
    }, this);
    this.defaultActive = !!this.defaultVisual;
    if (this.gallery) this.gallery.getElements('img').each(function(thumb){
      var uuid = MainMenu2.getUUID(thumb);
      thumb.addEvents({
        'mouseenter': this.thumbEnter.bindWithEvent(this, uuid),
        'mouseleave': this.thumbLeave.bindWithEvent(this, uuid)
      });
    }, this);
  },

  thumbEnter: function(e, uuid){
    if (uuid == this.uuid) return;
    this.uuid = uuid;
    var thumb = document.id('thumb-' + uuid);
    var image = document.id('visualimage-' + uuid);
    var label = document.id('visuallabel-' + uuid);
    if (thumb) thumb.setStyle('opacity', '1.0');
    if (this.defaultActive){
      this.defaultActive = false;
      this.defaultVisual.fade();
    }
    if (image) image.fade();
    if (label){
      var rightStart = -370, rightEnd = 12;
      label.setStyles({'right': rightStart + 'px', 'display': 'block'});
      label.get('tween').start('right', rightStart, rightEnd);
    }
  },

  thumbLeave: function(e, uuid){
    if (uuid != this.uuid) return;
    this.uuid = null;
    var thumb = document.id('thumb-' + uuid);
    var image = document.id('visualimage-' + uuid);
    var label = document.id('visuallabel-' + uuid);
    if (thumb) thumb.setStyle('opacity', '0.5');
    if (image) image.fade();
    var related = document.id(e.relatedTarget);
    if (!related || !related.hasClass('thumb')){
      this.defaultActive = true;
      this.defaultVisual.fade();
    }
    if (label) label.setStyle('display', 'none');
  }

});

window.addEvent('domready', function(){
  $$('.mainMenu2').each(function(item){
    new MainMenu2(item, {
      activateOnClick: item.hasClass('click')
    });
  });
});