$(document).ready(function() {
	$('#spaces_cycle').find('img').hide();
	$('#img_spaces').find('#loading_index_photo').show();
	
	$.getJSON(spaces, displayImages);
	
	function displayImages(data) {
		//Calucate number of images, select random number between 0 and (number of images)
		item_counter = 0;
		valid_pics = [];
		
		$.each(data.items, function(p,item){
			
			tags = (item.tags).split(',');
			$.each(tags, function(i, item) {
				if(item.indexOf( "hport" ) !== -1 ) {

				} else {
					valid_pics.push(p);
				}
			});
		});
		
		var random_selector = valid_pics[Math.floor(Math.random()*valid_pics.length)];
		
		//Get randomaly selected image and edit size
		
		$.each(data.items, function(i,item){
			if (i == random_selector) {
				
				var jg_spaces = (item.media.m).replace("_m.jpg", "_z.jpg");
				$('#img_spaces').find('#loading_index_photo').hide();
				$('#spaces_cycle').find('a').append("<img src='' alt='' />").find('img').attr("src", jg_spaces);
			}
		});
		
		if (Modernizr.canvas) {
					
			$('#spaces_cycle').find('img').each(function(){
				var el = $(this);
				el.addClass('original');
				el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: block; position:relative;'>").clone().addClass('bw').removeClass('original').css({"position":"absolute","z-index":"100","opacity":"0"}).insertAfter(el).queue(																																																																																																												function(){																																																												
				
					var img_src_spaces = $('#spaces_cycle').find('.bw').attr('src');
					
					$('.bw').ready(function(){
						$.getImageData({
							url: img_src_spaces, // This is the URL of the flickr image
							success: grayscaleImage_spaces,// Run this function when image has been fetched
							error: function(xhr, text_status){
							// Handle your error here
							}
						});
					});	
				});
			});
			
		}else{
			$('#img_spaces').find('#loading_index_photo').hide();
			$('#spaces_cycle').find("img").show();	
		}

		$('#img_spaces').mouseover(function() {
			$(this).find('.bw').stop().animate({opacity:1}, 800);
		});
		
		$('#img_spaces').mouseout(function() {
			$(this).find('.bw').stop().animate({opacity:0}, 200);
		});
	}	
});

function grayscaleImage_spaces (imgObj){
	
	var canvas = document.createElement('canvas');
    var canvasContext = canvas.getContext('2d');
    
	var imgW = imgObj.width;
    var imgH = imgObj.height;
    canvas.width = imgW;
    canvas.height = imgH;
        
    canvasContext.drawImage(imgObj, 0, 0);
    var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
        
    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;
		}
	}

	canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    
	var imgObj = canvas.toDataURL("image/png");
	
	$('#spaces_cycle').find(".bw").attr("src", imgObj);
	$('#img_spaces').find('#loading_index_photo').hide();
	$('#spaces_cycle li').find("img").show();
}