window.addEvent('domready', function() {
  if($('overlayInfo') != null) {
    var menuOverlay = $('menuOverlay');
    var overlay = $('overlay');
    var clickTimer = null;
    var menu = $('navigation');
    var oldElement = null;
    var overlayTitle = document.getElement('.overlayTitle');
    var overlayInfo = $('overlayInfo');
    var itemsDiv = $('items');
    var overlaySubtitle = overlayInfo.getElement('.title');
    var overlaySubtitle2 = overlayInfo.getElement('.title2');
    var itemsList = overlayInfo.getElement('#moreItems');
    var itemsList2 = overlayInfo.getElement('#moreItems2');
    
    $$('#navigation a.arrow').addEvent('click', openOverlay);
    overlay.addEvent('click', function(e){
      closeOverlay(e);
    });
    
    menu.addEvent('mouseleave', function() {
      if(clickTimer != null){
        clearTimeout(clickTimer);
      } 
         
      clickTimer = function(){
         closeOverlay();
      }.delay(1000);
    });
    
    menu.addEvent('mouseenter', function() {
      if(clickTimer != null){
        clearTimeout(clickTimer);
      }
    });
  }
  
  function openOverlay(e) {
    if(e!=null){
      e.preventDefault();
    }
    li = this.getParent('li');
    ul = li.getParent('ul');
    liPos = li.getCoordinates();
    ulPos = ul.getCoordinates();
    $$('#navigation a.arrow').removeEvent('click', closeOverlay);
    if(oldElement != null) oldElement.addEvent('click', openOverlay);
    overlay.setStyles({'display':'block',
                        'top':(liPos.top.toInt()+liPos.height.toInt()+10)+'px'});
    menuOverlay.setStyles({
                        'left':ulPos.left,
                        'top':(liPos.top.toInt()+liPos.height.toInt()+10)+'px',
                        'display': 'block'
                      });
    
    var allLi = $$('#navigation a.arrow').getParent('li');
    if(allLi.hasClass('active')){
      allLi.removeClass('active');
    }
    li.addClass('active');
    (function(){
      this.removeEvent('click', openOverlay);
      this.addEvent('click', closeOverlay);
     }).delay(300, this);
     oldElement = this;
     
     var elementLoad = this.getProperty('rel');
     
     var jsonRequest = new Request.JSON({url: '/application/assets/default/handlers/menu.php', onSuccess: function(element){
       createOverlayElements(element.title, element.items, element.subtitle, element.references, element.moreInfo, element.subtitle2, element.moreInfo2);
     }}).get({'element': elementLoad});
  }
  
  function closeOverlay(e){
    if(e!=null){
      e.preventDefault();
    }
    $$('#navigation a.arrow').removeEvent('click', closeOverlay);
    $$('#navigation a.arrow').removeEvent('click', openOverlay);
    $$('#navigation a.arrow').addEvent('click', openOverlay);
    menuOverlay.setStyle('display', 'none');
    overlay.setStyle('display', 'none');
    var li = $$('#navigation a.arrow').getParent('li');
    if(li.hasClass('active')){
      li.removeClass('active');
    }
  }
  
  function createOverlayElements(t,i, subtitle, references, moreInfo, subtitle2, moreInfo2){
    overlayTitle.set('html', t);
    overlaySubtitle.set('html', subtitle);
    overlaySubtitle2.set('html', subtitle2);
    itemsDiv.empty();
    itemsList.empty();
    itemsList2.empty();
    
    i.each(function(value){
      var item = new Element('div', {
          'class': 'overlayItem',
          'rel': value.link,
          'html': '<img src="'+value.img+'" alt="" width="100" height="70" /> <span class="itemTitle">'+value.itemTitle+'</span> <p>'+value.description+'</p>',
          events: {
              click: function(){
                  window.location = this.get('rel');
              },
              mouseenter: function(){
                this.addClass('overlayhover');
              },
              mouseleave: function(){
                this.removeClass('overlayhover');
              }
          }
      });          
      item.inject(itemsDiv);
    });
    
    if(moreInfo.length > 0) {
      $('overlayInfo').setStyle('display','block');
      $('items').setStyle('width','540px');
      moreInfo.each(function(value){
        var item = new Element('li', {
            'html': '<a href="'+value.link+'" title="'+value.title+'">'+value.title+'</a>'
        });          
        item.inject(itemsList);
      });
      moreInfo2.each(function(value){
        var item = new Element('li', {
            'html': '<a href="'+value.link+'" title="'+value.title+'">'+value.title+'</a>'
        });          
        item.inject(itemsList2);
      });
    } else {
      $('overlayInfo').setStyle('display','none');
      $('items').setStyle('width','auto');
    }
    
    references.each(function(value){
      $('refovertitle').set('html', '<a href="'+value.link+'" title="'+value.title+'">'+value.title+'</a>');
    });
  }
});