// Hover FX
// v1.0 rv 21.08.2008
// Multiple styles for multiple images
// requires styles from css
// usage: <a href="http://link.com"><img class="image1" src="image.jpg" alt="image" /></a>
// upto image 5 (class)

this.hoverfx = function(){	
	// Config
	// [image css class, covering span default css class, covering span mouseover css class]
	var arr = [			   			  				
				["image1", "", "hfxover"],
				["image2", "hfxout2", "hfxover2"],
				["image3", "", "hfxover3"],
				["image4", "", "hfxover4"],
				["image5", "", "hfxover5"],
				["image6", "", "hfxover6"]
			  ];
			
	// End Config
	
	for (var x=0;x<arr.length;x++){
		
		var a = document.getElementsByTagName("a");
		for (var i=0;i<a.length;i++){
			var img = a[i].getElementsByTagName("img");		
			for (var j=0;j<img.length;j++){			
				if(img[j].className == arr[x][0] || arr[x][0] == ""){
					a[i].style.position = "static";						 
					if(a[i].getElementsByTagName("span").length > 0) a[i].removeChild(a[i].getElementsByTagName("span")[0]);
					var span = document.createElement("span");	
					var image = img[j];
					span.style.position = "absolute";
					span.style.top = image.offsetTop + "px";
					span.style.left = image.offsetLeft + "px";
					span.style.width = image.offsetWidth + "px";
					span.style.height = image.offsetHeight + "px";
					span.style.cursor = "pointer";
					span.out = span.className = arr[x][1];
					span.over = arr[x][2];
					span.a = img[j].a = a[i];	
					span.j = img[j].j = j;					
					a[i]["span" + j] = span;					
					span.onmouseover = img[j].onmouseover = function(){ 
						this.a["span" + this.j].className = this.a["span" + this.j].over;
					};
					span.onmouseout = img[j].onmouseout = function(){
						this.a["span" + this.j].className = this.a["span" + this.j].out;
					};
					a[i].appendChild(span);							
				};		
			};	
		};
		
	};
};



// script initiates on page load. 

this.addEvent = function(obj,type,fn){
	if(obj.attachEvent){
		obj['e'+type+fn] = fn;
		obj[type+fn] = function(){obj['e'+type+fn](window.event );}
		obj.attachEvent('on'+type, obj[type+fn]);
	} else {
		obj.addEventListener(type,fn,false);
	};
};
addEvent(window,"load",hoverfx);
addEvent(window,"resize",hoverfx);