// -----------------------------------------------------------------------------------
// 
// This page coded by Scott Upton
// http://www.uptonic.com | http://www.couloir.org
//
// Modified and hacked up by Benjamin Gutschik
// http://www.radostfx.de
//
// This work is licensed under a Creative Commons License
// Attribution-ShareAlike 2.0
// http://creativecommons.org/licenses/by-sa/2.0/
//
// Associated APIs copyright their respective owners
//
// -----------------------------------------------------------------------------------
// --- version date: 11/20/05 --------------------------------------------------------


// get current photo id from URL
var thisURL = document.location.href;
var splitURL = thisURL.split("#");
var photoId = splitURL[1] - 1;

// if no photoId supplied then set default
var photoId = (!photoId)? 0 : photoId;

// CSS border size x 2
var borderSize = 16;

// CSS width of caption info box
var captionInfoWidth = 50;

// CSS width of caption box
var captionBoxWidth = 160;

// Photo directory for this gallery
var photoDir = "";

// Number of photos in this gallery
var photoNum = photoArray.length;

// added by bernie zajac
// Used for the thumbnail div scroller. By default
// it will automagically scroll according to the
// user's mouse position over the scrolliong div.
var autoScrollerActive = true;

/*--------------------------------------------------------------------------*/

// Additional methods for Element added by SU, Couloir
Object.extend(Element, {
	getWidth: function(element) {
   	element = $(element);
   	return element.offsetWidth; 
	},
	setWidth: function(element,w) {
   	element = $(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   	element = $(element);
    	element.style.height = h +"px";
	},
	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;
	},
	// added by Bernie Zajac for auto-scrolling thumbnail div
	setScrollLeft: function(element,value) {
		element = $(element);
		element.scrollLeft = value;
	},
	
	// added by benjamin gutschik for caption box
	setTop: function(element,t) {
   	element = $(element);
    	element.style.top = t +"px";
	},
	setLeft: function(element,l) {
   	element = $(element);
    	element.style.left = l +"px";
	},
	showMe: function(element) {
   	element = $(element);
    	element.style.display = '';
	},
	hideMe: function(element) {
   	element = $(element);
    	element.style.display = 'none';
	}
});

/*--------------------------------------------------------------------------*/

var Slideshow = Class.create();

