/*  pngHover Advanced, version 0.9
 *  (c) 2007 Nate Weiner <nate@ideashower.com>
 *  Co-Authors: (submit your updates to this code at http://www.ideashower.com/)
 *  propertyChanged function written by Aaron Porter <aaron@javasource.org>
 *  getCurStyle function written by www.quirksmode.org 
 *
 *  pngHover is freely distributable under the terms of an MIT-style license.
 *  For details and other scripts, see the Idea Shower web site: http://www.ideashower.com/
 *
/*--------------------------------------------------------------------------*/

/* --- Just two variables to define here --- */

navId = 'nav'; //Id of the nav UL element you are fixing
slideSide = 'leftToRight'; //Which was does the hover sliding door slide?  Enter either upAndDown or leftToRight
transparentImage = '/j/transparent.gif'; //Where a 1px transparent gif file is (needed to hack png)

/* --- Don't need to edit below -- */

function pngHover(navId, slideSide, transparentImage) {
	this.navId = navId;
	this.slideSide = slideSide;
	this.transparentImage = transparentImage;
	pho = this;
};
pngHover.prototype = {
	init : function () { 
		if (pho.slideSide == 'leftToRight') { pho.widthMod = 2; pho.heightMod = 1; }
		else { pho.widthMod = 1; pho.heightMod = 2; }
		
		navLI = document.getElementById(pho.navId).getElementsByTagName('li');
		for(i=0; i<navLI.length; i++) {
			
			if (navLI[i].parentNode == document.getElementById(pho.navId)) { 
				navA = navLI[i].getElementsByTagName('a');
				if (navA.length > 0) {
					navA = navA[0];
					
					navA.innerHTML = '';
					navA.style.textIndent = '0px';
					navA.style.position = 'relative';
					
					newIMG = document.createElement('img');
					img_width = pho.getCurStyle(navA,'width').replace('px',''); 
					img_height = pho.getCurStyle(navA,'height').replace('px','');
					newIMG.setAttribute( 'src', pho.getCurStyle(navA,'backgroundImage').substr(5,pho.getCurStyle(navA,'backgroundImage').length-7) );
					newIMG.setAttribute( 'width', img_width * pho.widthMod);
					newIMG.setAttribute( 'height', img_height * pho.heightMod );
					pho.pngHack(newIMG);
					newIMG.onpropertychange = pho.propertyChanged;
					newIMG.style.overflow = 'hidden';
					newIMG.style.position = 'absolute';
					newIMG.style.left = '0px';
					newIMG.style.top = '0px';
					
					navA.appendChild(newIMG);
					navA.style.background = 'none';
					pho.pngHover_back(null, navA);
					
					navA.onmouseover = pho.pngHover_hover;
					navA.onmouseout = pho.pngHover_back;
				}
			}
		}
	
	},
	pngHover_hover : function (e, obj) { 
		if (!obj) { obj = this; } 
		img_width = pho.getCurStyle(obj,'width').replace('px',''); 
		img_height = pho.getCurStyle(obj,'height').replace('px','');
		if (pho.slideSide == 'leftToRight') { 
			obj.firstChild.style.clip = 'rect(0px '+(img_width*2)+'px '+img_height+'px '+img_width+'px)';
			obj.firstChild.style.left = '-'+img_width+'px';
		} else { 
			obj.firstChild.style.clip = 'rect('+img_height+'px '+(img_width*pho.widthMod)+'px '+(img_height*pho.heightMod)+'px 0px)';
			obj.firstChild.style.top = '-'+img_height+'px';
		}		
	},
	pngHover_back : function (e, obj) {
		if (!obj) { obj = this; } 
		img_width = pho.getCurStyle(obj,'width').replace('px',''); 
		img_height = pho.getCurStyle(obj,'height').replace('px',''); 
		obj.firstChild.style.clip = 'rect(0px '+img_width+'px '+img_height+'px 0px)';
		if (pho.slideSide == 'leftToRight') { 
			obj.firstChild.style.left = '0px';
		} else { 
			obj.firstChild.style.top = '0px';
		}	
		obj.firstChild.style.clip = 'rect(0px '+img_width+'px '+img_height+'px 0px)';
		
	},
	propertyChanged : function(e) {
		if (event.propertyName == "src") {
			pho.pngHack(this);
		}
	},
	pngHack : function (obj) {
		var src = obj.src;

		if (src.indexOf(pho.transparentImage) != -1)
			return; // Already fixed

		if (src.indexOf("png") == -1) // There's got to be a better check than this!
		{
			obj.runtimeStyle.filter = "";
			return;
		}

		obj.src = pho.transparentImage;
		obj.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
	},
	getCurStyle : function (x,styleProp)
	{
		if (x.currentStyle)
			var y = x.currentStyle[styleProp];
		else if (window.getComputedStyle)
			var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
		return y;
	}
};
pngHover = new pngHover(navId, slideSide, transparentImage);
pngHover.init();