jQuery.fn.toggleOpacity = function() {
	if ($(this).hasClass("dimmed")) {
		$(this).animate({
			opacity: 1
		}, 250).removeClass("dimmed");
	} else {
		$(this).animate({
			opacity: .2
		}, 250).addClass("dimmed");
	}
};

jQuery.fn.opaque = function() {
	$(this).animate({
		opacity: 1
	}, 250).removeClass("dimmed");
};

jQuery.fn.attachOverlay = function(w, html) {
	var horizontal_padding = 6;
	var bottom_margin = 10;
	var overlay = $("<div>");
	
	$(overlay).html(html).css({
		width: Math.floor(w) - horizontal_padding,
		bottom: bottom_margin
	}).addClass('overlay');
	
	$(this).append(overlay);
}

$(document).ready( function() {
	$(".help").click( function() {
		$("#menu").slideToggle(200);
	});
	
	$("#menu img").click( function() {
		$(".help").click();
	});
	
	$(".profile-help").click( function() {
		$("#grid li a").opaque();
		$("#grid li a").not(".employee").toggleOpacity();
	});
	
	$(".art-help").click( function() {
		$("#grid li a").opaque();
		$("#grid li a").not(".art").toggleOpacity();
	});
	
	$(".flickr-help").click( function() {
		$("#grid li a").opaque();
		$("#grid li a").not(".flickr").toggleOpacity();
	});
	
	$(".link-help").click( function() {
		$("#grid li a").opaque();
		$("#grid li a").not(".link").toggleOpacity();
	});
	
	$(".all-help").click( function() {
		$("#grid li a").opaque();
	});
	
	var frame = $("#content");
	var frame_w = '';
	var frame_h = '';
	var node_size = { width: "48", height: "48" };
	
	$(frame).hover( function() {
		close_button.attach(this);
	}, function() {
		close_button.detach(this);
	});

	$(".art").click( function() {
		var who = $(this);
		display_content(who, build_artwork);
		return false;
	});

	$(".employee").click( function() {
		var who = $(this);
		display_content(who, build_profile);
		return false;
	});
	
	$(".flickr").click( function() {
		var who = $(this);
		display_content(who, build_flickr);
		return false;
	});
	
	function display_content(el, callback) {
		var pos = $(el).position();
		var settings = animation_settings(48, 48, frame);
		var css = { display: "block", 
		height: "48px", 
		width: "48px", 
		overflow: "hidden", 
		backgroundImage: 'url("images/loading.gif")', 
		backgroundRepeat: "no-repeat", 
		backgroundPosition: "16px 16px", 
		top: pos.top, 
		left: pos.left };
		
		$(frame).stop().html('');
		
		if ($(frame).is(":visible")) {
			$(frame).animate(settings, 250, function() {
				$(this).css(css);
				callback(el);
			});
		} else {
			$(frame).css(css).animate(node_size, 250, function() {
				callback(el);
			});
		}
	}
	
	function open_frame(content, node, speed, callback) {
		var w = $(content).width();
		var h = $(content).height();
		var settings = animation_settings(w, h, node);
		$(frame).css("background-image", "none").animate(settings, speed, callback);
	}
	
	function animation_settings(w, h, el) {
		var top_half = $("#wrap").height() / 2;
		var left_half = $("#wrap").width() / 2;
		var pos = $(el).position();
		var direction = '';
		var mt = 0;
		var ml = 0;

		if (pos.top > top_half) { mt = h - ((h * 2) - 48); }
		if (pos.left > left_half) { ml = w - ((w * 2) - 48); }

		direction = { width: w, height: h, marginTop: Math.floor(mt), marginLeft: Math.floor(ml) };
		return direction;
	}
	
	var close_button = {
		image: site + "images/close.png", 
		attach: function(el) {
			$("<img />").attr("src", close_button.image).css({
				position: "absolute",
				zIndex: "900",
				top: "3px",
				right: "3px",
				display: "none",
				cursor: "pointer"
			}).prependTo(el).fadeIn("fast").click( function() {
				$(this).parent().html('').animate(animation_settings(48, 48, frame), 250, function() {
					$(this).hide();
				});
			});
		},
		detach: function(el) {
			$(el).find("img[src$='close.png']").hide();
		}
	}
	
	function build_flickr(el) {
		var url = $(el).attr("href") + '.json';
		var image_base_path = site + 'images/flickr/';
		
		$.getJSON(url, function(data) {
			var image_path = image_base_path + data.photo;
			var container = $("<div>").appendTo(frame);
			
			var image = $("<img />").load( function() {
				w = $(this).width();
				h = $(this).height();
				
				$(this).css("visibility", "visible");
				
				var caption_text = data.caption.toString();
				caption_text += ' <a href="' + data.photo_url + '" target="_blank"><img src="' + site + 'images/flickr.png" /></a>';
				
				$(container).attachOverlay(w, caption_text);
				
				$(container).css({
					width: w,
					height: h,
					display: "none"
				});
				
				open_frame(container, el, 500, function() {
					$(container).fadeIn(1000);
				});
			}).attr("src", image_path).css({
				visibility: "hidden",
				position: "absolute"
			}).appendTo(container);
		});
	}
	
	function build_artwork(el) {
		var url = $(el).attr("href") + '.json';
		var image_base_path = site + 'images/art/';
		
		$.getJSON(url, function(data) {
			var image_path = image_base_path + data.artwork_image;
			var caption_text = data.name.toString();
			
			var container = $("<div>").appendTo(frame);
			
			$("<img />").load( function() {
				h = $(this).height();
				w = $(this).width();
				
				$(this).css("visibility", "visible");
				
				$(container).attachOverlay(w, caption_text);
				
				$(container).css({
					width: w,
					height: h,
					display: "none"
				});
				
				open_frame(container, el, 500, function() {
					$(container).fadeIn(1000);
				});
			}).attr("src", image_path).css({
				visibility: "hidden",
				position: "absolute"
			}).appendTo(container);
		});
	}
	
	function build_profile(el) {
		var url = $(el).attr("href") + '.json';
		var image_base_path = site + 'images/employee/';
		
		$.getJSON(url, function(data) {
			var image_path = image_base_path + data.photo.toString();
			
			var profile_html = data.name.toString();
			
			if (data.title.length > 0) { profile_html  += " - " + data.title.toString(); }
			profile_html += "<br />" + data.tagline.toString();

			var social_links = new Object;

			if (data.blog.length > 0) {
				social_links['blog'] = $("<a>").attr({
					href: data.blog.toString(),
					title: 'External link to ' + data.blog.toString()
				}).html('<img src="' + site + 'images/blog.png" class="social-icon" />').attr("target", "_blank");
			}
			
			if (data.facebook.length > 0) {
				social_links['facebook'] = $("<a>").attr({
					href: data.facebook.toString(),
					title: 'External link to ' + data.name.toString() + '\'s Facebook'
				}).html('<img src="' + site + 'images/facebook.png" class="social-icon" />').attr("target", "_blank");
			}
			
			if (data.flickr.length > 0) {
				social_links['flickr'] = $("<a>").attr({
					href: data.flickr.toString(),
					title: 'External link to ' + data.name.toString() + '\'s Flickr'
				}).html('<img src="' + site + 'images/flickr.png" class="social-icon" />').attr("target", "_blank");
			}
			
			if (data.linkedin.length > 0) {
				social_links['linkedin'] = $("<a>").attr({
					href: data.linkedin.toString(),
					title: 'External link to ' + data.name.toString() + '\'s LinkedIn'
				}).html('<img src="' + site + 'images/linkedin.png" class="social-icon" />').attr("target", "_blank");
			}
			
			if (data.myspace.length > 0) {
				social_links['myspace'] = $("<a>").attr({
					href: data.myspace.toString(),
					title: 'External link to ' + data.name.toString() + '\'s MySpace'
				}).html('<img src="' + site + 'images/myspace.png" class="social-icon" />').attr("target", "_blank");
			}
			
			if (data.twitter.length > 0) {
				social_links['twitter'] = $("<a>").attr({
					href: data.twitter.toString(),
					title: 'External link to ' + data.name.toString() + '\'s Twitter'
				}).html('<img src="' + site + 'images/twitter.png" class="social-icon" />').attr("target", "_blank");
			}
			
			var container = $("<div>").appendTo(frame);
			
			$("<img />").load( function() {
				h = $(this).height();
				w = $(this).width();
				
				$(this).css("visibility", "visible");
				
				var profile = $("<div>").html(profile_html);
				var links = $("<div>").addClass("social-links");
				
				$.each(social_links, function(i, item) {
					$(links).append(item);
				});
				
				$(links).appendTo(profile);
				
				$(container).attachOverlay(w, profile);
				
				$(container).css({
					width: w,
					height: h,
					display: "none"
				});
				
				open_frame(container, el, 500, function() {
					$(container).fadeIn(1000);
				});
			}).css({
				visibility: "hidden",
				position: "absolute"
			}).attr("src", image_path).appendTo(container);
		});
	}
});