var Comotion = {
  init: function() {
    this.buttons = $$('#header ul.nav li a');
    this.container = $('container');
    this.content = $('content');
    this.contact = $('contactContainer');
    return this.setup().addClicks();
  },
  setup: function() {
    if (this.content) this.content.set('tween', { duration: 250 });
    this.evtOver = this.handleOver.bind(this);
    this.evtOut = this.handleOut.bind(this);
    this.evtClick = this.handleClick.bind(this);
    this.evtKeys = this.handleKeys.bind(this);
    return this;
  },
  addClicks: function() {
    this.buttons.each(function(el,idx) {
  	 	el.addEvent('click', this.evtClick);
    }.bind(this));
    return this;
  },
  addRollovers: function() {
    this.hasRollovers = true;
    this.buttons.each(function(el,idx) {
  	 	el.addEvent('mouseover', this.evtOver);
  	 	el.addEvent('mouseout', this.evtOut);
    }.bind(this));
    return this;
  },
  resetNav: function() {
    this.buttons.each(function(el,idx) {
      el.erase('style');
  	}.bind(this));
  },
  clear: function() {
    this.teaser_img = this.teaser_img.set('src', '/images/pixel.gif').dispose();
    return this;
  },
  showContact: function() {
    if (this.contact && this.contact.getStyle('display') !== 'block') {
      this.overlay = new Mootils.Overlay({ zIndex: 4500 });
      this.contact.fade('hide').setStyle('display', 'block').fade('in');
      window.addEvent('keyup', this.evtKeys);
    }
    return this;
  },
  hideContact: function() {
    if (this.contact && this.contact.getStyle('display') !== 'none') {
      if (this.overlay) this.overlay = this.overlay.hide();
      this.contact.fade('out').setStyle.delay(this.contact.get('tween').options.duration, this.contact, ['display', 'none' ]);
      window.removeEvent('keyup', this.evtKeys);
    }
    return this;
  },
  handleOver: function(evt) {
    var src = evt.target.get('rel');
    var c = evt.target.getCoordinates(this.container);
    c.top += c.height + 40;
    if (src) {  
      if (this.contentInt) this.contentInt = $clear(this.contentInt);
      if (this.content) this.content.fade('out');
      this.teaser_img = new Element('img', { src: src });
      this.teaser_img.setStyles({
        'display': 'block',
        'position': 'absolute',
        'left': c.left + 2,
        'top': c.top
      }).set('tween', { duration: 200 }).fade('hide').inject(this.container).fade('in');
    }
  },
  handleOut: function(evt) {
    this.clear();
    if (this.content) this.contentInt = this.content.fade.delay(150, this.content, 'in');
  },
  handleClick: function(evt) {
    switch (evt.target.get('class')) {
      case 'btnContact':
        evt = new Event(evt).stop();
        this.showContact();
        break;
      default:
        evt.target.setStyle('background-position-y', 'bottom');
        this.resetNav();
    }
  },
  handleKeys: function(evt) {
    switch (evt.key) {
      case 'esc':
        this.hideContact();
        break;
    }
  } 
}