/*  pngRoll Advanced, version 0.1
 *  (c) 2007 Nate Weiner <nate@ideashower.com>
 *  Co-Authors: none (submit your updates to this code at http://www.ideashower.com/)
 *  pngHack.htc written by Aaron Porter <aaron@javasource.org>
 *  getStyle written by www.quirksmode.org 
 *
 *  For a more slimmed version, go to the http://www.ideashower.com/
 *
 *  pngRoll is freely distributable under the terms of an MIT-style license.
 *  For details and other no-bloat scripts, see the Idea Shower web site: http://www.ideashower.com/
 *
/*--------------------------------------------------------------------------*/
/*
 *  To-Do:
 *  Add behavior for bg images with right side hover
*/


function pngRoll() {
	/* -- Set These -- */
	navID = 'nav';
  //hoverSide = 'right'; //Use if hover part of background image is on the right side of bg img
	hoverSide = 'below'; //Use if hover part of background image is on the bottom side of bg img
	/* --           -- */

	navLI = document.getElementById(navID).getElementsByTagName('li');
	for(i=0; i<navLI.length; i++) {
		
		if (navLI[i].parentNode == document.getElementById(navID)) {
			navA = navLI[i].getElementsByTagName('a');
			navA = navA[0];
			
			navA.innerHTML = '';
			navA.style.textIndent = '0px';
			navA.style.position = 'relative';
			
			newIMG = document.createElement('img');
			img_width = getStyle(navA,'width').replace('px',''); 
			img_height = getStyle(navA,'height').replace('px','');  
			newIMG.setAttribute( 'src', getStyle(navA,'backgroundImage').substr(5,getStyle(navA,'backgroundImage').length-7) );
			newIMG.setAttribute( 'width', img_width );
			newIMG.setAttribute( 'height', img_height * 2 );
			newIMG.style.behavior = 'url(/_jsclasses/pngRoll/pngHack.htc)';
			newIMG.style.overflow = 'hidden';
			newIMG.style.position = 'absolute';
			newIMG.style.left = '0px';
			
			navA.appendChild(newIMG);
			navA.style.background = 'none';
			pngRoll_back(null, navA);
			
			navA.onmouseover = pngRoll_hover;
			navA.onmouseout = pngRoll_back;
		}
	}

}
if (window.attachEvent) window.attachEvent("onload", pngRoll);
//window.onload = function() { pngRoll(); }

function pngRoll_hover(e, obj) { 
	if (!obj) { obj = this; } 
	img_width = getStyle(obj,'width').replace('px',''); 
	img_height = getStyle(obj,'height').replace('px',''); 
	obj.firstChild.style.clip = 'rect('+img_height+'px '+img_width+'px '+(img_height*2)+'px 0px)';
	obj.firstChild.style.top = '-18px';
}
function pngRoll_back(e, obj) {
	if (!obj) { obj = this; } 
	img_width = getStyle(obj,'width').replace('px',''); 
	img_height = getStyle(obj,'height').replace('px',''); 
	obj.firstChild.style.clip = 'rect(0px '+img_width+'px '+img_height+'px 0px)';
	obj.firstChild.style.top = '0px';
}

function getStyle(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;
}