var library;

function jsonLoaded(data,status) {
	library = data;
	switchMode();
}

function switchMode() {
	var page;
	if ($.query.get('m') == 'album') {
		if ($.query.get('p') === true) {
			page = 0;
		} else {
			page = $.query.get('p');
		}
		openAlbum("+"+decodeURI($.query.get('a')),page);
	}
	else if ($.query.get('m') == 'image') {
		var imageIdx;	
		var image;		
		if ($.query.get('i') != null) {
		 	if ($.query.get('i') === true) {
		 		imageIdx = 0;
		 	} else {
		 		imageIdx = $.query.get('i');
		 	}
		 	displayImageByIndex(imageIdx);
		} else {
			displayImageById("+"+decodeURI($.query.get('a')),$.query.get('ii'));
		}
	} else {
		updateList();
	}
}

function displayImageByIndex(albumId, imageIdx) {
	var album = library.albumMap[albumId];
	imageId =  album.imageList[imageIdx];
	displayImageById(imageId);	
}

function displayImageById(albumId, imageId) {
	var newHtml = "";
	var imageEntry = library.imageMap[imageId];
	var page;
	
	if ($.query.get('p') === true) {
		page = 0;
	} else {
		page = $.query.get('p');
	}
	
	if (imageEntry != null) {
		var imageUrl = "lowres/"+imageEntry.lowresFilename;
		newHtml += "<h1>"+imageEntry.caption+"</h1>";
		newHtml += "<div id='fullimage'>";
		newHtml += "<div id='fullres'><a href='highres/"+imageEntry.highresFilename+"'>view large size</a></div>";
//		newHtml += "<a href=\"javascript:displayImageById('"+albumId+"',"+findNextImageId(albumId,imageId)+")\"><img border='0' src='"+imageUrl+"' /></a>";
		newHtml += "<a href=\"?m=image&amp;a="+$.query.get('a')+"&p="+page+"&ii="+findNextImageId(albumId, imageId)+"\"><img border='0' src='"+imageUrl+"' /></a>";
	} else {
		newHtml += "<p>image not found: "+imageId+"</p>";
	}
	newHtml += "<p><a href=\"?m=album&amp;a="+$.query.get('a')+"&p="+page+"\">Back to gallery</a></p></div>";
	$("#content").html(newHtml);
}

function findNextImageId(albumId, imageId) {
		var album = library.albumMap[albumId];
		var i = 0;
		for (i = 0; i < album.imageList.length; i++) {
			if (imageId == album.imageList[i]) {
				break;
			}
		}
		return album.imageList[(i+1)%album.imageList.length];
}

function updateList() {
	var newHtml = "";
	newHtml += "<h1>ChickenPhoto: Gallery List</h1>";
	newHtml += "<table id='gallerylist'>";
	for (i in library.albumMap) {
		var name = library.albumMap[i].name;
		newHtml += "<tr><td><a href=\"?m=album&amp;a="+encodeURI(i.substring(1))+"&p=0\">"+name+"</a></td></tr>";
	}
	newHtml += "</table>";
	$("#content").html(newHtml);
}
   
function openAlbum(id, page) {
	var rows = 3;
	var cols = 3;
	var newHtml = "";
	var album = library.albumMap[id];
	
	newHtml += "<h1>"+album.name+"</h1>";
	newHtml += imageGrid(id, rows, cols ,rows * cols * page);
	newHtml += pageSelector(id, rows * cols, rows * cols * page);
	newHtml += "<p class='back'><a href='?'>Return to Gallery List</a></p>";
	$("#content").html(newHtml);
 }
   
function imageGrid(id, rows, cols, offset) {
	var newHtml;
	var currentPage = Math.ceil(offset / (rows*cols));
	var album = library.albumMap[id];
	newHtml = "<table id='imagegrid'>";
	for (i = 0; i < rows; i++) {
		newHtml += "<tr>";
		for (j = 0; j < cols; j++) {
			var imageIdx = (i * cols) + j + offset;
			if (album.imageList[imageIdx] != undefined) {
				newHtml += "<td class=\"thumbnail\">";
				var imageId = album.imageList[imageIdx];
				imageUrl = "thumb/"+library.imageMap[imageId].thumbFilename;
				newHtml += "<a href=\"?m=image&amp;a="+encodeURI(id.substring(1))+"&p="+currentPage+"&ii="+imageId+"\">";
				newHtml += "<img border='0' class=\"thumbnail\" src='"+imageUrl+"'/ >";
				newHtml += "</a>";
				newHtml += "</td>";
			} else {
				break;
			}
		}
		newHtml += "</tr>";
	}
	newHtml += "</table>";
	return newHtml;
}

function pageSelector(id, pageSize, offset) {
	var album = library.albumMap[id];
	var pages = Math.ceil(album.imageList.length / pageSize);
	if (pages == 1) {
		return "";
	}
	var currentPage = Math.ceil(offset / pageSize);
	var newHtml;
	newHtml = "<div id=\"pageselector\">";
	if (currentPage > 0) {
		newHtml += "<a href=\"?m=album&amp;a="+encodeURI(id.substring(1))+"&p="+(currentPage-1)+"\">&lt;&nbsp;PREV</a>";
	} else {
		//newHtml += "&lt;&lt;PREV";
	}
	for (i = 0; i < pages; i++) {
		if (i == currentPage) {
			newHtml += "<span class=\"pageNumberCurrent\"> "+(i+1)+" </span>";
		} else {
			newHtml += "<span class=\"pageNumber\"> <a href=\"?m=album&amp;a="+encodeURI(id.substring(1))+"&p="+i+"\">"+(i+1)+"</a> </span>"
		}
	}
	if (currentPage < (pages-1)) {
		newHtml += "<a href=\"?m=album&amp;a="+encodeURI(id.substring(1))+"&p="+(currentPage+1)+"\">NEXT&nbsp;&gt;</a>";
	} else {
		//newHtml += "NEXT &gt;&gt;";
	}
	newHtml += "</div>";
	return newHtml;
}
   
function fixPath(path) {
	return path.replace(/\//g,'-');
}

$.getJSON("mainIndex.json", jsonLoaded);