$(document).ready(function() {
	
	$("#thumbs li").live('mouseover', function(){
		
		$(this).addClass("thumb_active");
			
		// Animeren
	$(".thumb_active .info").css('display', 'none');
		
		$(".thumb_active .info").animate({
			
    		opacity: 0
			
  		}, 100, function() {
			
			
			
			$(".thumb_active .video_thumb").animate({
				
				opacity: 0.15
				
			}, 250, function() {});
		
		});
		
		

	});
	
	
	$("#thumbs li").live('mouseout', function(){
		
	
		$(".thumb_active .info").animate({
    		opacity: 0.85
  		}, 250, function() {});
		
		$(".thumb_active .video_thumb").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() {
					
					
						//alert('yay!');
						$('#portfolio_image').html(json.embed);
						$('#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);
				
		   }
		
		});
	}
	
	
	/*$("#footer img").live('hover', function(){
		alert($(this).attr('src'));
	});
	*/
	
	$('img[data-hover]').hover(function() {
        $(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover', $(this).attr('tmp')).removeAttr('tmp');
    }).each(function() {
        $('<img />').attr('src', $(this).attr('data-hover'));
    });;
		

});