/**
Script: 1.0 mootools-slideshow.js
	Animation of images based on MooTools library
	
Usage:
HTML:
<div class="flash" id="headerImages"></div>
JS:
<script type="text/javascript">
	window.addEvent('domready', function()
	{
		var images = new Hash({
			'header/F_2009-03-10-09-45-45.jpg': {title: 'Some title', link: 'http://www.seznam.cz'},
			'header/F_2009-05-12-07-47-18.jpg': {title: 'New title'}
		});
		
		new Slideshow('headerImages', images, {
			base: '/Modules/FlashImages/Images/',
			duration: $random(5000,8000),
			delay: 900,
			loader: 'http://www.seznam.cz/loading.gif',
			progress: false
		});
	});
</script>
CSS:
#headerImages - DIV element that contains IMG elements
#headerImagesProgress - DIV element with percentage progress
#headerImages img - all IMG elements
#headerImages<picture_number_from_0> - IMG element with image

*/
var Slideshow = new Class({
	Implements: [Options],
	
	options:
	{
		base: '',
		delay: 5000,
		duration: 750,
		loader: '',
		progress: false
	},
	
	initialize: function(el, data, options)
	{
		this.currentImageIndex = 0;
		// set options
		this.setOptions(options);
		// set rendering element
		this.targetEl = $(el);
		if (!this.targetEl) 
			return;
		// set styles
		this.targetEl.setStyle('overflow', 'hidden');
		if ($chk(this.options.loader))
			this.targetEl.setStyle('background', 'transparent url("' + this.options.loader + '") no-repeat center center');
		// progress element
		this.progressEl = new Element('div', {
			'styles': {
				'position': 'absolute',
				'display': 'none'
			},
			'id': this.targetEl.id + 'Progress',
			'html': '0%'
		});	
		this.progressEl.inject(this.targetEl);
		// load data
		if (!this._load(data))
		{		
			this.targetEl.set('html','Missing data...');
			return;
		}
		// preload images
		this._preload();
	},
	
	_go: function()
	{
		if (this.data.imageElements.length == 1 && !this.started)
		{
			var effect = new Fx.Morph(this.data.imageElements[0], {fps: 25, duration: this.options.duration, transition: Fx.Transitions.Sine.easeOut});
			effect.start({'opacity': 1});
		}
		else if (this.data.imageElements.length > 1 && !this.started)
		{
			var effect = new Fx.Morph(this.data.imageElements[this.currentImageIndex], {fps: 25, duration: this.options.duration, transition: Fx.Transitions.Sine.easeOut});
			effect.start({'opacity': 1});			
			this._go.periodical(this.options.delay + this.options.duration, this);
		}
		else if (this.data.imageElements.length > 1 && this.started)
		{
			var nextIndex = this.currentImageIndex;
			if (this.data.imageElements.length > this.currentImageIndex + 1)
				nextIndex++;
			else
				nextIndex = 0;

			var effectPrev = new Fx.Morph(this.data.imageElements[this.currentImageIndex], {fps: 25, duration: this.options.duration, transition: Fx.Transitions.Sine.easeOut});
			var effectNext = new Fx.Morph(this.data.imageElements[nextIndex], {fps: 25, duration: this.options.duration, transition: Fx.Transitions.Sine.easeOut});
			effectPrev.start({'opacity': 0});
			effectNext.start({'opacity': 1});
			
			this.currentImageIndex = nextIndex;
		}
	},
	
	_load: function(data)
	{
		var obj = this;
		this.data = {'images': [], 'titles': [], 'links': [], 'imageElements': []};

		data.each(function(value, key)
		{
			var image = (obj.options.base) ? obj.options.base + key.trim() : key.trim();
			var title = (value.title) ? value.title.trim() : '';
			var link = (value.link) ? value.link.trim() : '';
			obj.data.images.push(image);
			obj.data.titles.push(title);
			obj.data.links.push(link);
		});

		return this.data.images.length > 0;
	},
	
	_preload: function ()
	{	
		var obj = this;
		
		if (this.options.progress)
			this.progressEl.setStyle('display', 'block');
		
		this.data.imageElements = new Asset.images(this.data.images, {
			onProgress: function(i)
			{
				if (obj.options.progress)
					obj.progressEl.set('html', ((i + 1) / obj.data.images.length * 100).toInt() + '%');
			},
			onComplete: function()
			{
				obj._start();
			}
		});
	},
	
	_start: function()
	{
		var obj = this;
		
		this.data.imageElements.each(function(image, i)
		{
			image.set({
				'styles': {
					'opacity': 0,
					'width': obj.targetEl.getStyle('width'),
					'height': obj.targetEl.getStyle('height'),
					'position': 'absolute',
					'cursor': 'default'
				},
				'title': obj.data.titles[i],
				'alt': obj.data.titles[i],
				'id': obj.targetEl.id + i
			});
			if ($chk(obj.data.links[i]))
			{
				image.set({
					'events': {
						'click': function() { location.href = obj.data.links[i]; }
					},
					'styles': {'cursor': 'pointer'}
				});
			}
			image.inject(obj.targetEl);
		});
		
		this.targetEl.setStyle('background', 'none');
		this.progressEl.setStyle('display', 'none');
		
		this._go();			
		this.started = true;
	}
});