<!--
var dragging=false, replacing=false
var x,y,z
var oldLeft,oldTop,oldImage
var dragObjName, changeType
var blankSrcStr = "http://" + document.location.hostname + "/images/blank.jpg"
var blankImg = new Image(), nextBucketImg
var totImages, arryImages
var arryBucketImages = new Array()
var docImgArry = document.images
var eventImage, slideWidth, slideHeight
var slideDim = 64
var divCatNum
var fadeInValue = 0;
var fadeInInterval = 0;

if(document.addEventListener)
{
document.addEventListener("mousedown", drag_it, true)
document.addEventListener("mouseup", save_it, true)
}

function getImgSrc(pImgs, bImgs)
{
	for (var i = 1; i <= pImgs; i++) //200
	{	
		var fullImageName = document.images["panelImage" + i].src
		var result = fullImageName.split("http://" + document.location.hostname + "/images/")
		document.imageMover["imgName" + i].value = result[1]
	}
	
	for (var j = 1; j <= bImgs; j++) //32
	{
		var fullImageName = document.images["binImage" + j].src
		var result = fullImageName.split("http://" + document.location.hostname + "/images/")
		document.imageMover["binImgName" + j].value = result[1]
	}
}

function loadImgArray(imgIdx, imgName, orientation, imgIdn, imgTitle)
{	
	var arryData = new Array(7)
	var x, y, adjFactor
	
	arryData[0] = imgName
	
	if (orientation == 'V')
	{	
		// These values are set in the imageMover.cfm file and are based on session variable parameters
		x = imgDimY;
		y = imgDimX;
				
		if (slideHeight/y < slideWidth/x)
		{
			adjFactor = slideHeight/y * adjustmentFactor
		}
		else if (slideWidth/x < slideHeight/y)
		{
			adjFactor = slideWidth/x * adjustmentFactor
		}
		else
		{
			adjFactor = slideWidth/x * adjustmentFactor
		}
			
		arryData[1] = 	x * adjFactor					//width
		arryData[2] = 	y * adjFactor					//height
		arryData[3] = (slideHeight - arryData[2])/2		//top
		arryData[4] = (slideWidth - arryData[1])/2		//left
		arryData[5] = imgIdn							//imgID
		arryData[6] = imgTitle						//imgTitle
	}
	else if (orientation == 'H')
	{
		// These values are set in the imageMover.cfm file and are based on session variable parameters
		x = imgDimX;
		y = imgDimY;
		
		if (slideHeight/y < slideWidth/x)
		{
			adjFactor = slideHeight/y * adjustmentFactor
		}
		else if (slideWidth/x < slideHeight/y)
		{
			adjFactor = slideWidth/x * adjustmentFactor
		}
		else
		{
			adjFactor = slideWidth/x * adjustmentFactor
		}
		
		arryData[1] = x * adjFactor						//width
		arryData[2] = y * adjFactor						//height
		arryData[3] = (slideHeight - arryData[2])/2		//top
		arryData[4] = (slideWidth - arryData[1])/2		//left
		arryData[5] = imgIdn							//imgID
		arryData[6] = imgTitle						//imgTitle
	}
	
	if (imgIdx == 0)
	{
		arryBucketImages[arryBucketImages.length] = arryData
	}
	else
	{
		arryImages[imgIdx-1] = arryData
	}
}

