/** $Id: imageSlider2.js 38 2011-11-10 09:06:05Z will $
 ** $Author: will $
 ** $Date: 2011-11-10 03:06:05 -0600 (Thu, 10 Nov 2011) $
 ** $Revision: 38 $
 ** $HeadURL: http://svn.visualade.net/moa_cms/trunk/scripts/js/imageSlider2.js $
 *
 * Visualade
 *
 * @package    Mall of America
 * @copyright  Copyright (c) 2010 Visualade Inc. http://www.visualade.com
 *
 * scripts/js/iamgeSlider.js - image slider javascript for home page
 *
 *	Javascript image slider with external AJAX XML configuration file load
 *	CSS modifications and layout by Visualade http://visualade.com
 *	AJAX and XML loading added 8/23/2010 by Colin Anderson colin.anderson@wem.ca
 *	Script source originally from Marco Kuiper (http://www.marcofolio.net/)
*/

// Speed of the automatic slideshow

var slideshowSpeed = 8000;

// Initialize multidimensional associative array

var photos = [ {
		"title" : "",
		"image" : "",
		"url" : "",
		"firstline" : "",
		"secondline" : ""
	}
];

$(document).ready(function() {

// AJAX XML document load from relative directory 'XML'

$.ajax({
    type: "GET",
	url: "site/homeslide",
	dataType: "xml",
	success: function(xml) {
		var currentPhoto = 0;
		

		//Use jquery to do an XPATH style query, isolating a <photo> element

		$(xml).find('photo').each(function(){

			// Javascript associative arrays are not really proper associative arrays, they are objects
			// Instead of multidimentional keys, they are implemented as properties of the object
			// Therefore to add to the multidimensional pseudo-associative array you make a blank object
			// assign properties to the object, set the property's values, then add the object to
			// the array. Stupid, I know...

			var thisArray=new Object();
			thisArray["title"]="";
			thisArray["image"]="";
			thisArray["url"]="";
			thisArray["firstline"]="";
			thisArray["secondline"]="";
			photos[currentPhoto]= new Object(thisArray);
			photos[currentPhoto]["title"]=$(this).attr('title');
			photos[currentPhoto]["image"]=$(this).attr('image');
			photos[currentPhoto]["url"]=$(this).attr('url');
			photos[currentPhoto]["firstline"]=$(this).attr('firstline');
			photos[currentPhoto]["secondline"]=$(this).attr('secondline');
			currentPhoto=currentPhoto+1;
		});
		$("#back").click(function() {
		stopAnimation();
		navigate("back");
	});

	// Forward navigation
	$("#next").click(function() {
		stopAnimation();
		navigate("next");
	});

	var interval;
	$("#control").toggle(function(){
		stopAnimation();
	}, function() {
		// Change the background image to "pause"
		$(this).css({ "background-image" : "url(images/btn_pause.png)" });

		// Show the next image
		navigate("next");

		// Start playing the animation
		interval = setInterval(function() {
			navigate("next");
		}, slideshowSpeed);
	});


	var activeContainer = 1;
	var currentImg = 0;
	var animating = false;
	var navigate = function(direction) {
		// Check if no animation is running. If it is, prevent the action
		if(animating) {
			return;
		}

		// Check which current image we need to show
		if(direction == "next") {
			currentImg++;
			if(currentImg == photos.length + 1) {
				currentImg = 1;
			}
		} else {
			currentImg--;
			if(currentImg == 0) {
				currentImg = photos.length;
			}
		}

		// Check which container we need to use
		var currentContainer = activeContainer;
		if(activeContainer == 1) {
			activeContainer = 2;
		} else {
			activeContainer = 1;
		}

		showImage(photos[currentImg - 1], currentContainer, activeContainer);

	};

	var currentZindex = -1;
	var showImage = function(photoObject, currentContainer, activeContainer) {
		animating = true;

		// Make sure the new container is always on the background
		currentZindex--;

		// Set the background image of the new active container
		$("#headerimg" + activeContainer).css({
			"background-image" : "url(" + photoObject.image + ")",
			"display" : "block",
			"z-index" : currentZindex,
			"left"    : 0
		});

		// Hide the header text
		$("#headertxt").css({"display" : "none"});

		// Set the new header text
		$("#firstline").html(photoObject.firstline);
		$("#secondline")
			.attr("href", photoObject.url)
			.html(photoObject.secondline);
		$("#pictureduri")
			.attr("href", photoObject.url)
			.html(photoObject.title);


		// Fade out the current container
		// and display the header text when animation is complete
		$("#headerimg" + currentContainer).fadeOut(function() {
			setTimeout(function() {
				$("#headertxt").css({"display" : "block"});
				animating = false;
			}, 500);
		});
	};

	var stopAnimation = function() {
		// Change the background image to "play"
		$("#control").css({ "background-image" : "url(images/btn_play.png)" });

		// Clear the interval
		clearInterval(interval);
	};

	// We should statically set the first image
	navigate("next");

	// Start playing the animation
	interval = setInterval(function() {
		navigate("next");
	}, slideshowSpeed);

	}
	});
});