$("#loading").hide();
var domain = "www.thebigpicturelibrary.com";

var url;
var onLoad;
var folders = new Array();
var folderId = -1;
var xml;

var smlRef = new Array("#smlA","#smlB");

var account;
var template;

function getAccount(_template,_account) {

	$("head").append("<LINK REL=stylesheet HREF=\"/css/" + _template + "\" TYPE=\"text/css\">");
	
	account = _account;	
	$("#loading").fadeIn("slow"); 
	url = "/" + account + ".xml";
	$.ajax({
	   url: url,
	   dataType: "xml",
	   success: function(xml){
	   		var title = $("title",xml).text();

	   		$("#title").html("<h1>"+title+"</h1>");
			getLibrary();
  	 	}
 	})
}

function getLibrary() {
	
	url = "/" + account + "/listlibrary.xml";
	
	$.ajax({
	   url: url,
	   dataType: "xml",
	   success: function(_xml){
	   
	   		//var title = $("title",xml).text();
			$("#loading").fadeOut("slow");
	   		//$("#dirs").html(title);
			xml = _xml;
			
			getFolders("folders",$("dir[@name="+account+"]",xml),-1);
			getImages("0");
			$("#folders").append("<BR><BR><a id=\"startFullSlideShowBtn\" href=\"javascript:fullSlideShowStart();\">start slideshow</a>");
  	 	}
 	})
}


function getFolders(f,obj,parentIdx) {

	if (folderId==-1) {
		fTitle = "home";
	}
	else {
		fTitle = obj.attr("name");
	}
	
	folders.push([obj,parentIdx]);
	
	var thisIdx = folders.length-1;
	
	var fName = "f" + (folderId++);
	
	var contents = obj.children("image").length;
	
	if (contents>0) {
		$("#"+f).append("<div class='folder' title='' id='" + fName + "'><a href=\"javascript:getImages(" + folderId + ");\">" + fTitle + "</a> (" + contents + ")</div>");
	}
	else {
		$("#"+f).append("<div class='folder' title='' id='" + fName + "'><b>" + fTitle + "</b></div>");
	}
	
	//alert($("//dir",obj).length);
	obj.children("dir").each(function(i) {
		getFolders(fName,$(this),thisIdx);
	});
	//if ($("/dir", obj)) getFolders($("/dir", obj))

}

var numThumbsLoaded = 0;
var numThumbsToLoad = 0;


function getFullPath(f) {
	if (f<=0) return "";
	
	else {
		return getFullPath(folders[f][1]) + "/" + $(folders[f][0]).attr("name"); 
	}
}

function getFullCrumb(f) {
	var ret = "";
	if (f>0) {
		ret = getFullCrumb(folders[f][1]) + " ";
		
		if (($(folders[f][0]).children("image").length)>=1) ret += "<a href=\"javascript:getImages(" + f + ");\">";
		ret += $(folders[f][0]).attr("name");
		if (($(folders[f][0]).children("image").length)>=1) ret += "</a>";
		ret+= " / ";
	}
	return ret;
}

function getImages(f) {

	closeImage(slideShowIdx);
	
	numThumbsLoaded = 0;
	numThumbsToLoad = ($(folders[f][0]).children("image").length);
	
	currentFolder = f;
	
	if (f==0) 	$("#imgs").html("");
	else  		$("#imgs").html("<h2>" + getFullCrumb(f) + "</h2>");
	
	$("#imgs").append("<a id=\"startSlideShowBtn\" href=\"javascript:slideShowStart("+f+");\">start slideshow</a>&nbsp;&nbsp;&nbsp;<b id=\"thumbsLoadingLbl\"></b><BR><BR>");
	
	var found = false;
	
	$(folders[f][0]).children("image").each(function(i) {
		
		found = true;	
		url = "http://" + domain + $("thumbDir",xml).text() + getFullPath(f) + "/" + $(this).children("name").text();
		//alert(url);

//		var tableStart = "<table height='100' width='100'><tr><td width='100' height='100' valign='middle' align='center'>";
//		var tableEnd   = "</td></tr></table>";
//		$("#imgs").append("<div class='img' title='" + $(this).children("title").text() + "' id='img" + i + "'>" + tableStart + "<a href=\"javascript:openImage(0,"+f+","+i+");\" ><img src=\"" + url + "\" onload=\"thumbLoaded();\" border=\"0\"></a>" + tableEnd + "</div>");
		$("#imgs").append("<div class='img' title='" + $(this).children("title").text() + "' id='img" + i + "'><a href=\"javascript:openImage(0,"+f+","+i+");\" ><img src=\"" + url + "\" onload=\"thumbLoaded();\" border=\"0\"></a></div>");
	});
	
	if (!found) $("#imgs").html("");

}


