/****************************

 JavaScript for Creating Image Links Out of Text Links in Site Navigations
 Version:
 	0.1 Beta 1, Aug 25, 2005
 Copyright:
 	2005, Brian Sage, http://sagehome.com/brian. Not for use without _written_
	permission. If you want to use it, ask, but don't rip off my work.

 Compatability:
	DOCTYPE compliance: HTML 4.01 Strict.
 	HTML structure works in all browsers.
	DHTML works in browsers that return true the following:
		if (document.getElementsByTagName && document.createElement && document.insertBefore)

 Use:
	<script type="text/javascript" src="nav_imglinks.js"></script>
 	Note: This file must be included after all <ul.nav_collapsing> tags in
		document have been closed.
	
 	Document must contain a <ul class="nav_collapsing"> with the basic HTML structure:
		<ul class="nav_collapsing">
			<li><a>Nav Item 1</a></li>
		</ul>
	
	Transforms the basic structure above into:
		<ul class="nav_collapsing">
			<li><a><img src="nav_imglink_nav_item_1.gif" alt="Nav Item 1" /></a></li>
		</ul>
	
	Basic structure bay be modified anyway you see fit, as long as the
		parenting order of tags remains the same:
		<div><ul class="nav_collapsing">
			<li><img /><div class="this"><a href="#"><p><span><img /><img /><img src="nav_imglink_nav_item_1.gif" /></span></p></a></div>
				<span><div><ul>
					<li><p class="that"><a><img /><span><img src="nav_imglink_nav_item_2.gif" /></span></a></p></li>
				</ul></div></span>
			</li>
		</ul></div>
	

 Returns: n/a
****************************/


/****************************
 Required Global Variables
****************************/
if (!documentRoot) var documentRoot = '/';
if (!graphicsRoot) var graphicsRoot = documentRoot + '_graphics/';
if (!dbo) var dbo = new Array();


// Required Image Link Parameters:
var imglinkNavs = new Array();
var imglinksActions = new Array();
var imglinksParams = new Array();

imglinksParams.imgSwapLevels = 1;                        // how many levels of the nav, do we want to swap text for images?
imglinksParams.searchNavNodeName = 'UL';                 // what nodeNames are we looking for?
imglinksParams.searchNavClassName = 'nav_collapsing';    // what matching className are we looking for?

imglinksParams.imglinks = new Array();
imglinksParams.imglinks.defaultImg = new Image();
imglinksParams.imglinks.defaultImg.title = '';
imglinksParams.imglinks.defaultImg.alt = '';
imglinksParams.imglinks.defaultImg.height = '35';
imglinksParams.imglinks.defaultImg.width = '265';

imglinksParams.imglinks.defaultImg.classOnmouseover = '';
imglinksParams.imglinks.defaultImg.classOnmouseout = '';
imglinksParams.imglinks.defaultImg.classOnclick = '';
imglinksParams.imglinks.defaultImg.className = imglinksParams.imglinks.defaultImg.classOnmouseout;

imglinksParams.imglinks.defaultImg.srcOnmouseover = '_over';
imglinksParams.imglinks.defaultImg.srcOnmouseout = '';
imglinksParams.imglinks.defaultImg.srcOnclick = imglinksParams.imglinks.defaultImg.srcOnmouseover;
imglinksParams.imglinks.defaultImg.srcActive = '_active'; // unused
imglinksParams.imglinks.defaultImg.srcActiveOnmouseover = imglinksParams.imglinks.defaultImg.srcOnmouseover; // unused

imglinksParams.imglinks.defaultImg.srcImgheader = graphicsRoot + 'nav_image_';
imglinksParams.imglinks.defaultImg.srcImgbody = 'default';
imglinksParams.imglinks.defaultImg.srcImgtype = '.gif';
imglinksParams.imglinks.defaultImg.src = imglinksParams.imglinks.defaultImg.srcImgheader + imglinksParams.imglinks.defaultImg.srcImgbody + imglinksParams.imglinks.defaultImg.srcOnmouseout + imglinksParams.imglinks.defaultImg.srcImgtype;