// This method is called when the Body of imageMover is loaded
// Review:  rename to initialize
function test2()
{	
	var k
	var bName,pName,divName
	
	// Set URL Location for white placeholder
	blankImg.src = blankSrcStr;
	docImgArry["Trash"].src = "http://www.jimlaser.com/images/imgTrash.jpg"
	
	setLayout();
	
	for (var i = 0; i <= totImages-1; i++)
	{
		k = i + 1
		pName = "pI" + k
		
		if (arryImages[i] == null)
		{	
			docImgArry[pName].src = blankImg.src
			docImgArry[pName].width = slideWidth 
			docImgArry[pName].height = slideHeight 
			docImgArry[pName].style.top = 0
			docImgArry[pName].style.left = 0
			docImgArry[pName].posIdx = i
			docImgArry[pName].updated = false
		}
		else
		{  
			docImgArry[pName].src = siteFoldersPath + "images/" + arryImages[i][0]
			docImgArry[pName].width = arryImages[i][1]
			docImgArry[pName].height = arryImages[i][2]
			docImgArry[pName].style.top = arryImages[i][3]
			docImgArry[pName].style.left = arryImages[i][4]
			docImgArry[pName].posIdx = i
			docImgArry[pName].updated = false
		}
		docImgArry[pName].inBucket = false
				
	}
	
	var bImage, binIndex = 0
	var numBucketImages = numBuckets * (imgsAcross * imgsDown)
	for (var i = 1; i <= numBucketImages; i++)
	{
		bName = "bI" + i
		bImage = document.getElementById(bName)
			
		if ( arryBucketImages[binIndex] == null )
		{	
			bImage.src = blankImg.src
			bImage.width = slideWidth
			bImage.height = slideHeight
			bImage.style.top = 0
			bImage.style.left = 0
		}
		else
		{	
			bImage.src = siteFoldersPath + "images/" + arryBucketImages[binIndex][0]
			bImage.width = arryBucketImages[binIndex][1]
			bImage.height = arryBucketImages[binIndex][2]
			bImage.style.top = arryBucketImages[binIndex][3]
			bImage.style.left = arryBucketImages[binIndex][4]
			binIndex++
		}
		
		bImage.inBucket = true
	}
	
	// Set first available bucket position
	SetNextBucketPosition()
}

//  Loops through bucket image array and finds the first slide that contains
//  a blank image
function SetNextBucketPosition()
{
	var bName, bImage
	var numBucketImages = numBuckets * (imgsAcross * imgsDown)
	
	for (var i = 1; i <= numBucketImages; i++)
	{
		bName = "bI" + i
		bImage = document.getElementById(bName)
		
		if (bImage.src == blankSrcStr)
		{	
			nextBucketImg = bName
			return false
		}
	}
}

//  Helper method for slide
function GetNextPanelImgIdx(startIdx, ImgArry)
{	
	var ePageId, pImgNum
	var zPageId = document.images["panelImage" + (startIdx + 1)].parentNode.parentNode.id
	var stopIdxArry = zPageId.split("p")
	var stopIdx = (parseInt(stopIdxArry[1])) * (imgsAcross * imgsDown)
	
	// Begin slide at next slot past event image
	for (var bSlideIdx = startIdx + 1 ; bSlideIdx <= stopIdx; bSlideIdx++)
	{	
		pImgNum = bSlideIdx + 1  			//increment to match html page naming convention
		
		// There are no more images
		if ( (pImgNum) >= totImages-1)
		{	
			return bSlideIdx
		}
		else
		{
			ePageId = document.images["panelImage" + (pImgNum)].parentNode.parentNode.id
		}
			
		if (docImgArry["panelImage" + bSlideIdx].src == blankSrcStr && zPageId == ePageId)
		{   //alert("z1 " + bSlideIdx)
			return (bSlideIdx - 1)
		}
		else if (bSlideIdx == (z.posIdx) && zPageId == ePageId)
		{	//alert("z2 " + bSlideIdx)
			return (bSlideIdx)
		}
		else if (zPageId != ePageId)
		{   
			//Send last image on page to bin
			SetNextBucketPosition()
			document.images[nextBucketImg].src = document.images["panelImage" + bSlideIdx].src
			document.images[nextBucketImg].width = document.images["panelImage" + bSlideIdx].width
			document.images[nextBucketImg].height = document.images["panelImage" + bSlideIdx].height
			document.images[nextBucketImg].style.top = document.images["panelImage" + bSlideIdx].style.top
			document.images[nextBucketImg].style.left = document.images["panelImage" + bSlideIdx].style.left
			document.images[nextBucketImg].inBucket = true
			document.images[nextBucketImg].style.zIndex = 1
			return (bSlideIdx-1)
		}	
	}
	return (stopIdx - 1)			// We didn't find a blank image in the loop	
}

//  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
		}
	}
}

//  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)
	
	document.addEventListener("mouseover", getMouseOverImg, true)
	
	if (event.button == 0 && 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.name != null)
	{
		eventImage = event.target
	}
}

