var toggleImages;

function preloadImages(groups) {
	toggleImages = new Array(groups.length +1);
	
	for (i=0; i < groups.length; i++) {
		baseImageFilename = getElement(groups[i] + 'Image').src;
		baseImageRef = baseImageFilename.substr(0, baseImageFilename.length-4);
		
		toggleImages[groups[i]] = new Array(3);
		
		for (j=0; j < 3; j++) {
			switch (j) {
				case 0:
					imageFilename = baseImageFilename;
					break;
				case 1:
					imageFilename = baseImageRef +'-button.gif';
					break;
				case 2:
					imageFilename = baseImageRef +'-underline-button.gif';
					break;
			}
			
			var preload = new Image();
			preload.src = imageFilename;
			
			toggleImages[groups[i]][j] = imageFilename;
		}
	}
	
	spacers = getSpacerElements();
	
	baseSpacerFilename = spacers[0].src;
	baseSpacerRef = baseSpacerFilename.substr(0, baseSpacerFilename.length-8);
	
	toggleImages['Spacer'] = new Array(2);
	for (i=0; i < 2; i++) {
		switch (i) {
			case 0:
				spacerFilename = baseSpacerFilename;
				break;
			case 1:
				spacerFilename = baseSpacerRef + 'noline.gif';
				break;
		}
		
		var preload = new Image();
		preload.src = spacerFilename;
		
		toggleImages['Spacer'][i] = spacerFilename;
	}
}

function getElement(id) {
	if (document.getElementById) {
		return document.getElementById(id);
	} else {
		return document.all(id);
	}
}

function isElementHidden(el) {
	return (el.style.display == 'none');
}

function showElement (el) {
	el.style.display = 'block';
}

function hideElement (el) {
	el.style.display = 'none';
}

function toggleEvents() {
	toggleSection ('events', new Array('logged'));
}

function toggleLogged() {
	toggleSection ('logged', new Array('events'));
}

function toggleSection (mainSection, otherSections) {
	mainPanel = getElement(mainSection +'SubPanel');
	
	if (isElementHidden(mainPanel)) {
		doExpand = true;
	} else {
		doExpand = false;
	}
	
	if (doExpand) {
		expandSection(mainSection);
	} else {
		collapseSection(mainSection);
	}
	
	numCollapsed = 0;
	for (i = 0; i < otherSections.length; i++) {
		panelName = otherSections[i] +'SubPanel';
		el = getElement(panelName);
		if (!isElementHidden(el)) {
			collapseSection(otherSections[i]);
			numCollapsed ++;
		}
	}
		
	if (doExpand && numCollapsed == 0) {
		// Previously they were all closed, so need to set all the other sections collapsed
		
		for (i=0; i < otherSections.length; i++) {
			collapseSection(otherSections[i]);
		}
		
		setSpacers();
		
	} else if (!doExpand	&& numCollapsed == 0) {
		// This was the last one open
		
		for (i=0; i < otherSections.length; i++) {
			closeSection(otherSections[i]);
		}
		closeSection(mainSection);
		
		setSpacersBlank();
	}
}

function collapseSection (section) {
	panel = getElement(section +'SubPanel');
	image = getElement(section +'Image');
	
	hideElement(panel);
	image.src = toggleImages[section][2];
}

function closeSection (section) {
	panel = getElement(section +'SubPanel');
	image = getElement(section +'Image');
	
	hideElement(panel);
	image.src = toggleImages[section][0];
}

function expandSection(section) {
	panel = getElement(section +'SubPanel');
	image = getElement(section +'Image');
	
	showElement(panel);
	image.src = toggleImages[section][1];
}

function setSpacers() {
	spacers = getSpacerElements();
	
	for (i = 0; i < spacers.length; i++) {
		spacers[i].src = toggleImages['Spacer'][0];
	}
}

function setSpacersBlank() {
	spacers = getSpacerElements();

	for (i = 0; i < spacers.length; i++) {
		spacers[i].src = toggleImages['Spacer'][1];
	}
}

function getSpacerElements() {
	container = getElement('loggedPanel');
	
	elArray = container.getElementsByTagName('img');
	
	spacers = new Array();
	
	for (i=0; i < elArray.length; i++) {
		if (elArray[i].className == 'spacer') {
			spacers.push(elArray[i]);
		}
	}
	
	return spacers;
}

function initImages() {
	preloadImages(new Array('logged', 'events'));
	collapseSection('logged');
	expandSection('events');
}