<!--
var dragging=false, replacing=false
var x,y,z
var oldLeft,oldTop,oldImage
var changeType
var blankSrcStr = "http://" + document.location.hostname + "/fehringer/images/blank.jpg"
var blankImg = new Image(), nextBucketSlide
var arryImages, arryImageDetails = new Array(1);
var arryBucketImages = new Array();
var arryProjectImages = new Array();
var docImgArry = document.images
var mouseupElement = null, slideWidth, slideHeight, gutterX = 0; gutterY = 0;
var slideDim = 64
var divCatNum
var topmost, bottommost, greatestHeight = 0;

var imageViewerWidth = 0;
var imageViewerHeight = 0;

var slideBorderWidth, slideBorderColor, slideBorderStyle, slideBackgroundColor;
var imageBorderWidth, imageBorderColor, imageBorderStyle;
var browserAdjust = 0;
var slideCount = 0;
var selectedProjectId = 0, projectIndex = 0;

/********** IMAGE LOADER **********/

function loadImgArray(page, imgPosition, imgName, pDimX, pDimY, imgIdn, displayTypeIdn)
{	
	var arryData = new Array(9)
	var x, y, adjFactor
	
	arryData[0] = imgName;
	
	// Image is vertically oriented
	if ( parseInt(pDimX) < parseInt(pDimY) )
	{	
		// Set height of image to the max height as set in the imageMover.cfm Parameter Init section
		y = imgDimY;
		
		adjFactor = imgDimY / pDimY;
		
		x = adjFactor * pDimX;
					
		if ( y > greatestHeight )
		{
			greatestHeight = y;
			topmost = (slideHeight - y)/2;
			bottommost = (slideHeight + y)/2;
		}
		
		arryData[1] = 	x 								//width
		arryData[2] = 	y								//height
		arryData[3] = (slideHeight - arryData[2])/2		//top
		arryData[4] = (slideWidth - arryData[1])/2		//left
		arryData["imgId"] = imgIdn							//imgID
		arryData['page'] = page								//page number
		arryData["imgPosition"] = imgPosition				//image position on page
		arryData['displayTypeId'] = displayTypeIdn			//determines how to display when image is clicked in Viewer
	}
	// Image is horizontally oriented or square
	else if ( parseInt(pDimX) >= parseInt(pDimY) )
	{
		// Set width of image to the max width as set in the imageMover.cfm Parameter Init section
		x = imgDimX;
		
		adjFactor = imgDimX / pDimX;
		
		y = adjFactor * pDimY;
		
		if ( y > greatestHeight )
		{
			greatestHeight = y;
			topmost = (slideHeight - y)/2;
			bottommost = (slideHeight + y)/2;
		}
					
		arryData[1] = 	x 								//width
		arryData[2] = 	y								//height
		arryData[3] = (slideHeight - arryData[2])/2		//top
		arryData[4] = (slideWidth - arryData[1])/2		//left
		arryData["imgId"] = imgIdn							//imgID
		arryData['page'] = page								//page number
		arryData['imgPosition'] = imgPosition				//image position on page
		arryData['displayTypeId'] = displayTypeIdn			//determines how to display when image is clicked in Viewer
	}
	
	if (page == 0 || page == null)
	{
		arryBucketImages[arryBucketImages.length] = arryData;		
	}
	else
	{	
		arryImages[arryImages.length] = arryData;
	}
}

function loadImgDetailArray(artId, filename, title, summary, dimX, dimY, project_title, client_name, price)
{
	var arryData = new Array(4);
	
	arryData["artId"] = artId 					
	arryData["filename"] = filename				
	arryData["title"] = title					
	arryData["summary"] = summary				
	arryData["dimX"] = dimX						
	arryData["dimY"] = dimY					
	arryData["project_title"] = project_title					
	arryData["client_name"] = client_name
	arryData["price"] = price

	arryImageDetails[arryImageDetails.length] = arryData;	
}

function loadProjectPageArray(artId, filename, title, summary, dimX, dimY, projectId, author)
{
	var arryData = new Array(4);
	
	arryData["artId"] = artId 					
	arryData["filename"] = filename				
	arryData["title"] = title
	arryData["author"] = author					
	arryData["summary"] = summary				
	arryData["dimX"] = dimX						
	arryData["dimY"] = dimY					
	arryData["projectId"] = projectId
	
	arryImageDetails[arryImageDetails.length] = arryData;	
}

function loadProjectImgArray(projectId, imgName, pDimX, pDimY, imgIdn, title, summary, details, 
				publisher, pub_date, isbn, award1, award2, award3, review_link, purchase_link)
{	
	var arryData = new Array(16)
	
	arryData["imgName"] = imgName;
	arryData["pDimX"] = pDimX 						//width
	arryData["pDimY"] = pDimY						//height
	arryData["imgId"] = imgIdn						//imgID
	arryData["projectId"] = projectId				//projectId
	arryData["title"] = title						
	arryData["summary"] = summary				
	arryData["details"] = details
	
	arryData["publisher"] = publisher;
	arryData["pub_date"] = pub_date 	
	arryData["isbn"] = isbn		
	arryData["award1"] = award1		
	arryData["award2"] = award2				
	arryData["award3"] = award3						
	arryData["review_link"] = review_link				
	arryData["purchase_link"] = purchase_link
	
	// If a project group does not exist, create one.  Then, begin adding excerpt pages to it.
	if ( !arryProjectImages[projectId] )
	{
		arryProjectImages.length = arryProjectImages.length++;
		arryProjectImages[projectId] = new Array();
	}
	
	//  projectIndex will begin at 0 for each new group.  The 0 index will be occupied by the frontpage image.
	projectIndex = arryProjectImages[projectId].length;
	
	arryProjectImages[projectId][projectIndex] = arryData;
}


// This function is used to align the tops of the images using the calculated 'topmost' value of the image with the greatest height
function setTop(images)
{	
	for (i=0; i<images.length; i++)
	{	
		if (images[i])
		{
			iArray = images[i];
			
			if (imgAlign == 'top') {
				iArray[3] = topmost;
			}
			else if (imgAlign == 'bottom') {
				iArray[3] = bottommost - iArray[2];
			}
			else if (imgAlign == 'center') {
				iArray[3] = iArray[3];
			}
			else {
				iArray[3] = imgAlign;
			}
		}
	}
}

// This method is called when the Body of imageMover is loaded
function initialize()
{	
	var k;
	var bName,pName,divName;	
	
	// Set URL Location for white placeholder
	blankImg.src = blankSrcStr;
	docImgArry["trashImg"].src = trashImageLocation;

	// ImageLoader does not yet have these properties to set in application.cfm
	imageBorderWidth = 0;
	imageBorderColor = '';
	imageBorderStyle = '';
	
	//Thomas Note:  something in layoutImageMover is not function for IE
	layoutImageMover();
	
	fillSlides('dragable', false, arryImages, 'page');
	fillSlides('dragable', false, arryBucketImages, 'bucket');
	
	// Set the first free bucket position
	SetNextBucketPosition();
}

//  Loops through bucket image array and finds the first slide that contains
//  a blank image
function SetNextBucketPosition()
{
	var bName, bImage
	var imgsPerBucket = imgsAcross * imgsDown;
	
	for (var i=0; i<=numBuckets; i++)
	{
		bucketIndex = i + 1;
		
		for (var j=1; j<=imgsPerBucket; j++)
		{	
			bName = "bucket" + bucketIndex + "slide"+ j;	
			bImage = document.getElementById(bName)
			
			if ( !bImage.hasChildNodes() )
			{	
				nextBucketSlide = bName;
				return false;
			}				
		}
	}
}

//  Calculate the image dimensions for imageMover that are proportional to parameters set 
//  in the application.cfm file
function sizeImageMoverSlides()
{
	var spacersAcross, spacersDown;
	
	arryImages = null;
	arryImages = new Array();
	
	//  The gutters are the spaces between slides
	gutterX = moverGutterX; 
	gutterY = moverGutterY;
	
	spacersAcross = (imgsAcross - 1) * gutterX;
	spacersDown = (imgsDown - 1) * gutterY;
	
	slideWidth = ( pageWidth - spacersAcross - (2*moverPanelBorderWidth) ) / imgsAcross;
	slideHeight = ( pageHeight - spacersDown - (2*moverPanelBorderWidth) ) / imgsDown;	
}

