<!--	
	$(document).ready(function(){
	
		// remove link background images since we're re-doing the hover interaction below 
		// (doing it this way retains the CSS default hover states for non-javascript-enabled browsers)
		// we also want to only remove the image on non-selected nav items, so this is a bit more complicated
		$(".navi").children("li").each(function() {
			var current = "navi current-" + ($(this).attr("class"));
			var parentClass = $(".navi").attr("class");
			if (parentClass != current) {
				$(this).children("a").css({backgroundImage:"none"});
			}
		});
		$(".navi-add").children("li").each(function() {
			var current = "navi-add current-" + ($(this).attr("class"));
			var parentClass = $(".navi-add").attr("class");
			if (parentClass != current) {
				$(this).children("a").css({backgroundImage:"none"});
			}
		});	


		// create events for each nav item
		attachNavEvents(".navi", "index");
		attachNavEvents(".navi", "company");
		attachNavEvents(".navi", "services");
		attachNavEvents(".navi", "portfolio");
		attachNavEvents(".navi", "jobs");
		attachNavEvents(".navi", "blog");
		
		
		attachNavEvents(".navi-add", "faq");
		attachNavEvents(".navi-add", "privacy");
		attachNavEvents(".navi-add", "terms");
		attachNavEvents(".navi-add", "contact");

		function attachNavEvents(parent, myClass) {
			$(parent + " ." + myClass).mouseover(function() {
				$(this).append('<div class="navi-' + myClass + '"></div>');
				$("div.navi-" + myClass).css({display:"none"}).fadeIn(200);
			}).mouseout(function() {
				$("div.navi-" + myClass).fadeOut(200, function() {
					$(this).remove();
				});
			}).mousedown(function() {
				$("div.navi-" + myClass).attr("class", "navi-" + myClass + "-click");
			}).mouseup(function() {
				$("div.navi-" + myClass + "-click").attr("class", "navi-" + myClass);
			});
		}

		// Fade for the three big button on index		
		$(".home-box").hover(function() {
			$(this).animate({ opacity: 1}, 600);
		},
		function() {
			$(this).animate({ opacity: 0.8}, 600);
		});
		
		// Fade for small buttons in the main menu
		$(".navi li ul li a").hover(function() {
			$(this).animate({ opacity: 1}, 300);
		},
		function() {
			$(this).animate({ opacity: 0.5}, 300);
		});

		// Fade for the navi in sidebar
		$('#navi-sidebar li a:not(#navi-sidebar li.active a)').hover(
		 function () {
			  $(this).stop().animate({backgroundColor:'#deedf6'}, 300);
			  }, function () {
			  $(this).stop().animate({backgroundColor:'#f4f4f4'}, 200);
		 });
	});
//-->
