var menuheight;
var selected;
var containerPos;
var totalPos;
var elementPos;
var windowSize;
var elementWidth;
var totalElementPos;
var diff;
var newPos;

$(document).ready(function()
{
	$('.topmenu').mouseenter(function()
	{
		selected = $(this).children("ul");
		menuheight = $(this).children("a").attr("id") * 26 + "px";
		
		/// Get left Container position
		containerPos = $('.menu_container').position();
	
		/// Get left Element position
		elementPos = $(selected).position();
		
		/// Total left position
		position = elementPos.left + containerPos.left;
		
		/// Get current window width
		windowSize = $(window).width();
		
		/// Get current element width
		elementWidth = $(selected).width();
		
		/// Get total width
		totalElementPos = position + elementWidth;
		
		/// See if window width is smaller as right element position
		if(windowSize < totalElementPos)
		{
			/// Calculate difference between window width and right position element 
			diff = totalElementPos - windowSize;
			
			/// Calculate new position for element
			newPos = elementPos.left - diff;
			
			$(selected).css({left: newPos});
		}
		else if(windowSize > totalElementPos)
		{
			$(selected).css({ left: "auto"});
		}
		
		$(selected).animate().stop();
		$(selected).css({ opacity: 0, height: "0px" });
		$(selected).animate({opacity: 1, height: menuheight}, 300, function()
		{
			// Als de slider uitgeklapt is.
		});
	});
	
	$('.topmenu').mouseleave(function()
	{
		$(selected).animate().stop();
		$(selected).animate({opacity: 0, height: "0px"}, 300, function()
		{
			// Als de slider uitgeklapt is.
		});
	});
	
});