// jQuery work

$(document).ready(function(){
	//set up contact pull-down
	$("#navigation").before('<div id="ContactSheet"><a href="mailto\:adam\@incayellow.com"><span>adam@incayellow.com</span></a><span class="handle">pull</span></div>');
	$("#ContactSheet .handle").click().toggle(
	function(){
		$("#ContactSheet").css("z-index","6").animate({
          top: '-254px'
        }, 250, 'swing', function() {
        });
	},
	function(){
		$("#ContactSheet").animate({
          top: '-464px'
        }, 250, 'swing', function() {
        }).css("z-index","4");
	}
	);
	
	//sort out width of captions relative to their parent photo
	captionSize();
	
	//orphaned headlines fix
	$("#PagePost h3").each(function() {
        var wordArray = $(this).text().split(" ");
        if(wordArray.length>1){
        	wordArray[wordArray.length-2] += "&nbsp;" + wordArray[wordArray.length-1];
       		wordArray.pop();
        	$(this).html(wordArray.join(" "));
        }
	});
	
	//custom lightbox settings
	$("a.group").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false });
	
	
	//grayscale popular post images using canvas
	$(".canvas #popularPosts img").each(function(){
		var tempurl = $(this).attr("src");
		grayScale(tempurl);
	});
	$(".canvas #popularPosts a").mouseenter(function(){
      $(this).parent().parent().find("img").removeClass("hide");
      $(this).parent().parent().find("canvas").addClass("hide");
    }).mouseleave(function(){
      $(this).parent().parent().find("img").addClass("hide");
      $(this).parent().parent().find("canvas").removeClass("hide");
    });
		
	
	
	
}); //end of on load


function captionSize(){
	$("#PagePost figure figcaption").each(
		function(){
			var imgSize = $(this).parent().find("a img").attr("width");
			imgSize = 'width: '+imgSize + 'px;';
			$(this).attr("style",imgSize);
		}
	);
}

function grayScale(url){
	// Set up the canvas
    var can = document.createElement("canvas");
    var ctx = can.getContext('2d');

    //copy image
        $.getImageData({
            url: url,
            success: function(image){
            
                // Set the canvas width and heigh to the same as the image
                $(can).attr('width', image.width);
                $(can).attr('height', image.height);
                $(can).css({'background-color': 'none', 'border-color': '#fff'});
				
				// Draw the image on to the canvas
                ctx.drawImage(image, 0, 0, image.width, image.height);
				
				// Get the image data
    			var canvasImageData = ctx.getImageData(0, 0,  image.width, image.height);
    
    			//grayscale it
				for (j=0; j<canvasImageData.height; j++)
			    {
					for (i=0; i<canvasImageData.width; i++)
					{
						var index=(i*4)*canvasImageData.width+(j*4);
						var red=canvasImageData.data[index];
						var green=canvasImageData.data[index+1];
						var blue=canvasImageData.data[index+2];
						var alpha=canvasImageData.data[index+3];
						var average=(red+green+blue)/3;
						canvasImageData.data[index]=average;
						canvasImageData.data[index+1]=average;
						canvasImageData.data[index+2]=average;
						canvasImageData.data[index+3]=alpha;
					}
			     }

				// Write the image data to the canvas
    			ctx.putImageData(canvasImageData, 0, 0);

            },
            error: function(xhr, text_status){
                // Handle your error here
            }
        });
    

    //hide original and place canvas
    	$("img[src="+url+"]").addClass("hide");
    	$("img[src="+url+"]").parent().append(can);

}