$(document).ready(function(){
	// layout thing to make the list point a different colour to the text
	$('div#floors ul:not(.project-list) li').each(function() {
		$(this).wrapInner('<span></span>');	
	});
		
	//layout if the first item is a h3 make it align better
	$('body#our-systems div#floors div.right h3:nth-child(1)').css('margin-top', '-34px');
	
	// to scroll override default anchors
	$('a[rel="hashy"]').click(function(){
		$('ul#stairs a').removeClass('current');
		$(this).addClass('current');
	  	var hash = this.href;
	  	var location = this.href.replace(/(.*)#(.*)/,'$1');
	  	var windowLocation = window.location;
	  	hash = hash.replace(/^.*#/, '');
 		var hasher = window.location.hash.replace(/#/, '');
	  	if (location == windowLocation) {
	  		clickScroll(hash);
			return false;
 		}
 		if ( hasher ){
	  		clickScroll(hash);
			return false;
 		}
	});
});

// On window load. This waits until images have loaded which is essential
$(window).load(function(){
	
	// Fade in images so there isn't a color "pop" document load and then on window load
	$(".project-list img, #people-thumbnails img, div#small .thumb").fadeIn(500);
	$('div#big img:first').fadeIn(500);
	
if ( $.browser.msie ) {

} else {
	$('img.img_grayscale').each(function(){
		this.src = grayscale(this.src);
	});
}
	
	// Fade image 
	$('.project-list img, #people-thumbnails img, div#small img').mouseover(function(){
		$(this).parent().find('img:first').stop().animate({opacity:1}, 200);
	})
	$('img.color').mouseout(function(){
		$(this).stop().animate({opacity:0}, 500);
	});

	// projects	
	var showingID = $('div#big img:first').attr('id');
	$('body.single-projects span.img_wrapper:first').addClass('current');
	$('div#small .thumb').click(function() {
		var thumID = $(this).attr('id');
		$('span.img_wrapper').removeClass('current');
		$(this).parent().addClass('current');
		$('div#big img:visible').fadeOut(500);
		$('div#big img.'+thumID).fadeIn(500);
	});
	$('img.last').parent().addClass('last');
});

// Grayscale w canvas method
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();
}

// load the correct stuff into history
function clickScroll(hash) {
	if (hash) {
		var anchorPosition = $('a[name*="'+hash+'"]').offset();
		var scrollHerePlease = anchorPosition.top-163;
		$('html, body').animate({scrollTop:scrollHerePlease}, 'normal');
	}		
}