/**
	izilla_navspacer v1.5.2
	
	use with div or something containing a heading and a ul.
	for example
	<div id="the_nav">
		<h3>Navigation</h3>
		<ul>
			<li><a href=...><span>text</span></a></li>
			<li><a href=...><span>text</span></a>
				<ul><li><a href=...>subnav</a></li></ul>
			</li>
		</ul>
	</div>
	
	and run as
	navSpacer(fontSize, [elTarget]);
	
	the lis must all contain anchors as direct children; the anchors might have spans in them.
	
	any subnav, set width & height to zero when not visible
	
	arguments:
		fontsize: font size, unit is pixels. Defaults to 12 [optional]
		elTarget: id of container. Defaults to nav_main [optional]
**/

function navSpacer(fontSize, elTarget) {

	var htmlClassName = document.getElementsByTagName('html')[0].className;
	
	var getStyleInt = function(el,styleProp) {
		var y;
		if (/\bie|\bopera/.test(htmlClassName)) {
			styleProp = styleProp.replace(/-([a-z])/,function(m1,m2){return m2.toUpperCase()});
		}
		if (el.currentStyle)
			y = el.currentStyle[styleProp];
		else if (window.getComputedStyle)
			y = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
			
		if (y.indexOf('px') >= 0) {
			return parseInt(y.replace('px',''));
		}
		else if (y.indexOf('em') >= 0) {
			var ems = parseFloat(y.replace('em',''));
			return ems * fontSize;
		}
		else {
			throw "unable to parse element style " + styleProp + ": value is '" + y + "'";
		}
	}

	elTarget = elTarget || 'nav_main';
	
	var ul = document.getElementById(elTarget).getElementsByTagName('ul')[0];

	if (ul != null && ul.offsetWidth) {
		var width = ul.clientWidth;
		var lis = ul.getElementsByTagName('li');
		var lisValid = new Array();
		var as = new Array();

		var lisWidth = 0;
		for (i=0; i<lis.length; ++i) {
			if (lis[i].parentNode.parentNode.id == elTarget) {
				lisValid.push(lis[i]);
				
				var a = lis[i].getElementsByTagName('a')[0];
				as.push(a);
				a.style.width = 'auto';
			}
		}		

		for (i=0; i<lis.length; ++i) {
			if (lis[i].parentNode.parentNode.id == elTarget) {
				lisWidth += lis[i].offsetWidth;
			}
		}		
		
		var ratio = width / lisWidth;
		var fractionTotal = 0;
		
		for (i=0; i<lisValid.length; ++i) {
			var current = lisValid[i].offsetWidth;
			var target = current * ratio;
			var increase = target - current;
			var increaseInt = Math.floor(increase);
			fractionTotal += (increase - increaseInt);
			var pLeft = getStyleInt(as[i],'padding-left');
			var pRight = getStyleInt(as[i],'padding-right');
			as[i].style.width = (as[i].clientWidth-(pLeft+pRight) + increaseInt) + 'px';
		}
		
		as[0].style.width = getStyleInt(as[0],'width') + Math.floor(fractionTotal) + 'px';
		
		if (fontSize != undefined) {
			// reset heights to auto, so our 'max' is meaningful
			for (i=0; i<as.length; ++i) {
				as[i].style.minHeight = 0;
				if (/\bie6/.test(htmlClassName)) {
					as[i].style.height = 'auto';
				}
			}
			
			var max_ = null;
			for (i=0; i<as.length; ++i) {
				var height = as[i].offsetHeight - (getStyleInt(as[i],'padding-bottom')+getStyleInt(as[i],'padding-top'));
				if (max_ == null || height > max_)
					max_ = height;
			}
			var maxem = max_ / fontSize;
			maxem += 'em';
			for (i=0; i<as.length; ++i) {
				as[i].style.minHeight = maxem;
				if (/\bie6/.test(htmlClassName)) {
					as[i].style.height = maxem;
				}
			}
		}
	}
}