imageIndex = 0;
maxNumber = 9;
currentCat = '';

function grayOut(vis, xoptions) {
  // Pass true to gray out screen, false to ungray
  // options are optional.  This is a JSON object with the following (optional) properties
  // opacity:0-100         // Lower number = less grayout higher = more of a blackout 
  // zindex: #             // HTML elements with a higher zindex appear on top of the gray out
  // bgcolor: (#xxxxxx)    // Standard RGB Hex color code
  // grayOut(true, {'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'});
  // Because options is JSON opacity/zindex/bgcolor are all optional and can appear
  // in any order.  Pass only the properties you need to set.
  var options = xoptions || {}; 
  var zindex = options.zindex || 50;
  var opacity = options.opacity || 70;
  var opaque = (opacity / 100);
  var bgcolor = options.bgcolor || '#000000';
  var dark=document.getElementById('darkenScreenObject');
  if (!dark) {
    // The dark layer doesn't exist, it's never been created.  So we'll
    // create it here and apply some basic styles.
    // If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917
    var tbody = document.getElementsByTagName("body")[0];
    var tnode = document.createElement('div');           // Create the layer.
        tnode.style.position='absolute';                 // Position absolutely
        tnode.style.top='0px';                           // In the top
        tnode.style.left='0px';                          // Left corner of the page
        tnode.style.overflow='hidden';                   // Try to avoid making scroll bars            
        tnode.style.display='none';                      // Start out Hidden
        tnode.id='darkenScreenObject';                   // Name it so we can find it later
    tbody.appendChild(tnode);                            // Add it to the web page
    dark=document.getElementById('darkenScreenObject');  // Get the object.
  }
  if (vis) {
    // Calculate the page width and height 
    if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) {
        var pageWidth = document.body.scrollWidth+'px';
        var pageHeight = document.body.scrollHeight+'px';
    } else if( document.body.offsetWidth ) {
      var pageWidth = document.body.offsetWidth+'px';
      var pageHeight = document.body.offsetHeight+'px';
    } else {
       var pageWidth='100%';
       var pageHeight='100%';
    }   
    //set the shader to cover the entire page and make it visible.
    dark.style.opacity=opaque;                      
    dark.style.MozOpacity=opaque;                   
    dark.style.filter='alpha(opacity='+opacity+')'; 
    dark.style.zIndex=zindex;        
    dark.style.backgroundColor=bgcolor;  
    dark.style.width= pageWidth;
    dark.style.height= pageHeight;
    dark.style.display='block';                          
  } else {
     dark.style.display='none';
  }
}

function addImage(thumb, what, type, desc)
{
  var ni = document.getElementById('content');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  var onClick;
  
  numi.value = num;
  var newdiv = document.createElement('div');
  ni.appendChild(newdiv);
  var divIdName = 'image'+num+'Div';
  newdiv.setAttribute('id',divIdName);
  newdiv.className = 'imagethumb_' + type;
  if (typeof desc == 'undefined')
  {
  	desc = '';
  }
  if (type == 'c')
  {
  	onClick = "showSection('" + what + "');";
  }
  else
  {
  	onClick = "showLargeImage('" + what.replace(/'/, '\\\'') + "','" + type.replace(/'/, '\\\'') + "','" + desc.replace(/'/, '\\\'') + "');";
  }
  myHTML = '<img src="' + thumb + '" class="photo_' + type + '" onClick="' + onClick + '" />';
  if (type == 'c')
  {
  	myHTML = myHTML + '<div class="catdesc">' + desc + '</div>';
  }
  newdiv.innerHTML = myHTML;
}

function clearImages()
{
	var i;

	var imageDiv;
	var num;
	var count = document.getElementById('theValue').value;
	var ni = document.getElementById('content');
	
	if (count > 0)
	{
		for (var i=0;i<count;i++)
		{
			num = count - i;
			imageDiv = document.getElementById('image'+num+'Div');
			if (imageDiv)
			{
				ni.removeChild(imageDiv);
			}
		}
	}
	document.getElementById('theValue').value = 0;
}

function showSection(section)
{
	menu.showMenuCat(section);
}

function openInfo()
{
	if (document.getElementById('infoframe').src != 'info.html')
	{
		document.getElementById('infoframe').src = 'info.html';
	}
	grayOut(true, {'bgcolor':'#514C5D','opacity':'50'});
	toggleLayer("info");
}

