function loadPreviews() {
	$.getJSON("api/?method=getAllItemPreviews", function(items) {
		for(var i in items) {
			var thisItem = items[i];
			$.preloadImages("http://jayeb.com/alpha/"+thisItem.background+"/90", "php_images/header?color="+thisItem.background);
			var p = $("<p/>", {"class":"preview", "id":"preview-"+thisItem.id});
			var a = $("<a/>", {"href":"#"+thisItem.id}).appendTo(p);
			var img =
				$("<img/>", {
					"src":stripslashes(thisItem.thumbnail),
					"alt":""
				}).appendTo(a);
			var title =
				$("<span/>", {
					"class":"title",
					"text":stripslashes(thisItem.title)
				}).hide().css({
					"background-image":"url(http://jayeb.com/alpha/"+thisItem.background+"/90)",
					"color":"#"+thisItem.foreground
				}).appendTo(a);
			var brief =
				$("<span/>", {
					"class":"brief",
					"text":stripslashes(thisItem.brief)
				}).hide().css({
					"background-image":"url(http://jayeb.com/alpha/"+thisItem.background+"/90)",
					"color":"#"+thisItem.foreground
				}).appendTo(a);
			p.appendTo("#previews");
		}
		$("#previews").append("<div class='clear'/>");
		
		setupPreviewInteractions();
		
		loadItems();		
	});
}

function loadItems() {
	$.getJSON("api/?method=getAllItems", function(returnedItems) {
		var items = new Array();
		var hash = checkHash();
		for(var r in returnedItems) {
			if(hash && returnedItems[r].id == hash) {
				var firstItem = new Array(returnedItems[r]);
				items = firstItem.concat(items);
			} else {
				items.push(returnedItems[r]);
			}
		}
		for(var i in items) {
			var thisItem = items[i];
			var itemDiv = $("<div/>", {"class":"item", "id":"item-"+thisItem.id});
			var itemInfo = $("<div/>", {"class":"itemInfo"}).appendTo(itemDiv);
			var itemInfoInner =
				$("<div/>", {
					"class":"itemInfoInner"
				}).css({
					"background-image":"url(php_images/header?color="+thisItem.background+")",
					"background-color":"#"+thisItem.foreground
				}).appendTo(itemInfo);
			var header =
				$("<div/>", {"class":"header"}).css({
					"background-image":"url(http://jayeb.com/alpha/"+thisItem.background+"/90)"
				}).appendTo(itemInfoInner);
			var title = $("<h2/>", {"class":"title"}).appendTo(header);
			if(thisItem.url != "") {
				var titleA =
					$("<a/>", {
						"text":stripslashes(thisItem.title),
						"href":stripslashes(thisItem.url)
					}).appendTo(title);
			} else {
				var	titleSpan = $("<span/>", {"text":stripslashes(thisItem.title)}).appendTo(title);
			}
			var date = $("<span/>", {"class":"date", "text":stripslashes(thisItem.date)}).appendTo(header);
			var closer = $("<a/>", {"class":"close", "href":"#home"}).appendTo(header);
			var closerImg = $("<img/>", {"src":"images/close.png", "alt":""}).appendTo(closer);
				
			// Description area
			var description = 
				$("<div/>", {
					"class":"description"
				}).css({
					"background-image":"url(http://jayeb.com/alpha/"+thisItem.background+"/90)"
				}).appendTo(itemInfoInner);
			var descriptionTitle =
				$("<div/>", {
					"class":"descriptionTitle",
					"text":"About This Project"
				}).appendTo(description);
			var plusminus =
				$("<div/>", {"class":"plusminus"}).prependTo(descriptionTitle);
			var plusminusImg =
				$("<img/>", {
				  	"class":"plus",
					"src":"images/plusminus.png",
					"alt":"",
					"width":15,
					"height":30
				}).appendTo(plusminus);
			var descriptionText =
				$("<div/>", {
					"class":"descriptionText"
				}).html(stripslashes(thisItem.description)).appendTo(description);
			
			// Image slideshow
			var imageWindow = $("<div/>", {"class":"imageWindow"}).appendTo(itemDiv);
			var imageTray = $("<div/>", {"class":"imageTray"}).appendTo(imageWindow);
			var imageNav = $("<div/>", {"class":"imageNav"}).appendTo(itemDiv);
			var windowWidth = 740;
			var windowHeight = 480;
			var trayWidth = 0;
			var spacer = 10;
			var pad = 20;
			var sectionSpacer = 100;
			var increments = new Array();
			if(thisItem.productImages.length > 0) {
				var productNavTitle = 
					$("<span/>", {
						"class":"imageNavTitle",
						"text":"Product:"
					}).appendTo(imageNav);
				for(var u in thisItem.productImages) {
					var thisImage = thisItem.productImages[u];
					var wd = parseInt(thisImage.width);
					var ht = parseInt(thisImage.height);
					var imageContainer =
						$("<div/>", {
							"class":"imageContainer"
						}).css({
							"top":Math.floor((windowHeight-ht)/2),
							"left":trayWidth
						}).width(wd).height(ht).appendTo(imageTray);
					var loading = 
						$("<p/>", {
							"class":"loading"
						}).css("padding", Math.floor((ht-60)/2)+"px "+Math.floor((wd-60)/2)+"px").appendTo(imageContainer);
					var spinner = 
						$("<img/>", {
							"alt":"",
							"src":"images/spinner.gif",
							"class":"spinner"
						}).appendTo(loading);
					var imageNavItem =
						$("<img/>", {
							"class":"imageNavItem",
							"src":"images/nav_item.png",
							"title":stripslashes(thisImage.title),
							"alt":stripslashes(thisImage.title)
						}).appendTo(imageNav);
					buildImage(thisImage, imageContainer);
					increments.push(Math.floor((windowWidth - wd)/2) - trayWidth - pad);
					trayWidth += (wd + spacer + (pad*2));
				}
			}
			if(thisItem.processImages.length > 0) {
				var processNavTitle = 
					$("<span/>", {
						"class":"imageNavTitle",
						"text":"Process:"
					}).appendTo(imageNav);
				trayWidth += (sectionSpacer - (spacer + (pad*2)));
				for(v in thisItem.processImages) {
					var thisImage = thisItem.processImages[v];
					var wd = parseInt(thisImage.width);
					var ht = parseInt(thisImage.height);
					var imageContainer =
						$("<div/>", {
							"class":"imageContainer"
						}).css({
							"top":Math.floor((windowHeight-ht)/2),
							"left":trayWidth
						}).width(wd).height(ht).appendTo(imageTray);
					var loading = 
						$("<p/>", {
							"class":"loading"
						}).css("padding", Math.floor((ht-60)/2)+"px "+Math.floor((wd-60)/2)+"px").appendTo(imageContainer);
					var spinner = 
						$("<img/>", {
							"alt":"",
							"src":"images/spinner.gif",
							"class":"spinner"
						}).appendTo(loading);
					var imageNavItem =
						$("<img/>", {
							"class":"imageNavItem",
							"src":"images/nav_item.png",
							"title":stripslashes(thisImage.title),
							"alt":stripslashes(thisImage.title)
						}).appendTo(imageNav);
					buildImage(thisImage, imageContainer);
					increments.push(Math.floor((windowWidth - wd)/2) - trayWidth - pad);
					trayWidth += (wd + spacer + (pad*2));
				}
			}
			imageTray.width(trayWidth).data("increments", increments);
			if($(".imageNavItem", itemDiv).length < 2) {
				$(".imageNav", itemDiv).hide();
				$(".imageWindow", itemDiv).css({"top":146});
			}
			
			
			itemDiv.appendTo("#overlay");
			
			// Stop Event Propagation
			itemInfo.bind("click", function(event){ event.stopPropagation(); });
			imageTray.bind("click", function(event){ event.stopPropagation(); });
			imageNav.bind("click", function(event){ event.stopPropagation(); });
		}
		itemsLoaded = true;
		setupItemInteractions();
		setupKeyboardCommands();
		goToHash();
	});
}

