var Bg = {
  MENU_SPEED: 0.1,
  TAB_SPEED: 0.2
};

/**
 * Tab class for tabs in the sports menu
 */
var Tab = Class.create({
  initialize: function(elem) {
    this.elem = elem;
    elem.closed = true;
  },
  open: function() {
    if(this.closed == false) return;
    this.closed = false;
    this.elem.down('ul').setStyle({ height: '0px' }).show().morph('height: 60px;', {
      duration: Bg.TAB_SPEED
    });
  },
  close: function() {
    if(this.closed) return;
    this.closed = true;
    var ul = this.elem.down('ul');
    ul.morph('height: 0px;', {
      duration: Bg.TAB_SPEED,
      afterFinish: function() {
        ul.hide();
      }
    });
  }
});

/**
 * Class representing the main menu submenus.
 * (Baltic Games, Baltic Sports, Baltic Art)
 */
var Submenu = Class.create({
  initialize: function(elem) {
    this.elem = elem;
    this.submenu = elem.down('.submenu');
    elem.closed = true;
  },

  open: function() {
    if(this.closed === false) return;
    this.closed = false;
    this.submenu.setStyle({ width: '0px' }).show()
      .morph('width: 110px;', {
        duration: Bg.MENU_SPEED
      });
  },

  close: function() {
    if(this.closed === true) return;
    this.closed = true;
    var submenu = this.submenu;
    submenu.morph('width: 0px;', {
      duration: Bg.MENU_SPEED,
      afterFinish: function() {
        submenu.hide();
      }
    });
  }
});

/**
 * Main menu class
 */
var Menu = Class.create({
  initialize: function(menu) {
    var that = this;
    menu.down('ul').immediateDescendants().each(function(elem, index) {
      var submenu = new Submenu(elem);
      var h3Elem = elem.down('h3');
      h3Elem
        .observe('mouseenter', that.menuShow.bindAsEventListener(that, h3Elem, submenu))
        .observe('mouseleave', that.menuHide.bindAsEventListener(that, h3Elem, submenu));
      var submenuElem = elem.down('.submenu');
      submenuElem
        .observe('mouseleave', that.menuHide.bindAsEventListener(that, submenuElem, submenu));
    });

    this.tabs = [];
    $$('li.tab').each(function(elem, index) {
      elem.observe('click', that.openTab.bindAsEventListener(that, elem));
      that.tabs.push(new Tab(elem));
    });
  },

  menuShow: function(event, elem, submenu) {
    submenu.open();
  },

  menuHide: function(event, elem, submenu) {
    if((elem.next('h3') && (event.relatedTarget == elem.next('h3').down()))
      || (elem.down('span') &&
          (elem.previous() == event.relatedTarget
           || elem.previous().descendants().indexOf(event.relatedTarget) != -1))) {
      return;
    }
    submenu.close();
  },

  openTab: function(event, tab) {
    this.tabs.each(function(elem, index) {
      if(elem.elem == tab) elem.open();
      else elem.close();
    });
  }
});

var Thumbs = Class.create(
  {
    initialize: function() {
      var thumbs = $$('.gallery-img');
      thumbs.each(function(elem, index) {
        if(elem.down('img').height > 0) {
          var img = elem.down('img');
          this.center(img);
        } else {
          elem.down('img').observe('load', function(event) {
            var img = Event.element(event);
            this.center(img);
          }.bindAsEventListener(this));
        }
      }.bind(this));
    },

    center: function(img) {
      var height = img.height;
      img.setStyle({
	position: 'absolute',
	top: ((100 - height) / 2 + 5) + "px",
        left: '5px'
      });
    }
  }
);

runOnLoad(function() {
  Bg.menu = new Menu($('menu'));
  new Thumbs(); // center thumbnails verticaly
});