//  Event handler for mouseup event
function save_it(event)
{		
	if (z != null)
	{
		var imgMoving = document.getElementById(z.id)
		
		if (imgMoving.className == "dragable")
		{	
			setChangeType()
			
			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
			
			if (event.target.src == "http://www.jimlaser.com/images/imgTrash.jpg")
			{	
				var fullImageName = imgMoving.src
				var result = fullImageName.split("http://" + document.location.hostname + "/images/")
				var i = 1
					
				while (document.imageMover["trashImg" + i].value != 0)
				{
					i++
				}
				document.imageMover["trashImg" + i].value = result[1]
				document.imageMover["trashImgCount"].value = i
				
				imgMoving.src = blankSrcStr
			}
			else if (event.button == 0 && dragging)
			{	
				getChangeTypeAction()
			}
			
			event.stopPropagation()
			dragging = false
			return false
		}
	}
	else
	{
		return false
		dragging = false
	}
}

//  Based on user selection of swap or slide, select action
function getChangeTypeAction()
{	
	if (eventImage.className == "dragable" && replacing && eventImage.name != dragObjName)
	{			
		if (changeType == "optSwap")
		{	
			replace_it()	
		}
		else if (changeType == "optSlide")
		{			
			slide_it()
		}
		replacing = false	
	}
	
	document.removeEventListener("mouseover", getChangeTypeAction, true)
	z = null
	return false
}

//  Method to swap images
function replace_it()
{	
	var draggedImg = new Array(5), replacedImg = new Array(5)
	var imgMoving = document.getElementById(z.id)
	
	draggedImg[0] = imgMoving.src
	draggedImg[1] = imgMoving.width
	draggedImg[2] = imgMoving.height
	draggedImg[3] = imgMoving.style.top
	draggedImg[4] = imgMoving.style.left
	
	replacedImg[0] = eventImage.src
	replacedImg[1] = eventImage.width
	replacedImg[2] = eventImage.height
	replacedImg[3] = eventImage.style.top
	replacedImg[4] = eventImage.style.left
	
	if (eventImage.inBucket)
	{
		imgMoving.src = blankImg.src
		imgMoving.width = slideWidth
		imgMoving.height = slideHeight
		imgMoving.style.top = 0
		imgMoving.style.left = 0
		imgMoving.inBucket = false
		imgMoving.style.zIndex = 1
		imgMoving.updated = true
		
		SetNextBucketPosition()
		document.images[nextBucketImg].src = draggedImg[0]
		document.images[nextBucketImg].width = draggedImg[1]
		document.images[nextBucketImg].height = draggedImg[2]
		document.images[nextBucketImg].style.top = draggedImg[3]
		document.images[nextBucketImg].style.left = draggedImg[4]
		document.images[nextBucketImg].inBucket = true
		document.images[nextBucketImg].style.zIndex = 1
	}
	else
	{	
		imgMoving.src = replacedImg[0]
		// review:  this may not be needed.  the parent node of an image will be a slide.
		if (imgMoving.parentNode.id == "b1")
		{	
			imgMoving.width = slideDim
			imgMoving.height = slideDim
		}
		else
		{
		imgMoving.width = replacedImg[1]
		imgMoving.height = replacedImg[2]		
		}
		imgMoving.style.top = replacedImg[3]
		imgMoving.style.left = replacedImg[4]
		imgMoving.style.zIndex = 1
		imgMoving.updated = true
				
		eventImage.src = draggedImg[0]
		eventImage.width = draggedImg[1]
		eventImage.height = draggedImg[2]
		eventImage.style.top = draggedImg[3]
		eventImage.style.left = draggedImg[4]
		
	}
}