Slideshow.prototype = {
	initialize: function(photoId) {
		this.photoId = photoId;
		this.photo = 'photo';
		this.photoBox = 'photo_container';
		this.prevLink = 'PrevLink';
		this.nextLink = 'NextLink';
		this.captionBox = 'caption_container';
		this.caption = 'caption';
		this.counter = 'image_counter';
		this.loader = 'photo_loading';
		this.captionInfo = 'caption_info';
		this.tooltip = 'tooltip';
		this.href = 'href';
	},
	getCurrentSize: function() {
		// Get current height and width, subtracting CSS border size
		this.wCur = Element.getWidth(this.photoBox) - borderSize;
		this.hCur = Element.getHeight(this.photoBox) - borderSize;
	},
	getNewSize: function() {
		// Get current height and width
		this.wNew = photoArray[photoId][1];
		this.hNew = photoArray[photoId][2];
	},
	getScaleFactor: function() {
		this.getCurrentSize();
		this.getNewSize();
		// Scalars based on change from old to new
		this.xScale = (this.wNew / this.wCur) * 100;
		this.yScale = (this.hNew / this.hCur) * 100;
	},
	setNewPhotoParams: function() {
		// Set source of new image
		Element.setSrc(this.photo,photoArray[photoId][0]);
		// Set anchor for bookmarking
		Element.setHref(this.prevLink, "#" + (photoId+1));
		Element.setHref(this.nextLink, "#" + (photoId+1));
			
	},
	setPhotoCaption: function() {
		// Add caption from gallery array
		// Element.setInnerHTML(this.caption,photoArray[photoId][3]);
		
		/* changed by benjamin gutschik to set the captions
		 * 
		 */
		Element.setInnerHTML(this.tooltip, "<strong>" + photoArray[photoId][3] + "</strong><br/>" + photoArray[photoId][4]);
		Element.setHref(this.href, photoArray[photoId][5]);
		
		Element.setInnerHTML(this.counter,((photoId+1)+'/'+photoNum));
	},
	
	resizePhotoBox: function() {
		this.getScaleFactor();
		new Effect.Scale(this.photoBox, this.xScale, {scaleY: false, duration: 0.4, queue: 'front'});
		new Effect.Scale(this.photoBox, this.yScale, {scaleX: false, delay: 0.5, duration: 0.4});
	},
	
	showPhoto: function(){
		/* changed by benjamin gutschik to set the width of the captionbox
		 * Element.setWidth(this.captionBox,this.wNew-(-borderSize));
		 */
		var wNew2 = photoArray[photoId][1];
		var hNew2 = photoArray[photoId][2];
		
		Element.setTop(this.captionInfo, -(hNew2/2) + 1 - (borderSize));
		Element.setLeft(this.captionInfo,  (wNew2/2) + 0.5 + (2*borderSize));
		
		// Dynamically resize caption box as well
		// Element.setWidth(this.captionBox, (wNew2));
		Element.setLeft(this.captionBox,  (wNew2/2) + 0.5 + (2*borderSize) - (captionBoxWidth-2*captionInfoWidth) + 6);
		Element.setTop(this.captionBox, -(hNew2/2) + 1 - (borderSize));
				
		/* It seems konqueror had a problem with the fades... after
		 * an element had been faded, if a appear was called it wouldn't
		 * actually appear.... who knows?!
		 */
		if (navigator.appVersion.match(/Konqueror/)) {
			new Element.hide(this.loader);
		} else {
			new Effect.Fade(this.loader, {delay: 0.3, duration: 0.3});
			new Effect.Appear(this.photo, {delay: 0.8, duration: 0.5});
			//new Effect.Appear(this.photo, {duration: 0.5, queue: 'end', afterFinish: function(){Element.show('PrevLink');Element.show('NextLink');}});
			
			// added by benjamin gutschik for appear effect in captionInfo
			if (photoArray[photoId][3]!="")
			{
				new Effect.Appear(this.captionInfo, { delay: 2, duration: 1.5});
			}
		}
		
		
		
	},
	nextPhoto: function(){
		// Figure out which photo is next
		(photoId == (photoArray.length - 1)) ? photoId = 0 : photoId++;
		this.initSwap();
	},
	prevPhoto: function(){
		// Figure out which photo is previous
		(photoId == 0) ? photoId = photoArray.length - 1 : photoId--;
		this.initSwap();
	},
	// added by Bernie Zajac for thumbnail listing.
	specificPhoto: function(pID) {
		photoId = pID;
		this.initSwap();
	},

	initSwap: function() {
		/* It seems konqueror had a problem with the fades... after
		 * an element had been faded, if a appear was called it wouldn't
		 * actually appear.... who knows?!
		 */
		if (navigator.appVersion.match(/Konqueror/)) {
			new Element.hide(this.loader);
		} else {
			new Element.makePositioned(this.photo);
			new Element.hide(this.photo);
			new Effect.Appear(this.loader, {delay: 0.1, duration: 0.3});
			
			// added by benjamin gutschik for appear effect in captionInfo
			new Element.hide(this.captionInfo);
			
			Element.hide(this.prevLink);
			Element.hide(this.nextLink);
	
		}
		this.setNewPhotoParams();
		this.resizePhotoBox();
		this.setPhotoCaption();
	}
}

/*--------------------------------------------------------------------------*/