function openCopyright()
{
	if (document.getElementById('infoframe').src != 'copyright.html')
	{
		document.getElementById('infoframe').src = 'copyright.html';
	}
	grayOut(true, {'bgcolor':'#514C5D','opacity':'50'});
	toggleLayer("info");
}

function closeInfo()
{
	toggleLayer("info");
	grayOut(false);
}
	
function showLargeImage(url, type, desc)
{
	grayOut(true, {'bgcolor':'#514C5D','opacity':'75'});
	toggleLayer("loader");
	document.getElementById("fullsizeimg").src = url;
	descDiv = document.getElementById('descdiv');
	if (desc != '')
	{
	  descDiv.innerHTML = desc;
	}
	else
	{
		descDiv.innerHTML = '';
	}
}

function resizeFullImage()
{
	var fullSizeDiv = document.getElementById("fullsize");
	descDiv = document.getElementById('descdiv');
	fullSizeDiv.style.zIndex = -10;
	fullSizeDiv.style.marginLeft = -1000;
	fullSizeDiv.style.marginTop = -1000;
	toggleLayer("fullsize");
	var fullSizeImg = document.getElementById("fullsizeimg");
	fullHeight = fullSizeImg.offsetHeight + descDiv.offsetHeight;
	fullSizeDiv.style.width = fullSizeImg.width + 4;
	fullSizeDiv.style.height = fullHeight + 6;
	fullSizeDiv.style.marginLeft = "-" + parseInt(fullSizeDiv.offsetWidth / 2) + "px";
	fullSizeDiv.style.marginTop = "-" + parseInt(fullHeight / 2) + "px";
	fullSizeDiv.style.zIndex = 100;
	toggleLayer("loader");
}

function hideFullImage()
{
	toggleLayer("fullsize");
	grayOut(false);
}

function goForward()
{
  imageIndex += maxNumber;
  menu.showMenuCont(currentCat);
}

function goBack()
{
  imageIndex -= maxNumber;
  if (imageIndex < 0)
  {
    imageIndex = 0;
  }
  menu.showMenuCont(currentCat);
}

/* Functions for building the menu structure */

/* MenuItem */
function showMenuItem()
{
	addImage(this.thumb, this.what, this.type, this.desc);
}

function MenuItem(thumb, what, type, desc)
{
	this.thumb = thumb;
	this.what = what;
	this.type = type;
	this.desc = desc;
	this.show = showMenuItem;
}

/* MenuCat */
function addMenuItemToCat(menuItemOb)
{
	this.menuItems.push(menuItemOb);
}

function showMenuCat()
{
  imageIndex = 0;
  currentCat = this.name;
  this.showMaxImages();
}

function showMaxImages()
{
	clearImages();
  imageCounter = 0;
	for (var i=0;i<this.menuItems.length;i++)
  {
    if (i >= imageIndex)
    {
      if (imageCounter < maxNumber)
      {
		    this.menuItems[i].show();
		    imageCounter++;
		  }
		}
	}
	menuTitleDiv = document.getElementById('menutitle');
	contentDiv = document.getElementById('content');
	menuTitleDiv.innerHTML = this.desc;
	menuTitleDiv.style.right = "0px";
	forwardLink = document.getElementById('forwardlink');
	backLink = document.getElementById('backlink');
	upLink = document.getElementById('uplink');
	if (imageIndex + imageCounter < this.menuItems.length)
	{
		forwardLink.style.display = 'block';
	}
	else
	{
	  forwardLink.style.display = 'none';
  }
  if (imageIndex == 0)
  {
    backLink.style.display = 'none';
  }
  else
  {
    backLink.style.display = 'block';
  }
  if (this.name != 'main')
  {
    upLink.style.display = 'block';
  }
  else
  {
    upLink.style.display = 'none';
  }
  grayOut(false);
}

function MenuCat(catName, desc)
{
	this.name = catName;
	this.menuItems = new Array();
	this.desc = desc;
	this.addMenuItem = addMenuItemToCat;
	this.show = showMenuCat;
	this.showMaxImages = showMaxImages;
}

/* MenuStructure */
function addMenuCat(menuCatName, desc)
{
	var menuCatOb = new MenuCat(menuCatName, desc);
	this.menuCategories.push(menuCatOb);
}

