window.onload = function() {
	var containers = document.getElementById("mainbody").childNodes;
	for(var i = containers.length - 1; i >= 0; i--) {
		var container = containers[i];
		if(container.nodeName == "DIV" && container.className) {
			// first add info functionality to each item
			initItemRows(container);
			
			// second, add view buttons to each group
			var iconViewBtn = document.createElement("img");
			iconViewBtn.className = "iconviewbtn viewbtn";
			iconViewBtn.src = "/common/img/group-view-icon.gif";
			iconViewBtn.alt = "Icon View";
			iconViewBtn.width = "12";
			iconViewBtn.height = "11";
			iconViewBtn.onclick = function() {
				toggleGroupView(2,this);
			}
			container.insertBefore(iconViewBtn,container.firstChild);

			var medViewBtn = document.createElement("img");
			medViewBtn.className = "medviewbtn viewbtn";
			medViewBtn.src = "/common/img/group-view-med.gif";
			medViewBtn.alt = "Medium View";
			medViewBtn.width = "12";
			medViewBtn.height = "11";
			medViewBtn.onclick = function() {
				toggleGroupView(1,this);
			}
			container.insertBefore(medViewBtn,container.firstChild);

			var listViewBtn = document.createElement("img");
			listViewBtn.className = "listviewbtn viewbtn";
			listViewBtn.src = "/common/img/group-view-list-on.gif";
			listViewBtn.alt = "List View";
			listViewBtn.width = "12";
			listViewBtn.height = "11";
			listViewBtn.onclick = function() {
				toggleGroupView(0,this);
			}
			container.insertBefore(listViewBtn,container.firstChild);
		}
	}
}

function initItemRows(container) {
	var items = container.getElementsByTagName("li");
	for(var j = items.length-1; j >= 0; j--) {
		var infoBtn = document.createElement("img");
		infoBtn.className = "infobtn";
		infoBtn.src = "/common/img/list-more-info.gif";
		infoBtn.alt = "view information";
		infoBtn.width = "12";
		infoBtn.height = "12";
		infoBtn.onclick = function() {
			if(this.parentNode.parentNode.className.indexOf("showingdetails") >= 0) {
				this.parentNode.parentNode.className = this.parentNode.parentNode.className.replace(" showingdetails","");
				this.src = "/common/img/list-more-info.gif";
				this.alt = "view information";
			}
			else { 
				this.parentNode.parentNode.className += " showingdetails";
				this.src = "/common/img/list-close-arrow.gif";
				this.alt = "hide information";
			}
		}
		items[j].getElementsByTagName("div")[0].appendChild(infoBtn);
	}
}

function toggleGroupView(viewnum,btn) {
	switch(viewnum) {
		case 0:
			btn.src = "/common/img/group-view-list-on.gif";
			btn.nextSibling.src = "/common/img/group-view-med.gif";
			btn.nextSibling.nextSibling.src = "/common/img/group-view-icon.gif";
			btn.parentNode.className = "contentitemscontainer viewlist";
			break;
		case 1:
			btn.previousSibling.src = "/common/img/group-view-list.gif";
			btn.src = "/common/img/group-view-med-on.gif";
			btn.nextSibling.src = "/common/img/group-view-icon.gif";
			btn.parentNode.className = "contentitemscontainer viewmed";
			break;
		case 2:
			btn.previousSibling.previousSibling.src = "/common/img/group-view-list.gif";
			btn.previousSibling.src = "/common/img/group-view-med.gif";
			btn.src = "/common/img/group-view-icon-on.gif";
			btn.parentNode.className = "contentitemscontainer viewicon";
			break;
	}
}

function loadItems(lnk) {
	var totalItemsPerGroup=5;
	var errorLoadMsg = "There was an error loading this content.";
	var loadMsg = "Loading ...";
	var showLessMsg = "Show Less";
	var container = lnk.parentNode.parentNode;
	var items=container.childNodes;
	var items = container.getElementsByTagName("li");
	if(container.allvisible) {
		var hiddenCount = 0;
		for(var i = items.length-1; i >= totalItemsPerGroup; i--) {
			items[i].style.display = "none";
		//	if(i%4==0) items[i].parentNode.style.display = "none";
			hiddenCount++;
		}
		lnk.innerHTML = hiddenCount+" More";
		container.allvisible = false;
	}
	else {
		for(var i = items.length-1; i >= totalItemsPerGroup; i--) {
			items[i].style.display = "block";
			if(i%4==0) items[i].parentNode.style.display = "block";
		}
		lnk.innerHTML = showLessMsg;
		container.allvisible = true;
	}
	lnk.blur();
}
