$(document).ready(function()
{
	// Selected element
	var link_element;

	// When mouse enters the link
	$(".theme_hover").live('mouseenter', function()
	{
		link_element = $(this);
		theme_global = new Array();
		
		// Split settings
		var settings_raw = link_element.attr("id").split('_');
		
		// Get settings
		theme_global['id'] = settings_raw[1];
		theme_global['color'] = '#' + settings_raw[3];
		
		// Set link color
		link_element.css("background", theme_global['color']);
		link_element.css("color", "#FFF");
		
		// Timout to show the menu
		$.doTimeout('state_show', 300, function()
		{
			var element = link_element;
			
			var o1 = element.offset();
			var o2 = $("#sub_menu").offset();
			var dy = o2.top - o1.top;
	
			$("#sub_menu").css("margin-top", parseFloat($("#sub_menu").css("margin-top")) - dy + element.height());
			$("#sub_menu").css("visibility", "visible");
			$("#sub_menu").css("background", theme_global['color']);
			// Store theme info in the data of the sub_menu element to know which theme belongs to the current sub_menu.
			$("#sub_menu").data("theme", element.attr("id"));
			
			$("#sub_menu").empty()
			
			// Build up menu
			$.ajax(
			{
				type: 'GET',
				url: '/menu.php',
				cache: false,
				data: {thema_id:theme_global['id']},
				success: function(html) 
				{
					$("#sub_menu").html(html);
				}
			});
		});
	});
	
	// When mouse leave the link
	$(".theme_hover").live('mouseleave', function()
	{
		var theme_link = $(this);
		
		// Cancel doTimeout 'state_show' (thus cancel the script to show the menu)
		$.doTimeout('state_show');
		
		if ($("#sub_menu").css("visibility") == 'hidden')
		{
			var settings_raw = theme_link.attr("id").split('_');
			change_link_color(settings_raw, theme_link);
		}
		else
		{
			// Have a small timout so sub_menu do not dissapear when user
			// is goign from link to sub_menu
			$.doTimeout('state_hide', 5, function()
			{
				$("#sub_menu").css("visibility", "hidden");
				
				var settings_raw = $("#sub_menu").data("theme").split('_');
				change_link_color(settings_raw, theme_link);
			});	
		}
	});
	
	// Mouse enters #sub_menu so stop the timout for hiding the menu.
	$("#sub_menu").live('mouseenter', function()
	{
		// Cancel doTimout 'state_hide'
		$.doTimeout('state_hide');
	});
	
	// Hide the menu en return the links in the original state
	$("#sub_menu").live('mouseleave', function() // Do not use mouseout, as this will hide the menu aswell when hovering child elements.
	{
		var element = $(this); // div with id #sub_menu
		var theme_link = $("#" + element.data("theme")); // Theme ID
		
		element.css("visibility", "hidden");
		
		// Get data
		var settings_raw = element.data("theme").split('_');
		
		change_link_color(settings_raw, theme_link);
	});
});

function change_link_color(settings, link_object)
{
	var theme = new Array();
	theme['id'] = settings[1];
	theme['color'] = '#' + settings[3];

	link_object.css("background", 'transparent');
	link_object.css("color", theme['color']);	
}