//  Create the layout for Panels, Slides, and Images for the Pages and Buckets
function layoutImageMover ()
{	
	var top, left
	var form = document.getElementById("imageMover")
	var panelCount = 1, slideCount = 1
	var panelOffsetTop = pageHeight + 60, panelOffsetLeft = 40;

	top = panelOffsetTop;

	// Layout the pages.  pageWidth and pageHeight are set in a script block within imageMover.htm 
	for ( var numDown = 0; numDown < pagesDown; numDown++ )
	{	
		left = panelOffsetLeft;
		
		for ( var numAcross = 0; numAcross < pagesAcross; numAcross++ )
		{	
			var divPage = document.createElement("div")
			divPage.id = "p" + panelCount
			divPage.className = "page";
			divPage.setAttribute("style", "background-color: #333333; position: absolute; z-index: 1; width: " + pageWidth + "px; " +
			                              "height: " + pageHeight + "px; " + 
			                              "top: " + top + "px; " + 
			                              "left: " + left + "px;"); 
			form.appendChild(divPage);
			left = left + pageWidth + gutterX;
			panelCount++;
		}
		
		top = top + pageHeight + gutterY;
	}
	
	// Layout the slides on the pages
	for ( var pageIndex = 0; pageIndex < panelCount - 1; pageIndex++ )
	{
		var pageNum = pageIndex + 1;
		var pageElement = document.getElementById( "p" +  pageNum )
		top = moverPanelBorderWidth;
		
		setTop(arryImages);
		createSlides(pageElement, pageNum);
	}
	
	// Line up the first bucket with the second panel column
	left = panelOffsetLeft + pageWidth + gutterX;
	slideCount = 1;	
	
	// Layout the bucket panels.  numBuckets is set in a script block within imageMover.htm
	for ( var numBucketPanels = 0; numBucketPanels < numBuckets; numBucketPanels++ )
	{
		var divBucket = document.createElement("div")
		divBucket.id = "b" + (numBucketPanels + 1);
		divBucket.className = "bucket";
		
		divBucket.setAttribute("style", "background-color: #bfbfbf; position: absolute; z-index: 1; width: " + pageWidth + "px; " +
			                              "height: " + pageHeight + "px; " + 
			                              "top: " + "44" + "px; " + 
			                              "left: " + left + "px;");
		form.appendChild(divBucket);
		left = left + pageWidth + gutterX;
	}
	
	
	// Layout the bucket slides on the bucket pages
	for ( var bucketIndex = 0; bucketIndex < numBuckets; bucketIndex++ )
	{
		var bucketNum = bucketIndex + 1;
		var bucketElement = document.getElementById( "b" +  bucketNum )
		top = moverPanelBorderWidth;
		
		setTop(arryBucketImages);
		createSlides(bucketElement, bucketNum);
	}
	
	// Layout the administration page
	var divAdmin = document.getElementById("admin")
	
	divAdmin.setAttribute("style", "background-color: #bfbfbf; position: absolute; z-index: 1; width: " + pageWidth + "px; " +
			                              "height: " + pageHeight + "px; " + 
			                              "top: " + "44" + "px; " + 
			                              "left: " + panelOffsetLeft + "px;");	
}

function getImgSrc()
{	
	var imageMoverForm = document.getElementById("imageMover");
	
	for (var j = 1; j <= numBuckets; j++)
	{
		for (var k=1; k<=imgsAcross*imgsDown; k++)
		{
			var divSlide = document.getElementById("bucket" + j + "slide" + k);
			if ( divSlide.hasChildNodes() ) 
			{
				var newInput = 	document.createElement("input");
				
				newInput.type = "hidden";
				newInput.name = "imgInBucket";	
				newInput.value = divSlide.childNodes[0].id;
				
				imageMoverForm.appendChild(newInput);
			}
		}
	}
	
	// Only page images which have changed position will be passed on to update database
	for (var pageIndex=1; pageIndex<=pagesDown * pagesAcross; pageIndex++)
	{
		for (var slideIndex=1; slideIndex<=imgsAcross*imgsDown; slideIndex++)
		{
			var divSlide = document.getElementById("page" + pageIndex + "slide" + slideIndex);
			if ( divSlide.hasChildNodes() && divSlide.childNodes[0].updated == true ) 
			{
				var newInput = 	document.createElement("input");
				var delimiter = "-";
				
				newInput.type = "hidden";
				newInput.name = "imgInPage";	
				newInput.value = pageIndex + delimiter + slideIndex + delimiter + divSlide.childNodes[0].id;
				
				imageMoverForm.appendChild(newInput);
			}
		}
	}
}

//  Determines whether images are swapped or slid	
function setChangeType()
{
	var changeTypes = document.getElementsByName("changeType")
	var optNum = changeTypes.length
	
	for (var count = 0; count < optNum; count++)
	{
		if (changeTypes[count].checked == true)
		{
			changeType = changeTypes[count].id
		}
	}
}

/*** Image Loader Event Handlers and supporting functions ***/

if(document.addEventListener)
{
document.addEventListener("mousedown", drag_it, true)
document.addEventListener("mouseup", save_it, true)
}


//  Event handler for mousedown event in imageMover
function drag_it(event)
{	
	if (event.target.className != "dragable")
	{	
		return false
	}
	if (event.target.className == "dragable" && event.target.src != blankImg.src)
	{		
		var elementToDrag, slideElement, pageElement
		var pageID, slideID
		
		dragging=true
		
		z=event.target
		
		elementToDrag = document.getElementById(z.id)
		pageID = event.target.parentNode.parentNode.id
		slideID = event.target.parentNode.id
		
		pageElement = document.getElementById(pageID)
		slideElement = document.getElementById(slideID)
		
		x = parseInt(pageElement.style.left) + parseInt(slideElement.style.left)
		y = parseInt(pageElement.style.top) + parseInt(slideElement.style.top)
			
		oldLeft = elementToDrag.style.left
		oldTop = elementToDrag.style.top 
		oldImage = z.src
		//dragObjName = z.name
		
		document.addEventListener("mousemove", move_it, true)

		event.stopPropagation()
		event.preventDefault()
	}
}

//  Event handler for mousemove event
function move_it(event)
{	
	var imgMoving = document.getElementById(z.id)
	
	var docElement = document.getElementById("body");
	docElement.style.cursor = "move";
	
	document.addEventListener("mouseover", getMouseOverImg, true)
	
	//if ( event.button == 0 && dragging && imgMoving.src != blankImg.src)
	if (dragging && imgMoving.src != blankImg.src)
	{	
		replacing = true
		imgMoving.parentNode.parentNode.style.zIndex = 999
		imgMoving.parentNode.style.zIndex = 999
		imgMoving.style.zIndex = 999
		imgMoving.style.left= (event.clientX - x + parseInt(window.scrollX) + 2) + "px"
		imgMoving.style.top= (event.clientY - y + parseInt(window.scrollY)+ 2) + "px"
		event.stopPropagation()
		return false
	}
	else
	{	
		return false
	}
}

// Mouse Event used in imageMover
function getMouseOverImg(event)
{
	if ( event.target.className == 'dragable' || event.target.className == 'imgDiv' )
	{	
		mouseupElement = event.target
	}
	else
	{
		mouseupElement = null;
	}
}

//  Event handler for mouseup event; z is the image being moved around
function save_it(event)
{	
	// DEBUG
	//alert(event.target.id + " " + event.target.height)
	
	var docElement = document.getElementById("body");
	
	if (docElement) {
		docElement.style.cursor = "default";
	}
	
	if (z != null)
	{	
		var imgMoving = document.getElementById(z.id)
		
		if (imgMoving.className == "dragable")
		{	
			document.removeEventListener("mousemove", move_it, true);
			imgMoving.style.left = oldLeft
			imgMoving.style.top = oldTop
			imgMoving.style.zIndex = 1
			imgMoving.parentNode.style.zIndex = 1
			imgMoving.parentNode.parentNode.style.zIndex = 1
			
			setChangeType();
			
			if ( event.target.name == "trashImg" )
			{	
				var imageMoverForm = document.getElementById("imageMover");
				var newInput = 	document.createElement("input");
				
				newInput.type = "hidden";
				newInput.name = "imgToTrash";	
				newInput.value = imgMoving.id;
				
				imageMoverForm.appendChild(newInput);
				imgMoving.parentNode.removeChild(imgMoving);
			}
			else if ( event.button == 0 && dragging )
			{			
				getChangeTypeAction();
			}
		}
	}
	
	replacing = false;
	dragging = false;
	mouseupElement = null;
	z = null;
	document.removeEventListener("mouseover", getChangeTypeAction, true);
	event.stopPropagation();

	return false;
}

//  Based on user selection of swap or slide, select action
function getChangeTypeAction()
{	
	if ( mouseupElement != null && replacing ) 
	{			
		if (changeType == "optSwap")
		{	
			replace_it()	
		}
		else if (changeType == "optSlide")
		{			
			slide_it()
		}	
	}
	
	return false
}

//  Method to swap images
function replace_it()
{	
	var statDiv = null, statImg = null; 
	var movingDiv = z.parentNode;
	var movingImg = document.getElementById(z.id);
	
	//  An image is dragged to an image slide that doesn't already contain an image
	if ( mouseupElement.className == 'imgDiv' && !mouseupElement.hasChildNodes() )
	{
		movingImg.updated = true;
		mouseupElement.appendChild(movingImg);
	}
	//  An image is dragged to an image
	else if ( mouseupElement.className == 'dragable' )
	{
		statDiv = mouseupElement.parentNode;
		statImg = mouseupElement;
		
		statImg.updated = true;
		movingImg.updated = true;
		
		statDiv.replaceChild(movingImg, statImg);
		movingDiv.appendChild(statImg);
	}
	//  An image is dragged to an image slide that contains an image
	else if ( mouseupElement.className == 'imgDiv' && mouseupElement.hasChildNodes() )
	{
		statImg = mouseupElement.childNodes[0];

		statImg.updated = true;
		movingImg.updated = true;
		
		mouseupElement.replaceChild(movingImg, statImg);	
		movingDiv.appendChild(statImg);
	}
}

