$(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
		$(".menu").children("li").each(function() {
			var current = "menu current-" + ($(this).attr("class"));
			var parentClass = $(".menu").attr("class");
			if (parentClass != current) {
				$(this).children("a").css({backgroundImage:"none"});
			}
		});	


		// create events for each nav item
		attachNavEvents(".menu", "work");
		attachNavEvents(".menu", "about");
		attachNavEvents(".menu", "services");
		attachNavEvents(".menu", "contact");
	

		function attachNavEvents(parent, myClass) {
			$(parent + " ." + myClass).mouseover(function() {
				$(this).append('<div class="menu-' + myClass + '"></div>');
				$("div.menu-" + myClass).css({display:"none"}).fadeIn(200);
			}).mouseout(function() {
				// fade out & destroy pseudo-link
				$("div.menu-" + myClass).fadeOut(1000, function() {
					$(this).remove();
				});
			});
		}
		
		
		/*slideshow*/
		$(function() {
			var imgWrapper = $('.slideshow > img');
			// only show the first image, hide the rest
			imgWrapper.hide().filter(':first').show();
			
			$('ul.recentlist li a').click(function () {
			
				// check if this item doesn't have class "current"
				// if it has class "current" it must not execute the script again
				if (this.className.indexOf('current') == -1){
					imgWrapper.hide();
					imgWrapper.filter(this.hash).fadeIn(500);
					$('ul.recentlist li a').removeClass('current');
					$(this).addClass('current');
				}
				return false;
			});
		});

	});