var image;
var imageId;
var map;
var delay = 5000;
var images = ['feature','personal', 'business', 'agriculture', 'community'];
var image_coords = ['15,105,110,120','376,102,460,122','359,104,443,124','373,91,457,111','374,106,458,126'];
var curImage = 0;
var pause = false;

function preload()
{
	pic1= new Image(); 
	pic1.src="/common/images/interface/homepage_redesign/feature_feature.jpg";
	
	pic2= new Image(); 
	pic2.src="/common/images/interface/homepage_redesign/feature_personal.jpg"; 
	
	pic3= new Image(); 
	pic3.src="/common/images/interface/homepage_redesign/feature_business.jpg"; 
	
	pic4= new Image(); 
	pic4.src="/common/images/interface/homepage_redesign/feature_agriculture.jpg"; 	
	
	pic5= new Image(); 
	pic5.src="/common/images/interface/homepage_redesign/feature_community.jpg";
	
}


/**
@author: devin
@maintenence: GR 
@param: random_number passed in from HomepageRedignTemplate. (number between 1 and 4)

This function dynamically builds the banner on the homepage

**/
function initImage(random_number)
{
	preload();
	imageId = 'image';
	image = document.getElementById(imageId);
	theMap=document.getElementById('img_map');
		
		//here is where we randomize the image
		if(random_number==0)
		{
			option="feature";
		}
		if (random_number==1)
		{
			option="personal";
		}
		if (random_number==2)
		{
			option='business';		
		}
		if (random_number==3)
		{
			option='agriculture';	
			theMap.setAttribute('coords',image_coords[3]);
		}
		if (random_number==4)
		{
			option='community';	
		}
		
	//set the buttons in the lower right corner, based on decision above
	curImage = random_number;
	document.getElementById('feature_container').className = "";
	document.getElementById('personal_container').className = "";
	document.getElementById('business_container').className = "";
	document.getElementById('agriculture_container').className = "";
	document.getElementById('community_container').className = "";
	document.getElementById(option+'_container').className = "selected";
	

	//the map tag, which contains the image div must have it's background initiated to match the random start.
	map = document.getElementById("img_map");
	map.setAttribute('src', "/common/images/interface/homepage_redesign/feature_" + option + ".jpg" );

	//set the text which appears before the nav
	document.getElementById('feature_title').innerHTML = option.toUpperCase();
	//this is a 'catch' because the directory of img 1 (feature) is not named feature
		if(option=="feature")
		{
			document.getElementById('feature_title').innerHTML = 'Foundation'.toUpperCase();
		}
	
	image.src = "/common/images/interface/homepage_redesign/feature_" + option + ".jpg";
	//newImage();
		
	//set map href to match the option. 
	map.href = "/" + option + "/";
		//this is a 'catch' because the directory of img 1 (feature) is not named feature
		if(option=="feature")
		{
			map.href = "/community/foundation/";
		}
	
	//set map image coordinates to match number which came in (so href for each banner is ALWAYS on top of the ' more info '
	theMap.setAttribute('coords',image_coords[random_number]);
	
	setInterval("cycleImage()", delay);

}


function cycleImage()
{
	if( !pause )
	{
		curImage++;
		if(curImage >= 5)
		{
			curImage = 0;
		}
		changeImage(images[curImage], false);
	}
	else
	{
		pause = false;
	}

}

function newImage()
{
	setOpacity(image, 0);
	image.style.visibility = 'visible';
	fadeIn(imageId,0);
}



function changeImage(option, clicked_image)
{
	clicked = clicked_image;

	if( clicked )
	{
		pause = true;
		if( option == 'feature' )
		{
			curImage = 0;
		}
		else if( option == 'personal' )
		{
			curImage = 1;
		}
		else if( option == 'business')
		{
			curImage = 2;
		}
		else if( option == 'agriculture')
		{
			curImage = 3;
		}
		else if( option == 'community')
		{
			curImage = 4;
		}
	}

	document.getElementById('feature_container').className = "";
	document.getElementById('personal_container').className = "";
	document.getElementById('business_container').className = "";
	document.getElementById('agriculture_container').className = "";
	document.getElementById('community_container').className = "";
	document.getElementById(option+'_container').className = "selected";

	document.getElementById('feature_title').innerHTML = images[curImage].toUpperCase();
	document.getElementById('img_map').setAttribute('coords',image_coords[curImage]);
		
		
		//title workaround because the directory of 'feature' is not named feature & the client set this name, so i can't rename
		if(option=="feature")
		{
			document.getElementById('feature_title').innerHTML = 'Foundation'.toUpperCase();
		}
	
	fadeOut(imageId,100, option);		
}

function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}

function fadeIn(objId,opacity) 
{
	if (document.getElementById) 
	{
		obj = document.getElementById(objId);
		if (opacity <= 100) 
		{
			setOpacity(obj, opacity);
			opacity += 2;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 10);
		}
	}
}

function fadeOut(objId,opacity, option) 
{
	if (document.getElementById) 
	{
		obj = document.getElementById(objId);
		if (opacity >= 0) 
		{
			setOpacity(obj, opacity);
			opacity = opacity - 2;
			window.setTimeout("fadeOut('"+objId+"',"+opacity+", '" + option + "')", 10);
		}
		else
		{
			image.style.visibility = "hidden";
			image.src = "/common/images/interface/homepage_redesign/feature_" + option + ".jpg";
			map.href = "/" + option + "/";
			
				//this is a work-around because the directory of 'feature' is not named feature & the client set this name, so i can't rename
				if(option=="feature")
				{
					//var theMap=document.getElementById('img_map');
					//theMap.setAttribute('href','/community/foundation/');
					map.href = "/community/foundation/";
				}
			
			newImage();
		}
	}
}

/* make the banner id display */
function activateBanner()
{
	document.getElementById('banner').style.display = 'block';
}