$(function () {

	$('#navigation li.highlight a').each(function () {
		var timeIn = 400;	// Fade in-tid för hovern
		var timeOut = 400;	// Fade out-tid för hovern
		var img = $(this).find('img');
		
		$(this).css("background","transparent url(" + img.attr("src").replace("1","2") + ") no-repeat");
	
		$(this).hover(function () {                        
			img.stop().fadeTo(timeIn, 0);
		}, function () {
			img.stop().fadeTo(timeOut, 1);
		});
	});

	// Klicka på Works
	$('#main li#has-sub').click(function () {
		toggleSub(1);	
	});
	
	// Klicka på de andra
	$('#main li.highlight').not('#main li#has-sub').click(function () {
		toggleSub(0);	
	});

	// I CSS:en är main disablad, ladda in och visa den när hela javascriptet är laddat.
	$('#main').toggle();
});



function toggleSub(operator) {

	if (operator == 1) {
	
		var timeIn = 300; // Fade in-tid för varje bild
		var incrementing = 0;
		var wait = 50; // Väntetid tills nästa bild fadar in
		
		$('#sub li').each(function () {
			$(this)
				.css({display: 'block'})
				.animate({opacity: 1-operator}, incrementing)
				.fadeTo(timeIn,operator);
			
			incrementing += wait;
		});
	
	} else {
	
		var timeOut = 170; // Fade ut-tid när man klickar på en annan länk
		
		$('#sub li')
			.animate({opacity: 0}, timeOut)
			.css({display: 'block'});
	}
}