Wordpress gallery turned monochrome with JS/HTML5 problem

Hello all I have a pretty complex problem here.

Ive created a profile page for this company, I managed to find this cool JS/HTML5 function that turns all the colour images monochrome on the fly: http://webdesignerwall.com/tutorials/html5-grayscale-image-hover

You can see this working here: http://www.jfsa.co.uk/?page_id=23

My issue is now once a face is clicked on the gallery (it takes you to the attachment page which I have customised to show the gallery from the profile page), I want that face to be colour on the attachment page. So the image in the gallery that corresponds to the attachment page is to be colour and thus highlighted to the user.

Now I had thought about pulling the attachment link and comparing it to the current url and then using an if statement blocking the JS from creating a monochrome image for that thumbnail. But my attempts have all failed.

Something like this:

<?php
				if ( have_posts() ) : while ( have_posts() ) : the_post();    

				$args = array(
				   'post_type' => 'attachment',
				   'numberposts' => -1,
				   'post_status' => null,
				   'post_parent' => $post->ID
				  );
				$attachments = get_posts( $args );

				$page_link = get_permalink( $post->ID ); 

				if ( $attachments ) {
				foreach ( $attachments as $attachment ) {
					$attachment_link = get_attachment_link( $attachment->ID ); 

					if ( $attachment_link != $page_link ) { ?>
						<script type="text/javascript">

				// 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
					$(".gallery-icon img").fadeIn(500);

					// clone image
					$('.gallery-icon img').each(function(){
						var el = $(this);
						el.clone().addClass('img_grayscale').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);
					});

					// Fade image
					$('.gallery-icon img').mouseover(function(){
						$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
					})
					$('.img_grayscale').mouseout(function(){
						$(this).stop().animate({opacity:0}, 1000);
					});
				});

				// 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();
				}

			</script>
				 <?php   } else { 

					}
				}
				}
				endwhile; endif; wp_reset_query(); ?>

Is there a WP genius out there with JS knowledge that could help? Toughy I know