/**
 * $Id: gallery.js 190 2007-12-13 03:34:56Z tdowg1 $
 *
 */

var thisURL = document.location.href;
var splitURL = thisURL.split("#");
var photoId = splitURL[1] - 1;
var isLinkBoxVisible = false; // PREV+NEXT

var photoId = (!photoId) ? 0 : photoId;
if(photoId < 0) photoId = 0;

/*--------------------------------------------------------------------------*/
// Set ground rules for effects
function init() {
	// Establish menu and loading effects
	myMenu = new fx.Height('linkBox', {duration: 600}); // PREV+NEXT
	myLoading = new fx.Combo('loadBox', {duration: 400}); // holds LOAD IMG

	// START THE SHOW
	mySlideshow.initSwap();
}

// Additional methods for Element added by SU, Couloir
Object.extend(Element, {
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src;
	}
	,setHref: function(element,href) {
    	element = $(element);
    	element.href = href;
	}
	,setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
	// Override hide, show functions in prototype
	,hide: function(element) {
		element = $(element);
		element.style.display = 'none';
	}
	,show: function(element) {
		element = $(element);
		element.style.display = '';
	}
});
/*--------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------*/
// Slideshow class [FROM Prototype object "Class"]
var Slideshow = Class.create();


Slideshow.prototype = {
	initialize: function(photoId) {
		this.photoId 		= photoId;
		this.photo 			= 'photo';
		this.prevLink 		= 'prevLink';
		this.nextLink 		= 'nextLink';
		this.counter 		= 'counter';
		this.loadImg		= 'loadImg';
		this.loadImgSrc		= '_img/loading_ani.gif'; // 568x409
		// this.loadImgSrc		= '_img/loading_ani2.gif'; // 48x54
		this.loadImgTmpSrc	= '_img/c.gif';
		this.controller 	= 'ajx_currImg.php';
	}
//	setNewPhotoParams: function() {  // alert("Slideshow.prototype = {	setNewPhotoParams...");
//		// Set source of new image
//		Element.setSrc(this.photo, photoDir + photoArray[photoId][0]);
//		// Set anchor for bookmarking
//		Element.setHref(this.prevLink, "#" + (photoId+1));
//		Element.setHref(this.nextLink, "#" + (photoId+1));
//	}
	,setCounter: function() {
		// Add counter to indicate current photo of how many total
		Element.setInnerHTML(this.counter, ((photoId + 1) + ' of ' + photoNum));
	}

	,nextPhoto: function(){
		// Figure out which photo is next
		(photoId == (photoNum - 1)) ? photoId = 0 : photoId++;
		this.toggleLoading();
		this.initSwap();
	}
	,prevPhoto: function(){
		// Figure out which photo is previous
		(photoId == 0) ? photoId = photoNum - 1 : photoId--;
		this.toggleLoading();
		this.initSwap();
	}

	,toggleLoading: function() {
		// Toggle loading layer on/off
		myLoading.toggle();
	}
	,toggleNextPrev: function() {
		// Toggle the next/previous links on/off
		if(isLinkBoxVisible == false){
			Element.hide(this.nextLink);
			Element.hide(this.prevLink);
			isLinkBoxVisible = true;
		} else {
			Element.show(this.nextLink);
			Element.show(this.prevLink);
			isLinkBoxVisible = false;
		}
	}
	,ajaxPhotoSwap: function() {
		// Request next photo in series
		var pars = 'id=' + photoId;
		new ajax (this.controller, {postBody: pars, onComplete: function(request){$('photo').src = request.responseText;}});
	}
	,initSwap: function() {
		// Hide photo and next/previous links temporarily
		Element.setSrc(this.loadImg,this.loadImgSrc);
		Element.hide(this.photo);
		// Set values for bookmarkable links
		Element.setHref(this.prevLink, "#" + (photoId+1));
		Element.setHref(this.nextLink, "#" + (photoId+1));
		// Request src for new image
		this.ajaxPhotoSwap();
		this.setCounter();
		// Hide next/previous links immediately
		this.toggleNextPrev();
	}
	,endSwap: function() {
		// Set events once swap has occurred
		Element.setSrc(this.loadImg, this.loadImgTmpSrc);
		Element.show(this.photo);
		this.toggleLoading();


		// Show next/previous links after delay (ms)
		setTimeout(this.toggleNextPrev.bind(this),600);
	}
}





/*--------------------------------------------------------------------------*/
// Establish CSS-driven events via Behaviour script
var myEventBehaviors = {
	'#photo' : function(element){
		element.onload = function(){
			setTimeout("mySlideshow.endSwap();",1000);
		}
	},
	'#prevLink' : function(element){
		element.onclick = function(){
			mySlideshow.prevPhoto();
		}
	},
	'#nextLink' : function(element){
		element.onclick = function(){
			mySlideshow.nextPhoto();
		}
	},
	a : function(element){
		element.onfocus = function(){
			this.blur();
		}
	}
};
/*--------------------------------------------------------------------------*/
// Initialize event handlers
Behaviour.register(myEventBehaviors);
Behaviour.addLoadEvent(init);
Behaviour.apply();