/*
Lightbox Slideshow
Author: Paul Sayre
Date: 2007-01-22

Creates a Lightbox-like slideshow with an array as input.

To create, follow this syntax:
<script>
	var lsi = [];
	lsi[lsi.length] = {full: 'images/3f44f68c1132ea03.jpg', thumb: 'images/3f44f68c1132ea03_t.jpg', caption: 'Mt. Rainier'};
	lsi[lsi.length] = {full: 'images/8c435b46019ae88f.jpg', thumb: 'images/8c435b46019ae88f_t.jpg', caption: 'Prairy'};
	lsi[lsi.length] = {full: 'images/315e770c4ba54f19.jpg', thumb: 'images/315e770c4ba54f19_t.jpg', caption: 'Pine Cones'};
	lsi['close'] = 'images/closelabel.gif';	// or false if no button
	lsi['prev'] = 'images/prevlabel.gif';	// or false if no button
	lsi['next'] = 'images/nextlabel.gif';	// or false if no button
	
	// All these are optional. If not set, it uses defaults.
	var options = {duration: .5, top: 100, width: 800, first: 0, opacity: .8};
	
	// Needs to be varible ls
	var ls = new LightboxSlideshow(lsi, options);
</script>
*/

var currentImage;
var imageCount;
var effectDuration;
function LightboxSlideshow(imgs, options) {
	lightboxImages = imgs;
	imageCount = imgs.length;

	// Defaults
	currentImage = 0;
	var overlayOpacity = .8;
	effectDuration = 1;
	var width = 600;
	var top = 50;
	
	// Options
	if(options) {
		if(Object.isNumber(options.width)) width = options.width;
		if(Object.isNumber(options.top)) top = options.top;
		if(Object.isNumber(options.duration)) effectDuration = options.duration;
		if(Object.isNumber(options.opacity)) overlayOpacity = options.opacity;
		if(Object.isNumber(options.first)) currentImage = options.first;
	}
	
	// Setup Overlay
	document.writeln('<div id="overlay" onclick="ls.stop()">&nbsp;</div>');
	$('overlay').hide();
	var vpsize = document.viewport.getDimensions();
	var docsize = $$('body')[0].getDimensions();
	var newsize = {
		height: vpsize.height > docsize.height ? vpsize.height : docsize.height,
		width: vpsize.width > docsize.width ? vpsize.width : docsize.width
	};
	$('overlay').setStyle({
		height: (newsize.height)+'px',
		width: (newsize.width)+'px',
		opacity: overlayOpacity
	});
	
	// Setup Lightbox
	document.writeln('<div id="lightbox">');
	// Cache Images
	for(var i=0; i<imgs.length; i++) {
		document.writeln('	<img id="lightboxImage'+i+'" src="'+imgs[i].full+'" style="display:none;" />');
		document.writeln('	<span id="imageCaption'+i+'" style="display:none;">'+imgs[i].caption+'</span>');
	}
	document.writeln('	<div id="lightboxContainer">');
	document.writeln('		<div class="head" id="caption">Sampleview</div>');
	document.writeln('		<div id="lightboxImageContainer" onclick="ls.next()">');
	document.writeln('			<img id="lightboxImage" src="'+imgs[currentImage].full+'" />');
	document.writeln('		</div>');
	document.writeln('		<div id="lightboxThumbnails">');
	document.writeln('		<hr />');
	for(var i=0; i<imgs.length; i++) {
		
		if (i==10)
		{
			imgStyle = ' style="margin-right: 0;" ';
		}
		else
		{
			imgStyle = '';
		}
		
		document.writeln('			<img src="'+imgs[i].thumb+'" onclick="ls.showImage('+i+')" '+imgStyle+'/>');
	}
	document.writeln('		</div>');
	if(imgs.prev) {
		document.writeln('		<div id="lightboxPrev">');
		document.writeln('			<img src="'+imgs.prev+'" onclick="ls.prev()" /></a>');
		document.writeln('		</div>');
	}
	if(imgs.next) {
		document.writeln('		<div id="lightboxNext">');
		document.writeln('			<img src="'+imgs.next+'" onclick="ls.next()" /></a>');
		document.writeln('		</div>');
	}
	if(imgs.close) {
		document.writeln('		<div id="lightboxClose">');
		document.writeln('			<img src="'+imgs.close+'" onclick="ls.stop()" /></a>');
		document.writeln('		</div>');
	}
	document.writeln('	</div>');
	document.writeln('</div>');
	
	$('lightbox').hide();	
	$('lightbox').setStyle({
		left: (vpsize.width-width)/2+'px',
		top: top+'px',
		width: width+'px'
	});
	
}

LightboxSlideshow.prototype = {
	start: function() {
		new Effect.Appear('lightbox', {duration: effectDuration, beforeStart: function() {
			$('overlay').show();
			Effect.ScrollTo('header');
		}});
	},
	stop: function() {
		new Effect.Fade('lightbox', {duration: effectDuration, afterFinish: function() {
			$('overlay').hide();
		}});
	},
	prev: function() {
		currentImage = (--currentImage+imageCount)%imageCount;
		this.updateImage();
	},
	next: function() {
		currentImage = ++currentImage%imageCount;
		this.updateImage();
	},
	showImage: function(imageNum) {
		currentImage = imageNum;
		this.updateImage();
	},
	updateImage: function() {
		var newsize = $('lightboxImage'+currentImage).getDimensions();
		var oldsize = $('lightboxImageContainer').getDimensions();
		new Effect.Opacity('lightboxImage', {duration: effectDuration/3, queue: 'end', from: 1, to: 0});
		if(oldsize.height != newsize.height) {
			new Effect.Morph('lightboxImageContainer', {style: 'height: '+(newsize.height+20)+'px;', duration: effectDuration/3, queue: 'end'});
		}
		new Effect.Opacity('lightboxImage', {duration: effectDuration/3, from: 0, to: 1, queue: 'end', beforeUpdate: function() {
			$('lightboxImage').src = $('lightboxImage'+currentImage).src;
			$('lightboxImage').height = newsize.height;
			$('lightboxImage').width = newsize.width;
			$('caption').innerHTML = $('imageCaption'+currentImage).innerHTML;
		}});
	}
};