// JavaScript Document
// Call the functions you need //

// ======== THE VARIABLES ======== //
// Turn this to true if you want to display a special promo box
var specialBox = false;
// The max length of allowable images
var maxLength = 15;
var itemsLength;
var startImg = 0;
var imgNum = 0;
var transTime = 7000;
var slideTimer;
var timerOn;

// The Arrays of links
var theLinks = new Array();
var theTrackers = new Array();


// ========= START THE ENGINE ======= //
function loadItPromo() {
	$('loader').style.display = "block";
	if (specialBox == false) {
		$('promoBoxContent').style.display = "block";
		$('contentMain').style.height = "526px";
		startPromo();
	}
}

function startPromo(){
	// Should we not load it because there is a special promo box?
	if (specialBox == false) {
		getData();
		theTimer();
	}
}

// ======= SET THE TIMER =========== //
function clearTimer() {
	if (timerOn == true) {
		clearInterval(slideTimer);
		timerOn = false;
	}
}

function theTimer() {
	if (timerOn == true) {
		clearInterval(slideTimer);
		slideTimer = setInterval ( 'slideShow()', transTime );
	} else {
		slideTimer = setInterval ( 'slideShow()', transTime );
		timerOn = true;
	}
}

// ======== GET THE DATA =========== //
function getData() {	
	new Ajax.Request('/xml/promoBoxItems.xml', {
		method: 'get',
		onSuccess: function(transport) {
				  var xml = transport.responseXML;
				  var img, linkie, tracker, altT, html, html2, db, mc;
				  // The path to the images
				  var imgPath = '/Images/hp/promo_box/';
				  // Add some Divs to put in our content
				  $('promoBoxContent').innerHTML = '<div id="pBoxImg" onclick="goToUrl();" onMouseOver="clearTimer();" onMouseOut="theTimer();"></div><div id="pBoxPanel"></div>';
				  var items = xml.getElementsByTagName('item');
				  itemsLength = items.length;
				  // RUN THROUGH ITEMS
				  for (i = 0; i < maxLength; i++) {
				 	 // THE IMAGE
					 img = (xml.getElementsByTagName('image')[i].childNodes.length) ? xml.getElementsByTagName('image')[i].childNodes[0].nodeValue: "";
				 	 // THE LINK
					 linkie = (xml.getElementsByTagName('link')[i].childNodes.length) ? xml.getElementsByTagName('link')[i].childNodes[0].nodeValue: "";
				 	 // THE TRACKER
					 tracker = (xml.getElementsByTagName('tracker')[i].childNodes.length) ? xml.getElementsByTagName('tracker')[i].childNodes[0].nodeValue: "";
					 // THE ALT TEXT
					 altT = (xml.getElementsByTagName('altText')[i].childNodes.length) ? xml.getElementsByTagName('altText')[i].childNodes[0].nodeValue: "";
					 
					 
					 //add the link and the tracker to the arrays
					 theLinks[i] = linkie;
					 theTrackers[i] = tracker;
					 
					 //pick the first image to show and hide the rest
					 if (i == 0) {
						 db = 'block';
						 mc = 'background-color:#9cceff;';
					 } else {
					 	 db = 'none';
						 mc = 'background-color:#CCC;';
					 }
					
					 // Create the images and stack them on top of eachother
					 html = '<div class="promoImgHolder"><div id="pBox'+ i + '" style="display:'+ db +';" ><img src="'+ imgPath + img + '" style="border:none;" alt="' + altT + '"></div></div>';
					 // Create the bottom small box panel
					 html2 = '<a style="cursor:pointer; '+ mc +'" onclick="changePic('+ i +'); theTimer();" class="pLittleBox" id="pLB'+ i +'"></a>';
					 // Add the images to here
					 $('pBoxImg').innerHTML += html;
					 // Add the panel to here
					 $('pBoxPanel').innerHTML += html2;
				  }
		}
	})
}

// ======== FADE THROUGH THE SLIDES ========= //
function slideShow() {
	// Get the number
	if (imgNum == itemsLength - 1) {
		var num = itemsLength - 1;
		var newBox = 'pBox' + 0;
		var oldBox = 'pBox' + imgNum;
		var newMiniBox = 'pLB' + 0;
		var oldMiniBox = 'pLB' + imgNum;
		$(newBox).appear();
		$(oldBox).fade();
		$(oldMiniBox).style.backgroundColor = '#CCC';
		$(newMiniBox).style.backgroundColor = '#9cceff';
		imgNum = 0;
	} else {
		var num = imgNum + 1;
		var newBox = 'pBox' + num;
		var oldBox = 'pBox' + imgNum;
		var newMiniBox = 'pLB' + num;
		var oldMiniBox = 'pLB' + imgNum;
		$(newBox).appear();
		$(oldBox).fade();
		$(oldMiniBox).style.backgroundColor = '#CCC';
		$(newMiniBox).style.backgroundColor = '#9cceff';
		imgNum = imgNum + 1;
	}
}

function changePic(num) {		
		var num = num;
		if (num > imgNum) {
			var newBox = 'pBox' + num;
			var oldBox = 'pBox' + imgNum;
			var newMiniBox = 'pLB' + num;
			var oldMiniBox = 'pLB' + imgNum;
			$(newBox).appear();
			$(oldBox).fade();
			$(oldMiniBox).style.backgroundColor = '#CCC';
			$(newMiniBox).style.backgroundColor = '#9cceff';
			imgNum = num;
			
		}
		if (num < imgNum) {
			var newBox = 'pBox' + num;
			var oldBox = 'pBox' + imgNum;
			var newMiniBox = 'pLB' + num;
			var oldMiniBox = 'pLB' + imgNum;
			$(newBox).appear();
			$(oldBox).fade();
			$(oldMiniBox).style.backgroundColor = '#CCC';
			$(newMiniBox).style.backgroundColor = '#9cceff';
			imgNum = num;
		}
}


// ========== GO TO THE URL ============ //
function goToUrl() {
	// Get the Link and the Tracker from the Arrays and put them together
	var theLink = theLinks[imgNum];
	var theTracker = theTrackers[imgNum];
	var url = theLink + '?from=' + theTracker;
	
	// Go to the URL
	window.location = url;
}