function IncludeJavaScript(jsFile)
{
  document.write('<script type="text/javascript" src="'
    + jsFile + '"></script>'); 
}
IncludeJavaScript('js/swfobject.js');

g_folderBase = "images/";
g_imagePrefix = "img";
g_thumbPrefix = "thb";
g_imageSufix = "_lg";
g_videoSufix = "_vid";
g_thumbSufix = "_sm";
g_selectedThumbPrefix = "sel_thb_";
g_imageTypeExtention = ".jpg";
g_videoTypeExtention = ".swf";
g_bUseSelectedImage = false;
g_cDefaultThumsPerRow = 5;
g_defaultVideoHeight = "320px";
g_defaultVideoWidth = "240px";

function insertContainerHere(summaryElement, copyElementId)
{
	document.write(buildContainer());
	copyIn(summaryElement, "vf_summary");
	copyIn(copyElementId, "vf_copy");
}

function copyIn(fromId, toId)
{
	if(null != fromId)
	{
		var copyDiv=document.getElementById(fromId);
		document.getElementById(toId).innerHTML = copyDiv.innerHTML;
		copyDiv.display="none";
	}
}

function ImageError(event)
{
	alert("image failed to load!");
}

function displayImage(obj, folderName, pageName, image)
{
	setSelected(obj, folderName, pageName, image);
	clear("img_currentImage");
	clear("vf_currentImage");
	//This is all a weird hack to get around a goofy Safari bug that improperly retains height/widths
	//First, create an image object and load the image into it.
	var imagePath = buildImagePath(folderName, pageName, image);
	var loadedImage = new Image();
	loadedImage.src = imagePath;
	//Then, temporarily resize the image.
	var imageTagFrag = "<img id='img_currentImage_spacer' src=" + g_folderBase + "spacer.gif>";
	imageTagFrag += "<img id='img_currentImage' onerror='javascript:displayVideo("+image+")' src='"+loadedImage.src+"'/>";
	document.getElementById("vf_currentImage").innerHTML = imageTagFrag;
}

function displayVideo(image)
{
	clear("vf_currentImage");
	var videoPath = buildVideoPath(folderName, pageName, image);
	videoElement=document.createElement("div");
	videoElement.setAttribute("id","video");
	videoElement.style.position= "relative";
	document.getElementById("vf_currentImage").appendChild(videoElement);
	var so = new SWFObject(videoPath, "sotester", g_defaultVideoHeight, g_defaultVideoWidth, "9", "#222222");
	so.addVariable("QUALITY", "high");
	so.write("video");
}

function initThumbs(folderName, pageName, imageCount, groupCount, thumbsPerRow)
{
	var htmlFrag = "";
	if(null == thumbsPerRow)
	{
		thumbsPerRow = g_cDefaultThumsPerRow;
	}
	var columnCount = thumbsPerRow;
	var fullRowCount = Math.floor(imageCount / columnCount);
	if(fullRowCount > groupCount)
	{
		fullRowCount = groupCount;
	}
	var columnRemainder = (0 == fullRowCount) ? imageCount : (imageCount % (columnCount * fullRowCount));
	if(0 < columnRemainder && (fullRowCount + 1) > groupCount)
	{
		columnRemainder = 0;
	}
	for(j = 0; j < fullRowCount; ++j)
	{
		var rowAdjustor =  (j * columnCount);
		htmlFrag += "<div id='thumb_row'>";
		for(i = 0; i < columnCount; ++i)
		{
			var imageNDX = i + rowAdjustor;
			var thumbPath = buildThumbPath(folderName, pageName, imageNDX);
			var onclickHandler = "javascript:displayImage( this, '" + folderName + "', '" + pageName + "', " + imageNDX +");";
			var image_tag = "<div id='thumb_container'><img id='normal_thumb' src='" + thumbPath  + "' onclick=\"" + onclickHandler + "\" onmouseover=\"javascript:rollIn(this);\" onmouseout=\"javascript:rollOut(this);\"/></div>";
			htmlFrag += image_tag;
		}
		htmlFrag += "</div>";
	}
	if( 0 < columnRemainder)
	{
		htmlFrag += "<div id='thumb_row'>";
		for(i = columnCount * fullRowCount; i < imageCount; ++i)
		{
			var thumbPath = buildThumbPath(folderName, pageName, i);
			var onclickHandler = "javascript:displayImage( this, '" + folderName + "', '" + pageName + "', " + i +");";
			var image_tag = "<div id='thumb_container'><img id='normal_thumb' src='" + thumbPath  + "' onclick=\"" + onclickHandler + "\" onmouseover=\"javascript:rollIn(this);\" onmouseout=\"javascript:rollOut(this);\"/></div>";
			htmlFrag += image_tag;
		}
		htmlFrag += "</div>";
	}
	var divThumbButtons = document.getElementById("thumb_group");
	divThumbButtons.innerHTML = htmlFrag;
	displayImage(null, folderName, pageName, 0);
}