//  Method used to slide images
function slide_it(event)
{
	var bucketImgs=0, panelImgs=0, bI=0, pI=0
	var pImgArry = new Array()
	var beginSlide, endSlide
	var slideImg = new Array(5), temp = new Array(5), temp2 = new Array(5)
	var pIdx=0
	
	if (eventImage.inBucket)
	{
		replace_it()
		return false
	}
	
	beginSlide = eventImage.posIdx
	endSlide = GetNextPanelImgIdx(beginSlide, pImgArry)
	
	for (var i = beginSlide; i <= endSlide; i++)
	{
		var imgName = "panelImage" + (i+1)
		pImgArry[pI] = new Image()
		pImgArry[pI].src = docImgArry[imgName].src
		pImgArry[pI].width = docImgArry[imgName].width
		pImgArry[pI].height = docImgArry[imgName].height
		pImgArry[pI].left =  docImgArry[imgName].style.left
		pImgArry[pI].top =  docImgArry[imgName].style.top
		pImgArry[pI].inBucket =  docImgArry[imgName].inBucket
		pI++
	}

	// Replace the event image with the dragged image.
	// Save the image being replaced in the variable temp
	temp[0] = eventImage.src
	temp[1] = eventImage.width
	temp[2] = eventImage.height
	temp[3] = eventImage.style.top
	temp[4] = eventImage.style.left
	
	pImgArry[0].src = z.src
	pImgArry[0].width = z.width
	pImgArry[0].height = z.height
	pImgArry[0].top = z.style.top
	pImgArry[0].left = z.style.left
	
	z.src = blankImg.src
	z.width = slideWidth
	z.height = slideHeight
	z.style.top = 0
	z.style.left = 0
	z.updated = true
	
	for (var j = 1; j < pI; j++)
	{	
		temp2[0] = pImgArry[j].src
		temp2[1] = pImgArry[j].width
		temp2[2] = pImgArry[j].height
		temp2[3] = pImgArry[j].top
		temp2[4] = pImgArry[j].left	
		
		pImgArry[j].src = temp[0]
		pImgArry[j].width = temp[1]
		pImgArry[j].height = temp[2]
		pImgArry[j].top = temp[3]
		pImgArry[j].left = temp[4]
		
		temp[0] = temp2[0]
		temp[1] = temp2[1]
		temp[2] = temp2[2]
		temp[3] = temp2[3]
		temp[4] = temp2[4]		
	}
	
	for (var k = beginSlide; k <= endSlide; k++)
	{   
		pName = "panelImage" + (k+1)
		docImgArry[pName].src = pImgArry[pIdx].src
		docImgArry[pName].width = pImgArry[pIdx].width
		docImgArry[pName].height = pImgArry[pIdx].height
		docImgArry[pName].style.top = pImgArry[pIdx].top
		docImgArry[pName].style.left = pImgArry[pIdx].left
		docImgArry[pName].updated = true
		pIdx++	 
	}
}

//  Calculate the image dimensions for imageMover that are proportional to parameters set 
//  in the application.cfm file
function sizeImageMoverSlides()
{
	var spacersAcross, spacersDown
	
	totImages = (pagesDown * pagesAcross) * (imgsDown * imgsAcross)
	arryImages = new Array(totImages)
	
	spacersAcross = (imgsAcross - 1) * moverSpacerAcross;
	spacersDown = (imgsDown - 1) * moverSpacerDown;
	
	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 setLayout ()
{	
	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.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 + moverSpacerAcross;
			panelCount++;
		}
		
		top = top + pageHeight + moverSpacerDown;
	}
	
	// Layout the slides on the pages
	for ( var panelIndex = 0; panelIndex < panelCount - 1; panelIndex++ )
	{
		var pageElement = document.getElementById( "p" + (panelIndex + 1) )
		top = moverPanelBorderWidth;
		
		for ( var y = 0; y < imgsDown; y++ )
		{
			left = moverPanelBorderWidth;
		
			for ( var x = 0; x < imgsAcross; x++ ) 
			{
				var divSlide = document.createElement("div")
				var image = document.createElement("img")
				
				image.name = "panelImage" + slideCount;
				image.id = "pI" + slideCount;
				image.className ="dragable";
				divSlide.appendChild(image);
				
				divSlide.id = "slide" + slideCount
				divSlide.setAttribute("style", "background-color: #ffffff; position: absolute; z-index: 2; width: " + slideWidth + "px; " +
											   "height: " + slideHeight + "px; " + 
											   "top: " + top + "px; " + 
											   "left: " + left + "px;");
				pageElement.appendChild(divSlide);
				left = left + slideWidth + moverSpacerAcross;
				slideCount = slideCount + 1;
			}
			
			top = top + slideHeight + moverSpacerDown;
		}
	}
	
	// Line up the first bucket with the second panel column
	left = panelOffsetLeft + pageWidth + moverSpacerAcross;
	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.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 + moverSpacerAcross;
	}
	
		// Layout the bucket slides on the bucket pages
	for ( var bucketIndex = 0; bucketIndex < numBuckets; bucketIndex++ )
	{
		var divBucket = document.getElementById( "b" + (bucketIndex + 1) )
		top = moverPanelBorderWidth;
		
		for ( var y = 0; y < imgsDown; y++ )
		{
			left = moverPanelBorderWidth;
		
			for ( var x = 0; x < imgsAcross; x++ ) 
			{
				var divSlide = document.createElement("div")
				var image = document.createElement("img")
				
				image.name = "bucketImage" + slideCount;
				image.id = "bI" + slideCount;
				image.className ="dragable";
				divSlide.appendChild(image);
				
				divSlide.id = "slide" + slideCount
				divSlide.setAttribute("style", "background-color: #ffffff; position: absolute; z-index: 2; width: " + slideWidth + "px; " +
											   "height: " + slideHeight + "px; " + 
											   "top: " + top + "px; " + 
											   "left: " + left + "px;");
				divBucket.appendChild(divSlide);
				left = left + slideWidth + moverSpacerAcross;
				slideCount = slideCount + 1;
			}
			top = top + slideHeight + moverSpacerDown
		}
	}
	
	// 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;");	
}

