var CategoryDropDown = new Class({
	initialize: function(container){
		this.container 			= container;
		this.elements			= {};
		this.elements.dd 		= new Element('DIV',{'id':'categoryBox','class':'hide'});
		this.elements.ddQ 		= new Element('DIV',{'class':'q'}).inject(this.elements.dd);
		this.elements.ddHeader 	= new Element('DIV',{'class':'header'}).inject(this.elements.dd);
		this.elements.ddBody 	= new Element('DIV',{'class':'body'}).inject(this.elements.dd);
		this.elements.dd.inject(this.container);
		this.content			= new Object();
		this.selectedType		= 'products';
		coords 					= this.container.getCoordinates();
		this.elements.dd.setStyles({'top':coords.top+26, 'left':coords.left-450,'display':'block'});
		
		//Events
		this.events = {
			show		: this.show.bind(this),
			selectTab	: this.selectTab.bind(this),
			hide		: this.hide.bind(this)
		};
		
		this.container.addEvent('mouseenter',	this.events.show);
		this.container.addEvent('mouseleave',	this.events.hide);
		this.renderTabs();
	},
	loadContent: function(type){
		if ( ! type ) { type = 'products'; }
		this.elements.ddBody.setHTML('Loading...');
		
		//Get data by ajax
		var self 	= this;
		if ( this.content[type] ) {
			self.elements.ddBody.setHTML(this.content[type]);
		} else {
			var url 		= SITE_BASE_URL + '/ajaxdu/json_dd_categories/'
			var request 	= new Json.Remote(url, {
				onComplete: function(jsonObj) {
					var i=0;
					var divider = Math.ceil(jsonObj.results.length/3);
					var p = Math.round(100/divider)
					str = '<table><tr><td nowrap valign="top" width="'+p+'%">';
					jsonObj.results.each(function(row){
						if ( i % divider == 0 ){
							str += '</td><td nowrap valign="top" width="'+p+'%">';
						}
						str += '<div style="margin-bottom:5px;"><a href="'+SITE_BASE_URL+row.cat_path+'/index.html" style="font-size:11px;">'+row.cat_name + '</a> (' + row.kids + ') </div>';
						i++;
					});
					str += '</td></tr></table>';
					self.content[type] = str;
					self.elements.ddBody.setHTML(self.content[type]);
					this.selectedType		= type;
				}
			}).send({'catType':type});
		}
	},
	selectTab: function(e){
		var e 	= new Event(e);
		target  = $(e.target);
		target.getParent().getChildren().each(function(el){
			el.removeClass('tab');
			el.removeClass('tabSelected');
			if ( target == el ) {
				el.addClass('tabSelected');
			} else {
				el.addClass('tab');
			}
		});
		
		txt 	= target.getText().toLowerCase();
		this.selectedType = txt;
		this.loadContent(txt);
	},
	renderTabs: function(){
		var tab1 = new Element('A',{'class':'tabSelected'});
			tab1.setText('Products');
			tab1.addEvent('click',this.events.selectTab);
			tab1.inject(this.elements.ddHeader);
		var tab2 = new Element('A',{'class':'tab'});
			tab2.setText('Services');
			tab2.addEvent('click',this.events.selectTab);
			tab2.inject(this.elements.ddHeader);
	},
	hide: function(e){
		if ( e ) {
			var e = new Event(e);
			target  = $(e.relatedTarget);
			while (target) {
				if ( target == this.container ){
					return;
				}
				target = $(target.parentNode)
			}
		}
		this.elements.dd.addClass('hide');
		
	},
	show: function(){
		this.elements.dd.removeClass('hide');
		this.loadContent(this.selectedType);
	}
});