// General Support v1.0
// Andrew Pettican (June 2010)
//
// Changelog:
// v1.0 - 07/06/2010 - Initial build
//////////////////////////////////////////////////////////////////

// ---------------------------------------------------------------
// Parameters
// ---------------------------------------------------------------

var gs_nav_fade_duration_in = 500; // Duration to fade nav links in
var gs_nav_fade_duration_out = 500; // Duration to fade nav links out
var gs_link_fade_duration = 500; // Duration to fade partner links in/out
var gs_banner_caption_fade_delay = 1500; // Initial delay before the banner caption fades in
var gs_banner_caption_fade_duration = 1000; // Duration to fade in the banner caption
var gs_quote_fade_delay = 1500; // Initial delay before the quote fades in
var gs_quote_fade_duration = 1000; // Duration to fade in the quote (the initial fade from white)
var gs_quote_cycle_delay = 20000; // Delay between quote transitions
var gs_quote_cycle_duration = 1000; // Duration to fade in a quote (subsequent fading transitions)
var gs_insert_contact_id_prefix = "insert_contact-"; // Insert contact link prefix
var gs_active_acronym = ""; // The active acronym the mouse is over
var gs_active_acronym_box = ""; // The active acronym box which is open

// ---------------------------------------------------------------
// Parameters End
// ---------------------------------------------------------------



// ---------------------------------------------------------------
// JS Events
// ---------------------------------------------------------------