/*** 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;
	
	var imageViewerWidth = 0;
	var imageViewerHeight = 0;
		
	// 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["laserSiteCSS"].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))
	{	
		/***for (a in document.links)
		{
			var result = confirm (a);
			if (!result)
				break;
		}***/
		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")
			{	
				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) * viewerSpacerAcross;
	spacersDown = (imgsDown - 1) * viewerSpacerDown;
	
	/*** Internet Explorer adds the border internally to the slide keeping withing slide dimensions.
		Mozilla adds the border to the slide; thereby, increasing the slide dimensions. ***/
	slideWidth = ( imageViewerWidth - spacersAcross ) / imgsAcross;
	slideHeight = ( imageViewerHeight - spacersDown ) / imgsDown;						
	
	arryImages = null
	arryImages = new Array( imgsAcross * imgsDown )

}


/*** Layout the page ***/
function layoutImageViewer()
{	
	// Get user agent
	var ua = navigator.userAgent;
	var computedStyle;
	var slideCount = 0;
	var top=0, left=0
	var textTop = 0;
	var textNode = document.createTextNode('');	
	var browserAdjust = 0;
	
	var viewerTop, viewerLeft;
	var slideBorderWidth, slideBorderColor, slideBorderStyle, slideBackgroundColor;
	
	// Get style information for imageViewer in css file
	var pageImageViewer = document.getElementById("imageViewer")
	
	if (window.external && /Win/.test(ua) && !/Firefox/.test(ua))
	{
		computedStyle = pageImageViewer.currentStyle
		
		viewerTop = parseInt (computedStyle.top);
		viewerLeft = parseInt (computedStyle.left);
	}
	else if (window.external && /Mac/.test(ua) && !/Firefox/.test(ua))
	{
		var styleRules = document.styleSheets["laserSiteCSS"].cssRules
	
		for (rule in styleRules)
		{
			var ruleName = styleRules[rule].selectorText;
			var regExpr = new RegExp("imageViewer");
			
			if (regExpr.test(ruleName))
			{
				computedStyle = styleRules[rule].style;
				break;
			}
		}
		
		if (computedStyle)
		{	
			viewerTop = parseInt (computedStyle["top"]);
			viewerLeft = parseInt (computedStyle["left"]);
		}
		else
		{
			alert("The computedStyle 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")
			{
				viewerTop = parseInt(document.styleSheets[0].cssRules[i].style["top"])
				viewerLeft = parseInt(document.styleSheets[0].cssRules[i].style["left"])
				break;
			}
		}
	}
	else if (/Firefox/.test(ua))
	{
		computedStyle = document.defaultView.getComputedStyle(pageImageViewer, '')
		viewerTop = parseInt (computedStyle.getPropertyValue("top"));
		viewerLeft = parseInt (computedStyle.getPropertyValue("left"));
	}
	else
	{	
		computedStyle = document.defaultView.getComputedStyle(pageImageViewer, '')
		viewerTop = parseInt (computedStyle.getPropertyValue("top"));
		viewerLeft = parseInt (computedStyle.getPropertyValue("left"));
	}
	
	// Get style information for imageViewerSlide in css file
	var slideImageViewer = document.getElementById("imageViewerSlide")
	
	if (window.external && /Win/.test(ua) && !/Firefox/.test(ua))
	{
		computedStyle = slideImageViewer.currentStyle;
		slideBorderWidth = parseInt (computedStyle.borderLeftWidth);
		slideBorderColor = computedStyle.borderLeftColor;
		slideBorderStyle = computedStyle.borderLeftStyle;
		slideBackgroundColor = computedStyle.backgroundColor;
	}
	else if (window.external && /Mac/.test(ua) && !/Firefox/.test(ua))
	{
		for (rule in styleRules)
		{
			var ruleName = styleRules[rule].selectorText;
			var regExpr = new RegExp("imageViewerSlide");
			
			if (regExpr.test(ruleName))
			{
				computedStyle = styleRules[rule].style;
				break;
			}
		}
		
		if (computedStyle)
		{
			slideBorderWidth = parseInt (computedStyle["borderWidth"]);
			slideBorderColor = computedStyle["borderColor"];
			slideBorderStyle = computedStyle["borderStyle"];
			slideBackgroundColor = computedStyle["backgroundColor"]; 
		}
		else
		{
			alert("The computedStyle 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 == "#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;
			}
		}
	}
	else if (/Firefox/.test(ua))
	{
		computedStyle = document.defaultView.getComputedStyle(slideImageViewer, '');
		slideBorderWidth = parseInt (computedStyle.getPropertyValue("border-left-width"));
		slideBorderColor = computedStyle.getPropertyValue("border-left-color");
		slideBorderStyle = computedStyle.getPropertyValue("border-left-style");
		slideBackgroundColor = computedStyle.getPropertyValue("background-color");
	}
	else
	{
		computedStyle = document.defaultView.getComputedStyle(slideImageViewer, '');
		slideBorderWidth = parseInt (computedStyle.getPropertyValue("border-left-width"));
		slideBorderColor = computedStyle.getPropertyValue("border-left-color");
		slideBorderStyle = computedStyle.getPropertyValue("border-left-style");
		slideBackgroundColor = computedStyle.getPropertyValue("background-color");
	}
	
	// the following sets position of top of the slide catalog number text
	textTop = slideHeight + 1 - (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);
		
		// the following sets position of slide catalog number text in browsers OTHER than IE 
		divCatNum.setAttribute("style", "position: absolute; left:43%; top:" + textTop + "px; " + 
										"font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;" + 
										"font-size: 10px; color: #999999; visibility: show;");
	}
	else // Following block of code controls positioning in Internet Explorer
	{
		broswerAdjust = 0; 
		
		divCatNum.style["position"] = "absolute"; 
		divCatNum.style["left"] = "43%"; 
		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);	
	
	for ( var y = 0; y < imgsDown; y++ )
	{
		left = 0;
	
		// Assign images to slides
		for ( var x = 0; x < imgsAcross; x++ ) 
		{
			var divSlide = document.createElement("div")
			var image = document.createElement("img")
			
			if (arryImages[slideCount] == void(0) )
			{
				image.src = blankSrcStr
				image.style["width"]= slideWidth + "px";
				image.style["height"] = slideHeight + "px";
				image.style["top"] = "0px";
				image.style["left"] = "0px";
			}
			else
			{
				var text = arryImages[slideCount][0].split(".jpg")
				var imgTitle = arryImages[slideCount][6]
				
				image.src = siteFoldersPath + "images/" + arryImages[slideCount][0]
				
				if (navigator.appName == "Microsoft Internet Explorer")
				{	
					image.style["position"] = "absolute";
					image.style["zIndex"] = "2";
					image.style["width"] = arryImages[slideCount][1] + "px";
					image.style["height"] = arryImages[slideCount][2] + "px";
					image.style["top"] = (arryImages[slideCount][3] - slideBorderWidth) + "px";
					image.style["left"] = (arryImages[slideCount][4] - slideBorderWidth) + "px";
			
					if (document.attachEvent)
					{	
						image.attachEvent("onmouseover", imgMouseOver);
						image.attachEvent("onmouseout", imgMouseOut);
						image.attachEvent("onclick", imgMouseClick);
					}
					else
					{   
						image.onmouseover = imgMouseOver;
						image.onmouseout = imgMouseOut;
						image.onclick = imgMouseClick;
					}
					
				}
				else
				{	//alert((slideBorderWidth));
					image.setAttribute("style", "position: absolute; z-index: 2; width: " + arryImages[slideCount][1] + "px; " +
												"height: " + arryImages[slideCount][2] + "px; " + 
												"top: " + (arryImages[slideCount][3] - slideBorderWidth) + "px; " + 
												"left: " + (arryImages[slideCount][4] - slideBorderWidth) + "px;");
												
					image.addEventListener("mouseover", imgMouseOver, true);
					image.addEventListener("mouseout", imgMouseOut, true);
					image.addEventListener("click", imgMouseClick, true);
				}
				
				image.text = text[0]
				image.id = arryImages[slideCount][5]
				image.imgTitle = imgTitle
			}
											
			if (image.src != blankSrcStr) divSlide.appendChild(image);
			
			if (navigator.appName == "Microsoft Internet Explorer")
			{	
				divSlide.style["position"] = "absolute";
				divSlide.style["zIndex"] = "2";
				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.style.position = "absolute";
				divSlide.style.zIndex = 2;
				divSlide.style.backgroundColor = slideBackgroundColor;
				divSlide.style.borderColor = slideBorderColor;
				divSlide.style.borderWidth = slideBorderWidth;
				divSlide.style.borderStyle = slideBorderStyle;
				divSlide.style.width = slideWidth;
				divSlide.style.height = slideHeight;
				divSlide.style.top = top;
				divSlide.style.left = left;
				***/
											
				divSlide.setAttribute("style",	"position: absolute; z-index: 2; " +
												"background-color: " + slideBackgroundColor + "; " +
												"border-color: " + slideBorderColor + "; " +
												"border-width: " + slideBorderWidth + "; " +
												"border-style: " + slideBorderStyle + "; " +
												"width: " + slideWidth + "px; " +
												"height: " + slideHeight + "px; " + 
												"top: " + top + "px; " + 
												"left: " + left + "px;");
			}
											                       											
			if (image.src != blankSrcStr) pageImageViewer.appendChild(divSlide);
			
			left = left + slideWidth + viewerSpacerAcross + browserAdjust;			
			slideCount++;
		}
		
		top = top + slideHeight + viewerSpacerDown + browserAdjust;
	}
	
	if (window.external && /Mac/.test(ua) && !/Firefox/.test(ua))
	{
		window.location.reload(true);
	}
}

