/*
	script_artist.js
	Scripts for susanhobbs.com - for individual artist pages
	
	Copyright ©2010 Gordon Hicks, all rights reserved	
*/	

// global vars
document.currentPhotoNum; // the currently visible photo [ 1, 2, 3, ... ]
document.currentTextId = 'about'; // the id of the text block currently shown [ about, biography, bibliography ]

// bind onload handler
window.onload = init;

// Initialize
function init() {
	initPhotos();
	initTextNav();
}


// Initialize Photos
function initPhotos() {
	// get the collection of photos...
	var photoElements = document.getElementById('photos').getElementsByTagName('div');
	// photo-nav elements
	var photoNav = document.getElementById('photo-nav');
	var divPhotosText = document.getElementById('photos-text'); // div containing "Photos:"
	// for each photoElement...
	for ( var i = photoElements.length-1; i >= 0; i-- ) {
		// width of caption...
		// get the img element
		var imgElement = photoElements[i].getElementsByTagName('img')[0];
		// get width of img
		var theWidth = imgElement.width;
		// set photoElement width = image width + 2px
		photoElements[i].style.width = ( theWidth + 2 ) + 'px';
		// 'next' link for this photo...
		// wrap <img> with <a> and bind nextPhoto handler
		var newElement = document.createElement('a');
		newElement.onclick = nextPhoto;
		newElement.appendChild( imgElement.cloneNode(true) ); // <a><img /></a>
		photoElements[i].replaceChild( newElement, imgElement );
		photoElements[i].setAttribute( 'id', 'photo-' + (i + 1) );
		// add index number for this photo...
		// build up from inside out (russian doll style)
		var theSpan = document.createElement('span')
		theSpan.appendChild( document.createTextNode( i + 1 + '' ) );
		var theLink = document.createElement('a');
		theLink.onclick = selectPhoto;
		theLink.setAttribute( 'href', '#' );
		theLink.appendChild( theSpan );
		var theDiv = document.createElement('div');
		theDiv.className = 'num';
		theDiv.setAttribute( 'id', 'num-' + (i + 1) );
		theDiv.appendChild( theLink );
		photoNav.insertBefore( theDiv, divPhotosText );
	}
	// show first photo
	showPhoto( '1' );
}

// Initialize Text Nav
function initTextNav() {
	// get the text nav elements...
	var linkElements = document.getElementById('text-nav').getElementsByTagName('div');
	var firstLinkElement = null;
	// step through the links
	for ( var i = 0; i < linkElements.length; i++ ) {
		// id must begin with 'nav-'
		if ( 0 == linkElements[i].id.indexOf('nav-', 0) ) {
			// grab first link...
			if ( firstLinkElement == null ) {
				firstLinkElement = linkElements[i];
			}
			// does a corresponding div exist for this link?
			var divElement = document.getElementById( linkElements[i].id.substring(4) ); // strip 'nav-' to get the divElement id
			if ( divElement ) {
				// bind handler to link
				linkElements[i].getElementsByTagName('a')[0].onclick = clickTextNavLink;
			}
		}
	}
}


function nextPhoto() {
	var photoNum = (document.currentPhotoNum * 1) + 1
	if ( ! document.getElementById( 'photo-' + photoNum ) ) {
		photoNum = '1';
	}
	showPhoto( photoNum );
}

function selectPhoto() {
	showPhoto( this.parentNode.id.substr(4) ); // strip away 'num-' to get the number
	return false;
}


function showPhoto( photoNum ) {
	// show photo specified by photoNum; hide old one.
	//
	// hide current photo...
	var photoElement = document.getElementById( 'photo-' + document.currentPhotoNum );
	if (photoElement) {
		photoElement.style.visibility = 'hidden';
		photoElement.style.zIndex = 1;
	}
	// photo-nav not 'here'
	
	var linkElement = document.getElementById( 'num-' + document.currentPhotoNum )
	if ( linkElement ) {
		var navElement = linkElement.getElementsByTagName('a')[0];
		if ( navElement ) {
			navElement.className = '';
		}
	}
	// show specified photo...
	photoElement = document.getElementById( 'photo-' + photoNum );
	photoElement.style.visibility = 'visible';
	photoElement.style.zIndex = 2;
	// photo-nav 'here'
	var navElement = document.getElementById( 'num-' + photoNum ).getElementsByTagName('a')[0];
	if ( navElement ) {
		navElement.className = 'here';
	}
	// 
	document.currentPhotoNum = photoNum;
	return false;
}

function clickTextNavLink() {
	// hide the old section, reveal the new one...
	// get textId from this link id
	var textId = this.parentNode.id.substring(4); // strip 'nav-'
	// hide current text section...
	var divElement = document.getElementById( document.currentTextId );
	if (divElement) {
		divElement.style.display = 'none';
	}
	// text-nav not 'here'
	var navElement = document.getElementById( 'nav-' + document.currentTextId ).getElementsByTagName('a')[0];
	if ( navElement ) {
		navElement.className = '';
	}
	// show specified text section...
	divElement = document.getElementById( textId );
	divElement.style.display = 'block';
	// text-nav 'here'
	var navElement = document.getElementById( 'nav-' + textId ).getElementsByTagName('a')[0];
	if ( navElement ) {
		navElement.className = 'here';
	}
	// 
	document.currentTextId = textId;
	return false;
}