$(document).ready(function()
{
	// When the mouse hovers over a ul.nav link element, animate the colour change
	//////////////////////////////////////////////////////////////
	$('ul.nav li a').live("mouseover mouseout", function(event)
	{
		// Determine if we are activating or deactivating the hover
		var activate_hover = (event.type == "mouseover");
		// alert("partner_list event - " + event.type);
		
		// Fetch the parent li element
		var parent_li = this.parentNode;
		
		// Animate the link based on the parent element class and if we are activating or deactivating the hover state
		if($(parent_li).hasClass('active'))
		{
			// Active element: <ul.nav><li.active><a>
			if(activate_hover) {
				$(this).stop().animate({ backgroundColor: '#77AA33', color: '#FFFFFF' }, gs_nav_fade_duration_in);
			} else {
				$(this).stop().animate({ backgroundColor: '#77AA33', color: '#FFFFFF' }, gs_nav_fade_duration_out);
			}
		}
		else
		{
			// Inactive element: <ul.nav><li><a>
			if(activate_hover) {
				$(this).stop().animate({ backgroundColor: '#77AA33', color: '#FFFFFF' }, gs_nav_fade_duration_in);
			} else {
				$(this).stop().animate({ backgroundColor: '#EFEFEF', color: '#67696B' }, gs_nav_fade_duration_out);
			}
		}
	});
	
	
	// When the mouse hovers over a #partner_list link element, animate the colour change
	//////////////////////////////////////////////////////////////
	$('#partner_list li a').live("mouseover mouseout", function(event)
	{
		// Determine if we are activating or deactivating the hover
		var activate_hover = (event.type == "mouseover");
		// alert("partner_list event - " + event.type);
		
		// Fetch the parent li element
		var parent_li = this.parentNode;
		
		// Animate the link based on the parent element class and if we are activating or deactivating the hover state
		if($(parent_li).hasClass('active'))
		{
			// Active element: <ul#partner_list><li.active><a>
			if(activate_hover) {
				$(this).stop().animate({ backgroundColor: '#EFEFEF', color: '#67696B' }, gs_link_fade_duration);
			} else {
				$(this).animate({ backgroundColor: '#EFEFEF', color: '#67696B' }, gs_link_fade_duration);
			}
		}
		else
		{
			// Inactive element: <ul#partner_list><li><a>
			if(activate_hover) {
				$(this).stop().animate({ backgroundColor: '#EFEFEF', color: '#67696B' }, gs_link_fade_duration);
			} else {
				$(this).animate({ backgroundColor: '#DADFC5', color: '#5E962B' }, gs_link_fade_duration);
			}
		}
	});
	
	
	// Change the img src of a rollover link
	//////////////////////////////////////////////////////////////
	$('a.rollover_link').hover(
		function ()
		{
			// Get some details of the image within this link
			var link_img = $(this).children("img:first");
			var old_src = $(link_img).attr('src');
			
			// Generate the new img src
			var new_src = old_src;
			var ext_index = old_src.lastIndexOf(".");
			if(ext_index > 0)
			{
				var file_name = old_src.substr(0, ext_index);
				var file_ext = old_src.substr(ext_index);
				new_src = file_name+"_hl"+file_ext;
			}
			$(link_img).attr('src', new_src);
		}, 
		function ()
		{
			// Get some details of the image within this link
			var link_img = $(this).children("img:first");
			var old_src = $(link_img).attr('src');
			
			// Generate the new img src
			var new_src = old_src;
			var ext_index = old_src.lastIndexOf(".");
			var hl_index = old_src.lastIndexOf("_hl");
			if(ext_index > 0 && hl_index > 0)
			{
				var file_name = old_src.substr(0, hl_index);
				var file_ext = old_src.substr(ext_index);
				new_src = file_name+file_ext;
			}
			$(link_img).attr('src', new_src);
		}
	);
	
	
	// Fade in the banner caption after a slight delay
	//////////////////////////////////////////////////////////////
	$('#banner p.banner_caption').hide();
	setTimeout(function()
	{
		$('#banner p.banner_caption').fadeIn(gs_banner_caption_fade_duration);
	}, gs_banner_caption_fade_delay);
	
	
	// Fade in the quotes after a slight delay, then being cycling
	//////////////////////////////////////////////////////////////
	$('#quote').hide();
	setTimeout(function()
	{
		$('#quote').fadeIn(gs_quote_fade_duration);
		
		// Start cycling the quotes
		$('#quote').cycle({ 
			timeout: gs_quote_cycle_delay, 
			speed: gs_quote_cycle_duration,
			random: 1
		});
	}, gs_quote_fade_delay);
	
	
	// Initialise the acronyms by moving all 'title' attributes into 'rel' attributes
	// This is necessary to prevent the browser from displaying the titles
	//////////////////////////////////////////////////////////////
	$('acronym').each(function()
	{
		$(this).attr('rel', $(this).attr('title'));
		$(this).attr('title', "");
	});
	
	
	// When the mouse hovers over an acronym, display a box with the rel content (if available)
	//////////////////////////////////////////////////////////////
	$('acronym').bind("mouseenter mouseleave", function(event)
	{
		// Determine if we are activating or deactivating the hover
		var activate_hover = (event.type == "mouseenter");
		var acronym_content = $(this).attr('rel');
		var acronym_id = $(this).attr('id');
		var new_active_acronym = acronym_id+"-hovering_box";
		//alert("event.type: '"+event.type+"'\nactivate_hover: '"+activate_hover+"'\nacronym_content: '"+acronym_content+"'\nacronym_id: '"+acronym_id+"'\nnew_active_acronym: '"+new_active_acronym+"'\ngs_active_acronym_box: '"+gs_active_acronym_box+"'\nacronym changed?: '"+(new_active_acronym != gs_active_acronym_box)+"'");
		
		// Display an acronym box?
		if(activate_hover && acronym_content !== "" && acronym_id !== "" && new_active_acronym != gs_active_acronym_box)
		{
			// Remove the old acronym box?
			if(gs_active_acronym_box !== "")
			{
				$('#'+gs_active_acronym_box).remove();
			}
			
			// Display the new acronym box
			var box_position_x = event.pageX;
			var box_position_y = Math.round($(this).offset().top+$(this).height());
			gs_active_acronym = acronym_id;
			gs_active_acronym_box = new_active_acronym;
			$('body').append('<div id="'+new_active_acronym+'" class="hovering_box" style="top:'+box_position_y+'px; left:'+box_position_x+'px;">'+acronym_content+'</div>');
		}
		
		// Destroy an acronym box?
		else
		{
			// Double check that the mouse has left the acronym, and that is has also left the box
			if(!(is_mouseover(event.pageX, event.pageY, '#'+gs_active_acronym) || is_mouseover(event.pageX, event.pageY, '#'+gs_active_acronym_box)))
			{
				// Remove the box
				$('#'+gs_active_acronym_box).remove();
				
				// Clear the active acronym params
				gs_active_acronym = "";
				gs_active_acronym_box = "";
			}
			//alert(event.pageX + " " + event.pageY + " AC: " + (is_mouseover(event.pageX, event.pageY, '#'+gs_active_acronym) || is_mouseover(event.pageX, event.pageY, '#'+gs_active_acronym_box)));
		}
	});
	$('.hovering_box').live("mouseleave", function(event)
	{
		// The mouse has left the acronym box, but has it left the acronym?
		if(!(is_mouseover(event.pageX, event.pageY, '#'+gs_active_acronym)))
		{
			// Remove the box
			$('#'+gs_active_acronym_box).remove();
			
			// Clear the active acronym params
			gs_active_acronym = "";
			gs_active_acronym_box = "";
		}
		//alert(event.pageX + " " + event.pageY + " HB: " + (is_mouseover(event.pageX, event.pageY, '#'+gs_active_acronym)));
	});
	
	
	// Create all contact links
	//////////////////////////////////////////////////////////////
	$('a.insert_contact').each(function()
	{
		// Determine the email address
		var contact_name = $(this).attr('rel').substr(gs_insert_contact_id_prefix.length);
		var contact_email = generate_email(contact_name);
		
		// Update the link with the correct email address
		$(this).attr('href', "mailto:"+contact_email);
		if($(this).html() == "")
		{
			$(this).html(contact_email);
		}
	});
	
	
	// Load the page in a new window
	//////////////////////////////////////////////////////////////
	$('a[rel=external], a.external_link').each(function()
	{
		// Set target, clear rel and update titles
		$(this).attr("target", "_blank").attr("rel", "");
		var old_title = $(this).attr("title");
		if(old_title !== "")
		{
			$(this).attr("title", old_title+" [Opens in new window]");
		}
		else
		{
			$(this).attr("title", "[Opens in new window]");
		}
	});
});

