/**
 * Image Gallery
 *
 * Simple script displaying images in a popup styled view using Mootools 1.2 http://mootools.net/.
 *
 * @version		0.9.4
 *
 * @modified	2010-07-18
 * @author		Nicolas Fornallaz, http:www.infinitenote.com
 * @copyright	2008 - 2010, Author
 * @license		http://www.opensource.org/licenses/mit-license.php The MIT License
 */
 
 var ImageGallery = new Class({
	Implements: [Options],
	
	options: {
		viewerId: 'ImageViewer',
		viewerSelector: 'div.image-view',
		thumbOverlaySelector: 'a.overlay',
		thumbnailSelector: 'img.thumbnail',
		controlsSelector: 'div.controls',
		btnNextSelector: 'a.next',
		btnPreviousSelector: 'a.previous',
		viewerDimensions: [680, 540],
		backgroundColor: '#FFFFFF',
		backgroundZIndex: 99
	},
	
	initialize: function(index_id, options){
		this.setOptions(options);
		var options = this.options;
		
		var document_size = document.getSize();
		
		// gallery
		this.index = $(index_id);
		
		this.index_pos = this.index.getPosition();
		this.index_size = this.index.getSize();
		
		// thumbnails
		this.thumbOverlay = this.index.getElements(this.options.thumbOverlaySelector);
		this.thumbnails = [];
		
		// images
		// this.images = new Hash(); // assets
		this.ds_images = []; // data source
		
		// image viewer
		this.viewer = $(this.options.viewerId);
		
		var viewer_size = {x: this.options.viewerDimensions[0], y: this.options.viewerDimensions[1]};
		
		this.mask = this.viewer.getElement('div.mask');
		this.content = this.viewer.getElement('div.content');
		this.legend = this.viewer.getElement('p.legend');
		this.title = this.viewer.getElement('h4.title');
		//this.images = new Hash();
		
		// close button - image viewer
		this.btn_close = this.viewer.getElement('img.close');
		this.btn_close.addEvent('click', this.close.bind(this));
		
		// background layer 
		this.background = new Element('div');
		this.background.setStyles({
			position: 'absolute',
			display: 'none',
			backgroundColor: this.options.backgroundColor,
			opacity: 0,
			zIndex: this.options.backgroundZIndex,
			width: '100%',
			height: 0
		});
		this.background.addEvent('click', this.close.bind(this));
		
		var body = $$('body');
		body.grab(this.background);
		
		var backgroundFx = function(){
			this.background.setStyles({
				display: 'block',
				opacity: 0.1,
				/*top: window.getScroll().y,*/
				top: 0,
				left: 0,
				height: window.getScrollSize().y
			}).fade(0.7);
		};
		
		// for each thumbnail do ...
		this.thumbOverlay.each(function(el, i){
			this.currentIndex = i;	
			
			this.thumbnails[i] = el.getElement(this.options.thumbnailSelector);
			
			this.ds_images[i] = {
				src: el.get('href'),
				title: this.thumbnails[i].get('alt'),
				id: index_id + 'Image' + (i+1),
				legend: el.get('title')
			};
			
			if (!this.ds_images[i].legend){
				this.ds_images[i].legend = '• • •';
			}
			
			//this.ds_images[i].legend = new Element('p', {html: legend});
			//this.ds_images[i].legend.addClass('legend');
			
			var scaleFx = new Fx.Morph(this.viewer, {
				duration: 320,
				fps: 30,
				transition: Fx.Transitions.Sine.easeOut,
				onComplete: this.view.bind(this).pass(i)
			});
			
			// adding actions
			var fn = function(event){
				event.stop();
				this.reset();
				
				this.thumbnail_pos = this.thumbnails[i].getPosition();
				this.thumbnail_size = this.thumbnails[i].getSize();
					
				this.viewer_pos = [
					Math.round((document_size.x - viewer_size.x) / 2),
					Math.round((document_size.y - viewer_size.y) / 2 + window.getScroll().y)
				];
				
				this.viewer.setStyles({
					position: 'absolute',
					left: this.thumbnail_pos.x,
					top: this.thumbnail_pos.y,
					width: this.thumbnail_size.x - 2,
					height: this.thumbnail_size.y - 2,
					display: 'block',
					zIndex: 100
				});
				
				scaleFx.start({
					'opacity': [0.3, 1],
					'height': viewer_size.y,
					'width': viewer_size.x,
					'top': [this.thumbnail_pos.y, this.viewer_pos[1]],
					'left': [this.thumbnail_pos.x, this.viewer_pos[0]]
				});
				
				body.grab(this.viewer);
				
				backgroundFx.bind(this).delay(340);
			};
			
			el.addEvent('click', fn.bind(this));
			
		}, this);
		
		this.count = this.ds_images.length;
		
		// navigation - prev and next buttons
		if (this.count > 1) {
			this.viewer.getElement(this.options.btnNextSelector).addEvent('click', this.next.bind(this));
			this.viewer.getElement(this.options.btnPreviousSelector).addEvent('click', this.previous.bind(this));
		}
		else {
			this.viewer.getElement(this.options.controlsSelector).empty();
		}
	},
	
	close: function(){
		this.viewer.setStyle('display', 'none');
		this.background.setStyle('display', 'none');
	},
	
	reset: function(){
		this.mask.setStyle('display', 'none');
		this.content.empty().setStyle('display', 'none');
		this.title.empty();
		
		return this;
	},
	
	view: function(i){
		
		this.currentIndex = i;
		
		for(var j = 0; j < this.count; j++){
			if(j == i - 1){
				this.nextId = this.ds_images[j].id;
			} else if(j == i + 1){
				this.prviousId = this.ds_images[j].id;
			}
		}
		
		if(this.ds_images[i].content === undefined){
			this.ds_images[i].content = new Asset.image(this.ds_images[i].src, {
				id: this.ds_images[i].id,
				alt: this.ds_images[i].title,
				onload: function(){
					this.loadsImage = true;
					//content.appendText('Loading ...');
				}
			});
		}
		this.mask.setStyle('display', 'block');
		
		this.content.adopt(this.ds_images[i].content);
		this.legend.empty().appendText(this.ds_images[i].legend);
		
		this.content.setStyles({
			display: 'block',
			opacity: 0
		}).fade(1);
		
		var caption = '&nbsp;';
		if (this.ds_images[i].title){
			caption = this.ds_images[i].title;
		}
		
		this.title.empty().appendText(caption);
		if (this.count > 1){
			this.title.appendText(' - Image ' + (i+1) + ' / ' + this.count);
		}
	},
	
	next: function(event){
		event.stop();
		if(this.currentIndex < (this.count - 1)){
			this.currentIndex = this.currentIndex + 1
		} else {
			this.currentIndex = 0;
		}
		
		this.reset().view(this.currentIndex);
	},
	
	previous: function(event){
		event.stop();
		if(this.currentIndex > 0){
			this.currentIndex = this.currentIndex - 1
		} else {
			this.currentIndex = this.count - 1;
		}
		
		this.reset().view(this.currentIndex);
	},
	
	loadsImage: false
});