var HoverMenu = {
   init: function(options){
      this.options = Object.extend({
         changeduration: 300,
         changeTransition: Fx.Transitions.Elastic.easeOut,
         initialWidth: 200,
         initialHeight: 200,
         animateCaption: true,
         showDelay: 100,
         hideDelay: 100,
         offsets: {'x': 60, 'y': 0},
         ajaxUrl: 'index.php?option=com_autotechnik&task=getSubCat&format=raw&cid=',
         ajaxOptions: {method:'get'},
         ajaxLoadingText: 'Loading...'
      }, options || {});

      this.anchors = [];

      $each($$('a[rel=CZN]'), function(el, index){
         if (el.rel && el.rel == "CZN"){
            el.set({
               'events':{'mouseenter': this.showHoverBox.pass([el, index], this), 
               'mouseleave': this.hideHoverBox.pass([el, index], this)}
            });
            el.getParent().setProperty('id','vMenu-'+index);
            this.anchors.push(el);
         }
      }, this);

      this.hoverBox = new Element('div', {styles:{'position':'absolute', 'display': 'none', 'z-index': '100'}, id:'hoverBox'}).injectInside(document.getElementById("container"));
      this.hoverBox.addEvent('mouseenter', function(){$$('a[rel=CZN]').removeEvents('mouseleave');});
      this.hoverBox.addEvent('mouseleave',function(){$('hoverBox').setOpacity(0);});
      this.innerHoverBox = new Element('div',{id:'innerHoverBox'}).injectInside(this.hoverBox);
      this.innerHoverHead = new Element('div',{id:'innerHoverHead'}).injectInside(this.innerHoverBox);
      this.innerHoverBody = new Element('div',{id:'innerHoverBody'}).injectAfter(this.innerHoverHead);
},

position: function(element){var pos=element.getPosition(); this.hoverBox.setStyles({'left': pos.x + this.options.offsets.x , 'top': pos.y + this.options.offsets.y});},

showHoverBox:function(element, index){
   if(this.innerHoverBody.hasChild){prevObj = this.innerHoverBody.getChildren(); prevObj.setStyle('display','none');}

   var contentBox = 'content-'+index;
   if(!$(contentBox)){
      this.innerHoverBody.addClass('loading'); this.contentBox=new Element('div',{'id':contentBox}).injectInside(this.innerHoverBody); 
      var ajaxVar= this._getContent(element, contentBox); this.innerHoverBody.removeClass('loading');
   }else{
      $(contentBox).setStyle('display','block');
   }

   this.position(element);
   this.hoverBox.setStyles({'z-index':'999', 'display':'block', 'opacity':'1'});
   this.hoverBox.effect('opacity').start(0.8,1);
   this.innerHoverHead.setHTML("<h3>"+element.getText()+" &nbsp; - &nbsp; Select the Model</h3>");
},

hideHoverBox:function(){$clear(myfunction.delay(500)); function myfunction() {$('hoverBox').setOpacity(0);}},

hideContentBox:function(element){$(element).setStyle('display','none');},

_getContent:function(alink, container){
   var myAjax= new Ajax(alink + '&task=getVehicleModel&format=raw',{ method: 'get', update: container});
   myAjax.request();
   return myAjax;
},

debugObject:function(obj){for (var prop in obj){console.log(obj+"." + prop + " : " + obj[prop]);}}
};
window.addEvent('domready', HoverMenu.init.bind(HoverMenu));