var SubmenuItem = JSX.Class.create('SubmenuItem');
SubmenuItem.prototype = 
{
	__id: null,
	
	__minX: 0,
	
	__maxX: 0,
	
	__minY: 0,
	
	__maxY: 0,
	
	__alpha: 0,
	
	__minAlpha: 0,
	
	__maxAlpha: 90,
	
	__active: false,
	
	__visible: false,
	
	__hidden: true,
	
	__showing: false,
	
	__hiding: false,
	
	__delaying: false,
	
	__showTimer: null,
	
	__hideTimer: null,
	
	__hideDelay: null,
	
	__setAlpha: function($alpha)
	{
		if(JSX.isSet($alpha)) this.__alpha = $alpha;
		Element.setOpacity(this.__submenu, (this.__alpha/100));
	},
	
	__setVisible: function()
	{
		this.__showTimer.stop();
		this.__submenu.style.display = 'block';
		this.__setAlpha(this.__maxAlpha);
	},
	
	__setHidden: function()
	{
		this.__hideTimer.stop();
		this.__submenu.style.display = 'none';
		this.__setAlpha(this.__minAlpha);
	},
	
	__fadeIn: function()
	{
		this.__alpha += 20;
		if(this.__alpha >= this.__maxAlpha)
		{
			this.__setVisible();
		}
		else
		{
			this.__setAlpha();
		}
	},
	
	__fadeOut: function()
	{
		this.__alpha -= 20;
		if(this.__alpha <= this.__minAlpha)
		{
			this.__setHidden();
		}
		else
		{
			this.__setAlpha();
		}
	},
	
	__construct: function($id, $menuId, $submenuId)
	{
		JSX.Event.makeBroadcaster(this);
		
		this.__id		= $id;
		this.__menu		= $($menuId);
		this.__submenu	= $($submenuId);
	},
	
	setArea: function($areaX, $areaY)
	{
		if($areaX)
		{
			if($areaX.min) this.__minX = $areaX.min;
			if($areaX.max) this.__maxX = $areaX.max;
		}
		if($areaY)
		{
			if($areaY.min) this.__minY = $areaY.min;
			if($areaY.max) this.__maxY = $areaY.max;
		}
	},
	
	setActive: function($active)
	{
		this.__active = ($active === true);
	},
	
	create: function()
	{
		// submenu positioneren
		var $position = getOffsetPosition(this.__menu);
		
		var $minX = ($position.left - 1);
		if($minX < this.__minX) $minX = this.__minX;
		
		if(this.__maxX)
		{
			var $submenuWidth = this.__submenu.offsetWidth;
			if(($submenuWidth + $minX) > this.__maxX)
			{
				$minX = (this.__maxX - $submenuWidth);
			}
		}
		
		this.__submenu.style.left = $minX +'px';
		this.__submenu.style.display = 'none';
		
		var $this = this;
		
		// show timer
		this.__showTimer = new jsx.Timer(20);
		this.__showTimer.onStart = function()
		{
			$this.__showing = true;
			$this.__submenu.style.display = 'block';
			$this.__fadeIn();
		};
		
		this.__showTimer.onStop = function()
		{
			$this.__showing = false;
		};
		
		this.__showTimer.onTime = function()
		{
			$this.__fadeIn();
		};
		
		// hide timer
		this.__hideTimer = new jsx.Timer(40);
		this.__hideTimer.onStart = function()
		{
			$this.__hiding = true;
			$this.__fadeOut();
		};
		
		this.__hideTimer.onStop = function()
		{
			$this.__hiding = false;
		};
		
		this.__hideTimer.onTime = function()
		{
			$this.__fadeOut();
		};
		
		
		// timer voor vertraging tijdens verdwijnen
		this.__hideDelay = new jsx.Timer(800, 1);
		this.__hideDelay.onStart = function()
		{
			$this.__delaying = true;
		};
		
		this.__hideDelay.onStop = function()
		{
			$this.__delaying = false;
		};
		
		this.__hideDelay.onTime = function()
		{
			if($this.__showing)
			{
				$this.__showTimer.stop();
			}
			$this.__hideTimer.start();
		};
		
		// event toevoegen aan menu en submenu
		this.__menu.onmouseover = function()
		{
			$this.show();
		};
		
		this.__menu.onmouseout = function()
		{
			$this.hide();
		};
		
		this.__submenu.onmouseover = function()
		{
			$this.show();
		};
		
		this.__submenu.onmouseout = function()
		{
			$this.hide();
		};
	},
	
	show: function()
	{
		this.__hideDelay.stop();
		this.__hideTimer.stop();
		
		if(!this.__showing)
		{
			this.dispatchEvent('onActive', [this.__id]);
			this.__showTimer.start();
		}
	},
	
	instantShow: function()
	{
		this.__hideDelay.stop();
		this.__hideTimer.stop();
		this.__showTimer.stop();
		
		this.__setVisible();
	},
	
	hide: function()
	{
		if(!this.__delaying && !this.__hiding)
		{
			this.__showTimer.stop();
			this.__hideDelay.start();
		}
	},
	
	instantHide: function()
	{
		this.__hideDelay.stop();
		this.__hideTimer.stop();
		this.__showTimer.stop();
		
		this.__setHidden();
	}
};