[thelist] adapted algonquin navigation

[ben morrison]

I've adapted aardvark's changes to the son of suckerfish navigation,
so posting my changes back to thelist.

http://algonquinstudios.com/

Our navigation was going to span the width of the browser, so in
smaller screens the flyout navigation was disappearing off the right
of the screen in explorer, I am now calculating the <ol> width and
repositioning by the amount of available screen width, also IE has
problems with select boxes, so i've used the same approach as
macradobe where they hide any select boxes on the page when the drop
down nav is shown.

example here: http://html.eval.poptech.coop/commonwealth/nav-example.asp

Code changes:

sfHover = function() {
	var sfEls = document.getElementById("FlyOutNav").getElementsByTagName("LI");
	var mcEls = document.getElementById("FlyOutNav").getElementsByTagName("A");
	for (var i=0; i<sfEls.length; i++) {
		mcEls[i].innerHTML = mcEls[i].innerHTML.replace(/\s/g, '&nbsp;');	
		sfEls[i].onmouseover=function() {
			this.className+=(this.className.length>0? " ": "") + "sfhover";
			fixSelects('hidden');
			var thisOl=this.getElementsByTagName("ol");
			if(thisOl[0]) {
				moveLi(thisOl[0].offsetWidth,thisOl[0].offsetLeft,thisOl[0]);
			}
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
			fixSelects('visible');
			var thisOl=this.getElementsByTagName("ol");
			if(thisOl[0]) {
				thisOl[0].style.left='';
			}
		}
	}
}
// hide/show select boxes when showing drop down nav
function fixSelects(visibility) {
	var selectBoxes=document.getElementsByTagName('select');
	for(var i=0;i<selectBoxes.length;i++) {
		selectBoxes[i].style.visibility=visibility;
	}
}

function  moveLi(widths,pos,item) {
	var x = document.body.clientWidth;
	var moveBy = (parseInt(x)-pos-widths);
	if(moveBy<=0){
		item.style.left=pos+moveBy;
	}
}

Ben