function buildImage(thisImage, imageContainer) {
	var imageImg =
		$("<img/>", {
			"src":thisImage.file,
			"alt":thisImage.title,
			"width":parseInt(thisImage.width),
			"height":parseInt(thisImage.height)
		}).appendTo(imageContainer);
	var captionContainer =
		$("<span/>", {
			"class":"captionContainer"
		}).css({
			"width":parseInt(thisImage.width)
		}).appendTo(imageContainer);
	var title =
		$("<span/>", {
			"class":"title",
			"text":stripslashes(thisImage.title)
		}).css({
			"width":parseInt(thisImage.width)-10
		}).appendTo(captionContainer);
	var caption =
		$("<span/>", {
			"class":"caption"
		}).css({
			"width":parseInt(thisImage.width)-10
		}).html(stripslashes(thisImage.caption)).appendTo(captionContainer);
	var captionTeaser =
		$("<span/>", {
			"class":"captionTeaser",
			"text":"Caption"
		}).appendTo(imageContainer);
	var captionTeaserImage =
		$("<img/>", {
			"src":"images/caption.png",
			"alt":"+"
		}).prependTo(captionTeaser);
}

function checkHash() {
	return location.hash.substr(1);
}

function goToHash() {
	var hash = location.hash.substr(1);
	if(hash && $("#item-"+hash).length) {
		$("#item-"+hash).openItem();
	} else {
		location.hash = "#home";
	}
}