//  Method used to slide images
function slide_it()
{
	var slideId = null, beginSlide = 0, endSlide = 0
	var statDiv, statImg;
	var tempImgHolder;
	
	bucketImageTest:
	if (mouseupElement != null)
	{	
		// mouseupElement is an image in a bucket
		if (mouseupElement.className == 'dragable' && mouseupElement.parentNode.parentNode.className == 'bucket')
		{
			replace_it();
		}
		// mouseupElement is a bucket slide
		else if (mouseupElement.className == 'imgDiv' && mouseupElement.parentNode.className == 'bucket')
		{
			replace_it(); 
		}
		// This condition is reached only if the mouseupElement is not on a bucket slide or a bucket image
		else
		{  
			break bucketImageTest;	
		}		
		
		return;
	}
	// mouseupElement will be null only if the element on which the mousepointer is located is not an image slide or an image
	else	
	{
		return;
	}
	
	/*** The code below is reached only if the condition above is met where the mouseupElement is not on a bucket slide or a bucket image ***/
	
	//  mouseupElement is an empty page slide
	if ( mouseupElement.className == 'imgDiv' && !mouseupElement.hasChildNodes() && mouseupElement.id != z.parentNode.id)
	{
		replace_it();
		return;
	}
	// mouseupElement is a page slide with an image
	else if ( mouseupElement.className == 'imgDiv' && mouseupElement.hasChildNodes() && mouseupElement.id != z.parentNode.id)
	{
		// Determine the slide number of the image with which the slide will begin
		slideId = mouseupElement.id.split('slide');
	}
	// mouseupElement is a an image on a page slide
	else if ( mouseupElement.className == 'dragable' )
	{
		// Determine the slide number of the image with which the slide will begin
		slideId = mouseupElement.parentNode.id.split('slide');
	}
	else
	{	
		return;
	}
		
	beginSlide = slideId[1];
	endSlide = imgsAcross * imgsDown;
	
	tempImgHolder = document.getElementById(z.id);
	tempImgHolder.parentNode.removeChild(z);
	
	for (var i = beginSlide; i <= endSlide; i++)
	{
		statDiv = document.getElementById(slideId[0] + 'slide' + i);
		
		if ( statDiv.hasChildNodes() )
		{
			statImg = statDiv.childNodes[0];
			tempImgHolder.updated = true;
			statDiv.replaceChild(tempImgHolder, statImg);
			tempImgHolder = statImg;
		}
		else
		{
			statDiv.appendChild(tempImgHolder);
			tempImgHolder = null;
			break;
		}
	}
	
	if ( tempImgHolder != null )
	{
		SetNextBucketPosition();
		statDiv = document.getElementById(nextBucketSlide);
		statDiv.appendChild(tempImgHolder);
	}
}


/********** IMAGE VIEWER **********/
/*** Calculates the imageViewer slide width based on the number of slides per page and the size of the imageViewer ***/

function sizeImageViewerSlides ()
{	
	// Get user agent
	var ua = navigator.userAgent;
		
	//  The gutters are the spaces between slides
	gutterX = viewerGutterX; 
	gutterY = viewerGutterY;
		
	// Get style information for the div element imageViewer and imageViewerSlide
	var pageImageViewer = document.getElementById("imageViewer")
	
	if (window.external && /Win/.test(ua) && !/Firefox/.test(ua))
	{	
		var computedStyle = pageImageViewer.currentStyle;
		imageViewerWidth = parseInt (computedStyle.width);
		imageViewerHeight = parseInt (computedStyle.height);
	}
	else if (window.external && /Mac/.test(ua) && !/Firefox/.test(ua))
	{	
		var styleRules = document.styleSheets["mciSiteCSS"].cssRules
		
		for (rule in styleRules)
		{
			var ruleName = styleRules[rule].selectorText;
			var regExpr = new RegExp("imageViewer");
			
			if (regExpr.test(ruleName))
			{
				var computedStyle = styleRules[rule].style;
				break;
			}
		}
		
		if (computedStyle)
		{
			imageViewerWidth = parseInt (computedStyle["width"]);
			imageViewerHeight = parseInt (computedStyle["height"]);
		}
		else
		{
			alert("The computedStyle value is NULL.");
		}
	}
	else if (/Safari/.test(ua))
	{	
		var string = "";
		for (i=0; i<document.styleSheets[0].cssRules.length; i++)
		{
			var selText = document.styleSheets[0].rules[i].selectorText
			
			// In the css file, the tag might be imageViewer but when enumerating through the rules, the rules are all lowercased.
			if(selText == "#imageviewer")
			{
				imageViewerWidth = parseInt(document.styleSheets[0].cssRules[i].style["width"])
				imageViewerHeight = parseInt(document.styleSheets[0].cssRules[i].style["height"])
				break;
			}
		}
	}
	else if (/Firefox/.test(ua))
	{   	
		var computedStyle = document.defaultView.getComputedStyle(pageImageViewer, '');
		imageViewerWidth = parseInt (computedStyle.getPropertyValue("width"));
		imageViewerHeight = parseInt (computedStyle.getPropertyValue("height"));
	}
	else
	{   	
		var computedStyle = document.defaultView.getComputedStyle(pageImageViewer, '');
		imageViewerWidth = parseInt (computedStyle.getPropertyValue("width"));
		imageViewerHeight = parseInt (computedStyle.getPropertyValue("height"));
	}
	
	var spacersAcross, spacersDown
	spacersAcross = (imgsAcross - 1) * gutterX;
	spacersDown = (imgsDown - 1) * gutterY;
	
	/*** Internet Explorer adds the border internally to the slide keeping within slide dimensions.
		 Mozilla adds the border to the slide; thereby, increasing the slide dimensions. ***/
	slideWidth = ( imageViewerWidth - spacersAcross - (2*moverPanelBorderWidth) ) / imgsAcross;
	slideHeight = ( imageViewerHeight - spacersDown - (2*moverPanelBorderWidth) ) / imgsDown;
	
	arryImages = null;
	arryImages = new Array();
}

/*** Layout the page ***/
function layoutImageViewer(pageNum)
{	
	// Get user agent
	var ua = navigator.userAgent;
	var computedStylePage, computedStyleSlide, computedStyleImage;
	var textNode = document.createTextNode('');	
	//var browserAdjust = 0;
	
	var viewerTop, viewerLeft;

	// Get style information for imageViewer, imageViewerSlide in css file
	var pageImageViewer = document.getElementById("imageViewer")
	var slideImageViewer = document.getElementById("imageViewerSlide")
	var imgImageViewer = document.getElementById("imageViewerImage")
	
	if (window.external && /Win/.test(ua) && !/Firefox/.test(ua))
	{
		computedStylePage = pageImageViewer.currentStyle
		viewerTop = parseInt (computedStylePage.top);
		viewerLeft = parseInt (computedStylePage.left);
		
		computedStyleSlide = slideImageViewer.currentStyle;
		slideBorderWidth = parseInt (computedStyleSlide.borderLeftWidth);
		slideBorderColor = computedStyleSlide.borderLeftColor;
		slideBorderStyle = computedStyleSlide.borderLeftStyle;
		slideBackgroundColor = computedStyleSlide.backgroundColor;
		
		computedStyleImage = imgImageViewer.currentStyle;
		imageBorderWidth = parseInt (computedStyleImage.borderLeftWidth);
		imageBorderColor = computedStyleImage.borderLeftColor;
		imageBorderStyle = computedStyleImage.borderLeftStyle;
	}
	else if (window.external && /Mac/.test(ua) && !/Firefox/.test(ua))
	{
		var styleRules = document.styleSheets["artSiteCSS"].cssRules
		
		// Get style rules for imageViewer
		for (rule in styleRules)
		{
			var ruleName = styleRules[rule].selectorText;
			var regExpr = new RegExp("imageViewer");
			
			if (regExpr.test(ruleName))
			{
				computedStylePage = styleRules[rule].style;
				break;
			}
		}
		
		// Get style rules for imageViewerSlide
		for (rule in styleRules)
		{
			var ruleName = styleRules[rule].selectorText;
			var regExpr = new RegExp("imageViewerSlide");
			
			if (regExpr.test(ruleName))
			{
				computedStyleSlide = styleRules[rule].style;
				break;
			}
		}
		
		// Get style rules for imageViewerImage
		for (rule in styleRules)
		{
			var ruleName = styleRules[rule].selectorText;
			var regExpr = new RegExp("imageViewerImage");
			
			if (regExpr.test(ruleName))
			{
				computedStyleImage = styleRules[rule].style;
				break;
			}
		}
		
		if (computedStylePage)
		{	
			viewerTop = parseInt (computedStylePage["top"]);
			viewerLeft = parseInt (computedStylePage["left"]);
		}
		else
		{
			alert("The computedStylePage value is NULL.");
		}
		
		if (computedStyleSlide)
		{
			slideBorderWidth = parseInt (computedStyleSlide["borderWidth"]);
			slideBorderColor = computedStyleSlide["borderColor"];
			slideBorderStyle = computedStyleSlide["borderStyle"];
			slideBackgroundColor = computedStyleSlide["backgroundColor"]; 
		}
		else
		{
			alert("The computedStyleSlide value is NULL.");
		}
		
		if (computedStyleImage)
		{
			imageBorderWidth = parseInt (computedStyleImage["borderWidth"]);
			imageBorderColor = computedStyleImage["borderColor"];
			imageBorderStyle = computedStyleImage["borderStyle"]; 
		}
		else
		{
			alert("The computedStyleImage value is NULL.");
		}
	}
	else if (/Safari/.test(ua))
	{
		for (i=0; i<document.styleSheets[0].cssRules.length; i++)
		{
			var selText = document.styleSheets[0].rules[i].selectorText
			
			if(selText == "#imageviewer")
			{
				viewerTop = parseInt(document.styleSheets[0].cssRules[i].style["top"])
				viewerLeft = parseInt(document.styleSheets[0].cssRules[i].style["left"])
				break;
			}
		}
		
		for (i=0; i<document.styleSheets[0].cssRules.length; i++)
		{
			var selText = document.styleSheets[0].rules[i].selectorText
			
			if(selText == "#imageviewerslide")
			{
				slideBorderWidth = parseInt(document.styleSheets[0].cssRules[i].style["border-left-width"]);
				slideBorderColor = document.styleSheets[0].cssRules[i].style["border-left-color"];
				slideBorderStyle = document.styleSheets[0].cssRules[i].style["border-left-style"];
				slideBackgroundColor = document.styleSheets[0].cssRules[i].style["background-color"];
				break;
			}
		}
		
		for (i=0; i<document.styleSheets[0].cssRules.length; i++)
		{
			var selText = document.styleSheets[0].rules[i].selectorText
			
			if(selText == "#imageviewerimage")
			{
				imageBorderWidth = parseInt(document.styleSheets[0].cssRules[i].style["border-left-width"]);
				imageBorderColor = document.styleSheets[0].cssRules[i].style["border-left-color"];
				imageBorderStyle = document.styleSheets[0].cssRules[i].style["border-left-style"];
				break;
			}
		}
		
	}
	else if (/Firefox/.test(ua))
	{	
		computedStylePage = document.defaultView.getComputedStyle(pageImageViewer, '')
		viewerTop = parseInt (computedStylePage.getPropertyValue("top"));
		viewerLeft = parseInt (computedStylePage.getPropertyValue("left"));
		
		computedStyleSlide = document.defaultView.getComputedStyle(slideImageViewer, '');
		slideBorderWidth = parseInt (computedStyleSlide.getPropertyValue("border-left-width"));
		slideBorderColor = computedStyleSlide.getPropertyValue("border-left-color");
		slideBorderStyle = computedStyleSlide.getPropertyValue("border-left-style");
		slideBackgroundColor = computedStyleSlide.getPropertyValue("background-color");
		
		computedStyleImage = document.defaultView.getComputedStyle(imgImageViewer, '');
		imageBorderWidth = parseInt (computedStyleImage.getPropertyValue("border-left-width"));
		imageBorderColor = computedStyleImage.getPropertyValue("border-left-color");
		imageBorderStyle = computedStyleImage.getPropertyValue("border-left-style");
	}
	else
	{	
		computedStylePage = document.defaultView.getComputedStyle(pageImageViewer, '')
		viewerTop = parseInt (computedStylePage.getPropertyValue("top"));
		viewerLeft = parseInt (computedStylePage.getPropertyValue("left"));
		
		computedStyleSlide = document.defaultView.getComputedStyle(slideImageViewer, '');
		slideBorderWidth = parseInt (computedStyleSlide.getPropertyValue("border-left-width"));
		slideBorderColor = computedStyleSlide.getPropertyValue("border-left-color");
		slideBorderStyle = computedStyleSlide.getPropertyValue("border-left-style");
		slideBackgroundColor = computedStyleSlide.getPropertyValue("background-color");
		
		computedStyleImage = document.defaultView.getComputedStyle(imgImageViewer, '');
		imageBorderWidth = parseInt (computedStyleImage.getPropertyValue("border-left-width"));
		imageBorderColor = computedStyleImage.getPropertyValue("border-left-color");
		imageBorderStyle = computedStyleImage.getPropertyValue("border-left-style");
	}
	
	textTop = slideHeight - 15 - (2*slideBorderWidth);
	
	// Create a div to be filled with image name info during an image rollover
	divCatNum = document.createElement("div");
	
	if (navigator.appName != "Microsoft Internet Explorer")
	{	
		slideWidth = slideWidth - (2*slideBorderWidth);
		
		slideHeight = slideHeight - (2*slideBorderWidth);
		browserAdjust = (2*slideBorderWidth);
		
		divCatNum.setAttribute("style", "position: absolute; left:8px; top:" + textTop + "px; " + 
										"font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;" + 
										"font-size: 10px; color: #999999; ");
	}
	else
	{	
		broswerAdjust = 0;
		
		divCatNum.style["position"] = "absolute"; 
		divCatNum.style["left"] = "8px"; 
		divCatNum.style["top"] = textTop + "px";	
		divCatNum.style["fontFamily"] = "Verdana, Arial, Helvetica, Sans-Serif, Tahoma";
		divCatNum.style["fontSize"] = "10px"; 
		divCatNum.style["color"] = "#999999"; 
		//divCatNum.style["visibility"] = "visible";
	}
	
	divCatNum.appendChild(textNode);	
	
	setTop(arryImages);
	createSlides(pageImageViewer, pageNum);
	fillSlides('', true, arryImages, 'page');
	
	if (window.external && /Mac/.test(ua) && !/Firefox/.test(ua))
	{
		window.location.reload(true);
	}
}


