$(document).ready(function() {
	
	$("#thumbs li").live('mouseover', function(){
		
		$(this).addClass("thumb_active");
			
		// Animeren
		$(".thumb_active img").animate({
			opacity: 0.05
		}, 250, function() {});
		
		$(".thumb_active .info").animate({
    		opacity: 1
  		}, 250, function() {});
		
	});
	
	
	$("#thumbs li").live('mouseout', function(){
		
		$(".thumb_active img").animate({
    		opacity: 1
  		}, 250, function() {});
		
		$(".thumb_active .info").animate({
    		opacity: 0
  		}, 250, function() {});
  
 		$(this).removeClass("thumb_active");
		
	});
	
	
	
	// Zorgen dat de gebruiker automatisch naar de juiste hoogte gescrollt wordt
	$('#thumbs li').live('click', function(){

		$.scrollTo('#portfolio_content', 400);
		//alert($(this).attr('id'));
		var id = $(this).attr('id');
		//alert(id);
		
		$.ajax({
			type: "GET",
		   	url: "portfolio.php",
		   	data: { id : id },
			cache: true,
		   	dataType: "json",
			success: function(json){
				
				$("#portfolio_image").animate({
					opacity: 0
				}, 300, function() {
					
				});
				
				$("#portfolio_info").animate({
					opacity: 0
				}, 300, function() {
					
					$("#portfolio_content").animate({
						height: json.height
					}, 400, function() {
						
						$('#portfolio_image').html(json.image);
						$('#portfolio_info p').html(json.text);
						$('#portfolio_info h2').html(json.name);
						
						if(json.url != ''){
							$('#button_view').css('display', 'inline-block');
							$('#button_view').attr('href', json.url);
							
						} else {
							
							$('#button_view').css('display', 'none');
						}
						
						$("#portfolio_info").animate({
							opacity: 1
						}, 300, function() {
						
						});
						
						$("#portfolio_image").animate({
							opacity: 1
						}, 300, function() {
						
						});
						
					});
				
				});
		
			
				//alert(msg.height);
				//alert( msg );
				
						
			
				
			
				
		   }
		
		});
		
	});	
	
	
	
	$('#cat_nav li').click(function(){
		
		var thumbs_height = $("#thumbs").height();
		var category = $(this).text().toLowerCase();
		
		$('#cat_nav li').removeClass("active");
		$(this).addClass("active");
		
		$("#thumb_loading").html('<img src="images/loading.gif" style="position:relative;top:4px;left:10px;" />');
		
		$('#thumbs').fadeOut(500, function () { getThumbs(category) });
		
		//$("#thumbs").height(thumbs_height);
		
		//$('#thumbs').remove();
		//$('#thumbs').html('');
		
		
		
		
		
		
	});
	
	
	function getThumbs(category){
		
		$.ajax({
			type: "GET",
		   	url: "portfolio.php",
		   	data: { cat : category },
		   	
			success: function(msg){
				
				//alert( msg );
				
				
			
				$('#thumbs').html(msg);
				$('#thumbs').fadeIn(500);
				$("#thumb_loading").html('');
				
				$.scrollTo('#thumbs_container', 400);
				
		   }
		
		});
	}
		

});