/************************************************************
 * JSDropDown.js
 * Written by Cary Buchmann
 * February 05, 2010
 ***********************************************************/

function JSDropDown(navigationElement, dropdownElement)
{
	this.navElement = navigationElement;
	this.dropElement = dropdownElement;
	this.offsetWidth = -10;
	
	this.mouseX = 0;
	this.mouseY = 0;
	
	var dropdown = this;
	
	this.initialize = function()
	{
		dropdown.trackCoordinates();
		dropdown.detachFromContainer();
		
		$(dropdown.navElement).mouseover(function(){
			dropdown.showDropDown();
			return false;
		});
		
		$(dropdown.dropElement).mouseout(function(e){
			if(!dropdown.insideElement(e, dropdown.dropElement) && !dropdown.insideElement(e, dropdown.navElement))
				dropdown.hideDropDown();
		});
		
		setInterval(function(){
			if(!dropdown.insideElement(null, dropdown.dropElement) && !dropdown.insideElement(null, dropdown.navElement))
					dropdown.hideDropDown();
		}, 800);
	
	}
	
	this.showDropDown = function(delay, callback)
	{
		setTimeout(function(){
			dropdown.positionElementRespective(dropdown.navElement, dropdown.dropElement);
			$(dropdown.dropElement).fadeIn("fast");
			//dropdown.beginElementTracking(dropdown.dropElement);
			if(callback)
				callback();
		}, delay);
	}
	
	this.detachFromContainer = function()
	{
		var element = $(dropdown.dropElement);
		var classes = $(element).attr('class');
		$(dropdown.dropElement).remove();
		$('body').append(element, function(){
			$(element).addClass('navigation_dropdown');
		});
	}
	
	this.hideDropDown = function(delay, callback)
	{
		setTimeout(function(){
			
			$(dropdown.dropElement).fadeOut("fast");
			
			if(callback)
				callback();
		}, delay);
	}
	
	this.insideElement = function(e, element)
	{
		pos = $(element).offset();
		height = $(element).outerHeight();
		width = $(element).outerWidth();
		
		if(!e)
		{
			mouseX = dropdown.mouseX;
			mouseY = dropdown.mouseY;
		}
		else
		{
			mouseX = e.pageX;
			mouseY = e.pageY;
		}
		
		if(mouseX < pos.left || mouseX > pos.left+width)
			return false;
		if(mouseY < pos.top || mouseY > pos.top+height)
			return false;
		return true;
	}
	
	this.trackCoordinates = function()
	{
		$(document).mousemove(function(e){
			dropdown.mouseX = e.pageX;
			dropdown.mouseY = e.pageY;
		});
	}
	
	this.positionElementRespective = function(elementPos, elementToPos)
	{
		pos = $(elementPos).offset();
		height = $(elementPos).outerHeight();
		
		$(elementToPos).css({ position : "absolute", left : "0px", top : "0px" });
		$(elementToPos).css({left : (pos.left+dropdown.offsetWidth)+"px", top : (pos.top+height)+"px"});
	}
}