/*** Layout the page ***/
function layoutProjectViewer(pageNum, projectId)
{	
	// Get user agent
	var ua = navigator.userAgent;
	var computedStylePage, computedStyleSlide, computedStyleImage;
	var textNode = document.createTextNode('');	
	//var browserAdjust = 0;
	
	var viewerTop, viewerLeft;

	// Get style information for imageViewer, imageViewerSlide in css file
	var pageImageViewer = document.getElementById("imageViewer")
	var slideImageViewer = document.getElementById("imageViewerSlide")
	var imgImageViewer = document.getElementById("imageViewerImage")
	
	if (window.external && /Win/.test(ua) && !/Firefox/.test(ua))
	{
		computedStylePage = pageImageViewer.currentStyle
		viewerTop = parseInt (computedStylePage.top);
		viewerLeft = parseInt (computedStylePage.left);
		
		computedStyleSlide = slideImageViewer.currentStyle;
		slideBorderWidth = parseInt (computedStyleSlide.borderLeftWidth);
		slideBorderColor = computedStyleSlide.borderLeftColor;
		slideBorderStyle = computedStyleSlide.borderLeftStyle;
		slideBackgroundColor = computedStyleSlide.backgroundColor;
		
		computedStyleImage = imgImageViewer.currentStyle;
		imageBorderWidth = parseInt (computedStyleImage.borderLeftWidth);
		imageBorderColor = computedStyleImage.borderLeftColor;
		imageBorderStyle = computedStyleImage.borderLeftStyle;
	}
	else if (window.external && /Mac/.test(ua) && !/Firefox/.test(ua))
	{
		var styleRules = document.styleSheets["artSiteCSS"].cssRules
		
		// Get style rules for imageViewer
		for (rule in styleRules)
		{
			var ruleName = styleRules[rule].selectorText;
			var regExpr = new RegExp("imageViewer");
			
			if (regExpr.test(ruleName))
			{
				computedStylePage = styleRules[rule].style;
				break;
			}
		}
		
		// Get style rules for imageViewerSlide
		for (rule in styleRules)
		{
			var ruleName = styleRules[rule].selectorText;
			var regExpr = new RegExp("imageViewerSlide");
			
			if (regExpr.test(ruleName))
			{
				computedStyleSlide = styleRules[rule].style;
				break;
			}
		}
		
		// Get style rules for imageViewerImage
		for (rule in styleRules)
		{
			var ruleName = styleRules[rule].selectorText;
			var regExpr = new RegExp("imageViewerImage");
			
			if (regExpr.test(ruleName))
			{
				computedStyleImage = styleRules[rule].style;
				break;
			}
		}
		
		if (computedStylePage)
		{	
			viewerTop = parseInt (computedStylePage["top"]);
			viewerLeft = parseInt (computedStylePage["left"]);
		}
		else
		{
			alert("The computedStylePage value is NULL.");
		}
		
		if (computedStyleSlide)
		{
			slideBorderWidth = parseInt (computedStyleSlide["borderWidth"]);
			slideBorderColor = computedStyleSlide["borderColor"];
			slideBorderStyle = computedStyleSlide["borderStyle"];
			slideBackgroundColor = computedStyleSlide["backgroundColor"]; 
		}
		else
		{
			alert("The computedStyleSlide value is NULL.");
		}
		
		if (computedStyleImage)
		{
			imageBorderWidth = parseInt (computedStyleImage["borderWidth"]);
			imageBorderColor = computedStyleImage["borderColor"];
			imageBorderStyle = computedStyleImage["borderStyle"]; 
		}
		else
		{
			alert("The computedStyleImage value is NULL.");
		}
	}
	else if (/Safari/.test(ua))
	{
		for (i=0; i<document.styleSheets[0].cssRules.length; i++)
		{
			var selText = document.styleSheets[0].rules[i].selectorText
			
			//if(selText == "*[ID\"imageviewer\"]")
			if(selText == "#imageviewer")
			{	
				vtop = document.styleSheets[0].cssRules[i].style["top"];
				vleft = document.styleSheets[0].cssRules[i].style["left"];
				
				viewerTop = parseInt(vtop);
				viewerLeft = parseInt(vleft);
				break;
			}
		}
		
		for (i=0; i<document.styleSheets[0].cssRules.length; i++)
		{
			var selText = document.styleSheets[0].rules[i].selectorText
			
			//if(selText == "*[ID\"imageviewerslide\"]")
			if(selText == "#imageviewerslide")
			{	
				slideBorderWidth = parseInt(document.styleSheets[0].cssRules[i].style["border-left-width"]);
				slideBorderColor = document.styleSheets[0].cssRules[i].style["border-left-color"];
				slideBorderStyle = document.styleSheets[0].cssRules[i].style["border-left-style"];
				slideBackgroundColor = document.styleSheets[0].cssRules[i].style["background-color"];			
				break;
			}
		}
		
		for (i=0; i<document.styleSheets[0].cssRules.length; i++)
		{
			var selText = document.styleSheets[0].rules[i].selectorText
			
			//if(selText == "*[ID\"imageviewerimage\"]")
			if(selText == "#imageviewerimage")
			{	
				imageBorderWidth = parseInt(document.styleSheets[0].cssRules[i].style["border-left-width"]);
				imageBorderColor = document.styleSheets[0].cssRules[i].style["border-left-color"];
				imageBorderStyle = document.styleSheets[0].cssRules[i].style["border-left-style"];
				break;
			}
		}
	}
	else if (/Firefox/.test(ua))
	{	
		computedStylePage = document.defaultView.getComputedStyle(pageImageViewer, '')
		viewerTop = parseInt (computedStylePage.getPropertyValue("top"));
		viewerLeft = parseInt (computedStylePage.getPropertyValue("left"));
		
		computedStyleSlide = document.defaultView.getComputedStyle(slideImageViewer, '');
		slideBorderWidth = parseInt (computedStyleSlide.getPropertyValue("border-left-width"));
		slideBorderColor = computedStyleSlide.getPropertyValue("border-left-color");
		slideBorderStyle = computedStyleSlide.getPropertyValue("border-left-style");
		slideBackgroundColor = computedStyleSlide.getPropertyValue("background-color");
		
		computedStyleImage = document.defaultView.getComputedStyle(imgImageViewer, '');
		imageBorderWidth = parseInt (computedStyleImage.getPropertyValue("border-left-width"));
		imageBorderColor = computedStyleImage.getPropertyValue("border-left-color");
		imageBorderStyle = computedStyleImage.getPropertyValue("border-left-style");
	}
	else
	{	
		computedStylePage = document.defaultView.getComputedStyle(pageImageViewer, '')
		viewerTop = parseInt (computedStylePage.getPropertyValue("top"));
		viewerLeft = parseInt (computedStylePage.getPropertyValue("left"));
		
		computedStyleSlide = document.defaultView.getComputedStyle(slideImageViewer, '');
		slideBorderWidth = parseInt (computedStyleSlide.getPropertyValue("border-left-width"));
		slideBorderColor = computedStyleSlide.getPropertyValue("border-left-color");
		slideBorderStyle = computedStyleSlide.getPropertyValue("border-left-style");
		slideBackgroundColor = computedStyleSlide.getPropertyValue("background-color");
		
		computedStyleImage = document.defaultView.getComputedStyle(imgImageViewer, '');
		imageBorderWidth = parseInt (computedStyleImage.getPropertyValue("border-left-width"));
		imageBorderColor = computedStyleImage.getPropertyValue("border-left-color");
		imageBorderStyle = computedStyleImage.getPropertyValue("border-left-style");
	}
	
	textTop = slideHeight - 15 - (2*slideBorderWidth);
	
	// Create a div to be filled with image name info during an image rollover
	divCatNum = document.createElement("div");
	
	if (navigator.appName != "Microsoft Internet Explorer")
	{	
		slideWidth = slideWidth - (2*slideBorderWidth);
		
		slideHeight = slideHeight - (2*slideBorderWidth);
		browserAdjust = (2*slideBorderWidth);
		
		divCatNum.setAttribute("style", "position: absolute; left:8px; top:" + textTop + "px; " + 
										"font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;" + 
										"font-size: 10px; color: #999999; ");
	}
	else
	{	
		broswerAdjust = 0;
		
		divCatNum.style["position"] = "absolute"; 
		divCatNum.style["left"] = "8px"; 
		divCatNum.style["top"] = textTop + "px";	
		divCatNum.style["fontFamily"] = "Verdana, Arial, Helvetica, Sans-Serif, Tahoma";
		divCatNum.style["fontSize"] = "10px"; 
		divCatNum.style["color"] = "#999999"; 
		//divCatNum.style["visibility"] = "visible";
	}
	
	divCatNum.appendChild(textNode);	
	
	setTop(arryProjectImages);
	createSlides(pageImageViewer, pageNum);
	fillBookSlides('', true, arryProjectImages[projectId], 'page', pageNum);

	if (window.external && /Mac/.test(ua) && !/Firefox/.test(ua))
	{
		window.location.reload(true);
	}
}


