// General Support v1.0
// Andrew Pettican (February 2010)
//
// Changelog:
// v1.0 - 18/02/2010 - Initial build
//////////////////////////////////////////////////////////////////

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

var dls_cycle_duration = 1000; // Duration of cycle effects
var dls_detail_fade_duration = 1000; // Duration of detail layer fades
var dls_pulsate_detail_layer_next = true; // Should #detail_layer_next pulsate?
var dls_pulsate_detail_layer_prev = true; // Should #detail_layer_prev pulsate?
var dls_polling_timer = null; // Polling timer (to wait for initial animations to complete)
var dls_polling_interval = 500; // Interval between polling (to wait for initial animations to complete)
var dls_pulsate_timer = null; // Pulsate timer
var dls_pulsate_interval = 4000; // Interval between pulsations
var dls_pulsate_duration = 800; // Duration of pulsations (each way)
var dls_detail_layer_id_prefix = "detail_layer_";
var dls_detail_layer_root_id = dls_detail_layer_id_prefix+"index";
var dls_layers_initialised = false; // Flag indicating if detail layers have been initialised

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



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

jQuery(document).ready(function()
{
	// To blur focus when the detail layer arrows are clicked
	$('#detail_layer_next a, #detail_layer_prev a').live("focus click", function(e)
	{
		this.blur();
	});	
	
	
});

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



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

function initialise_detail_layers()
{
	if(!dls_layers_initialised)
	{
		// Set a flag to prevent initialising again
		dls_layers_initialised = true;
		
		if($('#detail_layers').length > 0)
		{
			// Determine which slide will start
			var starting_slide = 0;
			var detail_layers = $('#detail_layers .detail_layer');
			if(detail_layers.length > 0)
			{
				for(layer_index=0; layer_index < detail_layers.length; layer_index++)
				{
					if($(detail_layers[layer_index]).hasClass('detail_layer_default'))
					{
						starting_slide = layer_index;
						break;
					}
				}
			}
			
			
			// Initialise cycling control to view the detail layers
			$('#detail_layer_pager').html('');
			$('#detail_layers').cycle(
			{
				fx:					'scrollHorz',
				speed:				dls_cycle_duration, 
				pager:				'#detail_layer_pager', 
				activePagerClass:	'active', 
				pagerAnchorBuilder: dls_pagerAnchorBuilder, 
				pagerClick:			dls_pagerClick, 
				timeout:			0, 
				next:				'.detail_layer_next', 
				prev:				'.detail_layer_prev', 
				before:				dls_before, 
				after:				dls_after, 
				startingSlide:		starting_slide
			});
			
			
			// To show/hide the detail layer arrows when the mouse hovers over them
			if(ie_version < 0 || ie_version > 6)
			{
				// Normal browsers
				$('#detail_layer_next a, #detail_layer_prev a').hover(
					function() 
					{
						// Hover activated
						dls_animate_detail_layer_arrow(this, true);
					}, 
					function()
					{
						// Hover deactivated
						dls_animate_detail_layer_arrow(this, false);
					}
				);
			}
			else
			{
				// IE6 can't handle triggering on the a tag
				$('#detail_layer_next, #detail_layer_prev').mousemove(function()
				{
					// Ensure that the arrow is displayed in IE6, this is needed if the mouse begins over the arrow after the initial animations have completed.
					if(!$(this).children('a').first().hasClass('ie_show'))
					{
						// Hover activated
						dls_animate_detail_layer_arrow($(this).children('a').first(), true);
					}
				});
				$('#detail_layer_next, #detail_layer_prev').hover(
					function() 
					{
						// Hover activated
						dls_animate_detail_layer_arrow($(this).children('a').first(), true);
					}, 
					function()
					{
						// Hover deactivated
						dls_animate_detail_layer_arrow($(this).children('a').first(), false);
					}
				);
			}
			
			
			// To pulsate the detail layer arrows on a fixed interval (Not for IE)
			if(ie_version < 0)
			{
				dls_pulsate_timer = setInterval(function()
				{
					// Pulsate the next arrow?
					if(dls_pulsate_detail_layer_next)
					{
						$('#detail_layer_next a').animate({ opacity: 0.3 }, dls_pulsate_duration, function()
						{
							// Fade in complete, fade out
							$('#detail_layer_next a').animate({ opacity: 0 }, dls_pulsate_duration);
						});
					}
					
					// Pulsate the prev arrow?
					if(dls_pulsate_detail_layer_prev)
					{
						$('#detail_layer_prev a').animate({ opacity: 0.3 }, dls_pulsate_duration, function()
						{
							// Fade in complete, fade out
							$('#detail_layer_prev a').animate({ opacity: 0 }, dls_pulsate_duration);
						});
					}
				}, dls_pulsate_interval);
			}	
			
		}
	}
}


/**
 * Builds the anchors for each each slide in the pager
 */
