// var Gallery;
// Gallery = new Class({
// 	
// 	initialize: function(maxWidth, maxHeight, imagePath, imageName, numImages) {
// 		// containers / covers
// 		this.wrap 		= $('gallery');
// 		this.cover 		= $('cover');
// 
// 		// progress bar
// 		this.progress 	= $('progress');
// 		this.bar 		= $E('#progress .bar');
// 
// 		// navigation menu
// 		this.menu 		= $('menu');
// 		this.viewAll 	= $('viewall');
// 		this.prevLink	= $('prev');
// 		this.nextLink 	= $('next');
// 		this.status 	= $('status');
// 
// 		// set some numerical variables
// 		this.numImages 			= numImages;
// 		this.imageWidth 			= maxWidth;
// 		this.imageHeight 			= maxHeight;
// 		this.currentImageIndex 	= 0;
// 		this.nextImageIndex 		= 0;
// 		
// 		// and a couple of arrays
// 		this.images 		= [];
// 		this.loadedImages = [];
// 		
// 		// set some css
// 		this.menu.setStyle		('width', maxWidth-18);
// 		this.cover.setStyle		('opacity', 0);				
// 		this.wrap.setStyles		({'width': maxWidth, 'height': maxHeight});
// 		this.progress.setStyles	({'width': maxWidth-6, 'left': 0, 'top': (this.wrap.getCoordinates().height / 2) - (7 / 2) });
// 		
// 		// fill the images array with location info
// 		for (i=0; i<this.numImages; i++) {
// 			this.images[i] = (imagePath+imageName+'-'+(pad(i+1,3))+'.jpg')
// 		}
// 		this.images.reverse();
// 		this.loadImages(this);
// 	},
// 	
// 	loadImages: function(klass) {
// 		var galleryImgs = $$('#gallery img');
// 		if (galleryImgs.length > 0) galleryImgs.each(function(image) { image.remove(); });
// 
// 		this.progress.setStyle('visibility', 'visible');
// 
// 		loaded = new Asset.images(this.images, {
// 			onProgress: function(i) {
// 				var percent = ((i + 1) * klass.progress.getStyle('width').toInt()) / klass.images.length;
// 				klass.bar.setStyle('width', percent).setHTML(i + 1 + ' / ' + klass.images.length);
// 			},
// 			onComplete: function() {
// 				klass.progress.effect('opacity', {onComplete: function(){
// 					//Gallery.injectImages();
// 				}}).start(1,0);
// 			}
// 		});
// 		loaded.each(function(ele,i){klass.loadedImages[loaded.length-1-i] = ele;});	
// 	},
// 	
// 	
// 	
// });
// 
// // 
var Gallery = {
	
	wrap: null,
	progress: null,
	bar: null,
	viewAll:null,
	prevLink:null,
	nextLink:null,
	status:null,
	
	busy: false,
	timer: null,
	images: [],
	loadedImages: [],
	numImages:0,
	
	imageWidth:0,
	imageHeight:0,
	
	currentImageIndex:0,
	nextImageIndex:0,
	
	setup: function(maxWidth, maxHeight, imagePath, imageName, numImages) {
		Gallery.wrap = $('gallery');
		Gallery.progress = $('progress');
		Gallery.bar = $E('#progress .bar');
		Gallery.viewAll = $('viewall');
		Gallery.prevLink = $('prev');
		Gallery.nextLink = $('next');
		Gallery.status = $('status');
		
		Gallery.numImages = numImages;
		Gallery.imageWidth = maxWidth;
		Gallery.imageHeight = maxHeight;
		
		Gallery.wrap.setStyles({'width': maxWidth, 'height': maxHeight});
		Gallery.progress.setStyles({
			'width': maxWidth-6,
			'left': 0,
			'top': (Gallery.wrap.getCoordinates().height / 2) - (7 / 2)
		});
		
		$('menu').setStyle('width', maxWidth-18);
		
		for (i=0; i<numImages; i++) {
			Gallery.images[i] = (imagePath+imageName+'-'+(pad(i+1,3))+'.jpg')
		}
		Gallery.images.reverse();
		Gallery.loadImages();
		$('cover').setStyle('opacity', 0);
	},
	
	loadImages: function() {
		if (!Gallery.busy) {
			var galleryImgs = $$('#gallery img');
			if (galleryImgs.length > 0) galleryImgs.each(function(image) {	image.remove();	});
			
			Gallery.busy = true;
			Gallery.progress.setStyle('visibility', 'visible');
			
			loaded = new Asset.images(Gallery.images, {
				onProgress: function(i) {
					var percent = ((i + 1) * Gallery.progress.getStyle('width').toInt()) / Gallery.images.length;
					Gallery.bar.setStyle('width', percent).setHTML(i + 1 + ' / ' + Gallery.images.length);
				},
				onComplete: function() {
					Gallery.progress.effect('opacity', {onComplete: function(){Gallery.injectImages();}}).start(1,0);
				}
			});
			loaded.each(function(ele,i){Gallery.loadedImages[loaded.length-1-i] = ele;});
		}
	},
	
	injectImages: function() {
		Gallery.progress.remove();
		Gallery.loadedImages.each(function(image,i) {
			image.setStyles({
				'position': 'absolute',
				'opacity': 0,
				'z-index': 0,
				'left': (Gallery.wrap.getCoordinates().width / 2) - (this.width / 2),
				'top': (Gallery.wrap.getCoordinates().height / 2) - (this.height / 2)
			});
			image.inject(Gallery.wrap);
			Gallery.currentImageIndex = i;
		});
		
		Gallery.nextLink.addEvent('click', function(e) {
			e = new Event(e).stop();
			Gallery.nextImage();
		});

		Gallery.prevLink.addEvent('click', function(e) {
			e = new Event(e).stop();
			Gallery.prevImage();
		});
		
		Gallery.viewAll.addEvent('click', function(e) {
			e = new Event(e).stop();
			Gallery.showIndexSheet();
		});
		
		Gallery.nextImage();
	},
	
	nextImage: function() {
		Gallery.nextImageIndex = (Gallery.currentImageIndex +1) % 14;
		Gallery.swapImages();
	},
	
	prevImage: function() {
		Gallery.nextImageIndex = (Gallery.currentImageIndex -1) % 14;
		if (Gallery.nextImageIndex == -1) Gallery.nextImageIndex = Gallery.numImages -1;
		Gallery.swapImages();
	},
	
	swapImages: function() {
		var currentImage = Gallery.loadedImages[Gallery.currentImageIndex];
		var nextImage = Gallery.loadedImages[Gallery.nextImageIndex];
		
		currentImage.setStyle('z-index', 0);
		nextImage.setStyle('z-index', 10);
		
		nextImage.effect('opacity', {
				onComplete: function() {
					Gallery.loadedImages[Gallery.currentImageIndex].setStyle('opacity', 0);
					Gallery.currentImageIndex = Gallery.nextImageIndex;
					Gallery.updateStatus();
				}
			}).start(1);
	},
	
	updateStatus: function() {
		Gallery.status.setHTML('Picture '+Number(Gallery.currentImageIndex+1)+' of '+Gallery.numImages);
	},
	
	showIndexSheet: function() {
		$('cover').setStyle('opacity', 1);
		$('menu').effect('opacity').start(0);
		
		var tileW = Math.floor(Gallery.wrap.getCoordinates().width / Math.ceil(Math.sqrt(Gallery.numImages)) - 10);
		var tileH = Math.floor(Gallery.wrap.getCoordinates().height / Math.ceil(Math.sqrt(Gallery.numImages))- 10);
		var COLS = Math.ceil((Gallery.numImages * tileW) / Gallery.wrap.getCoordinates().width);
		var ROWS = Math.ceil((Gallery.numImages * tileH) / Gallery.wrap.getCoordinates().height);
		
		Gallery.loadedImages.each(function(image,i) {
			image.addEvent('click', function(e) {
				e = new Event(e).stop();
				Gallery.enlargeFromIndex(i);
			});
			
			image.addEvent('mouseover', function(e) {
				e = new Event(e).stop();
			});
			
			image.addEvent('mouseout', function(e) {
				e = new Event(e).stop();
			});
			
			if (i !== Gallery.currentImageIndex) {
				var xpos = ((i%COLS) * tileW)+((i%COLS) * 5)+10
				var ypos = (Math.floor(i/COLS) * tileH)+(Math.floor(i/COLS) * 5)+10
				var coord = image.getCoordinates();

				image.setStyles({
					'width':  tileW,
					'height': tileH,
					'left': xpos,
					'top': ypos,
					'opacity': 1
				});
				
			}
		});
		
		var image = Gallery.loadedImages[Gallery.currentImageIndex];
		var coord = image.getCoordinates();
		var xpos = ((Gallery.currentImageIndex%COLS) * tileW)+((Gallery.currentImageIndex%COLS) * 5)+10
		var ypos = (Math.floor(Gallery.currentImageIndex/COLS) * tileH)+(Math.floor(Gallery.currentImageIndex/COLS) * 5)+10
		
		image.setStyles({
			'left':2,
			'top':2,
			'z-index':1001
		})
		
		var fx = function() {image.effects({duration: 750, transition:Fx.Transitions.Quad.easeOut}).start({
			'left': [2,xpos],
			'top': [2,ypos],
			'width':  [coord.width, tileW],
			'height': [coord.height, tileH]
			});
		}
		fx.delay(50);
		
		var fx2 = function() {
			$('cover').effect('opacity', {duration: 900, transition:Fx.Transitions.Quad.easeOut}).start(1,0)
		}
		fx2.delay(900)	
	},
	
	enlargeFromIndex: function(index) {
		Gallery.loadedImages.each(function(image,i) {
			if (i!=index) {
				image.setStyle('z-index',0)
				var fx = function() { image.effect('opacity').start(0) }
				fx.delay(i*75);
			}
		});
		
		
		var image = Gallery.loadedImages[index];
		image.setStyle('z-index',1001);
		
		var fx = function() {image.effects({duration: 650, transition:Fx.Transitions.Quad.easeIn,
			onComplete: function() {
				Gallery.resetThumbs();
				$('menu').effect('opacity').start(0.5);
			}
			}).start({
			'left': 2,
			'top': 2,
			'width':  Gallery.imageWidth,
			'height': Gallery.imageHeight
			});
		}
		fx.delay(Gallery.numImages * 55);
		
		Gallery.currentImageIndex = index;
		Gallery.updateStatus();
		
	},
	
	resetThumbs: function() {
		Gallery.loadedImages.each(function(image,i) {
			if(i!=Gallery.currentImageIndex) {
				image.setStyles({
					'left': 2,
					'top': 2,
					'width':  Gallery.imageWidth,
					'height': Gallery.imageHeight,
				});
			}
		});
	},
	
	
};

function pad(n,l) { s=''+n; while(s.length<l){s='0'+s;}; return s; }