// JavaScript Document
// 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 = 10;
var itemsLength;
var startImg = 0;
var imgNum = 0;
var transTime = 7000;
var slideTimer;
var timerOn;
var oldb = $('pBox' + 0);
var start = false;

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

// ==== MOBILE REDIRECT ==== // really needs to be done on the server side
var exempt;
var place = window.location.href;
var re = new RegExp("search");
var searchUse;

// Check to see if the word "search" is in the url
if(re.test(place)== true){
	searchUse = true;
} else {
	searchUse = false;	
}

if(navigator.userAgent.match(/xoom/i)) {
	exempt = true;	
} else {
	exempt = false;
}
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/android/i))) {
	if((document.referrer != "http://m.ocls.info/") && (searchUse == false) && (exempt == false)){ 
		location.href='http://m.ocls.info';
	}
}


// ==== INITIALIZE ON LOAD ==== //
function init() {
	iCanHasEngage();
	switchBox('catalogsearch');
	loadItPromo(); 
}


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

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

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

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

// ======== 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="slideShow(\''+ i +'\'); theTimer();" class="pLittleBox" id="pLB'+ i +'"></a>';
				
				// Add the images to here
				$('pBoxImg').innerHTML += html;
				// Add the panel to here
				$('pBoxPanel').innerHTML += html2;
			
			}
		},
		
		onComplete:  function() {
				// now we can go do things
				theTimer();
				if (start == false) {
					$('pLB0').style.backgroundColor = '#9cceff';
					start = true;
				}
			
		},
		
		onFailure: function() {
				return false;
		}
	})
}


// ======== FADE THROUGH THE SLIDES ========= //
function slideShow(n) {
	var n = n;
	var newb,newlb,oldlb;
	
	// take an arg
	if (n == '0' || parseInt(n) > 0) {
		num = imgNum;
		imgNum = n;
	// or start over	
	} else if (imgNum == itemsLength - 1) {
		imgNum = 0;
		num = itemsLength - 1;
	// or move forward
	} else {
		imgNum++;
		num = imgNum - 1;
	}

	newb = $('pBox' + imgNum);
	oldb = $('pBox' + num);
	newlb = $('pLB' + imgNum);
	oldlb = $('pLB' + num);
	
	// do the thing if the objects are here, or do nothing and don't throw an error
	if (newb != null && oldb != null && newb != oldb) {
		newb.appear();
		oldb.fade();
		newlb.style.backgroundColor = '#9cceff';
		oldlb.style.backgroundColor = '#CCC';
	}
}



// ========== 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;
	
	if (theTracker != "") {
		url += '?from=' + theTracker;
	}
	
	// Go to the URL
	window.location = url;
}

function highlightOn(o) {
	o.style.backgroundColor = 'rgb(226,241,250)';	
}

function highlightOff(o) {
	o.style.backgroundColor = '#fff';	
}