var current_image = 1;

$(document).ready(function() {	
	$('div.square').click(function() {
    showImage($(this).attr('rel'));
  }); 
});


function previousImage(total_images) {
	$('#project_image_'+current_image).fadeOut('slow');
	$('#image_square_'+current_image).attr('class','square grey');		
	
	if (current_image == 1) {
		new_image = total_images; 	
	}
	else {
		new_image = current_image - 1;	
	}
	$('#project_image_'+new_image).fadeIn('slow');	
	$('#image_square_'+new_image).attr('class','square green');		
	current_image = new_image;
	return false;
}

function nextImage(total_images) {
	$('#project_image_'+current_image).fadeOut('slow');
	$('#image_square_'+current_image).attr('class','square grey');	
	
	if (current_image == total_images) {
		new_image = 1; 	
	}
	else {
		new_image = current_image + 1;	
	}
	$('#project_image_'+new_image).fadeIn('slow');
	$('#image_square_'+new_image).attr('class','square green');	
	current_image = new_image;
	return false;
}

function showImage(new_image) {
	$('#project_image_'+current_image).fadeOut('slow');
	$('#image_square_'+current_image).attr('class','square grey');	
	
	$('#project_image_'+new_image).fadeIn('slow');
	$('#image_square_'+new_image).attr('class','square green');	

	// I really want to set/remove the onclick for the green square, but jQuery is acting up...

	current_image = new_image;
	return false;
}