/*

	-- -- -- -- -- -- --
	css sprites 2
	nav behaviour

	http://www.alistapart.com/articles/sprites2
	-- -- -- -- -- -- --
	
*/

function generateSprites(parent, selectedPrefix, setActive, hoverSpeed, style) {
	// throw the parent object's class into a variable
	var parentClass = $(parent).attr("class");

	// start a loop that cycles through each of the li elements inside the parent element
	$(parent).children("li").each(function() {
		// create a few variables that we'll need during this function:
		// myClass = the class of the object we're currently inspecting
		// current = what the selected class should look like for the parent of the object we're currently inspecting
		var myClass = ($(this).attr("class"))
		var current = parent.substring(1) + " current-" + ($(this).attr("class"));

		// turn on nav events for element this loop identifies
		attachNavEvents(parent, myClass, setActive, hoverSpeed, style);
	
		// let's hide the CSS-defined background image, but only if this isn't the currently-selected item
		if (parentClass != current) {
			$(this).children("a").css({backgroundImage:"none"});
		}

	});
}


function attachNavEvents(parent, myClass, setActive, hoverSpeed, style) {
	$(parent + " ." + myClass).mouseover(function() {
		// create pseudo-link
		$(this).append('<div class="nav-' + myClass + '"></div>');
		// either slide or fade, depending on the style value
		if (style == "slide") {
			// slide down the pseudo-link
			$("div.nav-" + myClass).css({display:"none"}).slideDown(hoverSpeed);
		} else {
			// fade in the pseudo-link
			$("div.nav-" + myClass).css({display:"none"}).fadeIn(hoverSpeed);
		}
	}).mouseout(function() {
		// either slide or fade, depending on the style value
		if (style == "slide") {
			// slide up & destroy pseudo-link
			$("div.nav-" + myClass).slideUp(hoverSpeed, function() {
				$(this).remove();
			});
		} else {
			// fade out & destroy pseudo-link
			$("div.nav-" + myClass).fadeOut(hoverSpeed, function() {
				$(this).remove();
			});
		}
	});


	// we only want to check the mousedown/up events if the CSS exists for :active states
	// if so, let's apply our selective filtering to undo the events above
	if (setActive) {
		$(parent + " ." + myClass).mousedown(function() {
			$("div.nav-" + myClass).attr("class", "nav-" + myClass + "-click");
		}).mouseup(function() {
			$("div.nav-" + myClass + "-click").attr("class", "nav-" + myClass);
		});
	}
}




$(function() {
$("#thumbs a, .portfolio a, .fancy").fancybox({
'hideOnContentClick': true,
frameWidth: 610,
frameHeight: 375
});

generateSprites(".nav", "current-", true, 150, "fade");		   

$('#hero img').hide();

$('#hero img').fadeIn(1500);

$("#thumbs img, .portfolio img").fadeTo("fast", 0.5); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$("#thumbs img, .portfolio img").hover(function(){
$(this).fadeTo("fast", 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("fast", 0.5); // This should set the opacity back to 60% on mouseout
});

	$('.portfolio').before('<ul id="filter"><li class="current"><a href="#">All</a></li><li><a href="#">Ads</a></li><li><a href="#">Annual Reports</a></li><li><a href="#">Logos</a></li><li><a href="#">Posters</a></li></ul>');  

    $('ul#filter a').click(function() {  
        $(this).css('outline','none');  
        $('ul#filter .current').removeClass('current');  
        $(this).parent().addClass('current');  
         
        var filterVal = $(this).text().toLowerCase().replace(' ','');  
                
        if(filterVal == 'all') {  
            $('.portfolio li.hidden').fadeIn('slow').removeClass('hidden');  
        } 
		else
		{  
            $('.portfolio li').each(function() {  
                if(!$(this).hasClass(filterVal)) {  
                    $(this).fadeOut('normal').addClass('hidden');  
                } 
				else
				{  
                   $(this).fadeIn('slow').removeClass('hidden');  
                }  
            });  
        }  
          
        return false;  
    });  
});