/*

switched to using images instead of backgrounds...


todo list:
rename button.php
add support for postscript
check in other browsers
work out if setting existing text to blank is good idea
add support for direct cache access...
*/

/*
// mozilla inner text
HTMLElement.prototype.__defineGetter__("innerText", function () {
   var r = this.ownerDocument.createRange();
   r.selectNodeContents(this);
   return r.toString();
});
*/

var root = '';

// the image style php script loaction, not sure if this needs to be absolute
var imageStyleURL = root+'/images/button.php';

// if this is set and useImageStyleCache is true then the script will attempt to load images
// from the cache first using a hash of the parameters
var imageStyleCache = root+'/images/cache';
// set the caching hash type, can be md5 or sha1
// todo: find out which is faster....
var imageStyleCacheHashType = 'md5';
// turn caching on or off (note: not server side caching)
var useImageStyleCache = false;

function imageStyleReplaceHeaders(){
	
	//alert(imagePreloadArray.length);
	// loop over all the header tags.. h1 to h6
	// fixme: can reflect on the style sheet, should be faster
	//for(var i=1; i<7; i++) imageStyleReplaceTags('h'+i);
	
	//alert('ISS');

	//var style = imageStyleSheet;

	for(tagName in imageStyleSheet){
		var style = imageStyleSheet[tagName];
		if(style) imageStyleReplaceTags(tagName,style);
		
	}

}

function imageStyleReplaceTags(tagName,style){

	// check we have the tools needed
	if(!document.getElementsByTagName) return;

	// collect all the matching tags
	tags = document.getElementsByTagName(tagName);

	//alert(tags.length);

	// loop over them passing each one to image replace tag
	for(var i=0; i<tags.length; i++) imageStyleReplaceTag(tags[i],style);

}

function imageStyleReplaceTag(tag,style){

	

	// get the tagname in lowercase
	var tagName = tag.nodeName.toLowerCase();

	// check to make sure the tag is in the irss, if not return
	//if(!imageStyleSheet[tagName]) return;

	// get the stylesheet rule that matches this tags name
	//var style = imageStyleSheet[tagName];
	
	// extract the taxt from the tag
	//var text = escape(tag.childNodes[0].nodeValue);
	var text = tag.innerHTML;
	//alert(text);
	// set it to blank
	//tag.childNodes[0].nodeValue = ' ';
	

	// build the url for the image
	var _url = imageStyleURL + '?';
	for(prop in style) _url += prop + '=' + style[prop] + '&';
	if(style['reload']) _url += 'nocache=' + ((new Date()).getTime()) + '&';
	
	//document.all.footer.innerHTML = _url;
	
	if(false&&style.height){
		// no need to preload first as we know the height....

		// set the height 
		tag.style.height = style.height;

		// set the background style for the tag
		tag.style.background = 'url(' + _url + 'text=' + text + ') no-repeat top left';

	}
	else {
		// preload the image using an image object first...

		var words = text.split(' ');
		var wordPreloader = new Array(words.length);
		
		// Setup the preloader
		for(var i=0;i<words.length;i++){
			var img = wordPreloader[i] = new Image();
			img._preloader = wordPreloader;
			img._wordIndex = i;
			img._word = words[i];
			img._tag = tag;
			img._text = text;
			img._url = _url + 'text=' + escape(img._word);
			img._loaded = false;
			img.onload = imageLoad;
			img.onabort = imageRollback;
			img.onerror = imageRollback;
		}

		// Load the imagess
		for(var i=0;i<words.length;i++){
			var img = wordPreloader[i];
			img.src = img._url;
			//alert(img.src);
		}

	}

}

var imagePreloadArray = Array();

var imageLoad = function(){
	
	//alert('load');

	// Check to see if somthing has gone wrong
	if((this.width<1||this.height<1)&&this.onerror) this.onerror();
	this._loaded = true;

	//alert('Loaded: '+this._word);

	// This function makes sure we are the last to load
	for(var i=0; i<this._preloader.length; i++){
		if(!this._preloader[i]._loaded) {
			//alert('Not Loaded: '+this._preloader[i]._word);
			return;	
		}
	}
	
	//alert('all loaded');

	// Everything should now be loaded so go ahead and insert the html
	var html = '';
	for(var i=0; i<this._preloader.length; i++){
		// if somthing has gone wrong call the image abort handler
		var img = this._preloader[i];
		html += '<img src="'+ img._url + '" height="' + img.height + '" width="'+img.width+'" alt="'+img._text+'" />&nbsp;';	
	}

	// should this be done using innerHTML or by creating an element / replacing an element ?
	this._tag.innerHTML = html;
	this._tag.style.display = 'block';
}

var imageRollback = function(){

	return; // disabled for now.. work again in 0.6

	// restore the original text
	//alert('abort!!!');
	//this._tag.childNodes[0].nodeValue = this._text;
	this._tag.innerHTML = this._text;

	// set the reference to this object to null in the preloader
	imagePreloadArray[this._id] = null; 

}


var checkCachingSpeed = function (){
	// just texting the speed of the caching algorithum
	var text = 'this  is a string here i expect the url to be a similar length to this string here oh yeah about this long is good.';
	var start = (new Date()).getTime();
	for(var i=0;i<1000;i++){
		//hex_md4(text);
		//hex_md5(text);
		hex_sha1(text);
	}
	//alert((new Date()).getTime()-start);
}

// if there is already an onload hander set, wrap it
/*
if(window.onload){
	window._onload = window.onload;
	window.onload = onloadWrapper;
}
// otherwise just set it
else window.onload = imageStyleReplaceHeaders;
*/

window.onload = imageStyleReplaceHeaders;