/****************************
 Variable creation/manipulation functions:
****************************/

// Usage: getParentNodesByTagName( starting document element reference, 'HTML tag (uppercase required)')
// Returns: Array of parent node references where nodeName == argument tag
function getParentNodesByTagName(targ, tag)
{
	var parentNodesByTagName = new Array();
	var loopPoint = targ;
	while (loopPoint.nodeName != 'BODY')
	{
		if (loopPoint.nodeName == tag) parentNodesByTagName.push(loopPoint);
		loopPoint = loopPoint.parentNode;
	}
	
	return parentNodesByTagName;
}

// Usage: solveForE( e )
// Returns: var targ, as different browsers can handle it
function solveForE(e)
{
	var targ;

	if (!e) var e = window.event;                  // for IE's event model
	if (e.target) targ = e.target;                 // for W3C/Moz Event model
	else if (e.srcElement) targ = e.srcElement;    // also for IE's event model
	if (targ.nodeType == 3)                        // defeat Safari 1.3 bug (thanks, quirksmode.org)
	targ = targ.parentNode;                        // realize the target node, itself

	return targ;
}


/****************************
 Worker Bee functions:
****************************/

// Usage: imglinksActions.swapTextToImg( document element reference );
imglinksActions.swapTextToImg = function (elemId)
{
	dbo.value += 'imglinksActions.swapTextToImg(elemId), elemId = '+elemId+'\n';
	dbo.value += '	elemId.nodeValue = '+elemId.nodeValue+'\n';

	// create a place-holder for manipulating the text.
	var srcImgbody = elemId.nodeValue.toLowerCase()
	while (srcImgbody.indexOf(' ') >= 0) srcImgbody = srcImgbody.replace(' ', '_');
	dbo.value += '	srcImgbody = '+srcImgbody+'\n';

	// set the parameters for the node image object
	imglinksParams.imglink = document.createElement('img');
	imglinksParams.imglink.src = imglinksParams.imglinks.defaultImg.srcImgheader + srcImgbody + imglinksParams.imglinks.defaultImg.srcImgtype;
	imglinksParams.imglink.className = imglinksParams.imglinks.defaultImg.className;
	imglinksParams.imglink.title = imglinksParams.imglinks.defaultImg.title;
	imglinksParams.imglink.alt = elemId.nodeValue;
	imglinksParams.imglink.height = imglinksParams.imglinks.defaultImg.height;
	imglinksParams.imglink.width = imglinksParams.imglinks.defaultImg.width;

	// set document event handlers for the node image object
	imglinksParams.imglink.onmouseover = function (e)
	{
		imglinksActions.imglinkOver(e);
	}
	imglinksParams.imglink.onmouseout = function (e)
	{
		imglinksActions.imglinkOut(e);
	}
	imglinksParams.imglink.onclick = function (e)
	{
		imglinksActions.imglinkClick(e);
	}

	// place the image
	elemId.parentNode.insertBefore(imglinksParams.imglink, elemId);

	// and delete the text
	elemId.parentNode.removeChild(elemId);
}

// Usage: imglinksActions.imglinkOver( e, value should be 1, if called from a function );
imglinksActions.imglinkOver = function (e, calledFromFunc)
{
	var targ = (1 == calledFromFunc) ? e : solveForE(e);
	dbo.value = 'imglinksActions.imglinkOver(e, calledFromFunc)\n	e==' + e + '\n	calledFromFunc==' + calledFromFunc +'\n';

	targ.src = targ.src.replace( imglinksParams.imglinks.defaultImg.srcOnmouseout + imglinksParams.imglinks.defaultImg.srcImgtype, imglinksParams.imglinks.defaultImg.srcOnmouseover + imglinksParams.imglinks.defaultImg.srcImgtype );
	dbo.value += ("	targ.src == " + targ.src + "\n");
}