function addMenuItem(menuCatName, thumb, what, type, desc)
{
	var found = false;
	var menuItemOb = new MenuItem(thumb, what, type, desc);
	
	for (var i=0;i<this.menuCategories.length;i++)
	{
		if (this.menuCategories[i].name == menuCatName)
		{
			this.menuCategories[i].addMenuItem(menuItemOb);
			found = true;
		}
	}
	if (type == 'c')
	{
	  this.addMenuCat(what, desc);
	}
	if (!found)
	{
	  if (type != 'c')
	  {
		  this.addMenuCat(menuCatName, '');
		}
		this.addMenuItem(menuCatName, thumb, what, type, desc);
	}
}

function showMenu(catName)
{
	for (var i=0;i<this.menuCategories.length;i++)
	{
		if (this.menuCategories[i].name == catName)
		{
			this.menuCategories[i].show();
		}
	}
}

function showMenuCont(catName)
{
	for (var i=0;i<this.menuCategories.length;i++)
	{
		if (this.menuCategories[i].name == catName)
		{
			this.menuCategories[i].showMaxImages();
		}
	}
}

function showMainMenu()
{
	this.showMenuCat('main');
}

function menuStructure()
{
	this.menuCategories = new Array();
	this.addMenuCat = addMenuCat;
	this.addMenuItem = addMenuItem;
	this.showMenuCat = showMenu;
	this.showMainMenu = showMainMenu;
	this.showMenuCont = showMenuCont;
}

var menu = new menuStructure();
menu.addMenuCat('main', '');

function setMenuItem(catName, thumb, what, type, description)
{
	menu.addMenuItem(catName, thumb, what, type, description);
}

function toggleLayer( whichLayer )
{
  var elem, vis;
  if( document.getElementById ) // this is the way the standards work
    elem = document.getElementById( whichLayer );
  else if( document.all ) // this is the way old msie versions work
      elem = document.all[whichLayer];
  else if( document.layers ) // this is the way nn4 works
    elem = document.layers[whichLayer];
  vis = elem.style;
  // if the style.display value is blank we try to figure it out here
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}

// Browser Window Size and Position
// copyright Stephen Chapman, 3rd Jan 2005, 8th Dec 2005
// you may copy these functions but please keep the copyright notice as well
function pageWidth() {return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ?       document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;} function pageHeight() {return  window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ?  document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;} function posLeft() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset :document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;} function posTop() {return typeof window.pageYOffset != 'undefined' ?  window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;} function posRight() {return posLeft()+pageWidth();} function posBottom() {return posTop()+pageHeight();}
function sizeContent(redraw)
{
  // Defaults, for 1280 x 1024 fullscreen
  contentWidth = 825;
  contentHeight = 655;
  // 3 x 3 = 9 maximum
  rows = 3;
  cols = 3;
  
  // Determine window sizes
  winWidth = pageWidth();
  winHeight = pageHeight();
  
  if (winHeight < 650)
  {
    // Resolution lower than 1280
    contentHeight = 455;
    rows = 2;
  }
  if (winHeight < 490)
  {
    contentHeight = 250;
    rows = 1;
  }
  if (winWidth < 825)
  {
    contentWidth = 600;
    cols = 2;
  }
  maxNumber = rows * cols;
	contentDiv = document.getElementById('content');
	logoDiv = document.getElementById('logo');
	menuDiv = document.getElementById('menubar');
	contentDiv.style.width = contentWidth;
	contentDiv.style.height = contentHeight;
	contentDiv.style.marginLeft = "-" + parseInt(contentWidth / 2) + "px";
	contentDiv.style.marginTop = "-" + parseInt(contentHeight / 2) + "px";
	logoDiv.style.width = contentWidth;
	logoDiv.style.marginLeft = "-" + parseInt(contentWidth / 2) + "px";
	logoDiv.style.marginTop = "-" + parseInt((contentHeight / 2) + 40) + "px";
	menuDiv.style.width = contentWidth;
	menuDiv.style.marginTop = parseInt((contentHeight / 2) + 5) + "px";
	menuDiv.style.marginLeft = "-" + parseInt(contentWidth / 2) + "px";
	if (redraw)
	{
	  menu.showMenuCont(currentCat);
  }
  else
  {
    menu.showMainMenu();
  }
}