/*** Image Viewer Event Handlers and supporting functions ***/

// Mouse Event used in imageViewer
function imgMouseOver(event)
{	
	var divSlideText = document.getElementById("divSlideText");
	var slideText;
	
	if (navigator.appName == "Microsoft Internet Explorer")
	{
		window.event.srcElement.style.cursor = "hand";
		
		// Set the text equal to the rollover text
		for (i=1; i<arryImageDetails.length; i++)
		{
			if ( arryImageDetails[i]["artId"] == window.event.srcElement.id )
			{	
				slideText = arryImageDetails[i]["rolloverText"];
				break;
			}
		}
		
		// Set the text equal to the rollover text
		divCatNum.childNodes[0].data = slideText;
		
		divSlideText.appendChild(divCatNum);						
				
		window.event.cancelBubble = true;
	}
	else
	{	
		event.target.style.cursor = "pointer";
		
		// Set the text equal to the rollover text
		for (i=1; i<arryImageDetails.length; i++)
		{
			if ( arryImageDetails[i]["artId"] == event.target.id )
			{	
				slideText = arryImageDetails[i]["rolloverText"];
				break;
			}
		}
		
		// Set the text equal to the rollover text
		divCatNum.childNodes[0].data = slideText;
		
		divSlideText.appendChild(divCatNum)						
				
		event.stopPropagation();
	}	
}

// Mouse Event used in imageViewer
function imgMouseOut(event)
{	
	var divSlideText = document.getElementById("divSlideText");
	
	if (navigator.appName == "Microsoft Internet Explorer")
	{
		window.event.srcElement.style.cursor = "default";
		
		// Set the text to null
		divCatNum.childNodes[0].data = null
		divSlideText.removeChild(divCatNum);
		
		window.event.cancelBubble = true;
	}
	else
	{
		event.target.style.cursor = "default";
		
		// Set the text to null
		divCatNum.childNodes[0].data = null;
		divSlideText.removeChild(divCatNum);
		
		event.stopPropagation();
	}
}

