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': 20, 'y': 0},
			ajaxUrl: 			'index.php?option=com_visionr&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.body);
		this.hoverBox.addEvent(
				'mouseenter',
							function(){
									$$('a[rel=CZN]').removeEvents('mouseleave');
									//this.setProperty('display','block');
									}
		);
		this.hoverBox.addEvent('mouseleave',function(){	$('hoverBox').setOpacity(0);});
		this.innerHoverBox = new Element('div',{
								id:'innerHoverBox'
							}).injectInside(this.hoverBox);
		//this.innerHoverBox.addEvent('mouseleave',this.hideHoverBox());

		this.innerHoverHead = new Element('div',{
			id:'innerHoverHead'
		}).injectInside(this.innerHoverBox);
      this.innerHoverBody = new Element('div',{
			id:'innerHoverBody'
		}).injectAfter(this.innerHoverHead);
		/*this.innerHoverBody = new Element('div',{
			id:'innerHoverBody',
			class:'sidebar'
		}).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(){

	var myTimer = myfunction.delay(500);
	$clear(myTimer);
	function myfunction() {
		$('hoverBox').setOpacity(0);
		//this.hoverBox.effect('opacity').start(1,0);
		}

},

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

},

_getContent:function(alink, container){
	var url = alink + '&task=getVehicleModel&format=raw';
	var myAjax= new Ajax( url,{ 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));