//window.addEvent('load', function() { gallery_show(14, 66); });


window._galleryalbums = new Object();

function gallery_show(galleryalbum_id, galleryphoto_id) {
	galleryalbum_id = (galleryalbum_id) ? parseInt(galleryalbum_id) : 0;
	galleryphoto_id = (galleryphoto_id) ? parseInt(galleryphoto_id) : 0;

	if(!window._galleryalbums || !window._galleryalbums[galleryalbum_id]) new Gallery(galleryalbum_id, window.gallery_options, galleryphoto_id);
	else window._galleryalbums[galleryalbum_id].showGallery(galleryphoto_id);
}




Gallery = new Class({
	Implements: Options,

	options: {
		overlay: 	{ color: '#000000', opacity: 0.5, close_on_click: false },
		background: 	'#FFFFFF',
		fontcolor:	'#000000',
		border:		'solid black 1px',
		padding:	'10px',
		image_dir:	'gallery-light',
		fade_duration:	500,
		morph_duration:	300,
		enable_slideshow: true,
		slideshow_delay: 7000
	},

	initialize: function(galleryalbum_id, options, galleryphoto_id) {
		this.galleryalbum_id = parseInt(galleryalbum_id);
		this.id = this.galleryalbum_id;
		var id = this.id;

		this._gallery_visible = false;
		this._slideshow_status = 0;
		this._slideshow_timer = null;

		if(!window._galleryalbums) window._galleryalbums = new Object();
		window._galleryalbums[this.id] = this;

		this._start_photo_id = galleryphoto_id;
		this._cur_photo_id = galleryphoto_id;

		this.galleryphotos = {};

		this.setOptions(options);
		this._current_galleryphoto_id = 0;
		this._fx = null;
		this._inTransition = false;

		if(!this.options.overlay.duration) this.options.overlay.duration = this.options.fade_duration;

		if(this.options.overlay.close_on_click) {
			this.options.overlay.onClick = function() {
				window._galleryalbums[id].hideGallery();
			}
		}
		this.overlay = new Overlay(this.options.overlay);



		this.image_dir = '/assets/images/gallery/' + this.options.image_dir;


		// enable keyboard nav
		document.onkeydown = function(e) {
			window._galleryalbums[id].keyboardAction(e);
		}


		window.addEvent('resize', function() { this._galleryalbums[id].setPosition() });

		this._loadGallery();
	},



	_loadGallery: function() {
		if(this._loading || this._loaded) return;
		this._loading = true;

		var fparams = {
			'galleryalbum_id': this.galleryalbum_id
		};

		var id = this.id;



		with( this.div = document.createElement('div') ) {
			style.position		= 'absolute';
			style.top		= '10px';
			style.width		= '400px';
			style.height		= '370px';
			style.backgroundColor	= this.options.background;
			style.display		= 'none';
			style.border		= this.options.border;
			style.padding		= this.options.padding;
			style.zIndex		= 95;
		}
		document.body.appendChild(this.div);
		this.div = $(this.div);

		with( this.imgLoading = document.createElement('img') ) {
			src		= this.image_dir + '/loading.gif';
			style.position	= 'absolute';
			style.zIndex	= 96;
			style.display	= 'none';
		};
		this.div.appendChild(this.imgLoading);
		this.imgLoading = $(this.imgLoading);


		with( this.img = document.createElement('img') ) {
			style.width		= '400px';
			style.height		= '300px';
		};
		this.img.src = this.image_dir + '/xparent.gif';
		this.div.appendChild(this.img);
		this.img = $(this.img);




		// load nav
		var i1 = new Image(); i1.src = this.image_dir + '/prev-over.png';
		var i2 = new Image(); i2.src = this.image_dir + '/next-over.png';
		var i3 = new Image(); i3.src = this.image_dir + '/close-over.png';
		var i4 = new Image(); i4.src = this.image_dir + '/play-over.png';
		var i5 = new Image(); i5.src = this.image_dir + '/pause-over.png';

		with( this.nav = document.createElement('div') ) {
			style.display		= 'block';
		}
		this.div.appendChild(this.nav);
		this.nav = $(this.nav);
		var buf = '';
		buf += '<table width="100%" cellpadding="0" cellspacing="0" border="0">';

		buf += '<tr>';
		buf += '<td width="10%" align="left" valign="top"><img id="gallery_button_prev_'+this.id+'" src="'+this.image_dir+'/prev.png" border="0" alt="Previous" title="Previous Photo" style="cursor:pointer;" onmouseover="this.src=\''+this.image_dir+'/prev-over.png\'" onmouseout="this.src=\''+this.image_dir+'/prev.png\'" onclick="window._galleryalbums['+this.id+'].goPrev()"></td>';
		buf += '<td rowspan="2" valign="top"><div id="gallery_description_div_'+this.id+'" style="color:'+this.options.fontcolor+';font-size:11px;padding:10px;"></div></td>';
		buf += '<td width="10%" align="right" valign="top"><img id="gallery_button_next_'+this.id+'" src="'+this.image_dir+'/next.png" border="0" alt="Next" title="Next Photo" style="cursor:pointer;" onmouseover="this.src=\''+this.image_dir+'/next-over.png\'" onmouseout="this.src=\''+this.image_dir+'/next.png\'" onclick="window._galleryalbums['+this.id+'].goNext()"></td>';
		buf += '</tr>';

		buf += '<tr>';
		buf += '<td width="10%" align="left" valign="top"><img id="gallery_button_close_'+this.id+'" src="'+this.image_dir+'/close.png" border="0" alt="Close" title="Close Gallery" style="cursor:pointer;" onmouseover="this.src=\''+this.image_dir+'/close-over.png\'" onmouseout="this.src=\''+this.image_dir+'/close.png\'" onclick="window._galleryalbums['+this.id+'].hideGallery()"></td>';
		buf += '<td width="10%" align="right" valign="top"><img id="gallery_button_play_'+this.id+'" src="'+this.image_dir+'/play.png" border="0" alt="Play" title="Play Slideshow" style="cursor:pointer;" onmouseover="this.src=\''+this.image_dir+'/play-over.png\'" onmouseout="this.src=\''+this.image_dir+'/play.png\'" onclick="window._galleryalbums['+this.id+'].playSlideshow()"></td>';
		buf += '</tr>';

		buf += '</table>';

		this.nav.innerHTML = buf;



		// load gallery data
		// http://dev.fotogo.net/site/gallery/ajax_load_galleryalbum?galleryalbum_id=14
		var request = new Request({
			method: 'get',
			url: '/site/gallery/ajax_load_galleryalbum?galleryalbum_id='+id,
			onComplete: function(response) {
				window._galleryalbums[id]._loadGalleryResponse(response);
			}
	
		});
		request.send();

	},

	// keyboardAction: handles keyboard navigation
	keyboardAction: function(e) {

		var keycode;
		if (e == null) { // ie
			keycode = event.keyCode;
		} else { // mozilla
			keycode = e.which;
		}
		//var key = String.fromCharCode(keycode).toLowerCase();
		switch(keycode) {
			case 37: // arrow left
			case 80: // p
				this.goPrev();
				break;

			case 39: // arrow right
			case 78: //n

				this.goNext();
				break;

			case 65: //a
			case 38: // up arrow
				this.playSlideshow();
				break;

			case 88: // x
				this.hideGallery();
				break;
		}

	},

	// _loadGalleryResponse: handles the Ajax response for loading gallery photo info
	_loadGalleryResponse: function(response) {
		this._loading = false;
		this._loaded = true;

		this.galleryphotos = JSON.decode(response);
		this.showGallery();
	},

	// setPosition: sets the initial gallery position and on window resize events
	setPosition: function() {
		var scrollLeft = (window.pageXOffset) ? window.pageXOffset : document.documentElement.scrollLeft;
		var scrollTop = (window.pageYOffset) ? window.pageYOffset : document.documentElement.scrollTop;

		var style = new Object;
		style.left = ( (window.getWidth() / 2) - (this.div.offsetWidth / 2) + scrollLeft );
		style.top = ( (window.getHeight() / 2) - (this.div.offsetHeight / 2) + scrollTop );

		if(style.top < 0) style.top = 0;

		for(var s in style) this.div.setStyle(s, style[s]);
	},


	// showGallery: show the gallery if needed and navigate to galleryphoto_id
	showGallery: function(galleryphoto_id) {

		var id = this.id;
		if(!galleryphoto_id) galleryphoto_id = this._start_photo_id;

		//this.img.setStyle('display', 'none');
		this.img.src = this.image_dir + '/xparent.gif';

		if(!this._gallery_visible) {
			this.overlay.show();

			this.div.setStyle('opacity', 0);
			this.div.setStyle('display', 'block');
			this.setPosition();

			var n = new Fx.Morph( this.div, {
				duration: this.options.fade_duration,
				onStart: function() {
					
				},
				onComplete: function() {
					window._galleryalbums[id]._gallery_visible = true;
					window._galleryalbums[id].showPhoto(galleryphoto_id);
				}
			}).start({
				opacity: [0, 1]
			});
		}
		else {
			this.showPhoto(galleryphoto_id);
		}
	},

	// _getNextPhotoId: determine next photo id
	_getNextPhotoId: function() {
		// get the next photo id
		var p = 0;
		var found = false;
		var first = 0;

		for(var n in this.galleryphotos) {
			if(!first) first = n;

			if(found) {
				p = n;
				break;
			}

			if(this._cur_photo_id == n) found = true;
		}
		if(!p) p = first;
		return p;
	},

	// _getPrevPhotoId: determine previous photo id
	_getPrevPhotoId: function() {
		// get the prev photo id
		var p = 0;
		var prev = 0;
		for(var n in this.galleryphotos) {
			if(this._cur_photo_id == n) {
				p = prev;
			}
			prev = n;
		}
		if(!p) p = prev;

		return p;
	},


	// goNext: navigate to the next photo
	goNext: function() {
		if(!this._cur_photo_id || !this.galleryphotos[this._cur_photo_id]) this.showPhoto();
		else {
			var p = this._getNextPhotoId();
			this.showPhoto(p);
		}
	},

	// goPrev: navigate to the previous photo
	goPrev: function() {
		if(!this._cur_photo_id || !this.galleryphotos[this._cur_photo_id]) this.showPhoto();
		else {

			var p = this._getPrevPhotoId();
			this.showPhoto(p);
		}

	},


	// playSlideshow: play or pause the slideshow
	playSlideshow: function() {
		var image_dir = this.image_dir;

		clearTimeout(this._slideshow_timer);


		var btn = $('gallery_button_play_'+this.id);
		if(this._slideshow_status) {
			btn.src = this.image_dir +'/play.png';
			btn.onmouseover = function() { this.src = image_dir+'/play-over.png'; }
			btn.onmouseout = function() { this.src = image_dir+'/play.png'; }
			btn.setAttribute('title', 'Play Slideshow');
			this._slideshow_status = 0;

		} else {
			btn.src = this.image_dir +'/pause.png';
			btn.onmouseover = function() { this.src = image_dir+'/pause-over.png'; }
			btn.onmouseout = function() { this.src = image_dir+'/pause.png'; }
			btn.setAttribute('title', 'Pause Slideshow');
			this._slideshow_status = 1;
			this._doPlaySlideshow();
		}
	},

	// _doPlaySlideshow: continue slideshow, shows next photo and restart timeout
	_doPlaySlideshow: function() {
		clearTimeout(this._slideshow_timer);

		this.goNext();

		this._slideshow_timer = setTimeout('window._galleryalbums['+this.id+']._doPlaySlideshow();', this.options.slideshow_delay);
	},

	// hideGallery: close the gallery
	hideGallery: function() {
		var id = this.id;

		var n = new Fx.Morph( this.div, {
			duration: this.options.fade_duration,
			onComplete: function() {
				window._galleryalbums[id]._gallery_visible = false;
				window._galleryalbums[id].div.setStyle('display', 'none');
			}
		}).start({
			opacity: [1, 0]
		});

		this.overlay.hide();
	},

	showLoading: function() {
		this.imgLoading.setStyle('visibility', 'hidden');
		this.imgLoading.setStyle('display', 'block');

		this.imgLoading.setStyle('left', (this.div.offsetWidth / 2) - (this.imgLoading.offsetWidth / 2) );
		this.imgLoading.setStyle('top', (this.div.offsetHeight / 2) - (this.imgLoading.offsetHeight / 2) );

		this.imgLoading.setStyle('visibility', 'visible');
	},

	hideLoading: function() {
		this.imgLoading.setStyle('display', 'none');
	},

	// showPhoto: show the specified photo
	showPhoto: function(galleryphoto_id) {
		this.showLoading();


		this._cur_photo_id = galleryphoto_id;

		if(!galleryphoto_id || !this.galleryphotos[galleryphoto_id]) {
			for(var n in this.galleryphotos) {
				galleryphoto_id = n; break;
			}
		}

		if(!galleryphoto_id) {
			this.hideGallery();
			return;
		}

		var id = this.id;
		var i = new Image();
		i.onload = function() {
			window._galleryalbums[id]._doPhotoLoaded(galleryphoto_id);
		};
		i.src = this.galleryphotos[galleryphoto_id].href;
	},

	_doPhotoLoaded: function(galleryphoto_id) {
		var id = this.id;

		this.hideLoading();
		this.img.src = this.galleryphotos[galleryphoto_id].href;

		$('gallery_description_div_'+this.id).setStyle('opacity', 0);

		this.img.setStyle('opacity', 0);
		this.img.setStyle('display', 'block');


		var scrollLeft = (window.pageXOffset) ? window.pageXOffset : document.documentElement.scrollLeft;
		var scrollTop = (window.pageYOffset) ? window.pageYOffset : document.documentElement.scrollTop;

		var style = new Object;
		style.width = this.galleryphotos[galleryphoto_id].width;
		style.height = this.galleryphotos[galleryphoto_id].height + this.nav.offsetHeight;
		style.left = ( (window.getWidth() / 2) - (style.width / 2) + scrollLeft );
		style.top = ( (window.getHeight() / 2) - (style.height / 2) + scrollTop );

		if(style.top < 0) style.top = 0;

		new Fx.Morph( this.div, {
			duration: this.options.morph_duration

		}).start({
			width: style.width,
			height: style.height,
			top: style.top,
			left: style.left
		});

		new Fx.Morph( this.img, {
			duration: this.options.morph_duration,
			onComplete: function() {
//				new Fx.Morph( this.element, {
//					duration: 200
//				}).start({
//					opacity: [0,1]
//				});

				window._galleryalbums[id]._doPhotoMorphComplete();
			}
		}).start({
			width: this.galleryphotos[galleryphoto_id].width,
			height: this.galleryphotos[galleryphoto_id].height
		});


	},


	_doPhotoMorphComplete: function() {
		this.overlay.resize();

		new Fx.Morph( this.img, {
			duration: 200
		}).start({
			opacity: [0,1]
		});

		var pcnt = 0;
		var ccnt = 0;
		for(var n in this.galleryphotos) {
			++pcnt;
			if(this._cur_photo_id == n) ccnt = pcnt;
		}


		buf = '';
		buf += ccnt+' of '+pcnt+': <b>' + this.galleryphotos[this._cur_photo_id].galleryphoto_title + '</b><br>';
		buf += (this.galleryphotos[this._cur_photo_id].galleryphoto_description) ? this.galleryphotos[this._cur_photo_id].galleryphoto_description : '<i>No description available</i>';

		$('gallery_description_div_'+this.id).setStyle('opacity', 0);
		$('gallery_description_div_'+this.id).innerHTML = buf;
		new Fx.Morph( $('gallery_description_div_'+this.id), {
			duration: 200
		}).start({
			opacity: [0,1]
		});



		// preload the next photo
		var next = this._getNextPhotoId();
		if(this.galleryphotos[next]) {
			var i = new Image();
			i.src = this.galleryphotos[next].href;
		}
	}

});