var HeaderCategories = function(){
	this.SetOptions();
	this.iButton = $("#" + this.options.iButton);
	this.iContent = $("#" + this.options.iContent);
	this.Initialization();
	this.timer = null;
	this.speed = this.options.speed;
	
	this.Over();
	this.Out();
};

HeaderCategories.prototype = {
	SetOptions: function(options){
		this.options = {
			iButton: "all",
			iContent: "lists",
			speed: 300
		};
		$.extend(this.options, options || {});
	},
	Initialization: function(){
		this.iHeightButton = this.iButton.height();
		this.iWidthButton = this.iButton.width();
		this.iTopButton = this.iButton.offset().top;
		this.iLeftButton = this.iButton.offset().left;

		this.iContent.css({ top: this.iHeightButton + this.iTopButton, left: this.iLeftButton });
	},
	Over: function(){	
		var _this = this;
		this.iButton.bind("mouseenter", function(event){
			if($(event.relatedTarget).parent("div").attr("id") == _this.options.iContent){
				_this.Show();
			}else{
				_this.timer = setTimeout(function(){ _this.Show(); }, _this.speed);
			}
		});
	},
	Out: function(){
		var _this = this;
		this.iButton.bind("mouseleave", function(event){
			if($(event.relatedTarget).parent("div").attr("id") != _this.options.iContent){ _this.Hide(); }
			clearTimeout(_this.timer);
		});
		
		this.iContent.bind("mouseleave", function(){
			_this.Hide();
		});
	},
	Show: function(){
		this.iButton.removeClass();
		this.iButton.addClass("all2");
		this.iContent.css({ visibility: "visible" });
	},
	Hide: function(){
		this.iContent.css({ visibility: "hidden" });
		this.iButton.removeClass();
		this.iButton.addClass("all");
	}
};