// Mouse Event used in imageViewer
function imgMouseOver(event)
{	
	var divFloatOuter = document.getElementById("floatouterdiv");
	var divFloatInner = document.getElementById("floatinnerdiv");
	var divFloatImg = document.createElement("IMG");
	var divFloatText = document.getElementById("floattext");
	var divFloatCopywrite = document.getElementById("floatcopywrite");
	
	/* The floatTop and floatLeft variable determines the top and left position of the floating image div based on the size of 
	   the open window and on the amount of scrolling made by the user */
	var floatTop = ((document.body.clientHeight - 400)/2) + document.body.scrollTop;
	var floatLeft = ((document.body.clientWidth - 360)/2) + document.body.scrollLeft;
	
	var floatimgname;
	var floatimgtitle;

	if (navigator.appName == "Microsoft Internet Explorer")
	{
		window.event.srcElement.style.cursor = "hand";
		
		var divSlideNode =	window.event.srcElement.parentElement;
		
		// Set the text equal to the catalog number
		floatimgname = window.event.srcElement.text;
		floatimgtitle = window.event.srcElement.imgTitle;
		
		divCatNum.childNodes[0].data = floatimgname;
		divSlideNode.appendChild(divCatNum);								
		
		window.event.cancelBubble = true;
	}
	else
	{
		event.target.style.cursor = "pointer";
		
		var divSlideNode = event.target.parentNode;
		
		// Set the text equal to the catalog number
		floatimgname = event.target.text;
		floatimgtitle = event.target.imgTitle;
		
		divCatNum.childNodes[0].data = floatimgname;
		divSlideNode.appendChild(divCatNum);						
						
		event.stopPropagation();
	}
	
	
	/* This section unhides the floating image div and its contents */
	divFloatOuter.className = 'show';
	divFloatInner.className = 'show';
	divFloatText.className = 'show';
	divFloatCopywrite.className = 'show';
	
	divFloatOuter.style.top = floatTop + 'px';

	
	if (parseInt(divSlideNode.style.left) < 200) {
		divFloatOuter.style.left = (parseInt(divSlideNode.style.width) + parseInt(divSlideNode.style.left) + 20) + 'px';
	}
	else {
		divFloatOuter.style.left = (parseInt(divSlideNode.style.left) - (360 + 20)) + 'px';
	}
	
	/* Sets the image name and image title */
	divFloatImg.src = siteFoldersPath + "images/" + floatimgname + ".jpg";	
	divFloatInner.appendChild(divFloatImg);
	divFloatText.innerHTML = floatimgname + "   " + floatimgtitle;

	/* Reset the fadeInValue which gets set in the fadeIn() function */
	fadeInValue = 0;
	
	/* Float Image Fade-In Rate:  The higher the value, the slower the fade-in*/
	fadeInInterval = setInterval("fadeIn()", 40);	

/*
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
*/
}