function rollIn(obj)
{
	var id = obj.id;
	if(null == id || "selected_thumb" != id)
	{
		obj.id = "rollover_thumb";
	}
}

function rollOut(obj)
{
	var id = obj.id;
	if(null == id || "selected_thumb" != id)
	{
		obj.id = "normal_thumb";
	}
}

function setSelected(obj, folderName, pageName, image)
{
	var obj_selected = document.getElementById("selected_thumb");
	if(null != obj_selected)
	{
		if(g_bUseSelectedImage)
		{
			obj_selected.src = buildThumbPath(folderName, pageName, image);
		}
		else
		{
			obj_selected.id = "normal_thumb";
		}
	}
	if(null != obj)
	{
		if(g_bUseSelectedImage)
		{
			obj.src = buildThumbPath(folderName, pageName, image);
		}
		else
		{
			obj.id = "selected_thumb";
		}
	}
}

function clear(id)
{
	if (document.getElementById(id))
	{
		var element = document.getElementById(id);
		while(element.childNodes.length > 0)
		{
			element.removeChild(element.childNodes[0]);
		}
	}
}

function buildImagePath(folderName, pageName, image)
{
	var retval = "";
	retval = g_folderBase + folderName + "/" + pageName + image + g_imageSufix + g_imageTypeExtention;
	return retval;
}

function buildVideoPath(folderName, pageName, image)
{
	var retval = "";
	retval = g_folderBase + folderName + "/flash/" + pageName + image + g_videoSufix + g_videoTypeExtention;
	return retval;
}

function buildThumbPath(folderName, pageName, image)
{
	var retval = "";
	retval = g_folderBase + folderName + "/" + pageName + image + g_thumbSufix + g_imageTypeExtention;
	return retval;
}

function buildSelectedThumbPath(folderName, pageName, image)
{
	var retval = "";
	retval = g_folderBase + folderName + "/" + g_selectedThumbPrefix + pageName + "_" + image + g_imageTypeExtention;
	return retval;
}

function buildContainer()
{
	var container = "";
/*	container += "<div id='vf_container' style='border: 1px solid black'>";
	container += "<div id='vf_content' style='border: 1px solid black'>";
	container += "<table>";
	container += "<tr>";
	container += "<td>";
	container += "<div class='thumb_group_cls' style='border: 1px solid blue'>";
	container += "<div id='thumb_group' style='border: 1px solid red'>";
	container += "</div>";
	container += "</div>";
	container += "</td>";
	container += "<td rowspan='2'>";
	container += "<div id='vf_currentImage' style='border: 1px solid black'>";
	container += "</div>";
	container += "</td>";
	container += "</tr>";
	container += "<tr>";
	container += "<td>";
	container += "<div class='vf_summary_cls' style='border: 1px solid blue'>";
	container += "<div id='vf_summary' style='border: 1px solid red'>";
	container += "</div>";
	container += "</div>";
	container += "</td>";
	container += "</tr>";
	container += "</table>";
	container += "<div id='vf_copy' style='border: 1px solid black'>";
	container += "</div>";
	container += "<div style='clear:both' />"
	container += "</div>";
	container += "</div>";
*/
	container += "<div id='vf_container'>";
	container += "<div id='vf_content'>";
	container += "<table>";
	container += "<tr>";
	container += "<td>";
	container += "<div class='thumb_group_cls'>";
	container += "<div id='thumb_group'>";
	container += "</div>";
	container += "</div>";
	container += "</td>";
	container += "<td rowspan='2'>";
	container += "<div id='vf_currentImage'>";
	container += "<img id='img_currentImage_spacer' src=" + g_folderBase + "spacer.gif>";
	container += "</div>";
	container += "</td>";
	container += "</tr>";
	container += "<tr>";
	container += "<td>";
	container += "<div class='vf_summary_cls'>";
	container += "<div id='vf_summary'>";
	container += "</div>";
	container += "</div>";
	container += "</td>";
	container += "</tr>";
	container += "</table>";
	container += "<div id='vf_copy'>";
	container += "</div>";
	container += "<div style='clear:both' />"
	container += "</div>";
	container += "</div>";	return container;
}