// -----------------------------------------------------------------------------------
// 
// This page coded by Scott Upton
// http://www.uptonic.com | http://www.couloir.org
//
// 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/28/05 --------------------------------------------------------


// get current photo id from URL
var myPhoto;
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 = 40;

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

// Number of photos in this gallery
var photoNum;

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

// 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;
	}
});

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

var Slideshow = Class.create();

Slideshow.prototype = {
	initialize: function(photoId) {
		this.photoId = photoId;
		this.curtain = 'overlayCurtain';
		this.container = 'overlayContainer';
		this.photo = 'Photo';
		this.photoBox = 'Container';
		this.linkBox = 'LinkContainer';
		this.prevLink = 'PrevLink';
		this.nextLink = 'NextLink';
		this.titleBox = 'TitleContainer';
		this.title = 'Title';
		this.captionBox = 'CaptionContainer';
		this.caption = 'Caption';
		this.counter = 'Counter';
		this.loader = 'Loading';
	},
	createDOMElements: function(){
		
		//create curtain
		
		var divOverlayCurtain = document.createElement('div');
		Element.writeAttribute(divOverlayCurtain, {'id' : 'overlayCurtain', 'style' : 'display:none;'});
		document.body.appendChild(divOverlayCurtain);
		
		//create overlay
		
		var divOverlayContainer = document.createElement('div');
		Element.writeAttribute(divOverlayContainer, {'id' : 'overlayContainer', 'class' : 'invisible'});
		
			//create title
			
			var divTitleContainer = document.createElement('div');
			Element.writeAttribute(divTitleContainer, {'id' : 'TitleContainer'});
				
				var divTitleContainerPad = document.createElement('div');
				Element.writeAttribute(divTitleContainerPad, {'id' : 'TitleContainerPad'});
			
					var p1 = document.createElement('p');
					Element.writeAttribute(p1, {'id' : 'TitlePara', 'class' : arrayType});
						
						var spanTitle = document.createElement('span');
						Element.writeAttribute(spanTitle, {'id' : 'Title'});
						
					p1.appendChild(spanTitle);
			
				divTitleContainerPad.appendChild(p1);
				
					var p2 = document.createElement('p');
					Element.writeAttribute(p2, {'id' : 'ClosePara'});
						
						var closeLink = document.createElement('a');
						Element.writeAttribute(closeLink, {'id' : 'CloseLink'});
						//Element.writeAttribute(closeLink, {'href' : '#'});
						Event.observe(closeLink, 'click', this.close);
	
							var spanClose = document.createElement('span');
							Element.writeAttribute(spanClose, {'id' : 'spanClose'});
							
								var spanCloseText = document.createTextNode('Close');
								
							spanClose.appendChild(spanCloseText);
							
						closeLink.appendChild(spanClose);
						
					p2.appendChild(closeLink);
					
				divTitleContainerPad.appendChild(p2);
				
			divTitleContainer.appendChild(divTitleContainerPad);
			
		divOverlayContainer.appendChild(divTitleContainer);
		
			//create photo holder
		
			var divOuterContainer = document.createElement('div');
			Element.writeAttribute(divOuterContainer, {'id' : 'outerContainer'});
		
				var divContainer = document.createElement('div');
				Element.writeAttribute(divContainer, {'id' : 'Container'});
				
					//create img
				
					var imgPhoto = document.createElement('img');
					Element.writeAttribute(imgPhoto, {'id' : 'Photo', 'alt' : 'pop up photo'});
					imgPhoto.observe('load', myrules.Photo);
					
				divContainer.appendChild(imgPhoto);
				
					//create loading div
					
					var divLoading = document.createElement('div');
					Element.writeAttribute(divLoading, {'id' : 'Loading'});
					
						var imgLoading = document.createElement('img');
						Element.writeAttribute(imgLoading, {'src' : '/images/ajax-loader.gif', 'width' : 16, 'height': 16, 'alt' : 'Loading...'});
						
					divLoading.appendChild(imgLoading);
					
				divContainer.appendChild(divLoading);
			
			divOuterContainer.appendChild(divContainer);
		divOverlayContainer.appendChild(divOuterContainer);
		
			//create cpation container
		
			var divCaptionContainer = document.createElement('div');
			Element.writeAttribute(divCaptionContainer, {'id' : 'CaptionContainer'});
				
				var p3 = document.createElement('p');
				
					var spanCaption = document.createElement('span');
					Element.writeAttribute(spanCaption, {'id' : 'Caption'});
					
				p3.appendChild(spanCaption);
		
			divCaptionContainer.appendChild(p3);
			
		divOverlayContainer.appendChild(divCaptionContainer);
		
			var divLinkContainer = document.createElement('div');
			Element.writeAttribute(divLinkContainer, {'id' : 'LinkContainer'});
			
				var divLinkWrapper = document.createElement('div');
				Element.writeAttribute(divLinkWrapper, {'id' : 'LinkWrapper'});
			
					//create anchors
				
					var aPrev = document.createElement('a');
					Element.writeAttribute(aPrev, {'href' : '#', 'id' : 'PrevLink', 'title' : 'Previous photo'});
					aPrev.observe('click', myrules.PrevLinkClick);
					
						var spanPrev = document.createElement('span');
							var spanPrevText = document.createTextNode('Previous image');
							
						spanPrev.appendChild(spanPrevText);
						
					aPrev.appendChild(spanPrev);
					
				divLinkWrapper.appendChild(aPrev);
				
					var spanCounter = document.createElement('span');
					Element.writeAttribute(spanCounter, {'id' : 'Counter'});
					
				divLinkWrapper.appendChild(spanCounter);
					
					var aNext = document.createElement('a');
					Element.writeAttribute(aNext, {'href' : '#', 'id' : 'NextLink', 'title' : 'Next photo'});
					aNext.observe('click', myrules.NextLinkClick);
					
						var spanNext = document.createElement('span');
							var spanNextText = document.createTextNode('Next image');
							
						spanNext.appendChild(spanNextText);
						
					aNext.appendChild(spanNext);
					
				divLinkWrapper.appendChild(aNext);
			
			divLinkContainer.appendChild(divLinkWrapper);
			
		divOverlayContainer.appendChild(divLinkContainer);
		
		document.body.appendChild(divOverlayContainer);
		
		return;
		
	},
	close: function() {
		myPhoto.showContainer(false);
	},
	getCurrentSize: function() {
		// Get current height and width, subtracting CSS border size
		this.wCur = Element.getWidth(this.photoBox);
		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,photoDir + photoArray[photoId][0]);
		// Set anchor for bookmarking
		Element.setHref(this.prevLink, "#nogo");
		Element.setHref(this.nextLink, "#nogo");
	},
	setPhotoTitle: function() {
		// Add caption from gallery array
		Element.setInnerHTML(this.title,photoArray[photoId][3]);
	},
	setPhotoCaption: function() {
		// Add caption from gallery array
		Element.setInnerHTML(this.caption,photoArray[photoId][4]);
		Element.setInnerHTML(this.counter,((photoId+1)+' of '+photoNum));
	},
	resizePhotoBox: function() {
		this.getScaleFactor();
		
		new Effect.Scale(this.photoBox, this.yScale, {scaleX: false, duration: 0.3, queue: 'front'});
		new Effect.Scale(this.photoBox, this.xScale, {scaleY: false, delay: 0.5, duration: 0.3});
		// Dynamically resize caption box as well
		Element.setWidth(this.captionBox,this.wNew-(-borderSize));
		Element.setWidth(this.titleBox,this.wNew-(-borderSize));
		Element.setWidth(this.linkBox,this.wNew-(-borderSize)-40);
		
		new Effect.Move(this.container, {x: (document.viewport.getWidth() - this.wNew) / 2, y: document.viewport.getScrollOffsets().top + 40, mode:'absolute'});
	},
	showPhoto: function(){
		new Effect.Fade(this.loader, {delay: 0.5, duration: 0.3});
		// Workaround for problems calling object method "afterFinish"
		new Effect.Appear(this.photo, {duration: 0.5, queue: 'end', afterFinish: function(){
			Element.show('TitleContainer');Element.show('CaptionContainer');Element.show('LinkContainer');
		}});
	},
	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();
	},
	showContainer: function(isVisible){
		isVisible ? myCurrState = 'invisible' : myCurrState = 'visible';
		isVisible ? myNewState = 'visible' : myNewState = 'invisible';
		
		isVisible ? Effect.BlindDown(this.curtain, {scaleX: false, scaleY: true, scaleFrom: 0, scaleTo: 100, duration: 1}) : Effect.BlindUp(this.curtain, {scaleX: false, scaleY: true, scaleFrom: 100, scaleTo: 0, duration: 1}) ;
		
		Element.removeClassName(this.container, myCurrState);
		Element.addClassName(this.container, myNewState);
	},
	initSwap: function() {
		// Begin by hiding main elements
		Element.show(this.loader);
		Element.hide(this.photo);
		//Element.hide(this.titleBox);
		//Element.hide(this.captionBox);
		//Element.hide(this.linkBox);
		// Set new dimensions and source, then resize
		this.setNewPhotoParams();
		//this.resizePhotoBox();
		this.setPhotoTitle();
		this.setPhotoCaption();
		myrules.Body();
	},
	initPopUp: function() {
		// Begin by hiding main elements
		Element.show(this.loader);
		Element.hide(this.photo);
		Element.hide(this.titleBox);
		Element.hide(this.captionBox);
		Element.hide(this.linkBox);
		// Set new dimensions and source, then resize
		this.setNewPhotoParams();
		this.resizePhotoBox();
		this.setPhotoTitle();
		this.setPhotoCaption();
		myrules.Body();
	},
	initLinks: function() {
		try {
			Event.observe($$('.linkSlideshowControlsFloorplan')[0], 'click', Handler.FloorPlan);
		} catch (err)
		{
		}
		try {
			Event.observe($$('.linkSlideshowControlsEnlarge')[0], 'click', Handler.Enlarge);
			Event.observe($$('.linkSlideshowControlsEnlarge')[1], 'click', Handler.Enlarge);
		} catch (err) {

		}
		try {
			Event.observe($$('.linkSlideshowControlsPrev')[0], 'click', Handler.ImagePrev);
			Event.observe($$('.linkSlideshowControlsNext')[0], 'click', Handler.ImageNext);
			return true;
		} catch (err) {

		}

	}

}

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

