// JavaScript Document

function releaseBigPic() {
	$('.bigPic .closeButton').slideUp();
	$('.bigPic').animate({ height:'48px' }, 200, 'linear').removeClass('bigPic');
}

function centerSpotlight() {
	spotHgt = $('.spotlight').height();
	spotTop = ((600 - spotHgt)/2);
	spotWdt = $('.spotlight').width();
	spotLeft = (728 - spotWdt)/2;
	$('.spotlight').css('margin-top', spotTop).css('margin-left', spotLeft).fadeIn(500);
	
}

$(document).ready(function() {
	
	var newSelection = "";
	
	// handles filtering the list using categories
	$("#projectFilter a").click(function(){
	
	    $("#allProjects").fadeTo(200, 0.10);
		
		$('.spotlight').remove();
		releaseBigPic();
		
		$("#projectFilter a").removeClass("current");
		$(this).addClass("current");
		
		newSelection = $(this).attr("rel");
		
		$(".project").not("."+newSelection).slideUp();
		$("."+newSelection).slideDown();
		
	    $("#allProjects").fadeTo(600, 1);
		
	});
	
	
	// handles enlarging the viewing area
	$(".thumbnail").click(function(event){
		event.preventDefault();
		
		spotURL = $(this).attr('href');
		spotAlt = $(this).find('img').attr('alt');
	 			
	 	// decide if to expand the view area or if it's already expanded
		if ($(this).parent().is('.bigPic')) {
			$('.spotlight').fadeOut(500).remove();
		} else {
			$('.spotlight').fadeOut(500).remove();
			releaseBigPic();
			$(this).parent().animate({ 'width' : 728, 'height': 648 }, 300).addClass('bigPic');
			// show closing button
			$('.bigPic .closeButton').slideDown();
		}
	
		// place the image or embed multimedia		
		if ($(this).is('.fancy')) {
			params = $(this).attr('title').split(':');
			
			$(this).parent().append('<div class="spotlight"><div id="replaceMe">You are missing a plugin to view this media</div></div>');
			$("#replaceMe").jmedia(
				{elemType: "div"},
				{
					src: spotURL,
					width: params[0],
					height: params [1]
				}
			);
		
			$('.spotlight').css('width',params[0] + 'px').css('height',params[1] + 'px');
			centerSpotlight();
		
		} else {
			
			$(this).parent().append('<img class="spotlight" src="' + spotURL + '" alt="' + spotAlt + '" />');
			
			// wait for the image to load to resize the div
			$('.spotlight').load(function() {
				centerSpotlight();
			});
		}
				
	});
	
	// enable closing button
	$(".closeButton").click(function(event){
		$('.spotlight').remove();
		releaseBigPic();							 
	});
	
});