// Written by Kevin Hale
// http://particletree.com

// To use this script just set the css background property to "fixed 5000px 5000px" for
// whatever element you want to use image replacement. Then include the javascript in your html file.
// No extra spans needed. No additional change to your markup. If you want to show the tool tips
// on mouse hovering (like you see on images with alt attributes) just set a title attribute for your
// element and that should do it. 

// Created : April 15, 2005
// Modified : April 26, 2005

function imgReplace(){

	//Instead of traversing the html and changing elements and ids, we're
	//going to use the DOM to move through the stylesheet and change css rules
	//for image replacement. When we find a rule that uses a background position
	//of 5000px 5000px, we'll change the CSS rule so the background image shows
	//and the text is gone. Otherwise, nothing happens and only the css text shows.

	//And like most things concerned with accessibility, doing this requires 
	//different syntax for different browsers. IE uses "rules" and Moz and Safari 
	//use the W3C ordained "cssRules" to change css style rules.

	if (document.all){var cssRule = document.styleSheets[0].rules;} //IE
	else {var cssRule = document.styleSheets[0].cssRules;} //Mozilla and Safari

	for (var i=0; i<cssRule.length; i++){

		//Another browser problem, apparently you can't get the 
		//backgroundPosition of a css rule in Safari and you can't 
		//get just the backgroundPositionX rule in Mozilla (both 
		//work on IE). They work fine if you're going through by element
		//but we're dealing with stylesheets and so we have to accomodate
		//for the browser differences.

		cssPosX = cssRule[i].style.backgroundPositionX; //Safari or IE
		cssPos = cssRule[i].style.backgroundPosition; //Mozilla

		if (cssPosX =="5000px" || cssPos == "5000px 5000px"){

				//Okay, so images seem to be on and this css image 
				//loaded properly, let's change
				//our css rule so the text is hidden and the 
				//image is in view. We're changing to scroll because
				//the background image isn't hidden offscreen in
				//Safari if the background attachment isn't set to fixed
				//in the css. We'll undo that here.

				cssRule[i].style.backgroundPositionX = "0px";
				cssRule[i].style.backgroundPositionY = "0px";
				cssRule[i].style.backgroundPosition = "0px 0px";		
				cssRule[i].style.backgroundAttachment = "scroll";
				cssRule[i].style.textIndent = "-5000px";
			}//if
	}//for
	
}//function

//window.onload = function(){
//imgReplace();
//}