sfHover = function() 
	{
			var sfEls = document.getElementById("mainmenu").getElementsByTagName("LI");
			
			for (var i=0; i<sfEls.length; i++) 
			{
				sfEls[i].onmouseover=function() 
				{
					this.className+=" sfhover";
				}
			
				sfEls[i].onmouseout=function() 
				{
					this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
				}
			}
	}
	

window.addEvent('load', function() 
	{
		sfHover();
		// this is to handle the feature panel at the bottom
		var items = $$("#features .item");
		var content = $('feature-content');
		
		var fx = new Fx.Elements(content, {wait: false, duration: 1000, transition: Fx.Transitions.Quad.easeInOut});
		
		items.each(function(item,i) {
			item.addEvent("mouseenter",function(event) {
				item.addClass('hover');
			});
			item.addEvent("mouseleave",function(event) {
				item.removeClass('hover');
			});
			item.addEvent("click",function(event) {
				var o = {};
				var negative = (i*(-370));
				o[0] = {top: [content.getStyle("top").toInt(), negative]};
				item.addClass('over');
		
				items.each(function(other, j) {
					if(i != j) {
						other.removeClass('over');
					}
				});
				fx.start(o);
			});
		});
		});