imagesInList = 3
firstImage = 0
thumbSuffix = "_s"
imageSuffix = ".jpg"
galleryDirHeader = "./img/gallery/"
galleryThumb = "gallerythumb"
gallerySelect = "galleryselect"
galleryMain = "gallerymain"
galleryMainId = "mainimage"
galleryMainDescId = "mainimagedesc"
galleryMainWrapperId = "sidecolmainimage"
gallerySelectId = "categoryselector"
popupWindowId = "window"
sideColId = "sidecol"
thumbnailTitle = "Click thumbnail to view larger image"
windowString = '<table style="border: solid #ccff00 1px; background-color: black" cellspacing="0" cellpadding="0"><tr style="color: #ccff00"><td id="title_bar" style="border-bottom: solid #ccff00 1px; vertical-align: middle; padding: 2px 0px 2px 2px">Title bar</td><td style="border-left: solid #ccff00 1px; border-bottom: solid #ccff00 1px; text-align: center; padding: 2px" onclick="closeWindowClicked()" onmouseover="btnMouseOver(this)" onmouseout="btnMouseOut()" alt="Click to close the image window" title="Click to close the image window"><u>X</u></td></tr><tr><td style="text-align: center; padding: 2px" colspan="2"><img id="largeImage" width="300" src="" title=""/></td></tr></table>'
enabledTitle = "Cycle through the image gallery"
var windowElement
var popupShown = false;

function initImageGallery () {
	if ( thumbCats ) {
		select = document.createElement( "select" )
		select.className = gallerySelect
		select.onchange = selectChanged
		select.setAttribute( "id", gallerySelectId, true )
		document.getElementById( sideColId ).appendChild( select )
		document.getElementById( sideColId ).appendChild( document.createElement( "br" ) )
		document.getElementById( sideColId ).appendChild( document.createElement( "br" ) )
		
		for ( i = 0; i != thumbCats.length; i++ ) {
			opt = document.createElement( "option" )
			opt.text = thumbCats[ i ]
			opt.value = i

			if ( isIE() ) {
				select.add( opt )
			} else {
				select.appendChild( opt )
			}	
		}
		
		loadThumbs( select.selectedIndex )
	} else {
		loadThumbs()
	}
			
}

function loadThumbs ( idx ) {
	var newThumb;
	
	if ( thumbCats ) {
		var j = 0;

		while ( document.getElementById( "thumb" + j ) ) {
			document.getElementById( sideColId ).removeChild( document.getElementById( "thumb" + j ) )
			j++
		}

  	for ( i = 0; i != imageStrings[ idx ].length; i++ ) {
  		newThumb = document.createElement( "img" )
			newThumb.onload = imageRedisplay
  		newThumb.className = galleryThumb
  		newThumb.src = dirHeader + imageStrings[ idx ][ i ] + thumbSuffix + imageSuffix
  		newThumb.title = thumbnailTitle
  		newThumb.alt = thumbnailTitle
  		newThumb.onclick = thumbClicked
  		newThumb.setAttribute( "id", "thumb" + i, true )
  		document.getElementById( sideColId ).appendChild( newThumb );		
  	}
  	
  	/*document.getElementById( galleryMainId ).src = dirHeader + imageStrings[ idx ][ firstImage ] + imageSuffix 
  	document.getElementById( galleryMainDescId ).innerHTML = imageTitles[ idx ][ firstImage ]*/		
	} else {
  	for ( i = 0; i != imageStrings.length; i++ ) {
  		newThumb = document.createElement( "img" )
			newThumb.style.display = "none"
			newThumb.onload = imageRedisplay
  		newThumb.className = galleryThumb
  		newThumb.src = dirHeader + imageStrings[ i ] + thumbSuffix + imageSuffix
  		newThumb.title = thumbnailTitle
  		newThumb.alt = thumbnailTitle
  		newThumb.onclick = thumbClicked
  		newThumb.setAttribute( "id", "thumb" + i, true )
  		document.getElementById( sideColId ).appendChild( newThumb );		
  	}
  	
  	/*document.getElementById( galleryMainId ).src = dirHeader + imageStrings[ firstImage ] + imageSuffix 
  	document.getElementById( galleryMainDescId ).innerHTML = imageTitles[ firstImage ]*/
	}	
}

