$(function(){
	var pos;
	$("#wrapper #nav li").mouseenter(function(){
		pos = bp($(this));
		$(this).css("background-position", pos[0] + ' -30px');
	});
	$("#wrapper #nav li").mouseleave(function(){		
		$(this).css("background-position", pos[0] + ' ' + pos[1]);
	});
	$("#wrapper #nav li").mousedown(function(){
		var pos2 = bp($(this));
		$(this).css("background-position", pos2[0] + ' -60px');
		
		// when user clicks this <li> element, redirect it to the page
		// to where the fist child <a> element points
		window.location = $('a', this).attr('href');
		
	});
   $("#wrapper #nav li.active").each(function(){
		var pos2 = bp($(this));
		$(this).css("background-position", pos2[0] + ' -60px');
	});
});

function bp( elem ){	
	var p = $(elem).css('background-position');
	var pos;
	if(typeof(p) === 'undefined'){
		p = $(elem).css('background-position-x') + ' ' + $(elem).css('background-position-y');
	}
	if ( $.browser.msie ) {
		// Browser fix for IE.
		var $elem	= $( elem ),
		posX	= $elem.css( "backgroundPositionX" ),
		posY	= $elem.css( "backgroundPositionY" );
		p = posX + " " + posY;
	}

	return p.split(" ");
}