var imageId = 'hero';
var divId = 'hero_container'
var srcAttribute = 'swapsrc';

addEvent(window, 'load', init_image_swap, false);

function init_image_swap(){
	
	var images = getElementsByClassName(document, 'image_swap_thumb', 'img')
	
	var objImage = new Image();
	
	for(var i=0; i<images.length;i++){
		images[i].style.cursor = 'pointer';
		objImage.src = images[i].getAttribute(srcAttribute);
		addEvent(images[i], 'click', swapimage_click_handler, false);
	}
	
}

function swapimage_click_handler(e){
	
	//sure fire way to get the object that called the event
	var targ;
	if (!e) e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	if (targ.nodeType == 3) // defeat Safari bug
		targ = targ.parentNode;
		

	var imageSrc =  targ.getAttribute(srcAttribute);
	swapImage(divId, imageId, imageSrc );
}

function swapImage( divId, imgId, imageSrc ){
	
	if (document.getElementById(imgId).src.indexOf(imageSrc) == -1) {
  	
		//set the background of the div to the current image src
		//document.getElementById(divId).style.backgroundImage = "url(" + document.getElementById(imgId).src + ")";
		document.getElementById(imgId).src = imageSrc;
		
		// Set the top image to invisible
			setOpacity(0, imgId);
		
		//set the top image to the new image src
		document.getElementById(imgId).src = imageSrc;
		
		//do the fade
		fadeElementSetup(imgId, 0, 100, 10);
  } 
}
	
	
function fadeElementSetup(theID, fdStart, fdEnd, fdSteps) {
	fadeSteps = fdSteps;
	fadeCurrent = 0;
	fadeAmount = (fdStart - fdEnd) / fadeSteps;
	
	fadeTimer = setInterval("fadeElement('"+theID+"')", 50);
}
	
function fadeElement(theID) {
	fadeCurrent++;
	// Set the opacity depending on if we're adding or subtracting (pos or neg)
	if (fadeAmount < 0) {
		setOpacity(Math.abs(fadeCurrent * fadeAmount), theID);
	} else {
		setOpacity(100 - (fadeCurrent * fadeAmount), theID);
	}

	if (fadeCurrent == fadeSteps) {
		// We're done, so clear
		clearInterval(fadeTimer);
	}
}
	
	
function setOpacity(opacity, theID) { 

	var object = document.getElementById(theID).style;
	
	// If it's 100, set it to 99 for Firefox.
	// or firefox will flicker
	if (navigator.userAgent.indexOf("Firefox") != -1) {
	if (opacity == 100) { opacity = 99.999; } 
	}
	
	// Multi-browser opacity setting
	object.filter = "alpha(opacity=" + opacity + ")"; // IE/Win
	object.KhtmlOpacity = (opacity / 100);            // Safari 1.1 or lower, Konqueror
	object.MozOpacity = (opacity / 100);              // Older Mozilla+Firefox
	object.opacity = (opacity / 100);                 // Safari 1.2, Firefox+Mozilla
}