function gallery(){

$(document).ready(function() {
	
	//greyscale hover
	// clone image
	$('.thumbnails img').each(function(){
		var la = $(this);
		la.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"1"}).insertBefore(la );
		grayscale(this);
	});
	
	// Add Caption+fade Image
	var $greyThumb = $('.thumbnails');
	$greyThumb.mouseenter(function(){
		$(this).find('img:first').stop().animate({opacity:0}, 500);
		$(".thumbCaption", this).stop().animate({top:'0px'},{queue:false,duration:400});
	})
	$greyThumb.mouseleave(function(){
		$(this).find('img:first').stop().animate({opacity:1}, 500);
		$(".thumbCaption", this).stop().animate({top:'-60px'},{queue:false,duration:300});  
	});		

	
	// Grayscale w canvas method
	function grayscale(img){
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		var imgObj = new Image();
		imgObj.onload = function() {
			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);
			img.src = canvas.toDataURL();
		}
		imgObj.src = img.src;
    }
	
	
	//smooth scrolling	
  function filterPath(string) {
  	return string
    	.replace(/^\//,'')
    	.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    	.replace(/\/$/,'');
  	}
  var locationPath = filterPath(location.pathname);
  var scrollable = scrollableElement('html', 'body');

  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollable).stop().animate({scrollTop: targetOffset}, 500, function() {
          	location.hash = target;
          });
        });
      }
    }
  });

  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }
 
});
};