$(document).ready(function() {
	// Click handler for 'next' button
	$('a.next').click(function() {
		
		// store the element containers current left position in cur_left variable
		var cur_left = $('#thumb_container').css('left');
		
		// Calculate the left position of element after move
		var next_left = parseInt(cur_left) - parseInt(520);
		
		// get the width of the thumb container
		var width = $('#thumb_container').css('width');
		
		// if the width of the next left move is less then the width of the thumb container, return false
		if(next_left < '-' + width.substr(0,4)) {
			return false;
		} else {
			
			// else, move the container to the next left position
			$('#thumb_container').animate({left:next_left + 'px'}, {queue:false, duration:300});
			
			return false;
		};
	});
	
	// Click handler for 'prev' button - as 'next' but in reverse
	$('a.prev').click(function() {
		var cur_left = $('#thumb_container').css('left');
		var next_left = parseInt(cur_left) + parseInt(520);
		var width = $('#thumb_container').css('width');
		if(next_left >= width.substr(0,4)) {
			return false;
		} else {
			$('#thumb_container').animate({left:next_left + 'px'}, {queue:false, duration:300});
			return false;
		};
	});
	
	// click handler for .thumb links (link inside the scrolling bar), this controls which project_cont div is displayed
	$('.thumb').click(function() {
		
		// store number located in the 'rel' attribute of the element clicked
		var pos = $(this).attr('rel');
		
		// change the 'left' property of the #project_cont div to the value of 'pos'
		$('#project_cont').animate({left:'-' + pos + 'px'}, {queue:false, duration:300});
		
		return false;
	});
	
	// click handler for the image thumbnails
	$('.thumbnail').click(function() {
		// store the 'href' of the link (which will be the path to the larger image) in a var
		var img = $(this).attr('href');
		
		// change the background of this element's parent .project_cont div to the location stored in 'img'
		$(this).parent().parent().parent().parent().fadeOut('slow',function() {
	       $(this).css('background-image', 'url(' + img + ')');
	       $(this).fadeIn('slow');
	   });
		return false;
	});
	
	$('.project_info').css('top', '370px');

	// click handler to move info div into view on mousever
	$('.project_info').hover(function() {
		
		// this :not(:animated) stops it having a yo-yo effect if the user moves the mouse around
		if($(this).is(':not(:animated)')) {
			$(this).animate({top: '180px'});
			$(this).css('cursor', 'pointer');
		} else {
			return false;
		};
	}, function() {
		if($(this).is(':not(:animated)')) {
			$(this).animate({top: '370px'});
		} else {
			return false;
		};
	});
});