// Establish CSS-driven events via Behaviour script
var myrules = {
	'#photo' : function(element){
		element.onload = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.showPhoto();
		}
	},
	'#PrevLink' : function(element){
		element.onmouseover = function(){
			soundManager.play('beep');
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.prevPhoto();
			soundManager.play('select');
		}
	},
	'#NextLink' : function(element){
		element.onmouseover = function(){
			soundManager.play('beep');
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.nextPhoto();
			soundManager.play('select');
		}
	},
	
	// added by bernie zajac for thumbnail listing.
	'.thumbnail' : function(element) {
		element.onclick = function() {
			var elementId = element.id;
			var newPhotoId = elementId.split("thmb");
			newPhotoId = newPhotoId[1];
			var myPhoto = new Slideshow(photoId);
			myPhoto.specificPhoto(newPhotoId);
		}		
	},
	a : function(element){
		element.onfocus = function(){
			this.blur();
		}
	},
	
	// added by Bernie Zajac. Used for the automagically
	// scrolling div. read comment for autoScrollerActive
	// variable up ^ there somewhere.
	'#thumbnail_wrapper' : function(el){
		el.onmousemove = function(event){
			var ie4 = (document.all)? true:false;
			var evt = (event) ? event : ((window.event)?window.event:new Object); 
			
			if (autoScrollerActive) {
				Position.prepare();
				var tscroller = 'thumbnail_scroller'
				var pointer  = [Event.pointerX(evt), Event.pointerY(evt)];
				var offsets = Position.cumulativeOffset(this);
				var mlocation = [pointer[0] - offsets[0],	pointer[1] - offsets[1]];
				var elementDimensions = Element.getDimensions(this);
				var deltaX = mlocation[0] / elementDimensions.width;
				deltaX = Math.round(deltaX * 1000) / 1000;
				var scrollerWidth;
				//if (window.opera || (navigator.appVersion.match(/Konqueror/)) || (navigator.appVersion.match(/Safari/))) {
					// hack workaround to determine the FULL width of the thumbnail
					// scrolling container.... bloody konqueror, opera, and others have
					// issues if using the standard pageX, etc.
					var e1 = $('tscroller');
					var tmp=el.style.overflow
					el.style.overflow='auto'
					var w=el.scrollWidth
					el.style.overflow=tmp
					scrollerWidth = w;
				//} else {
					//var scrollerWidth = Element.getDimensions(tscroller);
					//scrollerWidth = scrollerWidth.width;
				//}
				var newLeft = deltaX * (scrollerWidth - elementDimensions.width);
				newLeft = Math.round(newLeft)-1;
				if (newLeft < 0) newLeft = 0;
				if (newLeft > (scrollerWidth - elementDimensions.width)) newLeft = (scrollerWidth - elementDimensions.width);
				Element.setScrollLeft('thumbnail_wrapper', newLeft);
				
			}

		}
	},
	// added by Bernie Zajac... we have a checkbox such that the
	// user can disable the automagical scroller if they wish
	'#scrollToggle a' : function(el) {
		el.onclick = function() {
			autoScrollerActive = (autoScrollerActive === true) ? false : true;
			var updateText = (autoScrollerActive === true) ? "disable auto-scrolling" : "enable auto-scrolling";
			Element.update(this, updateText);
		}
	},
	
	// added by Benjamin Gutschik. Used for tooltips
	'#caption_info' : function(el){
		var tooltip = $('tooltip');
		el.onmouseover = function(event){
			Element.showMe(tooltip);
		}
		el.onmousemove = function(event){
			var ie4 = (document.all)? true:false;
			var evt = (event) ? event : ((window.event)?window.event:new Object); 

			var pointer  = [Event.pointerX(evt), Event.pointerY(evt)];
			var offsetx = -10;
			var offsety =  18;
					
			Element.setLeft(tooltip, pointer[0] + offsetx);
			Element.setTop(tooltip, pointer[1] + offsety);

		}
		el.onmouseout = function(event){
			Element.hideMe(tooltip);
		}
		
	}

};



// Add window.onload event to initialize
Behaviour.addLoadEvent(init);
Behaviour.apply();
function init() {
	var captureSlideShow = new Slideshow(photoId);
	captureSlideShow.initSwap();
}