function fadeIn()
{
	var divFloatOuter = document.getElementById("floatouterdiv");
	
	fadeInValue = fadeInValue + 20;
	
	if (navigator.appName == "Microsoft Internet Explorer")
	{
		divFloatOuter.style.filter = "alpha(opacity=" + fadeInValue + ")";
	}
	else {
		divFloatOuter.style.MozOpacity= fadeInValue/100;
		divFloatOuter.style.opacity= fadeInValue/100;
	}
	
	/* Once full opacity is reached, stop the calls to the fadeIn() function */
	if (fadeInValue > 100) {
		clearInterval(fadeInInterval);
	}
}


// Mouse Event used in imageViewer
function imgMouseOut(event)
{	
	var divFloatOuter = document.getElementById("floatouterdiv");
	var divFloatInner = document.getElementById("floatinnerdiv");
	var divFloatText = document.getElementById("floattext");
	var divFloatCopywrite = document.getElementById("floatcopywrite");
	
	if (navigator.appName == "Microsoft Internet Explorer")
	{
		window.event.srcElement.style.cursor = "default";
		
		var divSlideNode =	window.event.srcElement.parentElement;
		
		// Set the text to null
		divCatNum.childNodes[0].data = null
		divSlideNode.removeChild(divCatNum);
		
		window.event.cancelBubble = true;
	}
	else
	{
		event.target.style.cursor = "default";
		
		var divSlideNode = event.target.parentNode;
		
		// Set the text to null
		divCatNum.childNodes[0].data = null
		divSlideNode.removeChild(divCatNum);
		
		event.stopPropagation();
	}
	
	/* This next section re-hides the floating image div and its contents */
	divFloatInner.removeChild(divFloatInner.childNodes.item(0));
	divFloatOuter.className = 'hide';
	divFloatInner.className = 'hide';
	divFloatText.className = 'hide';
	divFloatCopywrite.className = 'hide';
	
	clearInterval(fadeInInterval);

	if (navigator.appName == "Microsoft Internet Explorer")
	{
		divFloatOuter.style.filter = "alpha(opacity=0)";
	}
	else {
		divFloatOuter.style.MozOpacity= 0;
		divFloatOuter.style.opacity= 0;
	}
}

// Mouse Event used in imageViewer
function imgMouseClick(event)
{	
	if (navigator.appName == "Microsoft Internet Explorer")
	{
		var imgIdn = window.event.srcElement.id;
		window.event.cancelBubble = true;
	}
	else
	{
		var imgIdn = event.target.id;
		event.stopPropagation();
	}
	
	var windowHandle = window.open(siteFoldersPath + "photodetail/detail.cfm?Img_ID=" + imgIdn, "",
						"toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=450,height=460");
}

/***  Review:  this method does not seem to be used ***/
function getStyleBySelector( selector )
{
    var sheetList = document.styleSheets;
    var ruleList;
    var i, j;

    /* look through stylesheets in reverse order that
        they appear in the document */
    for (i=sheetList.length-1; i >= 0; i--)
    {
        ruleList = sheetList[i].cssRules;
        for (j=0; j<ruleList.length; j++)
        {
            if (ruleList[j].type == CSSRule.STYLE_RULE && 
                ruleList[j].selectorText == selector)
            {	
                return ruleList[j].style;
            }   
        }
    }
    
    return null;
}
   
//-->