// image gallery code adapted by ninthlink, inc
var galleryLinkColor = '#ffffff';
var gallerySelectColor = '#ff4c0a';
var galleryOnColor = '#e4bc7e';

loadEvents.add(function(){
	var swapperImg = document.getElementById('scSwapperImg');
	var scImgSwapList = document.getElementById('gall');
	var scImgSwapLinks = scImgSwapList.getElementsByTagName('A');
	
	var sc = document.getElementById('left-col');
	
	var numberP = document.getElementById('number');
	var titleP = document.getElementById('title');
	var galleryP = document.getElementById('gallery');
	
	var imgTitle; var splitTitle;
	
	var lnk; var sectionTitle = (getSectionImg(scImgSwapLinks[0].href)).id; var lastSlash; var newLength; 
	var oldCenterImg; var newCenterImg;  var oldExtent; 
	for(var i = 0; lnk = scImgSwapLinks[i]; i++ ){
		lnk.onclick = function(){
			// /* change the text nodes
			imgTitle = this.innerHTML;
			if(imgTitle.charAt(0) == '<') {
				imgTitle = this.title;
			}
			splitTitle = imgTitle.split(' - ');
			titleP.innerHTML = splitTitle[0];
			galleryP.innerHTML = splitTitle[1];
			imgTitle = this.href;
			// */
			// now imgTitle = src of new center img, so we want to set the center img to transparent until the new img loads
			oldCenterImg = document.getElementById('scSwapperImg');
			oldExtent = { x: oldCenterImg.width, y: oldCenterImg.height };
			oldCenterImg.src = '../images/transparent.gif';
			oldCenterImg.width = oldExtent.x;
			oldCenterImg.height = oldExtent.y;
			newCenterImg = document.createElement('img');
			newCenterImg.id = oldCenterImg.id;
			newCenterImg.onload = function(){	
				oldCenterImg.parentNode.replaceChild(newCenterImg, oldCenterImg);
			}
			newCenterImg.src = imgTitle;
			// and change the numberTextNode
			newLength = imgTitle.length - 6;
			numberP.innerHTML = imgTitle.substr(newLength, 2);
			sectionTitle = '';
			selectedSwapLink.setState('off'); // unhighlight the old link / section name
			selectedSwapLink.switchRow('off');
			selectedSwapLink = this;
			selectedSwapLink.setState('on');
			sectionTitle = (getSectionImg(this.href)).id;
			//and now get all crazy and shade the rest of the links in this rizow
			this.switchRow('on');
			return false;
		}
		lnk.onmouseover = function(){
			if((this.innerHTML).charAt(0) != '<') { // set link title unless it already has one
				this.title = ((this.innerHTML).split(' - '))[0];
			}
			if(selectedSwapLink != this){
				this.setState('on');
			}
		}
		lnk.onmouseout = function(){
			if(selectedSwapLink != this){
				this.setState('off');
			}
		}
		lnk.setState = function(s){ 
			if ( s == 'on' ) {  //change this link.bgcolor to dark
				this.style.backgroundColor = gallerySelectColor;
				imgTitle = this.href; // and highlight the section name
				lastSlash = getSectionImg(imgTitle);
				lastSlash.src = sectionOn ( lastSlash.src );
			}
			if ( s == 'off' ) { //change this link.bgcolor to light
				imgTitle = this.href; // and un-highlight the section name
				lastSlash = getSectionImg(imgTitle);
				//IF this link is NOT in the same section as the selectedSwapLink...
				if(lastSlash.id != sectionTitle) { 
					lastSlash.src = sectionOff ( lastSlash.src );
					this.style.backgroundColor = galleryLinkColor;
				}
				else { this.style.backgroundColor = galleryOnColor; }
			}
			if ( s == 'sOn' ) { this.style.backgroundColor = galleryOnColor; }
			if ( s == 'sOff' ) { this.style.backgroundColor = galleryLinkColor; }
		}
		lnk.onfocus = function(){
			this.blur(); // what does this even mean?!
		}
		lnk.switchRow = function(s) {
			newLength = (this.parentNode).getElementsByTagName('A');
			for(var j=0; lastSlash = newLength[j]; j++) {
				if(s=='on') {
					if (lastSlash != this ) { 
						lastSlash.setState('sOn');
					}
				}
				if(s=='off') {
					lastSlash.setState('sOff');
				}
			}
		}
	}
	
	var selectedSwapLink = scImgSwapLinks[0];
	selectedSwapLink.setState('on');
	selectedSwapLink.switchRow('on');
});

function getSectionImg(imgSrc) { // takes in the whole deal (file:///Z:/...) or (http://www...)
	var lastSlash = imgSrc.lastIndexOf('/')+1;
	var sectionName = imgSrc.substr(lastSlash,imgSrc.length - 6 - lastSlash);
	return document.getElementById(sectionName);
}

function sectionOn ( imgSrc ) {
	var newLength = imgSrc.length - 4;
	if( imgSrc.indexOf('-over.gif') == -1 ) {
		return imgSrc.substr(0,newLength) + '-over.gif';
	}
	else return imgSrc;
}

function sectionOff (imgSrc) {
	var newLength = imgSrc.length - 4;
	if( imgSrc.indexOf('-over.gif') != -1 ) {
		return imgSrc.substr(0,newLength - 5) + '.gif';
	}
	else return imgSrc;	
}