// ---------------------------------------------------------------
// JS Events End
// ---------------------------------------------------------------



// ---------------------------------------------------------------
// Functions
// ---------------------------------------------------------------

/**
 * Email link generator
 */
function insertContact(theName, linkText, linkclass)
{
	var theDomain = ('hatton' + 'grange' + '.' + 'co' + '.' + 'uk');
	
	var theClass = "";
	if(typeof(linkclass) == "string")
	{
		theClass = 'class="' + linkclass + '" ';
	}
	
	var theAddress = (theName + '&#064' + theDomain);
	if(typeof(linkText) != "string")
	{
		linkText = theAddress;
	}
	document.write('<a ' + theClass + 'href="mailto:' + theAddress +'">' + linkText + '<\/a>');
}


/**
 * Email address generator
 */
function generate_email(theName)
{
	var theDomain = ('hatton' + 'grange' + '.' + 'co' + '.' + 'uk');
	return (theName + '@' + theDomain);
}

/**
 * Calculates the width/height of an object.
 * node			- The node to measure the width/height
 * horizontal	- Flag indicating if we should measure width or height (true = width, false = height).
 * padding		- Flag indicating if we should include any padding in the width/height
 * margin		- Flag indicating if we should include any margins in the width/height
 * borders		- Flag indicating if we should include any borders in the width/height
 * 
 * Note: By default this function will calculate the width, including all padding/margins/borders.
 */
function calc_full_width_height(node, horizontal, padding, margin, borders) {
	// horizontal defaults to true.
	if (typeof(horizontal) == "undefined") { horizontal = true; }
	
	// padding/margin/borders default to true
	if (typeof(padding) == "undefined") { padding = true; }
	if (typeof(margin) == "undefined") { margin = true; }
	if (typeof(borders) == "undefined") { borders = true; }
	
	// Are we measuring vertically (default) or horizontally
	var dimensionA = "top";
	var dimensionB = "bottom";
	if(horizontal) {
		dimensionA = "left";
		dimensionB = "right";
	}
	
	var result = 0;
	if(node !== null) {
		var dimensionA_padding = (padding) ? parseInt($(node).css("padding-" + dimensionA), 10) : 0;
		var dimensionB_padding = (padding) ? parseInt($(node).css("padding-" + dimensionB), 10) : 0;
		var dimensionA_margin = (margin) ? parseInt($(node).css("margin-" + dimensionA), 10) : 0;
		var dimensionB_margin = (margin) ? parseInt($(node).css("margin-" + dimensionB), 10) : 0;
		var dimensionA_border = (borders) ? parseInt($(node).css("border-" + dimensionA + "-width"), 10) : 0;
		var dimensionB_border = (borders) ? parseInt($(node).css("border-" + dimensionB + "-width"), 10) : 0;
		var objsize = (horizontal) ? $(node).width() : $(node).height();
		
		// Add it all up
		if(!isNaN(dimensionA_padding)) { result += dimensionA_padding; }
		if(!isNaN(dimensionB_padding)) { result += dimensionB_padding; }
		if(!isNaN(dimensionA_margin)) { result += dimensionA_margin; }
		if(!isNaN(dimensionB_margin)) { result += dimensionB_margin; }
		if(!isNaN(dimensionA_border)) { result += dimensionA_border; }
		if(!isNaN(dimensionB_border)) { result += dimensionB_border; }
		if(!isNaN(objsize)) { result += objsize; }
	}
	
	return result;
}


/**
 * Determines if the specified subnav should remain active based on the current mouse position
 * mouseX	- Current mouse x-coordinate
 * mouseY	- Current mouse y-coordinate
 * id		- The node to test against
 */
function is_mouseover(mouseX, mouseY, node, padding, margin, borders) {
	// padding/margin/borders default to true
	if (typeof(padding) == "undefined") { padding = true; }
	if (typeof(margin) == "undefined") { margin = true; }
	if (typeof(borders) == "undefined") { borders = true; }
	
	var answer = false;
	
	if(node !== null) {
		// Calculate the boundaries that the mouse must stay within.
		var nodeTopCoord = $(node).offset().top;
		var nodeLeftCoord = $(node).offset().left;
		var nodeBottomCoord = nodeTopCoord + calc_full_width_height(node, false, padding, margin, borders);
		var nodeRightCoord = nodeLeftCoord + calc_full_width_height(node, true, padding, margin, borders);
		
		// Is the mouse within these bounds?
		answer = (mouseY >= nodeTopCoord && mouseX >= nodeLeftCoord && mouseY <= nodeBottomCoord && mouseX <= nodeRightCoord);
	}
	
	return answer;
}

// ---------------------------------------------------------------
// Functions End
// ---------------------------------------------------------------