$(document).ready(function(){
	
	$('#nav a').click(function(){
		$("#nav li a").each(function (i) {
			if($(this).hasClass("active")){
				$(this).removeClass("active");
			} 
		});
		
		if($(this).hasClass("linkWork")){
			$("#filters").animate({opacity:1},{queue:false,duration:100, complete: function(){$("#filters").css("display", "block")}});
		} else {
			$("#filters").animate({opacity:0},{queue:false,duration:100, complete: function(){$("#filters").css("display", "none")}});
		}
		
		$(this).addClass("active");
	
	  var selector = $(this).attr('data-filter');
	  $('#container').isotope({ filter: selector });
	  return false;
	});
	
	$(".item .window a", this).stop().animate({opacity:0},{queue:false,duration:0});
	
	$('.item').hover(function(){
		$(".screenTop", this).stop().animate({top:'0px'},{queue:false,duration:300});
		$(".screenBottom", this).stop().animate({bottom:'0px'},{queue:false,duration:300, complete: function(){$(this).parent().find("a").stop().animate({opacity:1},{queue:false,duration:200});}});
		
	}, function() {
		$(".window").find("a").stop().animate({opacity:0},{queue:false,duration:100});
		$(".screenTop", this).stop().animate({top:'-50px'},{queue:false,duration:300});
		$(".screenBottom", this).stop().animate({bottom:'-50px'},{queue:false,duration:300});
	});
	
	$('.item a, .item .screenTop, .item .screenBottom').click(function(){
		$('.project #loader').empty();
		displayItem($(this).parent().find('a').attr("id"));
	});

	
   
   function displayItem(name){
		jQuery.each(projects, function(i, val) {
      		if(name == projects[i][0]){
      			$('.project').find('h1').text(projects[i][1]);
      			$('.project').find('#via').text("via: "+projects[i][2]);
      			$('.project').find('#type').text("type: "+projects[i][3]);
      			$('.project').find('p').text(projects[i][4]);
      			
      			if(projects[i][5] != ""){
      				$('.project .content p').append("<a href='http://"+projects[i][5]+"' target='_blank'>View Website</a>");
      			}
      			
      			var img = new Image();
      			var path = "resources/images/portfolio/"+name+".jpg";
  
			  // wrap our new image in jQuery, then:
			  $(img)
			    // once the image has loaded, execute this code
			    .load(function () {
			      // set the image hidden by default    
			      $(this).hide();
			    
			      // with the holding div #loader, apply:
			      $('#loader')
			        // remove the loading class (so no background spinner), 
			        .removeClass('loading')
			        // then insert our image
			       .append(this);
			    
			      // fade our image in to create a nice effect
			      $(this).fadeIn();
			    })
			    
			    // if there was an error loading the image, react accordingly
			    .error(function () {
			      // notify the user that the image could not be loaded
			    })
			    
			    // *finally*, set the src attribute of the new image to our image
			    .attr('src', path);
      		}
    	});
	  	$('#container').isotope({ filter: '.project' });
	  	return false;
	}

});