// Usage: imglinksActions.imglinkOut( e, value should be 1, if called from a function );
imglinksActions.imglinkOut = function (e, calledFromFunc)
{
	var targ = (1 == calledFromFunc) ? e : solveForE(e);
	dbo.value = 'imglinksActions.imglinkOut(e, calledFromFunc)\n	e==' + e + '\n	calledFromFunc==' + calledFromFunc +'\n';

	targ.src = targ.src.replace( imglinksParams.imglinks.defaultImg.srcOnmouseover + imglinksParams.imglinks.defaultImg.srcImgtype, imglinksParams.imglinks.defaultImg.srcOnmouseout + imglinksParams.imglinks.defaultImg.srcImgtype );
	dbo.value += ("	targ.src == " + targ.src + "\n");
}
imglinksActions.imglinkClick = function (e, calledFromFunc)
{
	var targ = (1 == calledFromFunc) ? e : solveForE(e);
	dbo.value = 'imglinksActions.imglinkClick(e, calledFromFunc)\n	e==' + e + '\n	calledFromFunc==' + calledFromFunc +'\n';

	targ.src = targ.src.replace( imglinksParams.imglinks.defaultImg.srcOnmouseover + imglinksParams.imglinks.defaultImg.srcImgtype, imglinksParams.imglinks.defaultImg.srcOnclick + imglinksParams.imglinks.defaultImg.srcImgtype );
	dbo.value += ("	targ.src == " + targ.src + "\n");
}


/****************************
 Initialize navs in document:
****************************/

// Make an array of all imglinkNavs in the document for easy reference
if (document.getElementsByTagName && document.createElement && document.insertBefore)
{
	dbo.value = 'searching for imglinkNavs:\n';
	for (var i = 0; i < document.getElementsByTagName( imglinksParams.searchNavNodeName ).length; i++)
	{
		if (document.getElementsByTagName( imglinksParams.searchNavNodeName ).item(i).className == imglinksParams.searchNavClassName)
		{
			imglinkNavs.push( document.getElementsByTagName( imglinksParams.searchNavNodeName ).item(i) );
		}
	}
	dbo.value += '	total imglinkNavs found:' + imglinkNavs.length + '\n';
}

// Parse through each imglinkNav and do something
for (var i = 0; i < imglinkNavs.length; i++)
{
	dbo.value += 'setting parameters in imglinkNavs['+i+']\n';
	dbo.value += '	searching for <a>s: ' + imglinkNavs[i].getElementsByTagName("a").length + ' found\n';
	// loop through all imglinkNavs[] <a>s
	for (var j = 0; j < imglinkNavs[i].getElementsByTagName("a").length; j++)
	{
		// find how many levels deep this <a> is
		var parentULNodes = getParentNodesByTagName(imglinkNavs[i].getElementsByTagName("a")[j], 'UL');

		// if it's less than [imgSwapLevels] levels deep...
		if (parentULNodes.length <= imglinksParams.imgSwapLevels)
		{
			// dbo.value += '		a['+j+'] has '+parentULNodes.length+' parentULNodes\n';

			// loop through its childNodes
			for (var k = 0; k < imglinkNavs[i].getElementsByTagName("a")[j].childNodes.length; k++)
			{
				// if it has a text node...
				if (imglinkNavs[i].getElementsByTagName("a")[j].childNodes[k].nodeName == '#text')
				{
					// debug output the nodeValue
					// dbo.value += '		a['+j+'].childNodes['+k+'].nodeValue='+ imglinkNavs[i].getElementsByTagName("a")[j].childNodes[k].nodeValue +'\n';
					
					// call some fancy function that changes this thing to an image (why? because I like functions)
					imglinksActions.swapTextToImg (imglinkNavs[i].getElementsByTagName("a")[j].childNodes[k]);
					k++; // IMPORTANT: prevents an infinate loop, since number of sibling nodes has just increased by 1.
				}
			}
		}
	}
}



/****************************
 Loaded Announce
****************************/
dbo.value += ("nav_imglinks.js loaded!\n");