/*	
	public class Features
	@by Javier Onglao
	@December 31, 2009
	
	@options
		slides (array): images/pictures to be rotated
		links (array): links of each image
		delay (unsigned int): gap between images (in seconds)
		shuffle (boolean): shuffles slides.array
		effect (list: Sine, Cubic, Elastic, Quart): defines the transition effect
		duration (unsigned int): defines the duration of the transition effect
		directory (string): defines the path for images
		
	@usage
		new Features({slides, [links, delay, shuffle, effect, duration, directory]})
*/
var Features = new Class({
        Implements: [Options, Events],
        options: {
			slides: [],
			links: [],
			delay: 5,
			shuffle: true,
			effect: 'Quart',
			duration: 1,
			directory: 'images/features/'
        },
		slides: [],
		links: [],
		fader: null,
        initialize: function(options){
				// Define options
                this.setOptions(options);
				
				// Define Transitions
				this.transition = eval('Fx.Transitions.' + this.options.effect + '.easeInOut');
				
				// Define public variables
				this.slides = this.options.slides;
				this.links = this.options.links.associate(this.options.slides);
				
				// Shuffle slides.array, if true
				if(this.options.shuffle)
					this.options.slides.shuffle();
				
				// Run function
				this.start(this.options.delay, this.transition, this.options.duration, this.options.directory);
				
        },
		start: function(delay, transitionmode, duration, directory)
		{
			var picId = 0;
			
			new Element('img', {src: root + 'images/loader.gif', alt: '', id: 'features-loader'}).inject($('mid-features'));
			$('features-loader').fade(0,1);
					
			var imgLoad = new Asset.images(this.slides, {
				onComplete: function() {
					$('features-loader').fade(1,0);
					
					for(i = 0; i < this.slides.length; i++)
					{
						// Insert the image in the stage.
						new Element('img', {src: root + directory + this.slides[i], alt: '', id: 'img' + i, href: '' + this.links[this.slides[i]] + ''}).inject($('mid-features'));
						$('img' + i).addClass('mid-features-img');
						
						// Fade in the first element, and fade out loader
						$('features-loader').fade(1,0);
						startImg = new Fx.Tween('img0', {property: 'opacity', duration: (duration*1000), transition: transitionmode});
						startImg.start(0,1);
			
						// Hide all other elements
						if(i > 0)
						{
							$('img' + i).set('opacity', 0);
						}
						
						// Attach the element's event handler
						$('img' + i).addEvent('click', function(el) {
								window.location = el.target.get('href');
						});
					}

					this.fader = function()
					{	
							layerA = new Fx.Tween('img' + picId, {property: 'opacity', duration: (duration*1000), transition: transitionmode});
								picId = picId < (this.slides.length - 1) ? (picId + 1) : 0;
							layerB = new Fx.Tween('img' + picId, {property: 'opacity', duration: (duration*1000), transition: transitionmode});
							
							layerA.start(1,0);
							layerB.start(0,1);
					}.bind(this).periodical(delay * 1000);
				}.bind(this)
			});
		}
});