/*	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() {
    $.ajax({
        type: "GET",
        url: "/Content/high-power-clients.xml",
        dataType: "xml",
        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='/images/client-logos/spacer.gif' /></a></li>")
				.append("<li><a><img src='/images/client-logos/spacer.gif' /></a></li>")
				.append("<li><a><img src='/images/client-logos/spacer.gif' /></a></li>")
				.append("<li><a><img src='/images/client-logos/spacer.gif' /></a></li>")
				.insertBefore("#selected-customers h2");

            //	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);
    });
}