$(function(){
	var photoArray = new Array();
	var photoURL;   
	var apiKey = '78bd91a0c9acfd71b61afb1d2fa63f66';
	var sig = '5205405b213edb977b4fd4ec305cc8d3';
	var user_id = '57133804@N04';
	var stagePos = 1;
	var stageCount = $("div.stage").length;
	var lastStagePos = stageCount +1;
	var window_width = $(window).width();
	var stageWidth = 870;
	var slideDistance = ( (window_width - stageWidth) / 2 ) + stageWidth ;
	var container = $("#stage_container");
	
		
	function checkSize(){
		var height = $(window).height();	
		window_width = $(window).width();
		slideDistance = (window_width - stageWidth) / 2 + stageWidth;
		if (height > 1060) {
			$("footer").height(height - 760);
		}
		$("footer").width(window_width);
		setUpStage();
	}
	
	function showNextStage(){
		
		/* complete any running animation */
		container.stop("true","true");
			if (stagePos === stageCount) {
			return true;
		}
		$(".stage").eq(stagePos).children().css("left","-1000px");
		stagePos++;		
		$("#pager_nav li a.active").removeClass("active");
		$("#pager_nav li a").eq(stagePos-1).addClass("active");		
		$(".stage").eq(stagePos).children().css("left","0px");
		container.animate({left: "-=" + (slideDistance+stageWidth) + "px"},360,function(){
			if (stagePos >= lastStagePos ){
				$(".stage").children().animate({left: "500px"},100);
				container.css("left",-1*(slideDistance+stageWidth)+"px");
				stagePos = 1;
				$("#pager_nav li a.active").removeClass("active").children("span").removeClass("active_span");
				$("#pager_nav li a").eq(stagePos-1).addClass("active").children("span").addClass("active_span");						
			}					
		});		
	}
	
	function showPrevStage(){
		
		/* complete any running animation */
		container.stop("true","true");
		if (stagePos === 1) {
			return true;
		}
		$(".stage").eq(stagePos).children().css("left","500px");
		stagePos--;
		$("#pager_nav li a.active").removeClass("active");
		$("#pager_nav li a").eq(stagePos-1).addClass("active");
		$(".stage").eq(stagePos).children().css("left","0px");
		container.animate({left: "+=" + (slideDistance+stageWidth) + "px"},360,function(){
			if (stagePos <= 0 ){
				stagePos = (lastStagePos-1);
				$(".stage").children().css("left","-1000px");
				container.css("left",-1*(lastStagePos-1)*(slideDistance+stageWidth)+"px");
//				$(".stage").eq(stagePos).children().css("left","0px");
				$("#pager_nav li a.active").removeClass("active").children("span").removeClass("active_span");
				$("#pager_nav li a").eq(stagePos-1).addClass("active").children("span").addClass("active_span");
			}
		});
	}
	
	checkSize();
	
		/* SLIDE SHOW */	
	
	/* setting stage container width, etc */ 
	function setUpStage(){
		
		container.width((stageCount+2) * (slideDistance + 2 * stageWidth));
		$("#gallery").width(window_width);
		$(".stage").css("margin-right", slideDistance);
		container.css("left", -1*(slideDistance + stageWidth) +"px"); 
		}
	
	
	
	/* cloning the first and last stage and resetting the container position to display the first element*/
	$(".stage").first().clone().removeClass("activated").appendTo(container);
	$(".stage").eq(-2).clone().prependTo(container);	
	/* setting the opacity for all the stage elements except for the first one 
	$(".stage:not('.activated')").css("opacity","0"); */
	 
	/* setting pager div width, appending elements, adding active class */
	var nav = $("#pager_nav");
	nav.css("width", stageCount * 19);
	nav.append('<li><a id="stage_link_1" class="pager_link active" href="#stage0" title="Link0"><span class="hover_trans active_span"></span></a></li>');
	for (i=1; i < stageCount; i++){		
		nav.append('<li><a id="stage_link_'+(i+1)+'" class="pager_link" href="#stage' + i + '" title="Link' + i + '"><span class="hover_trans"></span></a></li>');
	}	
	 
	
	/* handling pager navigation */
	$("#pager_nav li a").click(function(e){
		container.stop("true","true");		
		$("#pager_nav li a.active").removeClass("active").children("span").removeClass("active_span");
		var clicked = $(this);
		clicked.addClass("active").children("span").addClass("active_span");

		href = clicked.attr("href").split("stage");
		var currPos = stagePos;
		stagePos = href[1];
		stagePos++;
		var changePos = currPos - stagePos;
		$(".stage").eq(currPos).children().css("left","500px");		
		container.animate({left: "+=" + changePos * (slideDistance+stageWidth) + "px"},360);
		$(".stage").eq(stagePos).children().css("left","0px");		
		e.preventDefault();	
	});
	
	$("#button_nav li a").click(function(e){
		if ($(this).attr("id") == "next_button") {
			showNextStage();
		} else {
			showPrevStage();
		}
		e.preventDefault();
	});
	

	
	$.getJSON("http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=78bd91a0c9acfd71b61afb1d2fa63f66&user_id=57133804@N04&per_page=10&jsoncallback=?",
  		{
			format: "json"
  		},
  		function(data) {
		  
		$.each(data.photos.photo, function(i,item){
		
			var canvas = document.getElementById('pic_' + i);

			var counter = i;
			var context = canvas.getContext('2d');
			var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + 
								item.server + '/' + item.id + '_' + item.secret + '_s.jpg';
			var photoCont = '<a href="#" style="background: url(' + photoURL + ') no-repeat;">';
		
			$('#pic_'+i).parent().attr('href','http://www.flickr.com/photos/'+user_id+'/'+item.id+'/');			
			$.getImageData({
				url: photoURL,
  			  	success: function(image){					
			  		var can = canvas;
				  	var ctx = can.getContext('2d');
				  	ctx.drawImage(image,0,0,40,40);
					photoArray[counter] = new Image();
					photoArray[counter] = image;	
				  	var imgd = ctx.getImageData(0, 0, 40, 40);
				  	var pix = imgd.data;
				  	for (var i = 0, n = pix.length; i < n; i += 4) {
				  		var grayscale = pix[i  ] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
				  		pix[i  ] = grayscale;   // red
				  		pix[i+1] = grayscale;   // green
				  		pix[i+2] = grayscale;   // blue		 
					}
					ctx.putImageData(imgd, 0, 0);
  				},
 		 		error: function(xhr, text_status){
					// Handle your error here
					//alert(text_status);	
  				}
			});
		});	
	});
	$("#photo_cont a").hover(function(){
		var canvas = $(this).children("canvas")[0];
		ctx = canvas.getContext('2d');
		var id = canvas.id;
		var id_split = id.split('_');
		ctx.drawImage(photoArray[id_split[1]],0,0,40,40);
	}, function(){
		//
		var canvas = $(this).children("canvas")[0];
		ctx = canvas.getContext('2d');
		var id = canvas.id;
		var id_split = id.split('_');
					var image = new Image();
					image = photoArray[id_split[1]];
					ctx.drawImage(image,0,0,40,40);
				  	var imgd = ctx.getImageData(0, 0, 40, 40);
				  	var pix = imgd.data;
				  	for (var i = 0, n = pix.length; i < n; i += 4) {
				  		var grayscale = pix[i  ] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
				  		pix[i  ] = grayscale;   // red
				  		pix[i+1] = grayscale;   // green
				  		pix[i+2] = grayscale;   // blue		 
					}
					ctx.putImageData(imgd, 0, 0);
	});	
		$(window).resize(  $.throttle (250, checkSize ) ); 
		
		$(document).keydown(function(e){
			if (e.keyCode ==  37) {
				showPrevStage();
				e.preventDefault();
			}
			else if (e.keyCode == 39) {
				showNextStage();
				e.preventDefault();
			}
			e.preventDefault();
		});
});