var Blog = {
	
	EDIT_MODE_MOVE: "move",
	EDIT_MODE_RESIZE: "resize",
	EDIT_MODE_ROTATE: "rotate",
	NUM_MAX: -1,
	
	imageCanvasId: "#picture_canvas",
	mode: "",
	confinedEdit: false,
	
	reset: function(){
		Blog.removeAll();
		$("<div id='picture_canvas'><div class='background'></div></div>").appendTo("body");
		Blog.init(10, "#picture_canvas");
	},
	
	init: function(maxNumEntries, canvas_id){
		Blog.NUM_MAX = maxNumEntries;
		Blog.imageCanvasId = canvas_id;
		$(".editable_image_container").remove();
		Blog.getFlickr();
	},
	
	getFlickr: function(){
		$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=26948949@N06&lang=en-us&format=json&jsoncallback=?", 
			function(data){
				var i = 0;
				$.each(data.items, function(i,item){
					if (i < Blog.NUM_MAX) {
						$("<img/>").addClass("editable_image").attr("src", item.media.m)
							.attr("alt", item.title).attr("title", item.title)
							.data("title", item.title).data("description", item.description)
							.data("link", item.link).data("date_taken", item.date_taken)
							.appendTo(Blog.imageCanvasId);
						i++;
					}		
		  		});
				Blog.createEditableImages();
			});
	},
	
	createEditableImages: function(){
		
		//wrap all edittable images inside divs
		var i = 0;
		$(".editable_image").each(function(){
			var container  = document.createElement('div');
			var layer = $(".editable_image").size() - i;
			$(Blog.imageCanvasId).append($(container));
			
			$(container).addClass("editable_image_container").append($(this))
				.append("<div class='rotateHandle nw'></div>")
				.append("<div class='rotateHandle sw'></div>")
				.append("<div class='rotateHandle ne'></div>")
				.append("<div class='rotateHandle se'></div>")
				.append("<div class='resizeHandle nw'></div>")
				.append("<div class='resizeHandle sw'></div>")
				.append("<div class='resizeHandle ne'></div>")
				.append("<div class='resizeHandle se'></div>")
				.css("z-index", layer).hide();
			i++;
		});
		
		
		$(".editable_image").load(function(){
			var container = $(this).parent("div");
			var margin = 25;
			var angleRange = 90;
			var x = margin + Math.floor(Math.random() * ($(window).width() - $(this).width() - margin*2));
			var y = margin + Math.floor(Math.random() * ($(window).height() - $(this).height() - margin*2));
			var angle = (Math.round(Math.random() * angleRange) - angleRange/2) + "deg";
			var time = 500 + Math.round(Math.random() * 2000);
			var delay = Math.round(Math.random() * 1000);
			$(this).data("oWidth", $(this).width()).data("oHeight", $(this).height());
			$(container).css("left", x+"px").css("top", "-" + ($(this).height() + margin*10) + "px")
				.animate({rotate: angle}, 0)
				.delay(delay).show()
				.animate({top: y+"px"}, time);
      
			var pct = Number($(container).css("z-index")) / ($(".editable_image").size()*3/4);	
			var nWidth = Math.round($(this).width() * pct);
			var nHeight = Math.round($(this).height() * pct);
			$(this).css("width", nWidth+"px").css("height", nHeight+"px");
		});
		
		$(".editable_image_container").draggable({handle: ".editable_image"});
		
		$(".editable_image").mousedown(function(e){
			Blog.bringToFront(e);
			//Blog.startMovingImage(e);
		}).disableSelection();
		
		$(".resizeHandle").mousedown(function(e){
			Blog.bringToFront(e);
			Blog.startResizeImage(e);
		});
		
		$(".rotateHandle").mousedown(function(e){
			Blog.bringToFront(e);
			Blog.startRotateImage(e);
		});
		
		$("body, .editable_image_container").mouseup(function(e){
			Blog.stopEditing(e);
		});
		
		$("body").keydown(function(e){
			if(e.keyCode == 16){
				Blog.confinedEdit = true;
			}else{
				Blog.confinedEdit = false;
			}
		}).keyup(function(e){
			Blog.confinedEdit = false;
		});
		
		$(Blog.imageCanvasId + " .background").click(function(){
			Blog.removeAll();
		});
		
		$(".editable_image_container").click(function(e){
			Blog.showDetails(e);
		}).dblclick(function(e){
			Blog.deleteImage(e);
		});
	},
	
	bringToFront: function(e){
		var container = $(e.target).parent("div.editable_image_container");
		var cLayer = $(container).css("z-index");
		$(".editable_image_container").each(function(){
			var layer = Number($(this).css("z-index"));
			if(layer > cLayer){
				$(this).css("z-index", layer-1);
			}
			else{
				$(container).css("z-index", $(".editable_image_container").size());
			}
		});
	},
	
	makeSemiTransparent: function(container){
		var alpha = 0.65;
		$(container).css("opacity", alpha).css("filter", "alpha(opacity=" + (alpha*10) + ")");
	},
	
	resetTransparency: function(e){
		$(".editable_image_container").css("opacity", 100).css("filter", "alpha(opaciy=100)");
	},
	
	startMovingImage: function(downEvent){
		var container = $(downEvent.target).parent("div.editable_image_container");
		var oLeft = Number($(container).css("left").replace("px", ""));
		var oTop = Number($(container).css("top").replace("px", ""));
		var ox = downEvent.pageX;
		var oy = downEvent.pageY;
		
		$("body").mousemove(function(moveEvent){
			var nx = moveEvent.pageX;
			var ny = moveEvent.pageY;
			var diffX = nx - ox;
			var diffY = ny - oy;
			var newLeft = oLeft + diffX;
			var newTop = oTop + diffY;
			
			if(Blog.confinedEdit){
				if(Math.abs(diffX) > Math.abs(diffY)){
					newTop = oTop;
				}
				else{
					newLeft = oLeft;
				}
			}
			
			$(container).css("left", newLeft).css("top", newTop);
			return false;
		});
		
		Blog.makeSemiTransparent(container);
	},
	
	startResizeImage: function(downEvent){
		var image = $(downEvent.target).parent().children("img.editable_image");
		var container = $(downEvent.target).parent();
		var oWidth = $(image).width();
		var oHeight = $(image).height();
		var cx = Number($(container).css("left").replace("px", "")) + $(container).width()/2;
		var cy = Number($(container).css("top").replace("px", "")) + $(container).height()/2;
		var ox = downEvent.pageX;
		var oy = downEvent.pageY;
		
		$("body").mousemove(function(moveEvent){
			var nx = moveEvent.pageX;
			var ny = moveEvent.pageY;
			var diffX = nx - cx;
			var diffY = ny - cy;
			var nWidth = oWidth + diffX;
			var nHeight = oHeight + diffY;
			
			if(Blog.confinedEdit){
				if(Math.abs(nWidth/$(image).data("oWidth")) > Math.abs(nHeight/$(image).data("oHeight"))){
					nHeight = $(image).data("oHeight") * (nWidth/$(image).data("oWidth"));
				}
				else{
					nWidth = $(image).data("oWidth") * (nHeight/$(image).data("oHeight"));
				}
			}
			
			$(image).css("width", nWidth).css("height", nHeight);
			return false;
		});
		
		Blog.makeSemiTransparent(container);
	},
	
	startRotateImage: function(downEvent){
		var container = $(downEvent.target).parent();
		var angle = $(container).css("-webkit-transform").replace("rotate(", "").replace("deg)", "");
		var cx = Number($(container).css("left").replace("px", "")) + $(container).width()/2;
		var cy = Number($(container).css("top").replace("px", "")) + $(container).height()/2;
		var ox = downEvent.pageX;
		var oy = downEvent.pageY;
		
		$("body").mousemove(function(moveEvent){
			var nx = moveEvent.pageX;
			var ny = moveEvent.pageY;
			var oAngle = Math.atan2(ox-cx, oy-cy) * 180 / Math.PI;
			var nAngle = Math.atan2(nx-cx, ny-cy) * 180 / Math.PI;
			var resultAngle = Math.round(Number(angle) - (nAngle - oAngle));
			
			if(Blog.confinedEdit){
				var multiplier = Math.round(resultAngle / 90);
				resultAngle = 90 * multiplier;
			}
			
			var result = "rotate(" + resultAngle + "deg)";
			$(container).css("-webkit-transform", result).css("-moz-transform", result);
			return false;
		});
		
		Blog.makeSemiTransparent(container);
	},
	
	showDetails: function(e){
		$("#detail_box").stop().remove();
		var image = $(e.target).parent().children("img.editable_image");
		$("body").append("<div id='detail_box'></div>");
		$("#detail_box").append($(image).data("description"));
		
		//extract the description markup from flickr feed
		var description = $("#detail_box").children("p:last").html();
		if($("#detail_box p").size() <= 2){
			description = "";
		}
		$("#detail_box").html("");
		
		//extract just date from flickr feed
		var index = $(image).data("date_taken").indexOf("T");
		var date = $(image).data("date_taken").substring(0, index);
		
		$("#detail_box").append("<h1><a href='" + $(image).data("link") + "' target='_blank'>\"" + $(image).data("title") + "\"</a></h1>")
			.append("<p class='date'>I took this on " + date + "</p>")
			.append("<p>" + description + "</p>")
			.stop().delay(5000).fadeOut(2000, function(){
				$("#detail_box").remove();
			}).mouseover(function(){
				$("#detail_box").stop().css("opacity", 1.0).css("filter", "alpha(opacity=100)");
			}).mouseout(function(){
				$("#detail_box").stop().fadeOut(2000, function(){
					$("#detail_box").remove();
				});
			});
	},
	
	deleteImage: function(e){
		var canvas = $(e.target).parent("div");

		//show 'x' icon
		var small = 25;
		var big = 100;
		var time = 250;
		var x = e.pageX - small/2;
		var y = e.pageY - small/2;
		$("<img id='delete_icon' src='../assets/images/icon_delete.png'/>").appendTo(Blog.imageCanvasId)
			.css("width", small).css("height", small)
			.css("left", x).css("top", y).stop().delay(time)
			.animate({"left": e.pageX-big/2, "top": e.pageY-big/2, "width": big, "height": big}, time/2)
			.delay(time).fadeOut(time, function(){
				$("#delete_icon").remove();
			});
		
		//remove image
		$(canvas).children(".editable_image").stop().fadeOut(time*2, function(){
			$(canvas).remove();
			$("#detail_box").remove();
		});
	},
	
	removeAll: function(){
		$("#picture_canvas").remove();
		$("#detail_box").remove();
	},
	
	stopEditing: function(e){
		$("body").unbind("mousemove");
		Blog.resetTransparency(e);
	}
	
}