//
// slideshow.js
// Copyright (c) Land Rover. All rights reserved.
//
// $Id: slideshow.js 816 2011-11-11 11:27:11Z david.eglin $
//

jQuery(function($) {
	var fadeInterval = 1500;
	var slideInterval = 10000;
	var hasSlideshow = (typeof slides != "undefined") ? true : false;
	var currentSlideIndex = 1;
	
	// Set up hasControls variable for checking later
	var hasControls = false;
	if (typeof slideControls != "undefined") {
		hasControls = (slideControls == true)? true : false;
	}

	var activeBackground = {};

	var timeout;
	
	if (hasSlideshow) {
		
		$('#background-headertext-block').empty();

		for (var index = 0; index < slides.length; index++) {
			var text = createTextElement(slides[index]);
			if (index == 0) {
				text.addClass('active');
			} else {
				text.hide();
			}
			$('div#background-headertext-block').append(text);
		}

		initBackgrounds();

		$(window).bind("load", function() {
			$('div#next-background').height($('div#wrapper').height());
			timeout = setTimeout(goToNext, slideInterval);
		});
	}

	//
	// createTextElement(config)
	// Creates an element that contains the text for a slide from the specified configuration data.
	// PARAMS
	//  config: the configuration for the slide.
	// RETURNS
	// A new text element.
	//
	function createTextElement(config) {
		var elm = $('<div class="text"><h1></h1><p></p><a></a></div>');
		elm.addClass(config.text.color);

		elm.css({ 'top':config.text.top, 'left':config.text.left });
		elm.children('h1').html(config.text.title);
		elm.children('p').html(config.text.subtitle);
		elm.children('a').attr('href', config.href).html(config.text.link);

		return elm;
	}

	//
	// initBackgrounds()
	// Builds the background stack and sets up the first background.
	//
	function initBackgrounds() {
		if (hasSlideshow) {
			var firstBackground = null;
			var previousBackground = null;

			for (var index = 0; index < slides.length; index++) {
				var background = { image: 'url(\'' + slides[index].image + '\')', color: slides[index].background };
				if (index == 0) {
					firstBackground = background;
				}
				if (previousBackground) {
					previousBackground.next = background;
				}
				previousBackground = background;
			}
			previousBackground.next = firstBackground;
			
			// Build the controls
			var userControls = '<ul class="slideshow-controls"><li class="prev"><a href="#">previous</a></li>';
			for (var controlIndex = 0; controlIndex < slides.length; controlIndex++){
				userControls += '<li class="slide-indicator"><a href="#">'+controlIndex+'</a></li>';
			}
			userControls += '<li class="next"><a href="#">next</a></li></ul>';
			
			// Append the controls to each slide
			$('#background-headertext-block').find('div.text').each(function(){
				$(this).append(userControls);
			});
			
			// Add event listeners to the controls
			$('li.slide-indicator a', '.slideshow-controls').click(function(){
				var thisIndex = parseInt($(this).html());
				showNextSlide(thisIndex);
				return false;
			});
			$('li.prev a', '.slideshow-controls').click(function(){
				var target = $(this).parents('li').siblings('li.active').prev('li.slide-indicator').find('a');
				if (target.length <= 0) {
					target = $(this).parents('li').siblings('li.slide-indicator:last').find('a');
				}
				$(target).click();
				return false;
			});
			$('li.next a', '.slideshow-controls').click(function(){
				var target = $(this).parents('li').siblings('li.active').next('li.slide-indicator').find('a');
				if (target.length <= 0) {
					target = $(this).parents('li').siblings('li.slide-indicator:first').find('a');
				}
				$(target).click();
				return false;
			});
			
			// Give the first item a class of 'active' so that the indicator is highlighted
			$('.slideshow-controls').find('li.slide-indicator:first').addClass('active');
				
			// Perform the following actions only if user controls are turned on
			if (hasControls != true) {
				$('.slideshow-controls').hide();
			}

			$('body').append($('<div id="next-background"></div>'));
			setBackground($('body'), firstBackground);
			setBackground($('#next-background'), firstBackground.next);
			$('#next-background').fadeTo(0,0);
			activeBackground = firstBackground.next;
			
		}
	}

	//
	// setBackground(elm,settings)
	// Sets the background CSS for the specified element using the specified settings.
	// PARAMS
	//  elm: the element to which the CSS settings are applied
	//  settings: the settings for the element
	//
	function setBackground(elm,settings) {
		elm.css({ 'background-image':settings.image, 'background-color':settings.color });
	}

	//
	// showNextSlide()
	// Shows the next slide in the slide show. If no slide is available, the first slide is shown.
	// Can also take a slide index (0-indexed, so 0 = slide 1, 1 = slide 2 etc), to allow a user to jump to a specified slide.
	//
	showNextSlide = function(goToSlideIndex) {
		var body = $('body');
		var nextBackground = $('div#next-background');

		if (typeof goToSlideIndex != "undefined") {
			clearTimeout(timeout);
			setBackground(nextBackground, { image: 'url(\'' + slides[goToSlideIndex].image + '\')', color: slides[goToSlideIndex].background });
			activeBackground = { image: 'url(\'' + slides[goToSlideIndex].image + '\')', color: slides[goToSlideIndex].background };
			currentSlideIndex = goToSlideIndex;
		}

		var nextIndex = ((currentSlideIndex + 1) == slides.length) ? 0 : currentSlideIndex + 1;
		var activeTextElement = $('div#background-headertext-block div.active:first');
		var nextTextElement = activeTextElement.parent().children('div').eq(currentSlideIndex);
		
		$('.slideshow-controls').each(function(){
			$(this).find('li.active').removeClass('active');
			$(this).find('li.slide-indicator').eq(currentSlideIndex).addClass('active');
		});
  
		activeTextElement.css('display', 'none').removeClass('active');
		nextBackground.fadeTo(fadeInterval, 1, function() {
			setBackground(body, activeBackground);
			nextBackground.fadeTo(0, 0, function() { setBackground($(this), { image: 'url(\'' + slides[currentSlideIndex].image + '\')', color: slides[currentSlideIndex].background }); activeBackground = { image: 'url(\'' + slides[nextIndex].image + '\')', color: slides[nextIndex].background }; });
			nextTextElement.css('display', 'block').addClass('active');
			currentSlideIndex = nextIndex;
		});
		
		timeout = setTimeout(goToNext, slideInterval);
		
	}
	
	goToNext = function() {
		$('li.next a', 'div.active .slideshow-controls').click()
	}

});

var showNextSlide, goToNext;