var heroImage = document.getElementById("testImage");	//image place holder that will load the hero images
var imageSequence = new Array();						//list that will load all hero images
var imageCount = 3;										//total number of images
var btnHTML = document.getElementById("heroImgBtn");	//UL tag that will contain the dynamic buttons
var i = 0;												
var shop = "home";
var stopped = false;

var heroImageBtn = new Array();							//list that will contain the dynamic buttons
var generateBtn = true;
var timeSchedule = 4000;
heroImageBtn[1] = "hero1";
heroImageBtn[2] = "hero2";
heroImageBtn[3] = "hero3";
heroImageBtn[4] = "hero4";
heroImageBtn[5] = "hero5";
heroImageBtn[6] = "hero6";
heroImageBtn[7] = "hero7";
heroImageBtn[8] = "hero8";
heroImageBtn[9] = "hero9";

function loadImageTimer(){
var loadImagesTimer = setTimeout("loadImages()",4000);
}

function changeImageTimer(){
var changeImageTimer = setTimeout("changeImage()",4000);
}

function clearTimers(){
clearTimeout(loadImageTimer);
clearTimeout(changeImageTimer);
}

//change hero image
function changeImage(){
	if (stopped==false)
	{
	for (var w=1; w <= imageCount; w++){
		document.getElementById(heroImageBtn[w]).className='';
	}
	document.getElementById(heroImageBtn[i]).className = "selected";
	if(document.getElementById("testImage")){
		document.getElementById("testImage").src = imageSequence[i].src;	
	}
	loadImageTimer();
	}
	else {
	
	}
}

function loadImages(){
	i = i + 1;
//create buttons based on the image count
if (generateBtn == true){
	generateBtn = false;
	for (var b=1; b <= imageCount; b++){
		
		if(document.getElementById("heroImgBtn")){
			document.getElementById('heroImgBtn').innerHTML += "<li id='hero"+i+"' class=\"\" onclick=\"stopHeroImg(this);\"><a href=\"javascript:void(0)\">"+i+"</a></li>";
		}
		i++;
		document.getElementById("hero1").className = "selected";
		document.getElementById("testImage").style.visibility = "visible";
	}
	setTimeout(function(){}, 4000);
	i = 2;
}
//load hero image and image map
if (i <= imageCount & stopped==false){
   imageSequence[i] = new Image();
   imageSequence[i].src = "/jcwhitney/shops/" + shop + "/images/heroImage" + i + ".jpg";
  
  if(document.getElementById("testImage")){
   	document.getElementById("testImage").useMap = "#heroImgMap" + i;
  }
   
//   document.getElementById("testImage").useMap = "#heroImgMap" + i;
//   document.all.testImage.useMap = "#heroImgMap" + i; // IE only   
	
   changeImageTimer();
}
else {
	i = 0;
	loadImageTimer();
}
}



function stopHeroImg(obj){
	clearTimers();
	stopped = true;
	imageSequence[i] = new Image();

	var btnId = obj.id;
	var btnNumber = btnId.substring(4);

	//remove class 'selected'
	for (var j=1; j <= imageCount; j++){
		
		if(document.getElementById(heroImageBtn[j])){
			document.getElementById(heroImageBtn[j]).className='';
		}
	}
	
	if(document.getElementById(heroImageBtn[btnNumber])){
		document.getElementById(heroImageBtn[btnNumber]).className = "selected";
	}
	imageSequence[i].src = "/jcwhitney/shops/" + shop + "/images/heroImage" + btnNumber + ".jpg";
	if(document.getElementById("testImage")){
	document.getElementById("testImage").useMap = "#heroImgMap" + btnNumber;
	document.getElementById("testImage").src = imageSequence[i].src;
	}
}