/**
 * MTV | Staying Alive
 * DOM Gallery
 * Converts accessible HTML into a dynamic HTML gallery
 */
 
 
/*
	Markup ::
	<p class="galleryNav">
		<span class="galleryPrev"><a href="">previous</a></span>
		<span>4 of 8</span>
		<span class="galleryNext"><a href="">next</a></span>
	</p>
	<img src="../images/temp_gallery.jpg" width="480" height="360" alt="" />
*/ 
 
 
 
try {
	/**
	 * @param string HTML element id
	 * @param array list of translated labels; "prev", "next", "of".
	 */
	function DOMGallery( id, trans ){
		// default translations
		if( ! trans.prev ){
			trans.prev = 'previous';
		}
		if( ! trans.next ){
			trans.next = 'next';
		}
		if( ! trans.of ){
			trans.of = 'of';
		}
		this.trans = trans;
		
		// Get handle on accessible image links
		var elData = document.getElementById( id );
		if( ! elData ){
			throw new Error('Failed to get '+id);
		}
		var links = elData.getElementsByTagName('a');
		if( ! links || ! links.length ){
			throw new Error('Gallery is empty');
		}
		this.urls = [];
		for( var i = 0; i < links.length; i++ ){
			this.urls[i] = links[i].href;
		}
		
		// Build navigation paragraph
		var elP = document.createElement('p');
		elP.className = 'galleryNav';
		// previous button
		
		
		var elPrevLink = document.createElement('a');
		var elPrevSpan = document.createElement('span');
		elPrevLink.className = 'prevImg';
		elPrevLink.appendChild( elPrevSpan );
		elPrevSpan.appendChild( document.createTextNode(trans.prev) );
		// next button
		var elNextLink = document.createElement('a'); 
		var elNextSpan = document.createElement('span');
		elNextLink.className = 'nextImg';
		elNextLink.appendChild( elNextSpan );
		elNextSpan.appendChild( document.createTextNode(trans.next) );
		// add click handlers, the old fashioned way
		var Me = this;
		elPrevLink.onclick = function(){ Me.prev(); };
		elNextLink.onclick = function(){ Me.next(); };
		// provide href for layout only
		elPrevLink.setAttribute('href','javascript:void(0);');
		elNextLink.setAttribute('href','javascript:void(0);');
		// initial message
		this.elMessageSpan = document.createElement('span');
		this.elMessageSpan.innerHTML = 'Loading gallery ...';
		// dummy/loader image
		this.elImage = document.createElement('img'); 
		this.elImage.setAttribute('width', '300');
		this.elImage.setAttribute('height', '166');
		this.elImage.setAttribute('src', '/images/transparent.gif');
		this.elImage.onclick = elNextLink.onclick;
		// replace accessible node with dynamic gallery
		elP.appendChild( elPrevLink );
		elP.appendChild( this.elMessageSpan );
		elP.appendChild( elNextLink );
		elP.appendChild( this.elImage );
		//alert( elP.innerHTML );
		elData.parentNode.replaceChild( elP, elData );
		// done, set initial image
		this.setPhoto( 0 );
	}
	
	DOMGallery.prototype.setPhoto = function( n ){
		this.index = n;
		var src = this.urls[ n ];
		if( src == null ){
			throw new Error('Error setting image['+n+']');
		}
		// set image src // @todo nice loader/fader?
		this.elImage.src = src;
		// message: "x of y"
		this.elMessageSpan.innerHTML = (n+1).toString() + ' '+this.trans.of+' ' + this.urls.length.toString();
	}
	
	DOMGallery.prototype.prev = function(){
		var n = this.index - 1;
		if( this.urls[n] == null ){
			n = this.urls.length - 1;
		}
		this.setPhoto( n );
	}
	
	DOMGallery.prototype.next = function(){
		var n = this.index + 1;
		if( this.urls[n] == null ){
			n = 0;
		}
		this.setPhoto( n );
	}
	

}
catch( Er ){
	alert( Er.toString() );
}