var library;

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

function switchMode(path) {
	if (path === undefined || path == '/') {
		updateList();
		return;
	}
	
	var pathParts = path.split('/',3);
	var album = pathParts[1];
	var page = pathParts[2];
	var image = pathParts[3];
	alert("switchMode: album: "+album+" page: "+page+" image: "+image);
	
	var page;
//	var album = decodeURI($.query.get('a'));
//	var page = decodeURI($.query.get('p'));
//	var mode = decodeURI($.query.get('m'));
//	var image = decodeURI($.query.get('ii'));

	if (page == undefined) {
		page = 0; 
		openAlbum("+"+decodeURI(album,page));
		return;
	}

//	else if (mode == 'image') {
//		var imageIdx;	
//		var image;		
//		displayImageById("+"+album,image,page);
//	} else {
//		updateList();
//	}
}

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

function displayImageById(albumId, imageId, page) {
	var newHtml = "";
	var imageEntry = library.imageMap[imageId];
	var page;

	if (imageEntry != null) {
		var imageUrl = "lowres/"+encodeURIComponent(imageEntry.lowresFilename);
		newHtml += "<br /><div id='fullimage'>";
		newHtml += "<a href=\"javascript:displayImageById('"+albumId+"', '"+findNextImageId(albumId, imageId)+"',"+page+")\">";
		newHtml += "<img border='0' src='"+imageUrl+"' /></a>";

	} else {
		newHtml += "<p>image not found: "+imageId+"</p>";
	}
	newHtml += "<p><a href=\"javascript:openAlbum('"+albumId+"',"+page+")\">Back to gallery</a>&nbsp;-&nbsp;";
	newHtml += imageEntry.caption+"&nbsp;-&nbsp;"
	newHtml += "<a href=\"?m=image&amp;a="+encodeURIComponent(albumId.substring(1))+"&p="+page+"&ii="+imageId+"\">permalink</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 += "<br /><h3>Album List</h3>";
	newHtml += "<table class=\"no-zebra\" border=\"1\" id='gallerylist'>";
	for (i in library.albumMap) {
		var name = library.albumMap[i].name;
		var uriName = encodeURIComponent(name);
		newHtml += "<tr><td><a href='"+uriName+"' rel='address:"+uriName+"'>"+name+"</a>";
		

	}
	newHtml += "</table>";
	$("#content").html(newHtml);
	updateClicks();
}
   
function openAlbum(id, page) {
	var rows = 3;
	var cols = 3;
	var newHtml = "";
	var album = library.albumMap[id];
	
	newHtml += "<br /><h3>Album: "+album.name+"</h3>";
	newHtml += imageGrid(id, rows, cols ,rows * cols * page);
	newHtml += pageSelector(id, rows * cols, rows * cols * page);
	newHtml += "<p class='back'><a href='javascript:updateList()'>Return to Gallery List</a> - ";
	newHtml += "<a href=\"?m=album&amp;a="+encodeURIComponent(id)+"&p="+page+"\">permlink</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 class='no-zebra' 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/"+encodeURIComponent(library.imageMap[imageId].thumbFilename);
				newHtml += "<a href=\"javascript:displayImageById('+"+encodeURI(id.substring(1))+"', '"+imageId+"',"+currentPage+")\">";
				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=\"javascript:openAlbum('+"+encodeURIComponent(id.substring(1))+"',"+(currentPage-1)+")\">&lt;&lt;&nbsp;PREV</a>";
	} else {
		newHtml += "&lt;&lt;&nbsp;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="+encodeURIComponent(id.substring(1))+"&p="+i+"\">"+(i+1)+"</a> </span>"
		}
	}
	if (currentPage < (pages-1)) {
		newHtml += "<a href=\"javascript:openAlbum('+"+encodeURIComponent(id.substring(1))+"',"+(currentPage+1)+")\">NEXT&nbsp;&gt;&gt;</a>";
	} else {
		newHtml += "NEXT&nbsp;&gt;&gt;";
	}
	newHtml += "</div>";
	return newHtml;
}

function updateClicks() {
	$('a').click(function() {  
   		 $.address.value($(this).attr('href'));  
	});
}  

   
function fixPath(path) {
	return path.replace(/\//g,'-');
}

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


$.address.change(function(event) {  
	alert("address change event: "+event.value);
	switchMode(event.value);
    // do something depending on the event.value property, e.g.  
    // $('#content').load(event.value + '.xml');  
	});