// Mouse Event used in imageViewer
function imgMouseClick(event)
{	
	if (navigator.appName == "Microsoft Internet Explorer")
	{	
		var imgIdn = window.event.srcElement.id;
		var displayTypeIdn = window.event.srcElement.displayTypeId;
		window.event.cancelBubble = true;
	}
	else
	{
		var imgIdn = event.target.id;
		var displayTypeIdn = event.target.displayTypeId;
		event.stopPropagation();
	}
	
	if (displayTypeIdn == 1)	//Default display of image display
	{    
		//var windowHandle = window.open(siteRootPath + "imgDetail/detail.cfm?Img_ID=" + imgIdn, "",
		//				"toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=750,height=460");
		var imgdiv = document.getElementById("detailImageElement");		
		var imgdetaildiv = document.getElementById("imgDetailDiv");
		
		var detailTitle = document.getElementById("detailTitle");
		var detailDescr = document.getElementById("detailDescr");
		var detailProjectTitle = document.getElementById("detailProjectTitle");
		var detailClient = document.getElementById("detailClient");
		var detailPrice = document.getElementById("detailPrice");
		var titleNode, descrNode, projectTitleNode, clientNode, blankNode, priceNode;
		
		blankNode = document.createTextNode(" ");
		
		for (i=1; i<arryImageDetails.length; i++)
		{
			if ( arryImageDetails[i]["artId"] == imgIdn )
			{	
				imgdiv.src = siteRootPath + "images/" + arryImageDetails[i]["filename"];
				imgdiv.style.width = arryImageDetails[i]["dimX"] + "px";
				imgdiv.style.height = arryImageDetails[i]["dimY"] + "px";
				
				//  If image height is greater than the height of imgDetailDiv, recalculate the image dimensions to fit inside imgDetailDiv
				if (imgdiv.style.height > imgdetaildiv.style.height)
				{   
					imgdiv.style.width = parseFloat(imgdiv.style.width)/parseFloat(imgdiv.style.height) * parseFloat(imgdetaildiv.style.height)
					imgdiv.style.height = imgdetaildiv.style.height
				}
				
				titleNode = document.createTextNode(arryImageDetails[i]["title"]);
				descrNode = document.createTextNode(arryImageDetails[i]["summary"]);
				projectTitleNode = document.createTextNode(arryImageDetails[i]["project_title"]);
				clientNode = document.createTextNode(arryImageDetails[i]["client_name"]);
				priceNode = document.createTextNode("$" + arryImageDetails[i]["price"]);
				
				break;
			}
		}
		
		// If there exists a previous text node, delete and release it.
		while ( detailTitle.hasChildNodes() )
		{
			var txtNode = detailTitle.removeChild(detailTitle.lastChild);
			txtNode = null;
		}
		detailTitle.appendChild(titleNode);
		
		while ( detailDescr.hasChildNodes() )
		{
			var txtNode = detailDescr.removeChild(detailDescr.lastChild);
			txtNode = null;	
		}
		detailDescr.appendChild(descrNode);
		
		while ( detailProjectTitle.hasChildNodes() )
		{
			var txtNode = detailProjectTitle.removeChild(detailProjectTitle.lastChild);
			txtNode = null;	
		}
		detailProjectTitle.appendChild(projectTitleNode);
		
		while ( detailClient.hasChildNodes() )
		{
			var txtNode = detailClient.removeChild(detailClient.lastChild);
			txtNode = null;	
		}
		detailClient.appendChild(clientNode);
		
		if (detailPrice != null) {
			while ( detailPrice.hasChildNodes() )
			{
				var txtNode = detailPrice.removeChild(detailPrice.lastChild);
				txtNode = null;	
			}
			detailPrice.appendChild(priceNode);
		}
		
	}
	else if (displayTypeIdn == 2)  //Book display
	{	
		//window.location = siteRootPath + "imgDetail/bookViewer.cfm?cat_id=" + url_catId + "&subcat_id=" + url_subcatId  + "&art_id=" + imgIdn;
		var imgDetailDiv = document.getElementById("imgDetailDiv");
		var imgdiv = document.getElementById("detailImageElement");
		var detailTitle = document.getElementById("detailTitle");
		var detailAuthor = document.getElementById("detailAuthor");
		var detailDescr = document.getElementById("detailDescr");
		
		var detailPublisher = document.getElementById("detailPublisher");
		var detailPubDate = document.getElementById("detailPubDate");
		var detailISBN = document.getElementById("detailISBN");
		var detailAward1 = document.getElementById("detailAward1");
		var detailAward2 = document.getElementById("detailAward2");
		var detailAward3 = document.getElementById("detailAward3");
		var detailReview = document.getElementById("detailReview");
		var detailPurchase = document.getElementById("detailPurchase");
		
		
		var titleNode, authorNode, descrNode, publisherNode, pubDateNode, isbnNode, award1Node, award2Node, award3Node, reviewNode, purchaseNode;
		
		// Display image selection arrows and find the filename to use as the image source.
		for (i=1; i<arryImageDetails.length; i++)
		{
			if ( arryImageDetails[i]["artId"] == imgIdn )
			{	
				selectedProjectId = arryImageDetails[i]["projectId"];
				projectIndex = 0;
				
//				arrowLeft.style["visibility"] = "hidden";
				
//				if (arryProjectImages[selectedProjectId].length > 1)
//					arrowRight.style["visibility"] = "visible";
//				else
//					arrowRight.style["visibility"] = "hidden";
				
				imgdiv.src = "../images/" + arryImageDetails[i]["filename"];
				imgdiv.style.width = arryImageDetails[i]["dimX"] + "px";
				imgdiv.style.height = arryImageDetails[i]["dimY"] + "px";
				
//				if ( parseInt(imgdiv.style.height) > parseInt(imgDetailDiv.style.height) )
//				{
//					resizeFactor = parseInt(imgDetailDiv.style.height)/parseInt(imgdiv.style.height);		
//					imgdiv.style.width = resizeFactor*arryImageDetails[i]["dimX"] + "px";
//					imgdiv.style.height = resizeFactor*arryImageDetails[i]["dimY"] + "px";
//				}
				
//				if ( parseInt(imgdiv.style.width) > parseInt(imgDetailDiv.style.height) )		
//				{	
//					resizeFactor = parseInt(imgDetailDiv.style.height)/parseInt(imgdiv.style.width);
//					imgdiv.style.width = resizeFactor*arryImageDetails[i]["dimX"] + "px";
//					imgdiv.style.height = resizeFactor*arryImageDetails[i]["dimY"] + "px";
//				}
				
				//  If image height is greater than the height of imgDetailDiv, recalculate the image dimensions to fit inside imgDetailDiv
				if (imgdiv.style.height > imgDetailDiv.style.height)
				{   
					imgdiv.style.width = parseFloat(imgdiv.style.width)/parseFloat(imgdiv.style.height) * parseFloat(imgDetailDiv.style.height)
					imgdiv.style.height = imgDetailDiv.style.height
				}
						
				//imgdiv.style.top = (parseInt(imgDetailDiv.style.height) - parseInt(imgdiv.style.height) )/2 + "px";

				
				titleNode = document.createTextNode(arryImageDetails[i]["title"]);
				descrNode = document.createTextNode(arryImageDetails[i]["summary"]);
				
				/***
				publisherNode = document.createTextNode(arryImageDetails[i]["publisher"]);
				pubDateNode = document.createTextNode(arryProjectImages[i]["pub_date"]);
				isbnNode = document.createTextNode(arryProjectImages[i]["isbn"]);
				award1Node = document.createTextNode(arryProjectImages[i]["award1"]);
				award2Node = document.createTextNode(arryProjectImages[i]["award2"]);
				award3Node = document.createTextNode(arryProjectImages[i]["award3"]);
				reviewNode = document.createTextNode(arryProjectImages[i]["review_link"]);
				purchaseNode  = document.createTextNode(arryProjectImages[i]["purchase_link"]);
				***/
				break;
			}
		}
		
		blankNode = document.createTextNode(" ");
		
		fillNode( detailTitle, titleNode);
		fillNode( detailAuthor, blankNode);
		fillNode( detailDescr, descrNode);
		fillNode( detailPublisher, blankNode);
		fillNode( detailPubDate, blankNode);
		fillNode( detailISBN, blankNode);
		fillNode( detailAward1, blankNode);
		fillNode( detailAward2, blankNode);
		fillNode( detailAward3, blankNode);
		fillNode( detailReview, blankNode);
		fillNode( detailPurchase, blankNode);
		
		
		//  Display the index location of the current image within the group of project images
		var divPageTurner = document.getElementById("pageTurner");
		for (i=0; i<divPageTurner.childNodes.length; i++)
		{	
			if (divPageTurner.childNodes[i].id == 'arrowR')
			{		
					divPageTurner.childNodes[i-1].data = "  " + (projectIndex + 1) + " of " + arryProjectImages[selectedProjectId].length + " ";
					break;
			}
		}
	}
}

function fillNode( nodeName, newNodeChild)
{
	// If there exists a previous text node, delete and release it.
	while ( nodeName.hasChildNodes() )
	{
		var txtNode = nodeName.removeChild(nodeName.lastChild);
		txtNode = null;
	}
	nodeName.appendChild(newNodeChild);
}

// The arrowLeft functionality was removed for the Chodos project because dsp_pageNumbers.cfm handles the page turning
function bookTitleClick(bookID)
{	alert('1503');
	var imgDetailDiv = document.getElementById("imgDetailDiv");
	var imgdiv = document.getElementById("detailImageElement");
	var detailTitle = document.getElementById("detailTitle");
	var detailAuthor = document.getElementById("detailAuthor");
	var detailDescr = document.getElementById("detailDescr");
	//var arrowLeft = document.getElementById("arrowL");
	//var arrowRight = document.getElementById("arrowR");
	var titleNode, descrNode, authorNode;
	var imgIdn = arryProjectImages[bookID][0]["imgId"]
	var resizeFactor = 1;
	
	// Display image selection arrows and find the filename to use as the image source.
	for (i=1; i<arryImageDetails.length; i++)
	{
		if ( arryImageDetails[i]["artId"] == imgIdn )
		{	
			selectedProjectId = arryImageDetails[i]["projectId"];
			projectIndex = 0;
			
			//arrowLeft.style["visibility"] = "hidden";
			
//			if (arryProjectImages[selectedProjectId].length > 1)
//				arrowRight.style["visibility"] = "visible";
//			else
//				arrowRight.style["visibility"] = "hidden";
			
			imgdiv.src = "../images/" + arryImageDetails[i]["filename"];
			imgdiv.style.width = arryImageDetails[i]["dimX"] + "px";
			imgdiv.style.height = arryImageDetails[i]["dimY"] + "px";
			
			if ( parseInt(imgdiv.style.height) > parseInt(imgDetailDiv.style.height) )
			{
				resizeFactor = parseInt(imgDetailDiv.style.height)/parseInt(imgdiv.style.height);		
				imgdiv.style.width = resizeFactor*arryImageDetails[i]["dimX"] + "px";
				imgdiv.style.height = resizeFactor*arryImageDetails[i]["dimY"] + "px";
			}

			
					
			imgdiv.style.top = (parseInt(imgDetailDiv.style.height) - parseInt(imgdiv.style.height) )/2 + "px";
			
			titleNode = document.createTextNode(arryImageDetails[i]["title"]);
			authorNode = document.createTextNode(arryImageDetails[i]["author"]);
			descrNode = document.createTextNode(arryImageDetails[i]["summary"]);
			
			break;
		}
	}
	
	// If there exists a previous text node, delete and release it.
	while ( detailTitle.hasChildNodes() )
	{
		var txtNode = detailTitle.removeChild(detailTitle.lastChild);
		txtNode = null;
	}
	detailTitle.appendChild(titleNode);
	/***
	while ( detailAuthor.hasChildNodes() )
	{
		var txtNode = detailAuthor.removeChild(detailAuthor.lastChild);
		txtNode = null;	
	}
	detailAuthor.appendChild(authorNode);	
	***/
	while ( detailDescr.hasChildNodes() )
	{
		var txtNode = detailDescr.removeChild(detailDescr.lastChild);
		txtNode = null;	
	}
	detailDescr.appendChild(descrNode);
	
	//  Display the index location of the current image within the group of project images
	var divPageTurner = document.getElementById("pageTurner");
	for (i=0; i<divPageTurner.childNodes.length; i++)
	{	
		if (divPageTurner.childNodes[i].id == 'arrowR')
		{		
				divPageTurner.childNodes[i-1].data = "  " + (projectIndex + 1) + " of " + arryProjectImages[selectedProjectId].length + " ";
				break;
		}
	}
}

function showNextExcerpt()
{
	var imgDetailDiv = document.getElementById("imgDetailDiv");
	var imgdiv = document.getElementById("detailImageElement");
	var divPageTurner = document.getElementById("pageTurner");
	var arrowLeft = document.getElementById("arrowL");
	var arrowRight = document.getElementById("arrowR");	
	
	projectIndex++;
	
	if (arryProjectImages[selectedProjectId][projectIndex])
	{
		imgdiv.src = "../images/" + arryProjectImages[selectedProjectId][projectIndex]["imgName"];
		imgdiv.style.width = arryProjectImages[selectedProjectId][projectIndex]["pDimX"] + "px";
		imgdiv.style.height = arryProjectImages[selectedProjectId][projectIndex]["pDimY"] + "px";
		imgdiv.style.top = (parseInt(imgDetailDiv.style.height) - arryProjectImages[selectedProjectId][projectIndex]["pDimY"])/2 + "px";
							
		for (i=0; i<divPageTurner.childNodes.length; i++)
		{	
			if (divPageTurner.childNodes[i].id == 'arrowR')
			{		
					divPageTurner.childNodes[i-1].data = "  " + (projectIndex + 1) + " of " + arryProjectImages[selectedProjectId].length + " ";
					break;
			}
		}
		
		arrowLeft.style["visibility"] = "visible";
		
		if (!arryProjectImages[selectedProjectId][projectIndex+1]) {
			arrowRight.style["visibility"] = "hidden";
		}
		
		var detailTitle = document.getElementById("detailTitle");
		var detailDescr = document.getElementById("detailDescr");
		var currentImgView = arryProjectImages[selectedProjectId][projectIndex];
		var titleNode, descrNode;
		
		titleNode = document.createTextNode(currentImgView["title"]);
		descrNode = document.createTextNode(currentImgView["summary"]);
		
		// If there exists a previous text node, delete and release it.
		while ( detailTitle.hasChildNodes() )
		{
			var txtNode = detailTitle.removeChild(detailTitle.lastChild);
			txtNode = null;
		}
		
		while ( detailDescr.hasChildNodes() )
		{
			var txtNode = detailDescr.removeChild(detailDescr.lastChild);
			txtNode = null;	
		}
		
		detailTitle.appendChild(titleNode);
		detailDescr.appendChild(descrNode);
		
	}
	else {
		projectIndex--;
	}
}

