// Written by Neil Mendoza - djapex [at] uk2 [dot] net
// www.ninjazoo.com
var IMAGE_WIDTH = 400;
var THUMBS_WIDTH = 182;
var IMAGE_PATH = '/uploads/images/';
var numPages;
var MultiUpdate = Class.create();
// this will hold array of imges in teh gallery
// this will hold array of names of images
var images;
var names;
MultiUpdate.prototype =
{
	initialize: function(onload, num)
	{
		this.onload = onload;
		this.num = num;	
		this.counter = 0;
	},
	loaded: function()
	{
		if (++this.counter == this.num) this.onload.apply();
	}
}
var Gallery = Class.create();
Gallery.prototype =
{
	initialize: function()
	{
		this.page = 1;
		this.currImg = 0;
	},
	
	nextPage: function()
	{
		if (!this.running && this.page < numPages)
		{
			this.running = true;
			new Effect.MoveBy('thumbs', 0, -THUMBS_WIDTH, { afterFinish: function() { myGallery.running = false; } });
			this.page++;
		}
	},
	
	prevPage: function()
	{
		if (!this.running && this.page > 1)
		{
			this.running = true;
			new Effect.MoveBy('thumbs', 0, THUMBS_WIDTH, { afterFinish: function() { myGallery.running = false; } });
			this.page--;
		}
	},
	
	nextImg: function()
	{
		if (!this.running && this.currImg < images.length - 1) this.image(this.currImg + 1);
	},
	
	prevImg: function()
	{
		if (!this.running && this.currImg > 0) this.image(this.currImg - 1);
	},
	
    createDiv: function(parentDivId, newDivId, newLeft, newTop, clazz)
    {
		var newDiv = document.createElement('div');
		newDiv.style.left = newLeft;
		newDiv.style.top = newTop;
		newDiv.style.position = 'absolute';
		newDiv.id = newDivId;
		if (clazz) newDiv.className = clazz;
		$(parentDivId).insertBefore(newDiv, null);
		return newDiv;
	},
	
	imgOver: function(el)
	{
		Element.setOpacity(el, 0.6);
	},
	
	imgOut: function(el)
	{
		Element.setOpacity(el, 1);
	},
	
	image: function(imageNum, imgSrc, name, loadedFn)
	{
		// if there is a loaded fn then this is being called from
		// another function which would have already set running to true
		if (loadedFn || (!this.running && this.currImg != imageNum))
		{
			if (!loadedFn) new Effect.Fade('spin', { duration: 0.3, from: 0, to: 1 });
			this.running = true;
			temp = this.createDiv('imageMask', 'tempImage', IMAGE_WIDTH + 'px', '0');
			var img = document.createElement('img');
			temp.appendChild(img);
			if (loadedFn) img.onload = loadedFn;
			else img.onload = function() { myGallery.imageLoaded() };
			// if we are loading a new gallery then the images array might not
			// have been initialized yet so we have to get the img src directly
			if (imgSrc) img.src = IMAGE_PATH + imgSrc;
			else img.src = IMAGE_PATH + images[imageNum];
			this.currImg = imageNum;
		}
	},
	
	gallery: function(thumbs, firstImage, name)
	{
		if (!this.running && this.currGall != thumbs)
		{
			this.running = true;
			// keep track of num pages as loading the new page of thumbs will
			// set the global var to something different
			this.numPages = numPages;
			var multiUpdate = new MultiUpdate(function()
				{
					myGallery.galleryLoaded();
				}, 2);
			this.image(0, firstImage, name, function(){ multiUpdate.loaded(); });
			temp = this.createDiv('thumbsMask', 'tempThumbs', this.numPages * THUMBS_WIDTH + 'px', '0');
			new Ajax.Updater
				(
					'tempThumbs',
					thumbs,
					{asynchronous:true, evalScripts:true, onLoaded: function(){ multiUpdate.loaded(); }}
				);
			this.currGall = thumbs;
		}
	},
	
	imageLoaded: function()
	{
		new Effect.Fade('spin', { duration: 0.3, from: 1.0, to: 0.1, afterFinish: function() {Element.setOpacity('spin', 0)} });
		new Effect.Parallel(
			[
				Effect.MoveBy('image', 0, -IMAGE_WIDTH, {sync: true}),
				Effect.MoveBy('tempImage', 0, -IMAGE_WIDTH, {sync: true})
			],
			{
				afterFinish: function() { myGallery.moved(); }
			}
		);
	},
	
	galleryLoaded: function()
	{
		new Effect.Fade('spin', { duration: 0.3, from: 1.0, to: 0.1, afterFinish: function() {Element.setOpacity('spin', 0)} });
		new Effect.Parallel(
			[
				Effect.MoveBy('image', 0, -IMAGE_WIDTH, {sync: true}),
				Effect.MoveBy('tempImage', 0, -IMAGE_WIDTH, {sync: true}),
				Effect.MoveBy('thumbs', 0, -this.numPages * THUMBS_WIDTH, {sync: true}),
				Effect.MoveBy('tempThumbs', 0, -this.numPages * THUMBS_WIDTH, {sync: true})
			],
			{
				afterFinish: function() { myGallery.moved(true); }
			}
		);
	},
	
	moved: function(gallery)
	{
		Element.remove('image');
		$('tempImage').id = 'image';
		if (gallery)
		{
			Element.remove('thumbs');
			$('tempThumbs').id = 'thumbs';
			this.page = 1;
		}
		this.running = false;
	}
};

function initGallery() { myGallery = new Gallery(); }
Event.observe(window, 'load', initGallery, false);