function popupStartPos( y ) {
	var sidecol = document.getElementById( sideColId )
	var popup = document.getElementById( popupWindowId )

	popup.style.left = sidecol.offsetLeft - 320 + "px"
	
	var scrollTop = getScrollTop()
	var viewportheight = getViewportHeight()

	if ( y + scrollTop + 400 > scrollTop + viewportheight ) {
		popup.style.top = scrollTop + viewportheight - 400 + "px"
	} else {
		popup.style.top = scrollTop + y + "px"
	}
}

function getPopupHeight() {
	var height = 0
	
	if ( isIE() && !/msie 7/i.test( navigator.userAgent ) ) {
		height = document.getElementById( galleryMainId ).height + document.getElementById( galleryMainDescId ).clientHeight + 30
	} else {
		height = document.getElementById( galleryMainId ).height + document.getElementById( galleryMainDescId ).offsetHeight + 30
	}

	return height	
}

function getViewportHeight() {
	var viewportheight = 0;
	// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

	if ( typeof window.innerWidth != 'undefined' ) {	
		viewportwidth = window.innerWidth;
		viewportheight = window.innerHeight;
	}
	
	// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

	else if ( typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0 ) {
		viewportwidth = document.documentElement.clientWidth;
		viewportheight = document.documentElement.clientHeight;
	}

	// older versions of IE

	else {
		viewportwidth = document.getElementsByTagName( 'body' )[ 0 ].clientWidth;
		viewportheight = document.getElementsByTagName( 'body' )[ 0 ].clientHeight;
	}	
	
	return ( viewportheight )
}

function getScrollTop() {
	var scrollTop = document.body.scrollTop;

	if ( scrollTop == 0 ) {
    if ( window.pageYOffset ) {
			scrollTop = window.pageYOffset
		} else {
			scrollTop = ( document.body.parentElement ) ? document.body.parentElement.scrollTop : 0
		}
	}
	
	return scrollTop
}

function selectChanged() {
	document.getElementById( popupWindowId ).style.display = "none"
	select = document.getElementById( gallerySelectId )
	loadThumbs( select.selectedIndex )
}

function thumbClicked ( e ) {
	whichThumb = whichThumbClicked( this.id )
	select = document.getElementById( gallerySelectId )

	document.getElementById( galleryMainWrapperId ).removeChild( document.getElementById( galleryMainId ) )
	
	mainImageDesc = document.getElementById( galleryMainDescId )
	loadingString = "Loading new image"

	mainImageDesc.innerHTML = loadingString	
	
	mainImage = createNewMainImage()
	mainImage.style.display = "none"
	mainImage.onload = resizePopup
	
	
	if ( whichThumb != -1 ) {
		if ( select ) {
			mainImageDesc.innerHTML = imageTitles[ select.selectedIndex ][ whichThumb ]
			mainImage.src = dirHeader + imageStrings[ select.selectedIndex ][ whichThumb ] + imageSuffix
		} else {
			mainImageDesc.innerHTML = imageTitles[ whichThumb ]
			mainImage.src = dirHeader + imageStrings[ whichThumb ] + imageSuffix
		}	
		
		document.getElementById( galleryMainWrapperId ).insertBefore( mainImage, mainImageDesc )
	} else {
		alert( "Failed to identify which thumbnail was clicked" )
	}
	
	
	mainImage.style.display = "block"
	
	if ( document.getElementById( popupWindowId ).style.display = "none" ) {
		popupStartPos( e ? e.clientY : window.event.clientY )		
		document.getElementById( popupWindowId ).style.display = "block"
	} 
	
	resizePopup()
}

function createNewMainImage () {	
	newMainImage = document.createElement( "img" )
	newMainImage.className = galleryMain
	newMainImage.setAttribute( "id", galleryMainId, true )
	
	return newMainImage;
}

function whichThumbClicked ( thumbIdString ) {
	if ( thumbCats ) {
		selectIdx = document.getElementById( gallerySelectId ).selectedIndex

  	for ( i = 0; i != imageStrings[ selectIdx ].length; i++ ) {
  		if ( "thumb" + i == thumbIdString ) {
  			return i
  		}
  	}
	} else {
  	for ( i = 0; i != imageStrings.length; i++ ) {
  		if ( "thumb" + i == thumbIdString ) {
  			return i
  		}
  	}
	}
	
	return -1
}

function resizePopup() {
	document.getElementById( popupWindowId ).style.height = getPopupHeight() + "px";
}

function imageRedisplay() 
{
	this.style.display = "inline"
}

function isIE()
{
	return /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent);
}