function showPrevExcerpt()
{
	var imgDetailDiv = document.getElementById("imgDetailDiv");
	var imgdiv = document.getElementById("detailImageElement");
	var divPageTurner = document.getElementById("pageTurner");
	var arrowLeft = document.getElementById("arrowL");
	var arrowRight = document.getElementById("arrowR");	
	
	projectIndex--;
	
	if (arryProjectImages[selectedProjectId][projectIndex])
	{
		imgdiv.src = "../images/" + arryProjectImages[selectedProjectId][projectIndex]["imgName"];
		imgdiv.style.width = arryProjectImages[selectedProjectId][projectIndex]["pDimX"] + "px";
		imgdiv.style.height = arryProjectImages[selectedProjectId][projectIndex]["pDimY"] + "px";
		imgdiv.style.top = (parseInt(imgDetailDiv.style.height) - arryProjectImages[selectedProjectId][projectIndex]["pDimY"])/2 + "px";
				
		for (i=0; i<divPageTurner.childNodes.length; i++)
		{	
			if (divPageTurner.childNodes[i].id == 'arrowR')
			{		
					divPageTurner.childNodes[i-1].data = "  " + (projectIndex + 1) + " of " + arryProjectImages[selectedProjectId].length + " ";
					break;
			}
		}
		
		arrowRight.style["visibility"] = "visible";
		
		if (!arryProjectImages[selectedProjectId][projectIndex-1]) {
			arrowLeft.style["visibility"] = "hidden";
		}
		
		var detailTitle = document.getElementById("detailTitle");
		var detailDescr = document.getElementById("detailDescr");
		var currentImgView = arryProjectImages[selectedProjectId][projectIndex];
		var titleNode, descrNode;
		
		titleNode = document.createTextNode(currentImgView["title"]);
		descrNode = document.createTextNode(currentImgView["summary"]);
		
		// If there exists a previous text node, delete and release it.
		while ( detailTitle.hasChildNodes() )
		{
			var txtNode = detailTitle.removeChild(detailTitle.lastChild);
			txtNode = null;
		}
		
		while ( detailDescr.hasChildNodes() )
		{
			var txtNode = detailDescr.removeChild(detailDescr.lastChild);
			txtNode = null;	
		}
		
		detailTitle.appendChild(titleNode);
		detailDescr.appendChild(descrNode);
		
	}
	else {
		projectIndex++;
	}
}


/*** COMMON FUNCTIONS OF IMAGE VIEWER AND IMAGE LOADER ***/

function createSlides(pageElement, pageNum)
{
	// First, layout all the divSlides on the page with no images assigned
	var slideCount = 1;
	var textTop = 0;

	var top=moverPanelBorderWidth, left;

	for ( var y = 0; y < imgsDown; y++ )
	{
		left = moverPanelBorderWidth;
	
		// Create divSlides
		for ( var x = 0; x < imgsAcross; x++ ) 
		{
			var divSlide = document.createElement("div")
			divSlide.id = pageElement.className + pageNum + "slide" + slideCount;
			divSlide.className = "imgDiv";
			
			if (navigator.appName == "Microsoft Internet Explorer")
			{	
				divSlide.style["position"] = "absolute";
				divSlide.style["zIndex"] = "0"; 
				divSlide.style["width"] = (slideWidth) + "px"; 
				divSlide.style["height"] = (slideHeight) + "px";
				divSlide.style["top"] = top + "px";
				divSlide.style["left"] = left + "px";
				divSlide.style["backgroundColor"] = slideBackgroundColor; 
				divSlide.style["borderColor"] = slideBorderColor;
				divSlide.style["borderWidth"] = slideBorderWidth + "px";
				divSlide.style["borderStyle"] = slideBorderStyle;
			}
			else
			{								
				divSlide.setAttribute("style",	"position: absolute; z-index: 1; " +
												"background-color: " + slideBackgroundColor + "; " +
												//"border-color: " + slideBorderColor + "; " +
												"border-width: " + slideBorderWidth + "; " +
												//"border-style: " + slideBorderStyle + "; " +
												"width: " + slideWidth + "px; " +
												"height: " + slideHeight + "px; " + 
												"top: " + top + "px; " + 
												"left: " + left + "px;"); 
			}
																							
			pageElement.appendChild(divSlide);
			left = left + slideWidth + gutterX + browserAdjust;  
			slideCount++;
		}
		top = top + slideHeight + gutterY + browserAdjust;
	}
}

function fillSlides(imgClassName, isViewer, images, pageElementClass)
{
	var elementId = null;
	var heightVar = 0;
	var widthVar = 0;
	var slideLeftPos = slideBorderWidth + imageBorderWidth;
	slideCount = 0;
	
	// Next, create images for each array element in arryImages[]
	for ( i=0; i<images.length; i++ )
	{	
		if ( pageElementClass == 'bucket' )
		{
			SetNextBucketPosition();
			elementId = nextBucketSlide;
		}
		else
		{
			elementId = pageElementClass + images[slideCount]['page'] + "slide" + images[slideCount]['imgPosition'];
		}
		
		var slideElement = document.getElementById(elementId);
		var image = document.createElement("img")
		var text = images[slideCount][0].split(".jpg")
				
		image.id = images[slideCount]["imgId"];
		image.src = imagePath + images[slideCount][0]
			
		if (navigator.appName == "Microsoft Internet Explorer")
		{	
			image.style["position"] = "absolute";
			image.style["zIndex"] = "2";
			image.style["borderColor"] = imageBorderColor;
			image.style["borderWidth"] = imageBorderWidth + "px";
			image.style["borderStyle"] = imageBorderStyle;
			image.style["width"] = images[slideCount][1] + "px";
			
			if (isViewer)
			{
				heightVar = imageViewerHeight - 2*(slideBorderWidth - imageBorderWidth)
				widthVar = images[slideCount][1] / images[slideCount][2] * heightVar
				
				image.style["height"] = heightVar + "px";
				image.style["top"] = (slideBorderWidth + imageBorderWidth) + "px";			
				image.style["cursor"] = "hand";
				
				slideElement.setAttribute( "style", "position: absolute; left: " + slideLeftPos + "px;");
				slideLeftPos = slideLeftPos + widthVar + 8;
			}
			else
			{
				image.style["height"] = images[slideCount][2] + "px";
				image.style["top"] = (images[slideCount][3] - slideBorderWidth - imageBorderWidth) + "px";
				image.style["left"] = (images[slideCount][4] - slideBorderWidth - imageBorderWidth) + "px";			
				image.style["cursor"] = "move";
			}
			
			if (document.attachEvent && isViewer)
			{	
				//image.attachEvent("onmouseover", imgMouseOver);
				//image.attachEvent("onmouseout", imgMouseOut);
				image.attachEvent("onclick", imgMouseClick);
				
			}
			else if (isViewer)
			{   
				//image.onmouseover = imgMouseOver;
				//image.onmouseout = imgMouseOut;
				image.onclick = imgMouseClick;
			}
			
		}
		else
		{	
			if ( isViewer )
			{							
				//image.addEventListener("mouseover", imgMouseOver, true);
				//image.addEventListener("mouseout", imgMouseOut, true);
				image.addEventListener("click", imgMouseClick, true);
				
				heightVar = imageViewerHeight - 2*(slideBorderWidth - imageBorderWidth)
				widthVar = images[slideCount][1] / images[slideCount][2] * heightVar
				
				image.setAttribute( "style", "position: absolute; z-index: 2; cursor: pointer; " + 
										"width: " + parseInt(widthVar) + "px; " +
										"height: " + heightVar + "px; " +
										"top: " + (slideBorderWidth + imageBorderWidth) + "px; " + 
										//"border-color: " + imageBorderColor + ";" + 
										"border-width: " + imageBorderWidth + "px; " 
										//+"border-style: " + imageBorderStyle + ";" 
										);
										
				slideElement.setAttribute( "style", "position: absolute; left: " + slideLeftPos + "px;");
				slideLeftPos = slideLeftPos + widthVar + 8;
			}
			else
			{
				image.setAttribute( "style", "position: absolute; z-index: 2; cursor: move; width: " + images[slideCount][1] + "px; " +
										"height: " + images[slideCount][2] + "px; " + 
										"top: " + (images[slideCount][3] - slideBorderWidth - imageBorderWidth ) + "px; " +
										"left: " + (images[slideCount][4] - slideBorderWidth - imageBorderWidth ) + "px; " +
										//"border-color: " + imageBorderColor + ";" + 
										"border-width: " + imageBorderWidth + "px; " 
										//+"border-style: " + imageBorderStyle + ";" 
										);
			}
			
		}
		
		image.text = text[0];
		image.className = imgClassName;
		image.name = images[slideCount][0];
		image.id = images[slideCount]['imgId'];
		image.displayTypeId = images[slideCount]["displayTypeId"];
		image.updated = false;
		
		slideElement.appendChild(image);
		
		slideCount++;
	}
}

