// Instead of document.getElementById(id), use prototype function $(id)

// Apply the data to the template and set the result to the specified div
function applyTemplate(template, data, divId) {
	var result  = template.process(data);
	//alert(result);
	$(divId).innerHTML = result;
	//$(divId).html = result;
}

// Rebuilds the menus and thumbs
// current - name of current menu choice
// doLoadFirstImage - whether to load in the first image; set to false for 
// initial load and fading if the image will be replaced by text
function buildMenu(current, doLoadFirstImage) {
	galleriesContext.current = current;
	applyTemplate(galleriesJST, galleriesContext, galleriesDivId);
	applyTemplate(thumbsJST, galleriesContext, thumbsDivId);
    var g = getByName(current, galleriesContext.galleries);
	if (doLoadFirstImage) {
		// Load first image of current gallery
		//alert (g.name);
		loadImage(g.photos[0].imagePath, g.photos[0].title, doBlend);
		loadImageCaption(g.textPath, g.photos[0].aboutPage);
	} else {
		// Or, load about page for the the current gallery
		loadHtml(textDivId,g.aboutPage.path);
	}
}

function loadImageCaption(textPath, aboutPage)
{
	if (aboutPage) {      
		loadHtml(captionDivId, textPath+aboutPage);
	}
}

function preloadImages(data) {
	applyTemplate(preloadJST, data, preloadId);
}

// Expected variables:  
// imagesPath, galleriesDivId, thumbsDivId, imageDivId, textDivId, titleDivId

// Link that calls a function when clicked
function getFunctionLinkEle(func, params) {	
	var link = document.createElement("a");
	link.setAttribute("href", "#");
	link.setAttribute("onClick", func + "(" + params + ");");
	return link;
}
function getImageLinkEle(imagePath, altText, id, cssClass) {
	var linkEle = document.createElement("img");
	// id is needed for fade function
	if (strValid(id))
		linkEle.setAttribute("id", id);
	if (strValid(cssClass))
		linkEle.setAttribute("class", cssClass);
	if (strValid(altText))
		linkEle.setAttribute("alt", altText);
	linkEle.setAttribute("src", imagePath);
	//alert (linkEle.getAttribute("src"));
	return linkEle;
}
function getContentImageLinkEle(image, altText) {
	var imagePath = galleriesContext.imagesPath + image;
	var linkEle = getImageLinkEle(imagePath, altText, "contentImage");
	return linkEle;
}
function getThumbLinkEle(image, altText) {
	var imagePath = galleriesContext.thumbsPath + image;
	var linkEle = getImageLinkEle(imagePath, altText, "thumbImage");
	linkEle.setAttribute("width", "75");
	return linkEle;
}


// Loads or Blends an image based on doBlend setting
// Blend fades an image in the image div over existing image (if any)
// The image fetching and fading run asynchronously - 
// on initial load, the image fetch takes a moment so it flashes after the
// initial image fades

// this version fades after a text page or an image (any content).
// Don't load new content while the fade is executing 
// (e.g. don't load text after rebuilding the menu)
function loadImage(image, text, doBlend) {
	var imageDiv = $(imageDivId);
	if (imageDiv != null) {
		var imagePath = galleriesContext.imagesPath + image;
		//alert("loading: " + imagePath + ", " + text);
		//debugger;
		if ( !imageEle || imageEle.tagName != "IMG") {
			// if not blending or not an image, remove old content and create the new image 
			removeAllChildren(imageDiv);
		}
		
		// get first element of the div, if any
		var imageEle = imageDiv.firstChild;

		if (!imageEle || imageEle.tagName != "IMG") {
			// no current image - create a new one; if blending, make it invisible, then fade it in
			imageEle = getContentImageLinkEle(image, text);
			imageDiv.appendChild(imageEle);
			if (doBlend) {
				changeOpac(0, imageEle.id);
			} 
		}
		if (doBlend) {
			fadeimage(imageDiv.id,imageEle.id,imagePath,blendTime);
		}
	}
	if (text != undefined) {
		var titleEle = document.createElement("h2");
		var titleText = document.createTextNode(text);
		titleEle.appendChild(titleText);		
		loadDiv(titleDivId, titleEle)		
 	} 	
}
// this version supports fading only if the image contains an image
function loadImage_fadeoverimages(image, text, doBlend) {
	var imageDiv =$(imageDivId);
	if (imageDiv != null) {
		var imagePath = galleriesContext.imagesPath + image;                                
		//alert("loading: " + imagePath + ", " + text);
		//debugger;
		var imageEle = imageDiv.firstChild;
		if (imageEle && imageEle.tagName == "IMG" && doBlend) {
			fadeimage(imageDiv.id,imageEle.id,imagePath,blendTime);
			//
			// remove background should be done by blend when it's done
			//imageDiv.style.backgroundImage="none"; // in case new img is smaller			
		} else {
			removeAllChildren(imageDiv);
			imageDiv.appendChild(getContentImageLinkEle(image, text));
		}
	}
	if (text != undefined) {
		var titleEle = document.createElement("h2");
		var titleText = document.createTextNode(text);
		titleEle.appendChild(titleText);		
		loadDiv(titleDivId, titleEle)		
 	}
}

/*
// Deactivate a link - convert link to plain text
function deactivateLink(link) {
	var linkText = link.innerHTML;
	var parentNode = link.parentNode;
	parentNode.savedLink = link;	
	parentNode.innerHTML = linkText;
	//parentNode.setAttribute("activeLink", link);
	//alert(parentNode.getAttribute("activeLink"));
}
function reactivateLink(link) {
	//debugger;
	//if (this.savedLink != undefined) {
	//	link.parentNode.innerHTML = this.activeLink;
	if (this.savedLink != undefined) {
		this.innerHTML = this.savedLink;
	}
}
*/
// Loads html content into the text div; clears image caption
function loadHtml(divId, pagePath) {
	removeAllChildren($(captionDivId));
	removeAllChildren($(titleDivId));
	var htmlDiv = $(divId);
	if (htmlDiv != null) {
		try {
			if (doBlend) changeOpac(0, divId);
			ajaxpagefetcher.load(divId, pagePath, false);
		} catch (err) {
			var errTextNode = document.createTextNode("Page not available");
			var errNode = document.createElement("h1");
			errNode.appendChild(errTextNode);
			htmlDiv.appendChild(errNode);
			if (doBlend) changeOpac(100, divId);
		}
	}

	// fade the opacity from invisible to visible
	if (doBlend) opacity(divId, 0, 100, blendTime);	
}

function loadDiv(divId, divContents) {
	var foundDiv = $(divId);
	if (foundDiv != null) {
		removeAllChildren(foundDiv);
		foundDiv.appendChild(divContents);
		//alert(foundDiv.innerHTML);
	}
}