// Must generate navigation

var Feature_control = new Class({
	
	Implements: Options,			
	
	options: {
		container_id		: 'feature',
		nav_id				: 'feature_nav',
		text_id				: 'feature_text_content',
		transition_timer	: 500,
		slideshow_timer		: 7000
	},
	
	initialize: function(options) {
		this.setOptions(options);
		
		this.features 	= [];
		this.container 	= this.getContainer();
		this.nav		= $(this.options.nav_id);
		this.text		= $(this.options.text_id);
		this.index		= 0;
		this.slideshow	= function() { this.next() };
		
		this.slideshow_timer = this.slideshow.periodical(this.options.slideshow_timer, this);
	},	
	
	start: function() {
		this.createNavigation();
	},
	
	add: function(file) {
		this.features.push(new Feature_element({ 'file' : file, 'index' : this.features.length}));
	},
	
	createNavigation: function() {
		this.features.each( function(feature) {
			var nav_item = new Element('li', {
				'class'		: (feature.index == this.index ? 'active' : ''),
				'html'		: (feature.index + 1),
				'events'	: {
					'click'	: function(e) {
						this.change(feature.index);
					}.bind(this)
				}
			});
			nav_item.injectInside(this.nav);
		}.bind(this));
	},
	
	change: function(index) {
		var request = new Request.HTML({
			'url'			: this.features[index].file,
			'onRequest'		: function () {
			}.bind(this),
			
			'onComplete'	: function (tree, elements, html) {
				this.index = index;
				this.changeFrame(html);
			}.bind(this)
		}).send();
	},
	
	changeFrame: function(html) {
		var fade = new Fx.Tween(this.container, {
			duration	: this.options.transition_timer,
			transition	: 'sine:in',
			link		: 'chain'
		});
		
		fade.start('opacity',1,0);	
		
		(function() {
			this.container.innerHTML = html;
			this.resetContainers();
			this.createNavigation();
			this.text.setStyle('opacity',0);
		}.bind(this)).delay(this.options.transition_timer);
		
		fade.start('opacity',0,1);
		
		(function() {
			var text_fade = new Fx.Tween(this.text, {
				duration	: this.options.transition_timer,
				transition	: 'sine:in',
				link		: 'chain'
			});
			text_fade.start('opacity',0,1);
		}.bind(this)).delay(1200);		
	},	
	
	next: function() {
		if ( (this.index + 1) < this.features.length ) {
			this.change(this.index + 1);
		} else {
			this.change(0);	
		}
	},
	
	resetContainers: function() {
		this.container 	= this.getContainer();
		this.nav 		= $(this.options.nav_id);
		this.text		= $(this.options.text_id);
	},
	
	getContainer: function() {
		var container = $('panel_feature_content');
		
		container.removeEvents('mouseenter');
		container.removeEvents('mouseleave');		
		
		container.addEvent('mouseenter', function(e) {
			e.stop();
			$clear(this.slideshow_timer);
		}.bind(this));
		
		container.addEvent('mouseleave', function(e) {
			e.stop();
			this.slideshow_timer = this.slideshow.periodical(this.options.slideshow_timer, this);
		}.bind(this));		
		
		return container;
	}
});

var Feature_element = new Class({
	
	Implements: Options,			
	
	options: {
		index	: '',
		file	: ''
	},
	
	initialize: function(options) {
		this.setOptions(options);
		
		this.index 	= this.options.index;
		this.file	= this.options.file;
	}
});