var Handler = {
	FloorPlan : function() {
		var myTmpPhotoID
		myTmpPhotoID = photoId;
		photoId = photoArray.length - 1;
		myPhoto.showContainer(true);
		myPhoto.initPopUp();
		photoId = myTmpPhotoID;
	},
	Enlarge : function() {
		myPhoto.showContainer(true);
		myPhoto.initPopUp();
	},
	ImagePrev : function() {
		(photoId == 0) ? photoId = photoArray.length - 1 : photoId--;
		$$('.imgSlideshowImage')[0].src = photoDir + photoArray[photoId][5];
		$$('.spanSlideshowControlsCounter')[0].innerHTML = photoId + 1 + ' of ' + photoArray.length;
	},
	ImageNext : function() {
		(photoId == (photoArray.length - 1)) ? photoId = 0 : photoId++;
		$$('.imgSlideshowImage')[0].src = photoDir + photoArray[photoId][5];
		$$('.spanSlideshowControlsCounter')[0].innerHTML = photoId + 1 + ' of ' + photoArray.length;
	}
};

// Establish CSS-driven events via Behaviour script
var myrules = {
	Body : function() {
		var newHeight, newWidth;
		
		//prototype library gives the wrong results for this - we want document, not viewport height ^_^
		
		if (document.all) {
			newHeight = document.body.scrollHeight; 
		} else {
			//document.getElementsByTagName('html')[0].offsetHeight;
			newHeight = document.body.scrollHeight;
		}
		
		$(myPhoto.curtain).style.height = newHeight + "px";
	},
	Photo : function(){
		var myPhoto = new Slideshow(photoId);
		myPhoto.showPhoto();
	},
	PrevLinkClick : function(){
		var myPhoto = new Slideshow(photoId);
		myPhoto.prevPhoto();
	},
	NextLinkClick : function(){
		var myPhoto = new Slideshow(photoId);
		myPhoto.nextPhoto();
	},
	AboutToggleClick : function(){
		var myAbout = $('AboutBody');
		if(myAbout.style.display == 'none'){
			new Effect.BlindDown(myAbout,{duration: 0.3});
			Element.setInnerHTML('AboutToggle','« Hide Details');
		} else {
			new Effect.BlindUp(myAbout,{duration: 0.3});
			Element.setInnerHTML('AboutToggle','About this Slideshow »');
		}
	}
};

function initSlideshow() {
	if (window.photoArray != undefined) {
		photoNum = photoArray.length
		myPhoto = new Slideshow(photoId);
		myPhoto.createDOMElements();
		Event.observe(window, 'resize', myrules.Body);
		myPhoto.initLinks();
	}
}