function hookup() {
	$('.gallery').click(function() {
		var ind = $(this).attr("src").split("/").pop().split(".")[0];
		var exta = $(this).attr("src").split("/").pop().split(".");
		var ext = exta[exta.length - 3];
		showPicture(ind,ext);
	});
}
$(function() {
	hookup();
	var path = $('.gallery').attr("src");
	base = path.substr(0,path.lastIndexOf("/")+1);
	count = $('img.gallery').size() + srcs.length;
});
$(window).load(function() {
	$('#gallerylist').masonry({
		columnWidth: 104,
		itemSelector:'.gallery',
	});
	loadnext();
});
function loadnext() {
	var n = srcs.shift();
if(!n) {return;}
	$('#gallerylist').append("<span class='new'>"+n+"</span>");
	$('#gallerylist img').load(function(){
$('#gallerylist').masonry({
appendedContent:$('#gallerylist span.new')
});
$('#gallerylist span').removeClass('new');
hookup();
		loadnext();
	});
}

var base = null;
var gal = null;
var count = 0;
function initializeGallery(ext) {
	var back = document.createElement("div");
	$(back).addClass('galback');
	document.body.appendChild(back);
	var wrapper = document.createElement("div");
	$(wrapper).addClass('gal').html("<div id='popup'></div><span class='next'>Next</span><span class='prev'>Previous</span><span class='close'>Close</span>");
	document.body.appendChild(wrapper);
	$("div.gal .close, div.galback").click(destructGallery);
	$("div.gal .next").click(function() {showPicture(gal+1,ext);});
	$("div.gal .prev").click(function() {showPicture(gal-1,ext);});
}
function destructGallery() {
	$('body>div.gal').remove();
	$('body>div.galback').remove();
	gal = null;
}
function showPicture(k,ext) {
	if(!ext) {ext = "jpg";}
	if(gal==null) { initializeGallery(ext); }
	gal = parseInt(k);
	if(gal==1) {
		$("div.gal .prev").addClass("dead");
	} else {
		$("div.gal .prev").removeClass("dead");
	}
	if(gal==count) {
		$("div.gal .next").addClass("dead");
	} else {
		$("div.gal .next").removeClass("dead");
	}
	var thumb = $("img[src$=/"+k+"."+ext+".100.jpg]");
	if(thumb.length) {
		var hei = parseInt(thumb.attr('height'))*4;
		$("#popup").html("<a href='"+base+k+"."+ext+"' target='_blank'><img width=400 height="+hei+" src='"+base+k+"."+ext+".400.jpg' /></a>");
	} else {
		var zeros = (''+count).length - (''+k).length; 
		var j = Array(zeros+1).join("0");
		thumb = $("img[src$=/"+j+k+"."+ext+".100.jpg]");
		var hei = parseInt(thumb.attr('height'))*4;
		$("#popup").html("<a href='"+base+j+k+"."+ext+"' target='_blank'><img width=400 height="+hei+" src='"+base+j+k+"."+ext+".400.jpg' /></a>");
	}
}