﻿			window.onload = function(){
				var images = document.getElementById("hero_images");
				var highlight = document.createElement('div');
				highlight.setAttribute("id", "hero_highlight");
				highlight.setAttribute("name", "hero_highlight");
				images.appendChild(highlight);
				var thumblist = document.getElementById("hero_thumblist");
				var thumblistNodes = thumblist.childNodes;
				var k, j;
				for (j = 0, k = 1; j < thumblistNodes.length ; j++, k++)
				{
					document.getElementsByTagName("li")[j].setAttribute("onmouseover", "javascript:changeimage('hero"+ k +"')");
				}
				
			}
			
			function changeimage(hero)
			{
				var images = document.getElementById("hero_images");
				if (document.getElementById(hero).style.visibility!="visible")
				{
					var imagenodes = images.childNodes;
					for (var i = 0;i < imagenodes.length; i++)
					{
						if	(imagenodes[i].style!=null)
						{
							imagenodes[i].style.visibility="hidden";
						}
					}
					var highlight = document.getElementById("hero_highlight");
					highlight.style.visibility="visible";
					setAlpha(highlight, 100);
					document.getElementById(hero).style.visibility="visible";
					fadeOut("hero_highlight", 1);
				}
			}
			function fadeOut(id, time) {
				target = document.getElementById(id);
				alpha = 100;
				timer = (time*1000)/50;
				var i = setInterval(
						function() {
							if (alpha <= 0){
								document.getElementById("hero_highlight").style.visibility="hidden";
								clearInterval(i);
								}
							setAlpha(target, alpha);
							alpha -= 5;
							
						}, timer);
			}

			function setAlpha(target, alpha) {
					target.style.filter = "alpha(opacity="+ alpha +")";
					target.style.opacity = alpha/100;
			}