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().right;



		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");

	}

};