function initFeatures() {
	var feat=document.getElementById("features"),
		holder=document.getElementById("holder"),
		next=document.getElementById("next"),
		prev=document.getElementById("previous"),
		exit=document.getElementById("exit"),
		expand=document.getElementById("expand"),
		innerNav=document.getElementById("innerNav");

	createMenuNav();

	// Set events
	feat.onmouseover=function (e) {
		var target;
		e=e || event;
		target=e.target || e.srcElement;
		while (target && target.className!="ft") target=target.parentNode;
		if (target && target.id!="holder") target.className+=" sel";
	}

	feat.onmouseout=function (e) {
		var target, to;
		e=e || event;
		to=e.relatedTarget || e.toElement;
		target=e.target || e.srcElement;
		if (!to || (to!=target && to.parentNode!=target)) {
			while (target && target.className!="ft sel") target=target.parentNode;
			if (target) target.className="ft";
		}
	}

	feat.onclick=function (e) {
		var target;
		e=e || event;
		target=e.target || e.srcElement;
		while (target && target.className!="ft" && target.className!="ft sel") target=target.parentNode;
		if (target && target.id!="holder") {
			if (feat.inProgress) {
				var intv=setInterval(function () { if (!feat.inProgress) { showFeat(target); clearInterval(intv); } },200);
				return;
			}
			showFeat(target);
		}
	}

	expand.onclick=function () {
		if (feat.inProgress) return setTimeout(arguments.callee,200);
		if (feat.viewed) hideFeat(expandAll);
		else expandAll();
	}

	// Nav events
	exit.onclick=function () { hideFeat(); }
	next.onclick=prev.onclick=function () {
		var cur=feat.viewed;
		do {
			cur=cur[this.id+"Sibling"];
			if (!cur && this==next) cur=feat.firstChild;
			if (!cur && this==prev) cur=feat.lastChild;
		} while (cur.nodeType!=1 || cur.id=="holder");
		showFeat(cur);
	}

	// Side nav
	function createMenuNav() {
		var childFeat=feat.lastChild, i=new Date().getTime();
		childFeat.offsetWidth; // Force render (without this latter links ignore the new items and overlap)
		while (childFeat) {
			if (childFeat.className=="ft") {
				var menuItem=curNav.parentNode.insertBefore(document.createElement("LI"),curNav.nextSibling).appendChild(document.createElement("A"));
				menuItem.related=childFeat;
				childFeat.id="feature-"+i;
				menuItem.href="#feature-"+i;
				menuItem.onclick=function () {
					if (!feat.expanded) {
						if (feat.inProgress) {
							var item=this;
							setTimeout(function () { item.click(); },250);
							return false;
						}
						showFeat(this.related);
						return false;
					}
				}
				var txtEl=childFeat.getElementsByTagName("div")[0];
				menuItem.innerText=menuItem.textContent=txtEl.innerText || txtEl.textContent;
			}
			i++;
			childFeat=childFeat.previousSibling;
		}
	}

	// Meat
	function expandAll() {
		var ex=document.getElementById("expander");
		if (ex.disabled) ex.disabled=false;
		else ex.href=ex.getAttribute("disHref");

		feat.onclick=feat.onmouseover=feat.onmouseout=null;
		feat.expanded=true;
	}

	function showFeat(sel) {
		if (feat.viewed==sel) return;
		if (feat.viewed) return hideFeat(sel);
		if (sel) {
			// Setup
			feat.viewed=sel;
			sel.style.left=sel.origLeft=sel.offsetLeft;
			sel.style.top=sel.offsetTop;
			sel.origHeight=sel.offsetHeight;
			sel.origWidth=sel.offsetWidth;
			sel.parentNode.insertBefore(holder,sel);
			sel.className="ft sel view";
			var img=sel.getElementsByTagName("img")[0];
			img.src=img.src.replace("icons","images");

			// Scroll position
			var finHeight=Math.max(sel.scrollHeight,180),
				absTop=getTop(sel),
				scrollEl=document.body;

			if (absTop+finHeight+20>scrollEl.offsetHeight+scrollEl.scrollTop || absTop<scrollEl.scrollTop) {
				scrollEl.scrollTop=absTop-(scrollEl.offsetHeight-finHeight)/2;
			}
			
			// Swoosh
			feat.inProgress=true;
			transEl(sel,"left",10,sel.offsetLeft,1000);
			transEl(sel,"width",660,sel.offsetWidth,1000);
			transEl(sel,"height",finHeight,sel.offsetHeight,1000,
				function () {
					sel.appendChild(innerNav);
					feat.inProgress=false;
				}
			);

			
		}
	}

	function hideFeat(showAfter) {
		var vw=feat.viewed;

		vw.style.position="absolute";
		vw.className="ft sel";
		document.body.appendChild(innerNav);
		var img=vw.getElementsByTagName("img")[0];
		img.src=img.src.replace("images","icons");

		feat.inProgress=true;
		transEl(vw,"left",vw.origLeft,40,500);
		transEl(vw,"height",vw.origHeight,Math.max(vw.scrollHeight,180),500);
		transEl(vw,"width",vw.origWidth,vw.offsetWidth,500,
			function () {
				document.body.appendChild(holder);
				vw.style.position="";
				vw.style.height="";
				vw.style.width="";
				vw.className="ft";
				vw.offsetWidth; // Force FF to render - without this there's a momentary jump in the UI
				feat.viewed=null;
				if (showAfter) {
					if (typeof showAfter=="function") showAfter();
					else {
						setTimeout(function () { showFeat(showAfter); },100); // Opera needs a timeout, otherwise the floats clear (!)
					}
				} else {
					feat.inProgress=false;
				}
			}
		);
	}

	function transEl(el,prop,targetVal,origVal,duration,doneCallback) {
		var time=0, effect, delay=30;
		effect=setInterval(
			function () {
				time+=delay;
				if (time>duration) {
					el.style[prop]=targetVal;
					clearInterval(effect);
					return doneCallback && doneCallback();
				}
				
				var t=time, c=1, b=0, d=duration, step;
				if (t==0) step=b; 
				else if ((t/=d)==1) step=b+c;
				else {
					var p=700,s=p/4,a=c;
					step=a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b;
				}
				el.style[prop]=Math.round(origVal+step*(targetVal-origVal));
			},
			delay
		);
	}

	function getTop(parEl) {
		for (var absTop=0;parEl!=null;absTop+=parEl.offsetTop,parEl=parEl.offsetParent);
		return absTop;
	}
}

initFeatures();

// IE6 PNG
function fixPngDisplay() {
	var imgs=document.getElementsByTagName("img");
	for (var i=0;i<imgs.length;i++) if (/\.png$/i.test(imgs[i].src)) {
		imgs[i].style.display="none";
		imgs[i].attachEvent("onpropertychange",pngChanged);
		
		var rep=imgs[i].parentNode.insertBefore(document.createElement("span"),imgs[i].nextSibling);
		rep.className="img";
		rep.style.width=1; // Layout
		rep.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader()";
		rep.filters[0].src=imgs[i].src;
	}
}

function pngChanged(event) {
	if (event.propertyName=="src") event.srcElement.nextSibling.filters[0].src=event.srcElement.src;
}