function fillBookSlides(imgClassName, isViewer, images, pageElementClass, pageNum)
{
	var elementId = null;
	var heightVar = 0;
	var widthVar = 0;
	var slideLeftPos = slideBorderWidth + imageBorderWidth;
	slideCount = 0;
	
	var x, y, pDimX, pDimY;
	var imgCounter = 0;
	
	for (var idx = 0; idx < images.length; idx++)
	{
		if (images[idx] != null) {
			imgCounter++;
		}
	}
	
	//Remove unused slides
	var idx2;
	for(idx2=imgCounter+1; idx2<=imgsAcross; idx2++)
	{	//alert(idx2 + " of " + imgCounter);
		var unusedSlide = document.getElementById(pageElementClass + pageNum + "slide" + idx2);
		unusedSlide.parentNode.removeChild(unusedSlide);
	}
	
	// Next, create images for each array element in arryProjectImages[projectId]
	for ( i=0; i<imgCounter; i++ )
	{	
		elementId = pageElementClass + pageNum + "slide" + (i+1);
		//slideCount = i + imgCounter*(pageNum-1);
		slideCount = i;
		
 		var slideElement = document.getElementById(elementId);
		var image = document.createElement("img")
		var text = images[slideCount]["imgName"].split(".jpg")
		var clickEvent = "bookTitleClick(" + images[slideCount]['imgId'] + ")";
		
		pDimX = images[slideCount]["pDimX"] 
		pDimY = images[slideCount]["pDimY"]
	
		image.id = images[slideCount]["imgId"];
		image.src = imagePath + images[slideCount]["imgName"]
		
		// Image is vertically oriented
		if ( parseInt(pDimX) < parseInt(pDimY) )
		{	
			// Set height of image to the max height as set in the imageMover.cfm Parameter Init section
			y = imgDimY;
			
			adjFactor = imgDimY / pDimY;
			
			x = adjFactor * pDimX;
			
		}
		// Image is horizontally oriented or square
		else if ( parseInt(pDimX) >= parseInt(pDimY) )
		{
			// Set width of image to the max height as set in the imageMover.cfm Parameter Init section
			x = imgDimX;
			
			adjFactor = imgDimX / pDimX;
			
			y = adjFactor * pDimY;
		}
		
		if (navigator.appName == "Microsoft Internet Explorer")
		{	
			image.style["position"] = "absolute";
			image.style["zIndex"] = "3";
			image.style["borderColor"] = imageBorderColor;
			image.style["borderWidth"] = imageBorderWidth + "px";
			image.style["borderStyle"] = imageBorderStyle;
			
			if (isViewer)
			{
				heightVar = imageViewerHeight - 2*(slideBorderWidth - imageBorderWidth)
				widthVar = pDimX / pDimY * heightVar
				
				image.style["width"] = widthVar + "px";
				image.style["height"] = heightVar + "px";
				
				image.style["top"] = (slideBorderWidth + imageBorderWidth) + "px";			
				image.style["cursor"] = "hand";
				
				//slideElement.setAttribute( "style", "position: absolute; left: " + slideLeftPos + "px;");
				slideElement.style["position"] = "absolute";
				slideElement.style["left"] = slideLeftPos + "px";
				slideLeftPos = slideLeftPos + widthVar + 8;
			}
			else
			{
				image.style["width"] = x + "px";
				image.style["height"] = y + "px";
				image.style["top"] = ( (slideHeight - y)/2 - slideBorderWidth - imageBorderWidth ) + "px";
				image.style["left"] = ( (slideWidth -x)/2 - slideBorderWidth - imageBorderWidth ) + "px";
				image.style["cursor"] = "move";
			}
			
			if (document.attachEvent && isViewer)
			{	
				image.attachEvent("onclick", imgMouseClick);
				
			}
			else if (isViewer)
			{   
				image.onclick = imgMouseClick;
			}
			
		}
		else
		{	
			if ( isViewer )
			{							
				image.addEventListener("click", imgMouseClick, true);
				
				heightVar = imageViewerHeight - 2*(slideBorderWidth - imageBorderWidth)
				widthVar = pDimX / pDimY * heightVar
				
				image.setAttribute( "style", "position: absolute; z-index: 3; cursor: pointer; " + 
										"width: " + parseInt(widthVar) + "px; " +
										"height: " + heightVar + "px; " +
										"top: " + (slideBorderWidth + imageBorderWidth) + "px; " + 
										"border-width: " + imageBorderWidth + "px; " 
										);
										
				slideElement.setAttribute( "style", "position: absolute; left: " + slideLeftPos + "px;");
				slideLeftPos = slideLeftPos + widthVar + 8;
			}
			else
			{
				image.setAttribute( "style", "position: absolute; z-index: 2; cursor: move; width: " + x  + "px; " +
										"height: " + y  + "px; " + 
										"top: " + ( (slideHeight - y)/2 - slideBorderWidth - imageBorderWidth ) + "px; " + 
										"left: " + ( (slideWidth -x)/2 - slideBorderWidth - imageBorderWidth ) + "px; " + 
										"border-width: " + imageBorderWidth + "px; " 
										);
			}
			
		}
		
		image.text = text[0];
		image.className = imgClassName;
		image.name = images[slideCount]["imgName"];
		image.id = images[slideCount]['imgId'];
		image.displayTypeId = 2
		
		slideElement.appendChild(image);
	}
}

function fillBookSlides_091206(imgClassName, isViewer, images, pageElementClass, pageNum)
{
	var elementId = null;
	slideCount = 0;
	var x, y, pDimX, pDimY;
	var imgCounter;
	
	if ( images.length < (imgsDown*imgsAcross) ) {
		imgCounter = images.length
	}
	else {
		imgCounter = imgsDown*imgsAcross
	}
	
	// Next, create images for each array element in arryProjectImages[projectId]
	for ( i=0; i<imgCounter; i++ )
	{	
		elementId = pageElementClass + pageNum + "slide" + (i+1);
		//elementId = pageElementClass + '1' + "slide" + (i+1);
		slideCount = i + imgCounter*(pageNum-1);
		
 		var slideElement = document.getElementById(elementId);
		var image = document.createElement("img")
		var text = images[slideCount]["imgName"].split(".jpg")
		var clickEvent = "bookTitleClick(" + images[slideCount]['imgId'] + ")";
		
		pDimX = images[slideCount]["pDimX"] 
		pDimY = images[slideCount]["pDimY"]
	
		image.id = images[slideCount]["imgId"];
		image.src = imagePath + images[slideCount]["imgName"]
		
		// Image is vertically oriented
		if ( parseInt(pDimX) < parseInt(pDimY) )
		{	
			// Set height of image to the max height as set in the imageMover.cfm Parameter Init section
			y = imgDimY;
			
			adjFactor = imgDimY / pDimY;
			
			x = adjFactor * pDimX;
			
		}
		// Image is horizontally oriented or square
		else if ( parseInt(pDimX) >= parseInt(pDimY) )
		{
			// Set width of image to the max height as set in the imageMover.cfm Parameter Init section
			x = imgDimX;
			
			adjFactor = imgDimX / pDimX;
			
			y = adjFactor * pDimY;
		}
		
		if (navigator.appName == "Microsoft Internet Explorer")
		{	
			image.style["position"] = "absolute";
			image.style["zIndex"] = "2";
			image.style["width"] = x + "px";
			image.style["height"] = y + "px";
			image.style["top"] = ( (slideHeight - y)/2 - slideBorderWidth - imageBorderWidth ) + "px";
			image.style["left"] = ( (slideWidth -x)/2 - slideBorderWidth - imageBorderWidth ) + "px";
			image.style["borderColor"] = imageBorderColor;
			image.style["borderWidth"] = imageBorderWidth + "px";
			image.style["borderStyle"] = imageBorderStyle;
			image.style["cursor"] = "move";
			
			if (document.attachEvent && isViewer)
			{	
				image.attachEvent("onmouseover", imgMouseOver);
				image.attachEvent("onmouseout", imgMouseOut);
				image.attachEvent("onclick", imgMouseClick);
			}
			else if (isViewer)
			{   
				image.onmouseover = imgMouseOver;
				image.onmouseout = imgMouseOut;
				image.onclick = imgMouseClick;
			}
			
		}
		else
		{	
			image.setAttribute( "style", "position: absolute; z-index: 2; cursor: move; width: " + x  + "px; " +
										"height: " + y  + "px; " + 
										"top: " + ( (slideHeight - y)/2 - slideBorderWidth - imageBorderWidth ) + "px; " + 
										"left: " + ( (slideWidth -x)/2 - slideBorderWidth - imageBorderWidth ) + "px; " +
										//"border-color: " + imageBorderColor + ";" + 
										"border-width: " + imageBorderWidth + "px; " 
										//+"border-style: " + imageBorderStyle + ";" 
										);
			if ( isViewer )
			{							
				image.addEventListener("mouseover", imgMouseOver, true);
				image.addEventListener("mouseout", imgMouseOut, true);
				image.addEventListener("click", imgMouseClick, true);
			}
		}
		
		image.text = text[0];
		image.className = imgClassName;
		image.name = images[slideCount]["imgName"];
		image.id = images[slideCount]['imgId'];
		image.displayTypeId = 2
		
		slideElement.appendChild(image);
		//slideCount++;
	}
}

//-->