/***
**	@filename - homepage.js
**	@author   - Mike Pacella, Troy Web Consulting
**  @created  - 1/29/2009
**  @description
**		Contains code for leveraging JQuery to fade in/fade out the sponsors and
**		slideshow images on the homepage.
**
***/

// Times for fading in, showing, and fading out images, respectively
var fadeInTimeMs  = 2000;
var showTimeMs    = 8000;
var fadeOutTimeMs = 1000;

/***
**	SLIDER RELATED VARIABLES 
***/
// array of images held in the slider slideshow (on top)
var aSliderImages = new Array();
// random array of image indices to randomize image order
var aRandomSlider = new Array();
// tracks index of current slider being displayed
var sliderIndex = 0;
// web relative path to directory containing slider images
var sliderImageLocation = '/media/images/';
// web relative path to xml file containing slider images
var sliderXmlUrl = "/xml/home-right-slider.xml";

/*** 
**	SPONSOR RELATED VARIABLES
***/
// array of images held in the sponsor slideshow (bottom)
var aSponsorImages = new Array();
// random array of image indices to randomize image order
var aRandomSponsor = new Array();
// tracks index of current sponsor being displayed
var sponsorIndex = 0;
// web relative path to directory containing sponsor images
var sponsorImageLocation = '/sponsors/';
// number of sponsor images to show in container (note, changing this will require updating
// width property for sponsor in banner.css.
var sponsorThreshold = 7;
// web relative path to xml file containing sponsor images
var sponsorXmlUrl = "/sponsors/sponsors.xml";

/***
**	JQuery Document Ready Event Listener
***/
$(document).ready( function() {
	// SLIDESHOW CONTAINER population
	if ( $('#slideshowContainer') ) {
		$('#slideshowContainer').hide();
		$.ajax({
			type: "GET",
			url: sliderXmlUrl,
			dataType: "xml",
			success: function(xml) { 
				// for each pic element found, we do the following
				$(xml).find( 'pic' ).each( function() {
					var img = $(this).find( 'image' ).text();
					var url = $(this).find( 'image' ).attr( 'url' );
					// this builds a structure with the image and url;
					aSliderImages.push( { img:sliderImageLocation+img, url:url } );
				} );
				// preload the images for faster loading
				preloadImages( aSliderImages );
				// get the random array of indices
				aRandomSlider = getRandomArray( aSliderImages.length );
				// call recursive function showSliderImage 
				showSliderImage();
			}
		} ); //end $.ajax for HOME-SLIDER.xml
	}
	if ( $('#sponsorContainer') ) {
		$('#sponsorContainer').hide();
		$.ajax({
			type: "GET",
			url: sponsorXmlUrl,
			dataType: "xml",
			success: function(xml) { 
				// for each sponsor element found, we do the following
				$(xml).find( 'sponsor' ).each( function() {
					var img = $(this).attr( 'graphic' );
					var url = $(this).attr( 'link' );
					// this builds a structure with the image and url;
					aSponsorImages.push( { img:sponsorImageLocation+img, url:url } );
				} );
				// preload the images for faster loading
				preloadImages( aSponsorImages );
				// get the random array of indices
				aRandomSponsor = getRandomArray( aSponsorImages.length );
				// call recursive function showSponsorImage
				showSponsorImage();
			}
		} ); //end $.ajax for HOME-SLIDER.xml
	}
} ); // end document.ready
	
/***
**	@function showSliderImage()
**
**	@description - shows an image in slideshowContainer using the randomly generated order.
**
***/
function showSliderImage() {
	// sliderIndex will grow to be greater than the array, so simply mod it
	var ii = sliderIndex % aRandomSlider.length;
	sliderIndex++;
	
	// build the dynamic html into the slider container, fade it in,
	// then wait.......after waiting, call hideSliderImage
	$('#slideshowContainer').html( '<a href="' + aSliderImages[ aRandomSlider[ii] ].url + '"><img src="' + aSliderImages[ aRandomSlider[ii] ].img + '" width="280" height="125" /></a>' );
	$('#slideshowContainer').fadeIn( fadeInTimeMs, function() {
		setTimeout( hideSliderImage, showTimeMs );	
	} );
}

/***
**	@function showSponsorImage()
**
**	@description - shows a set of images (based on threshold) in sponsorContainer using
**	randomly generated order.
**
***/
function showSponsorImage() {
	// sponsorContainer contents build up in this string
	var sponsorContents = "";

	// for as many images as we specify in threshold
	for ( idx = 0; idx < sponsorThreshold; idx++ ) {
		// sponsorIndex will grow larger than array, mod it
		var ii = sponsorIndex % aRandomSponsor.length;
		sponsorIndex++;
		// build dhtml
		sponsorContents += '<div class="sponsorImage"><a target="_blank" href="' + aSponsorImages[ aRandomSponsor[ii] ].url + '"><img src="' + aSponsorImages[ aRandomSponsor[ii] ].img + '" width="90" height="60" /></a></div>';
	}		
	
	// place the dynamic html into container, fade in, wait, and call hideSponsorImage
	$('#sponsorContainer').html( sponsorContents );
	$('#sponsorContainer').fadeIn(fadeInTimeMs, function() {
		setTimeout( hideSponsorImage, showTimeMs );	
	} );
}

/***
**	@function hideSliderImage()
**
**	@description - fades out the slideshow image and recalls showSliderImage
**
***/
function hideSliderImage() {
	$('#slideshowContainer').fadeOut(fadeOutTimeMs, showSliderImage); 
}

/***
**	@function hideSponsorImage()
**
**	@description - fades out the sponsor image and recalls showSponsorImage
**
***/
function hideSponsorImage() {
	$('#sponsorContainer').fadeOut(fadeOutTimeMs, showSponsorImage); 
}

/***
**	@function getRandomArray( maxNum )
**
**	@argument - maxNum - required int - represents the size of the random array returned.
**				If you specify 100, a 100 item array with indices from 0 to 99 will be
**				returned.
**
**	@description - Generates an array of random numbers.
**
***/
function getRandomArray( maxNum ) {
	var aNums = new Array();
	var aRandom = new Array();
	
	for ( var ii = 0; ii < maxNum; ii++ ) {
		aNums[ii] = ii;
	}
	
	while ( aNums.length > 0 ) {
		var ran = Math.floor( Math.random() * aNums.length );
		aRandom.push( aNums[ ran ] );
		aNums.splice( ran, 1 );
	}
	return aRandom;
}

/***
**	@function preloadImages()
**
**	@argument - aImages - required array of structs with img key.  Array to preload.
**
**	@description - Preloads images.
**
***/
function preloadImages ( aImages ) {
	if (document.images)
    {
      preload_image_object = new Image();
      for(var i=0; i < aImages.length; i++) 
         preload_image_object.src = aImages[i].img;
    }	
}