function dls_pagerAnchorBuilder(index, slide)
{
	// NB: This gives us each physical slide, which we can use like any other jQuery object
	// e.g. $(slide).attr("id")
	
	// Determine the target layer url and build the link
	// We do not want these links to trigger the ajax routine for loading a page (hence the no_ajax class)
	var target_layer_url = build_url_from_slide_id($(slide).attr("id"));
	return '<a class="no_ajax" href="'+target_layer_url+'">' + (index+1) + '</a>';
}


/**
 * Fires when a pager link is clicked
 */
function dls_pagerClick(index, slide)
{
	//alert("dls_pagerClick '" + index + "', '" + slide + "'");
}


/**
 * Fades the detail layer next/prev arrows in and out on demand
 */
function dls_animate_detail_layer_arrow(arrow, fade_in)
{
	// No fading for IE, this causes a black background on the pngs
	// For IE7+ we will show/hide the arrow, for IE6 and below, we will not use arrows at all (due to pathetic png support)
	if(ie_version > 0)
	{
//		if(fade_in === true && ie_version > 6)
		if(fade_in === true)
		{
			$(arrow).addClass('ie_show');
		}
		else
		{
			$(arrow).removeClass('ie_show');
		}
	}
	else
	{
		// Are we dealing with a next or a prev arrow?
		var next_arrow = ($(arrow.parentNode).attr('id') == "detail_layer_next");
		
		// Determine the current opacity (this may not be 0 if we are mid-way through a pulsation)
		var current_opac = $(arrow).stop().css('opacity');
		
		// Determine the duration required to take us to 1.0 opacity
		var animation_duration = dls_pulsate_duration;
		
		if(fade_in === true)
		{
			// Hover activated, disable pulsations
			if(next_arrow) {
				dls_pulsate_detail_layer_next = false;
			} else {
				dls_pulsate_detail_layer_prev = false;
			}
			
			// Determine the duration required to take us to 1.0 opacity
			animation_duration = Math.round((1 - determine_percentage_to_target(0, 1, current_opac, true)) * dls_pulsate_duration);
			//alert(current_opac + " -> " + animation_duration);
			
			// Fade in
			$(arrow).animate({ opacity: 1.0 }, animation_duration);
		}
		else
		{
			// Determine the duration required to take us to 0 opacity
			animation_duration = Math.round((1 - determine_percentage_to_target(0, 1, current_opac, false)) * dls_pulsate_duration);
			//alert(current_opac + " -> " + animation_duration);
			
			// Hover deactivated
			$(arrow).animate({ opacity: 0 }, animation_duration,  function()
			{
				// Fade out complete, re-enable pulsations
				if(next_arrow) {
					dls_pulsate_detail_layer_next = true;
				} else {
					dls_pulsate_detail_layer_prev = true;
				}
			});
		}
	}
}


/**
 * Fires before any layer animation occurs
 * This functions serves a number of purposes:
 * 1. It will switch to the correct colour for the detail_layer_navigation links (based on the layers background colour)
 * 2. It will change the background colour of the parent detail_layers object.
 *    This is to prevent vertical strips from appearing during the animation between slides.
 * 3. It will update the detail_layer_info area to reflect the title and xtra fields of the slide being shown
 * 4. It will make the detail_layers border-right-color white in IE7 (necessary to fix IE7 weirdness)
 * 5. It will load a new background image if it differs from the previous slide
 */
function dls_before(currSlideElement, nextSlideElement, options, forwardFlag)
{
	// 1 & 2
	//////////////////////////////////////////////////////////////////////
	// All of the detail colour classes
	var all_colour_classes = ['detail_layer_white','detail_layer_black'];
	
	// Determine the new colour class
	var new_colour_class = 'detail_layer_white';
	if($(nextSlideElement).hasClass('detail_layer_black'))
	{
		new_colour_class = 'detail_layer_black';
	}
	
	// Remove old colour classes
	var colour_class = "";
	for(colour_class in all_colour_classes)
	{
		if(new_colour_class != all_colour_classes[colour_class])
		{
			$('#detail_layers').removeClass(all_colour_classes[colour_class]).removeClass(all_colour_classes[colour_class]+'_bg');
			$('#detail_layer_info').removeClass(all_colour_classes[colour_class]);
		}
	}
	
	// Set new colour classes
	$('#detail_layers').addClass(new_colour_class).addClass(new_colour_class+'_bg');
	$('#detail_layer_info').addClass(new_colour_class);
	
	
	// 3
	//////////////////////////////////////////////////////////////////////
	// Update the title
	var next_page = $(nextSlideElement).children('.detail_layer_hide');
	if(next_page.length > 0)
	{
		$('#detail_layer_current_page').html(next_page.html());
	}
	
	var next_title = $(nextSlideElement).children('.detail_layer_title');
	if(next_title.length > 0)
	{
		$('#detail_layer_current_title').html(next_title.html());
	}
	
	// Update the xtra content
	var next_xtra = $(nextSlideElement).children('.detail_layer_xtra');
	if(next_xtra.length > 0)
	{
		$('#detail_layer_current_xtra').html(next_xtra.html());
	}
	
	
	// 4
	//////////////////////////////////////////////////////////////////////
	// IE 7 hack requires we change the border colour before and after the animation to stop it from disappearing completely
	if(ie_version == 7)
	{
		$('#detail_layers').css('border-right-color', '#FFFFFF');
	}
	
	
	// 5
	//////////////////////////////////////////////////////////////////////
	// Determine the slide we are looking at
	var new_slide_url = build_url_from_slide_id($(nextSlideElement).attr("id"), true);
	
	// Does this slide need a new background image?
	$('#bg_image_tmp').load(new_slide_url+as_url_ext+' #bg_image img:last', function()
	{
		// Is the background image different to the current one?
		var old_bg_id = $('#bg_image img:last').attr('id');
		var new_bg_id = $('#bg_image_tmp img:last').attr('id');
		if(typeof(new_bg_id) == "string" && old_bg_id != new_bg_id && new_bg_id != "")
		{
			switch_image(new_bg_id.substr(gs_bg_img_prefix.length));
		}
	});
}


