/*
Author:
	Gilles Hooghe, <ghooghe [at] gmail.com>
Class
	SimpleImageViewer
Options:
	autoPlay: slideshow
	autoPlayDuration: speed of the slideshow
	captions: TODO
	duration: duration of the show/hide image effect
	loop: when last image is reached, restart at first image
	transition: transition for the show/hide effect
	wrapperSelector: the selector containing the links/images
	imageViewerSelector: the selector inside which the large image will be displayed
	
TODO: inject optional captions below images
*/ 
var SimpleImageViewer = new Class({
	
	options: {
		autoPlay: false,
		autoPlayDuration: 10000,
		captions: true,
		duration: 500,
		imageViewerSelector: '#image',
		loop: true,
		transition: Fx.Transitions.Sine.easeOut,
		wrapperSelector: '#viewer'
	},

	initialize: function(options) {
		this.setOptions(options);

		this.buildLibrary();
		
		this.setupEvents();
		
		// Start
		window.addEvent('load', function() {
			this.next();
			if (this.options.autoPlay) {
				this.autoPlay();
			}
		}.bind(this));
	},

	/* Parse the links and images contained inside the wrapperSelector element */
	buildLibrary: function() {
		this.library = {};
		this.library.current = -1;
		this.library.links = $$(this.options.wrapperSelector + ' a');
		//this.library.links.splice(5,1); // remove unwanted pictures from the autoplay
		this.library.links.sort(function() {return 0.5 - Math.random()}) //randomize order of elements in array
		//alert(this.library.links);
	},
	
	autoPlay: function() {
		this.periodical = (function(){ this.next(); }).periodical(this.options.autoPlayDuration, this);
	},
	
	setupEvents:  function() {
		this.imageViewer = $E(this.options.imageViewerSelector);
		
		$each(this.library.links, function(el, idx) {
			el.addEvent('click', function(evt) {
				new Event(evt).stop();
				
				// Stop running slideshow and restart a while later
				if (this.options.autoPlay) {
					$clear(this.periodical);
					this.autoPlay.delay(this.options.autoPlayDuration, this);
				}
				
				this.library.current = idx;
				
				this.display(el);
			}.bind(this));
		}.bind(this));
		
		/*
		document.addEvent('keydown', function(event){
		    event = new Event(event);
			if (event.key == 'right') {
				this.next();
			} else if (event.key == 'left') {
				this.previous();
			}
		}.bind(this)); */
	},
	
	
	
	display: function(clicked) {
		this.setActive(clicked);
				
		if (this.imageHandleCurrent === this.imageHandle0) {
			this.imageHandle1 = new Asset.images([clicked.getProperty('href')], {
				onComplete: function() {
					this.imageHandleCurrent = this.imageHandle1;
								
					// Hide/Show
					if ($defined(this.imageHandle0)) {
						this.hide(this.imageHandle0, this.imageHandleCurrent);
					} else {
						this.show(this.imageHandleCurrent);
					}
				}.bind(this)
			})[0];
		} else {
			this.imageHandle0 = new Asset.images([clicked.getProperty('href')], { 
				onComplete: function() {
					this.imageHandleCurrent = this.imageHandle0;
					
					// Hide/Show
					if ($defined(this.imageHandle1)) {
						this.hide(this.imageHandle1, this.imageHandleCurrent);
					} else {
						this.show(this.imageHandleCurrent);
					}
				}.bind(this)
			})[0];
		}
	},
	
	next: function() {
		if (this.library.current < this.library.links.length - 1) {
			this.library.current = this.library.current + 1;
			this.display(this.library.links[this.library.current]);
			if (this.library.current < this.library.links.length - 1) {
				// Preload next image...
				new Asset.image(this.library.links[this.library.current+1].getProperty('href'));
			}
		} else if (this.options.loop) {
			this.library.current = 0;
			this.display(this.library.links[this.library.current]);
		}
	},
	
	previous: function() {
		if (this.library.current > 0) {
			this.library.current = this.library.current - 1;
			this.display(this.library.links[this.library.current]);
		} else if (this.options.loop) {
			this.library.current = this.library.links.length - 1;
			this.display(this.library.links[this.library.current]);
		}
	},
	
	show: function(el) {
		var fx = new Fx.Style(el, 'opacity', { duration: this.options.duration, transition: this.options.transition }).set(0);
		el.injectInside(this.imageViewer);
		fx.start(1);
		return this;
	},
	
	hide: function(oldEl, newEl) {
		var fx = new Fx.Style(oldEl, 'opacity', { 
			duration: this.options.duration / 2, 
			onComplete: function() {
				oldEl.remove();
				this.show(newEl);
			}.bind(this) 
		}).start(0);
		return this;
	},
	
	setActive: function(elem) {
		$each(this.library.links, function(el, idx) {
			if (elem === el) {
				el.addClass('active');
			} else {
				el.removeClass('active');
			}
		});
	}

});

SimpleImageViewer.implement(new Chain, new Options, new Events);