function thumbLoaded() {
	numThumbsLoaded+=1;
	$("#thumbsLoadingLbl").html("loaded " + numThumbsLoaded + " of " + numThumbsToLoad);
	if (numThumbsLoaded==numThumbsToLoad) {
		$("#thumbsLoadingLbl").fadeOut(500);
	}
}

var currentImage = 0;

var slideShowing = false;
var slideShowType = 0;
var slideShowSpeed = 5000;
var currentFolder = 0;

var slideShowIdx = 0;
var slideShowTimeout = null;


function fullSlideShowStart() {
	slideShowing = true;
	slideShowType = 2;
	currentImage=-1;
	slideShowTimeout = setTimeout('openNextSlide(1)', 0);
}

function slideShowStart(f) {
	slideShowing = true;
	slideShowType = 1;
	currentImage=-1;
	slideShowTimeout = setTimeout('openNextSlide(1)', 0);
}

function openNextSlide(dir) {
	clearTimeout(slideShowTimeout);
	slideShowIdx = otherRef(slideShowIdx);
	
	if ((!slideShowing) || (slideShowType==1)) {
		currentImage+=dir;
		if (currentImage>=numThumbsToLoad) currentImage=0;
		if (currentImage<0) currentImage = numThumbsToLoad-1;
		openImage(slideShowIdx,currentFolder,currentImage);
	}
	else {		//select random image
		var f = Math.floor(Math.random()*folders.length);
		var i = ($(folders[f][0]).children("image").length);
		if (i>0) {
			i = Math.floor(Math.random()*i);
		}
		else openNextSlide(1);
		openImage(slideShowIdx,f,i);
	}
	
	
}

function otherRef(i) {
	return (i+1) % 2;
}

function queueNextSlide() {
	clearTimeout(slideShowTimeout);
	slideShowTimeout = setTimeout('openNextSlide(1)', slideShowSpeed);
}

function slideShowStop() {
	$(".stopBtn").fadeOut(500);
	clearTimeout(slideShowTimeout);
	slideShowing = false;
	
}


function openImage(idx,f,i) {
	$(smlRef[idx]).hide();
	$("#imgs").fadeOut(500);
	
	currentImage = i;
	
	$("#loading").fadeIn(500);

	var obj = $(folders[f][0]).children("image")[i];
	var desc = 	$(obj).children("description").text();
	var title = $(obj).children("title").text();
	
	var sml = "http://" + domain + $("smallDir",xml).text() + getFullPath(f) + "/" + $(obj).children("name").text();
	
	var contents = "<div class='header'><h2>" + getFullCrumb(f) + "</h2>";
	
	contents+="<a href=\"javascript:openNextSlide(-1);\">&lt; prev</a>&nbsp;&nbsp;&nbsp;&nbsp;" + (i+1) + " / " + numThumbsToLoad +"&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"javascript:openNextSlide(1);\">next &gt;</a>";
	
	if (slideShowing) contents+="&nbsp;&nbsp;&nbsp;&nbsp;<a class=\"stopBtn\" href=\"javascript:slideShowStop();\">stop slideshow</a>";
	contents += "<h2 style=\"padding-top:5px;\">" + title + "</h2><h3>" + desc + "</h3></div><div class='smlimg' title='" + title + "'><a href=\"javascript:closeImage("+idx+");\"><img onload=\"smallLoaded("+idx+");\" src=\"" + sml + "\" border=\"0\"></img></a></div>";
	
	
	
	$(smlRef[idx]).html(contents);
}



function closeImage(idx) {
	if (slideShowing) slideShowStop();
	$(smlRef[idx]).fadeOut(500);
	$("#imgs").fadeIn(500);
}


function smallLoaded(idx) {
	if (slideShowing) queueNextSlide();
	$(smlRef[otherRef(idx)]).fadeOut(500);
	$(smlRef[idx]).fadeIn(500);
	$("#loading").fadeOut(500);
}