/*
# javascript voor de fotoalbmus
# ###############
# Onderdeel van sQuarecoW CMS
# © 2006-2008 sQuarecoW new media
# Versie: 2.0
# Module: gallery
# ###############
*/

window.addEvent('load', function() {
	
	if ($defined($('progress'))) {
		var progress = $('progress'), bar = $('bar'), galleryImages = [], gallery = $('gallery-div'), info = $('info');
		
		// haal alle afbeeldingen + gegevens
		new Asset.images(images, {
			onProgress: function(i) {
				
				gallery.setStyle('display', 'none');
				info.setStyle('display', 'none');
				progress.setStyle('display', 'block');
				
				bar.set('html', 'Laden: ' + (i + 1) + ' / ' + images.length);
				percentage = ((i + 1) * progress.getStyle('width').toInt()) / images.length;
				bar.setStyle('width', percentage);
				
				//galleryImages[i] = this;
			},
			onComplete: function() {
				gallery.setStyle('display', 'block');
				info.setStyle('display', 'block');
				progress.setStyle('display', 'none');
										
				var prevLink = new Element('a', {
					'href': '#',
					'id': 'prevLink',
					'title': 'Vorige',
					'class': 'prev-link'
				}).inject(gallery);			
				
				var nextLink = new Element('a', {
					'href': '#',
					'id': 'nextLink',
					'title': 'Volgende',
					'class': 'next-link'
				}).inject(gallery);
				
				loadImage(0);
			}
		});
		
		// laad een afbeelding in de gallery
		function loadImage(id) {
			//alert(id);
			$('prevLink').removeEvents();
			$('nextLink').removeEvents();
			
			gallery.setStyle('width', imageData[id].width.toInt());
			gallery.setStyle('height', imageData[id].height.toInt());
			gallery.setStyle('background', 'url(' + imageData[id].src + ') center center no-repeat');
			
			info.setStyle('width', imageData[id].width.toInt());
			info.set('html', (id + 1) + ' / ' + images.length);
			
			var prev = id == 0 ? (images.length - 1) : id - 1;
			var next = id == (images.length - 1) ? 0 : id + 1;
			
			$('prevLink').set({
				'events': {
					'click': function(e) {
						window.focus();
						e.stop();
						loadImage(prev);
					}
				}
			});
			
			$('nextLink').set({
				'events': {
					'click': function(e) {
						window.focus();
						e.stop();
						loadImage(next);
					}
				}
			});
		}
	}
});