/*	The Sophisticated Logo Rotator
	Requires jQuery to work.
	Last updated: August 22, 2008
*/

//	We need to reference these across several functions, so global variables are necessary here
var selectedCustomersData;
var customerRotationStatus = 0;
var customersShown;	//	This is merely global because setInterval is scoped to the window object

//	jQuery plugins to be used later
jQuery.preloadImages = function() {
	for(var i = 0; i < arguments.length; i++) {
		jQuery("<img>").attr("src", arguments[i]);
	}
}

//	Now we can get started. This runs the following functions on page load.
$(function() {
	initSelectedCustomers();
	window.setInterval("rotateSelectedCustomers();", 6000);
});

function initSelectedCustomers() {
	//alert("here at least!");
	$.ajax({
		type: "GET",
		url: "/fileadmin/template/main/selected_customers_DE.xml",
		dataType: "xml",
		timeout: 1000,
		error: function () {
			alert(e);
		}, // post-submit error callback
		
		success: function(xml) {
			//	First we GET the XML data and map it to our global var, so it can be referenced from any other function.
			//	This is so we only have to run the GET request once.
			selectedCustomersData = xml;
			
			//	Since any of the images in the XML can be randomly called, we should preload them so there is no flickering.
			//	This loops through all images in the XML file and preloads them.
			$(xml).find("image-location").each(function() {
				$.preloadImages($(this).text());
			});
			
			//	Now that we have the data loaded, we can build the list that we'll populate with customer info.
			//	For now, this presumes that there will be always be four customer slots.
			//	And yes, these are SPACER GIFs. Believe me, I've exhausted plenty of other options before arriving at this.
			//	The root of the issue is that if there is an image on the page without a src attribute, IE6/7, display a red x
			//	(broken image location). So we have to give it something, and that something has to be invisible for this to look ok.
			$("<ul></ul>")
				.append("<li><a><img src='customers/spacer.gif' /></a></li>")
				.append("<li><a><img src='customers/spacer.gif' /></a></li>")
				.append("<li><a><img src='customers/spacer.gif' /></a></li>")
				.append("<li><a><img src='customers/spacer.gif' /></a></li>")
				.insertAfter("#selected-customers h3");
			
			//	And now that we have the list ready, we can begin to rotate customer info.
			initSelectedCustomersRotation();

		}
		

	});
}

function initSelectedCustomersRotation() {
	//	First we need to see how many customers we have data for in the XML.
	var customerNodes = $(selectedCustomersData).find("customer");
	
	//	We need an array that will store which customers have not been shown yet,
	//	so we can prevent any customers from showing multiple times in a row.
	//	Here we intialize the array, because it's possible it may still have values in it from a previous rotation cycle.
	customersShown = new Array();
	
	//	Then for each customer, we add an element to the array with its position.
	$.each(customerNodes, function(i, n) {
		customersShown.push(i);
	});

	//	Now we can begin rotating the images. The following will immediately rotate once to get started.
	rotateSelectedCustomers();
}

function rotateSelectedCustomers() {
	//	Before rotating logos we should check to see if there are enough logos left in the array.
	//	We'll need to compare the number of remaining elements in the array to the number of slots in the page.
	var customerSlots = $("#selected-customers li").length;
	
	//	If there are less remaining elements in the array than slots in the page...
	if (customersShown.length < customerSlots) {
		//	...then we call the init function to start over with a fresh array of all customers.
		initSelectedCustomersRotation();
	}

	//	Run the following for each customer slot in the Selected Customers section.
	$("#selected-customers li").each(function() {
		//	To get a random customer, we calculate a random integer between 0 and the number of customers that
		//	haven't been shown yet.
		var customerKey = Math.floor(Math.random() * customersShown.length);

		//	Grab the current link and image and assign them to variables, so we don't repeat the search.
		var currentLink = $(this).find("a");
		var currentImg = $(this).find("img");

		//	Parse the XML, grabbing the values we need from the customersShown element that matches customerKey.
		var customerName = $(selectedCustomersData).find("customer-name").eq(customersShown[customerKey]).text();
		var imageLocation = $(selectedCustomersData).find("image-location").eq(customersShown[customerKey]).text();
		var linkTitle = $(selectedCustomersData).find("link-title").eq(customersShown[customerKey]).text();
		var linkLocation = $(selectedCustomersData).find("link-location").eq(customersShown[customerKey]).text();

		//	First we fade out the existing logo, and do the rest as a callback function so that it 
		//	waits for the fade to finish before executing.
		$(currentImg).fadeOut(1400, function() {
			//	Then we replace the attributes of the link and image with their new values.
			$(currentLink).attr("title", linkTitle);
			$(currentLink).attr("href", linkLocation);
			$(currentImg).attr("src", imageLocation);
			$(currentImg).attr("alt", customerName);

			//	Then with the new values in place, we can fade it back in.
			$(currentImg).fadeIn(2400);
		});

		//	We remove the customer that we just displayed from the array, so that it is not repeated.
		customersShown.splice(customerKey, 1);
	});
}// JavaScript Document