function onBodyLoad()
{	
	// Workaround browsers *ahem, IE, ahem* that don't support getElementsByClassName()
	setClassMethod();
	
	//Create a div to use as a panel displayed on hover
	var hoverPanel = document.createElement("div");
	hoverPanel.id = "hoverPictureItem";
	hoverPanel.style.display = 'none';
	document.body.appendChild(hoverPanel);
	
	//Dyncamically build style info for the image cells. Pass ref to the panel shown on hover.
	fillPictureColumns();
	
	//Hide hover panel when hovering over column containing navList
	var navColumn = document.getElementById("navColumnKH");
	if(navColumn)
	{
		navColumn.onmouseover = function(){
			hoverPanel.style.display = 'none';
		};
	}
	
	//Hide hover panel when mouse leaves the image column group
	var columnsGrp = document.getElementById("columnsGroupKH");
	if(columnsGrp)
	{
		columnsGrp.onmouseout = function(){
			hoverPanel.style.display = 'none';
		}
	}
	
	// Fade in the navList ul until at 100% opacity
	//setTimeout("fadeInNavList()", 25);
	disableAllDivs();
}

// Fade in the navList ul until at 100% opacity
/*function fadeInNavList()
{
	fade("navList");
}*/

function fadeOutImageGroup()
{
	var pictureColumns = document.getElementsByClassName("pictureColumn");
	if(pictureColumns)
	{
		for(var i=0; i< pictureColumns.length; i++)
		{
			fade(pictureColumns[i].id);
		}
	}
}

var onImageClick = function(){
	reorderAfter("navColumnKH", "pictureColumn2");
	reorderAfter("pictureColumn2", "pictureColumn1");
	fadeOutImageGroup();	
	
	var mainPanel = document.getElementById('columnsGroupKH');
	if(!document.getElementById('mainImageViewer'))
	{
		var imgView = new kaceyH.imageViewer('mainImageViewer', this.imageViewIndex);
		mainPanel.appendChild(imgView);
	}
};

var onImageMouseOver = function(){
	var hoverPanel = document.getElementById('hoverPictureItem');
	hoverPanel.style.display = 'block';
					
	if(this.title)
	{
		hoverPanel.innerHTML = "<div style='position:relative;top:75%;'><center>" + this.title + "</center></div>";
	}
	else
	{
		hoverPanel.innerHTML = "";
	}
	
	this.appendChild(hoverPanel);
};

//Dynamically build style info for image cells.
//Some of this should be represented by new styles in main.css
function fillPictureColumns()
{
	var pictureColumns = document.getElementsByClassName("pictureColumn");
	
	if(pictureColumns)
	{
		var k = 0;
		for(var i=0; i< pictureColumns.length; i++)
		{
			for(var j=0; j<4; j++)
			{
				var pictureColumn = pictureColumns[i];
				var imageList = imageLists[k];
				var newImg = document.createElement("div");
				newImg.className = "pictureItem";
				newImg.style.backgroundImage = "url('" + imageList.thumb +"')";
				newImg.title = imageList.thumbDescription;
				newImg.imageViewIndex = k;
				if (newImg.addEventListener)
				{
				    newImg.addEventListener('click',onImageClick,false); //everything else    
				    newImg.addEventListener('mouseover',onImageMouseOver,false); //everything else    
				}
				else if (newImg.attachEvent)
				{
				    newImg.attachEvent('onclick', function() {onImageClick.call(newImg, window.event)});  //IE only
				    newImg.attachEvent('mouseover',onImageMouseOver);  //IE only
				}
				pictureColumn.appendChild(newImg);
				k++;
			}
		}
	}
}

function reorderBefore(divToMoveId, divToMoveBeforeId) {
  var divToMove = document.getElementById(divToMoveId);
  divToMove.parentNode.insertBefore(divToMove, document.getElementById(divToMoveBeforeId));
}

function reorderAfter(divToMoveId, divToMoveAfterId) {
  var divToMove = document.getElementById(divToMoveId);
  divToMove.parentNode.insertBefore(document.getElementById(divToMoveAfterId), divToMove);
}

//User clicked a navListItem. Browse to associated location.
function navListClick(navigationPoint)
{
	switch(navigationPoint)
	{
		case "bridal":
		{
			break;
		}
		case "daily":
		{
			break;
		}
		case "shop":
		{
			window.open("http://www.etsy.com/shop/twistedcrystals");
			break;
		}
		case "contact":
		{
			// show the contact form
			try{
				document.removeChild(document.getElementById('mainImageViewer'));
			}catch(DOMException){
			}
			var mainPanel = document.getElementById('columnsGroupKH');
			mainPanel.appendChild(new kaceyH.contactForm('contactForm'));
			break;
		}
		default:
		{
			break;
		}
	}
}

// Workaround browsers *ahem, IE, ahem* that don't support getElementsByClassName()
function setClassMethod(){
	if (!document.getElementsByClassName) {
		document.getElementsByClassName = function (cn) { 
			var rx = new RegExp("(?:^|\\s)" + cn+ "(?:$|\\s)");
			var allT = document.getElementsByTagName("*"), allCN = [], ac="", i = 0, a;
				while (a = allT[i=i+1]) {
				  ac=a.className;
				  if ( ac && ac.indexOf(cn) !==-1) {
					if(ac===cn){ allCN[allCN.length] = a; continue;   }
					rx.test(ac) ? (allCN[allCN.length] = a) : 0;
				  }
				}
			return allCN;
		}
	}
}