function grayscale(src){
	var canvas = document.createElement('canvas');
	var ctx = canvas.getContext('2d');
	var imgObj = new Image();
	imgObj.src = src;
	canvas.width = imgObj.width;
	canvas.height = imgObj.height; 
	ctx.drawImage(imgObj, 0, 0); 
	var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
	for(var y = 0; y < imgPixels.height; y++){
		for(var x = 0; x < imgPixels.width; x++){
			var i = (y * 4) * imgPixels.width + x * 4;
			var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
			imgPixels.data[i] = avg; 
			imgPixels.data[i + 1] = avg; 
			imgPixels.data[i + 2] = avg;
		}
	}
	ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
	return canvas.toDataURL();
}

$(document).ready(function() { 

    $('#jaspur').hide();
	$('#info').hide();
	$('img').hide();
	
	$('body').append('<div id="laden"></div>');
	
	$('#portfolio img').animate({'opacity': 0.8});	
		$('#portfolio img').hover(function(){
			$(this).stop().animate({'opacity': 1});
		},function(){
			$(this).stop().animate({'opacity': 0.8});
		});
		
	$('#portfolio li').click(function() { portfolioInfo(); return false; });	
	portfolioInfo();

	function portfolioInfo(){	
		$('#portfolio li').click(function() {
                         var seo = $(this).find('a').attr('href');
			_gaq.push(['_trackPageview', '/'+seo]);
			$(this).each(function(){
				$('#info').hide();
				$('#info').fadeIn('slow');
				var url = 			$(this).find('a').attr('href');
				var titel = 		$(this).find('a').attr('title');
				var omschrijving = 	$(this).find('a').attr('rel');
				var werk = 			$(this).find('img').attr('alt');
				var beschrijving =	$(this).find('img').attr('rel');
				var sluiten = '<span id="sluit">X</span>';
				var bezoek = '<a href="'+url+'" title="'+titel+'" target="_blank">Bezoek de website</a>';
				_gaq.push(['_trackPageview', '/'+url]);
				$('#info').find('h1').html(titel + sluiten);
				$('#info').find('h2').text(omschrijving);
				$('#info').find('h3').text(werk);
				$('#info').find('h4').text(beschrijving);
				$('#info').find('a').html(bezoek);
			});
			
		});
	}
	$('#info').click(function() { $('#info').fadeOut('slow'); });
	
	$.ga.load('UA-7198953-1');
	if(typeof jQuery == 'function') { 
		jQuery(function () {
			jQuery('a:not([href*="' + document.domain + '"])').click(function () {
				pageTracker._trackPageview('/uitgaand/' + jQuery(this).attr('href'));
			});
		});
	}

});

$(window).load(function() { 
	
	$('#laden').hide();
	$('#jaspur').fadeIn('slow');
	$('img').fadeIn('slow');
	
	if ( $.browser.msie )
	{
        // Waarom wordt IE uberhaupt nog gebruikt?!
		$('#portfolio ul li').css('display','inline');
		$('#jaspur').css('padding-top','20px');
		$('#jaspur img').eq(0).css('position','fixed');
		$('#afbeelding').width('330px').css('margin','10px 0 0 400px');
		$('#info').show();
		$('#info').css('position','absolute').css('left','0').css('margin','0');
		$('#portfolio').css('position','absolute').css('left','0').css('margin','220px 0 0 0 ');
		$('#sluit').replaceWith('');	
	}
	else
	{
		$('#portfolio img').each(function(){
			var el = $(this);
			el.css({"position":"absolute"}).wrap("<div style='display: inline-block'>").clone().addClass('inhetzwartwit').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
				var el = $(this);
				el.parent().css({"width":this.width,"height":this.height});
				el.dequeue();
			});
			this.src = grayscale(this.src);
		});
			
		$('#portfolio img').mouseover(function(){
			$(this).parent().find('img:first').stop().animate({opacity:1}, 300);
		})
		$('.inhetzwartwit').mouseout(function(){
			$(this).stop().animate({opacity:0}, 700);
		});
	}
});