/**
 * Fires after a layer animation occurs
 * This functions serves a number of purposes:
 * 1. It will update the window.location.hash (the anchor in the browser address bar) to reflect the current slide the user is viewing
 * 2. It will update the breadcrumb_trail node for printing
 * 3. It will restore the correct border-right-color to the detail layers for IE7 (necessary to fix IE7 weirdness)
 */
function dls_after(currSlideElement, nextSlideElement, options, forwardFlag)
{
	// 1
	//////////////////////////////////////////////////////////////////////
	// Determine the slide we are looking at
	var target_layer_url = build_url_from_slide_id($(nextSlideElement).attr("id"), true);
	set_location_hash(target_layer_url, false);
	
	
	// 2
	//////////////////////////////////////////////////////////////////////
	// Update the breadcrumbs and title
	if(as_current_segments.length > 1)
	{
		var new_breadcrumbs = $("#nav_list-"+as_current_segments[0]+" a:first").html() + " › " + $("#company_list li#company_list-"+as_current_segments[1]+" a:first").html();
		if($('#detail_layer_current_page').html() !== "")
		{
			new_breadcrumbs += " › " + $('#detail_layer_current_page').html();
		}
		else if($('#detail_layer_current_title').html() !== "")
		{
			new_breadcrumbs += " › " + $('#detail_layer_current_title').html();
		}
		$('#breadcrumb_trail').html(new_breadcrumbs);
		
		
		// NB: We must use the .text() method here to get the title without any html entity encoding,
		// the browser automatically applies this encoding when document.title is set.
		document.title = gs_title_prefix+$('#breadcrumb_trail').text();
	}
	
	
	// 3
	//////////////////////////////////////////////////////////////////////
	// IE 7 hack requires we change the border colour before and after the animation to stop it from disappearing completely
	if(ie_version == 7)
	{
		$('#detail_layers').css('border-right-color', '#353F48');
	}
	
}


/**
 * Generates the local url (or url hash/anchor) from the slide id. This can be used for links and window.location.hash
 */
function build_url_from_slide_id(slide_id, hash_mode)
{
	// hash_mode defaults to false
	hash_mode = ((typeof(hash_mode) == "boolean") ? hash_mode : false);
	//alert(slide_id, hash_mode);
	//alert(as_current_segments);
	
	var target_layer_url = "#";
	
	// Ensure we have 2+ segments
	if(as_current_segments.length > 1)
	{
		target_layer_url = as_current_segments[0] + "/" + as_current_segments[1];
		if(slide_id == dls_detail_layer_root_id)
		{
			// Root page (e.g. work/inflexion.html)
			target_layer_url += (hash_mode ? "" : as_url_ext);
		}
		else if(slide_id.length > dls_detail_layer_id_prefix.length)
		{
			// Sub page (e.g. work/inflexion/logo.html)
			var slide_name = slide_id.substr(dls_detail_layer_id_prefix.length);
			target_layer_url += "/" + slide_name + (hash_mode ? "" : as_url_ext);
		}
	}
	
	// Shouldn't happen, there should always be 2 segments when using detail layers
	else if(as_current_segments.length > 0)
	{
		target_layer_url = as_current_segments[0] + (hash_mode ? "" : as_url_ext);
	}
	
	return target_layer_url;
}


/**
 * Generates the slide id based on the array of url segments.
 */
function build_slide_id_from_segments(segments)
{
	var generated_slide_id = "";
	
	if(segments.length == 2)
	{
		// Root page (e.g. work,inflexion > detail_layer_index)
		generated_slide_id = dls_detail_layer_root_id;
	}
	else if(segments.length > 2)
	{
		// Sub page (e.g. work,inflexion,website > detail_layer_website)
		generated_slide_id = dls_detail_layer_id_prefix + segments[2];
	}
	
	return generated_slide_id;
}

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