/*
	Class:    	macoda
	Author:   	Marco Dell'Anna
	Website:    #
	Version:  	1.0
	Date:     	3/09/2009
	Built For:  MooTools 1.2
*/

var macoda = new Class({
	
	animate : false,
	tab     : [],
	fade    : [],
	ajaxlink: [],
	panelContainer: '',
	scroll : '',
	
	//implements
	Implements: [Options],

	//options
	options: {
		id:'macoda',
		wsize:700,
		speed:500,
		ajax:false,
		ajax_div_prefix:'content',
		min_opacity:0.3,
		active: 1
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		this.init();
	},
	
	init: function() {
		// Imposta Active Element
		this.active = this.options.active -1;
		// Inizializza elementi
		this.initPanels();
		this.initNav();
		this.initStepper();
		// 
		this.gotoPanel(this.active);
	},
	
	initPanels: function(){
//		var pannelli = $$('#' + this.options.id + ' div[rel=macoda-panel]');
		var pannelli = $(this.options.id).getElements('div[rel=macoda-panel]');
			this.pannelli = pannelli;
			// Imposta larghezza del contenitore
			this.panelContainer = $$('#' + this.options.id + ' div[rel=macoda-container]');
			this.panelContainer = ($(this.panelContainer[0].get('id')));
			this.panelContainer.setStyle('width', this.options.wsize * pannelli.length + "px");
			
			this.scroll = new Fx.Elements(this.panelContainer, {
															duration:this.options.speed,
															transition:'sine:out',
															onComplete: function(){
																		this.animate = false;
																		this.setActive();
																		if(this.options.ajax === true){
																			this.cleanAll();
																		}
															}.bind(this)
														});
			
			// Posizione Pannelli
			pannelli.each(function(elemento, i) {
				if( elemento.get('rel') == 'macoda-panel' ){
			//		var idElem = elemento.set('id', 'id' + i);
					elemento.idPos  = i;
					elemento.setStyle('left', this.options.wsize * i + "px");
				}
			}.bind(this));
	},
	
	initNav: function(){
	//	var nav = $$('#' + this.options.id + ' div[rel=macoda-nav] a');
		var nav = $(this.options.id).getElements('div[rel=macoda-nav] a');
			nav.each(function(elemento, i) {
				
				this.tab[i]     = elemento;
				this.fade[i]    = new Fx.Elements(elemento, { duration:100, transition:'sine:out',onComplete: function(){
							this.animate = false;
			    }.bind(this) });

				this.ajaxlink[i] = elemento.get('href');
			
				elemento.addEvent('click', function(e){
					var event = new Event(e).stop();
					if(this.animate === false){
						var targ = elemento.get('rel').substring(1);

						var xpos = this.panelContainer.getStyle('left').toInt();
						this.active = targ - 1;
						
						this.gotoPanel(this.active);
					}

				}.bind(this));
			}.bind(this));
	},
	
	initStepper: function(){
		var nav = $(this.options.id).getElements('div[rel=macoda-stepper] a');
			nav.each(function(elemento, i) {
				//var event = new Event().stop();
				switch(elemento.get("rel")){
					// Avanti
					case "avanti":
						// Comportamento Avanti
						elemento.addEvent('click', function(e){
							e.stop();
							this.avanti();
						}.bind(this));
					break;
					// Indietro
					case "indietro":
						// Comportamento Avanti
						elemento.addEvent('click', function(e){
							e.stop();
							this.indietro();
						}.bind(this));
					break;
					default:
					break;
				}
			}.bind(this));
	},
	
	avanti: function(){
		if(this.animate === false){
			// Set Active
			this.active = this.active+1;
			var xpos = this.panelContainer.getStyle('left').toInt();
			var destinazione = -(this.active * this.options.wsize);
			if(this.active > this.pannelli.length-1){
				destinazione = 0;
				this.active = 0;
			}
			// Richiesta Ajax
			if(this.options.ajax === true){ this.ajaxRequest(); }
			this.scroll.start({ '0': { 'left': [xpos,destinazione] } });
		}
		this.animate = true;	
	},
	
	indietro: function(){
		if(this.animate === false){
			// Set Active
			this.active = this.active-1;

			var xpos = this.panelContainer.getStyle('left').toInt();
			var destinazione = -(this.active * this.options.wsize);
			if(this.active<0){
				destinazione = -((this.pannelli.length-1) * this.options.wsize);
				this.active = this.pannelli.length-1;
			}
			// Richiesta Ajax
			if(this.options.ajax === true){ this.ajaxRequest(); }

			this.scroll.start({ '0': { 'left': [xpos,destinazione] } });
		}
		this.animate = true;	
	},
	
	gotoPanel: function(panel){
		this.active = panel;

		if(this.animate === false){
			// Set Active
			var xpos = this.panelContainer.getStyle('left').toInt();
			var destinazione = -(this.active * this.options.wsize);
			// Richiesta Ajax
			if(this.options.ajax === true){ this.ajaxRequest(); }

			this.scroll.start({ '0': { 'left': [xpos,destinazione] } });
		}
		this.animate = true;

	},
	
	ajaxRequest: function(){
		var contenitore = $(this.options.ajax_div_prefix + (this.active+1));
			contenitore.addClass('loading');
		//make the ajax call, replace text
		var req = new Request({
		    method: 'get',
		    url: this.ajaxlink[this.active],
		    data: { 'do' : '1' },
			evalScripts: true,
			evalResponse: true,
		    onRequest: function() { contenitore.set("html","");
			},
		    /*update: contenitore,*/
		    onComplete: function(response) {
				contenitore.set("html", response);
				contenitore.setStyle("opacity", 0);
				new Fx.Elements(contenitore, { duration:1000, transition:'sine:out',onComplete: function(){
							this.animate = false;
			    }.bind(this) }).start({ '0': { 'opacity': [0,1] } });
				//
				contenitore.removeClass('loading');
		    }
		}).send();
	},
	
	setActive: function(){
		this.tab.each(function(elemento, i) {
			if(this.animate === false){
				elemento.removeClass('active');

				if(i!=this.active){
					this.fade[i].start({ '0': { 'opacity': [elemento.get('opacity'),this.options.min_opacity] } });
				}else{
					this.fade[this.active].start({ '0': { 'opacity': [this.options.min_opacity,1] } });	
				}
			}
		}.bind(this));
		this.animate = true;
		this.tab[this.active].addClass('active');
	},
	
	cleanAll : function(){
		// Posizione Pannelli
		this.pannelli.each(function(elemento, i) {
			if( this.active != i){
				elemento.set("html","");
			} 
			
		}.bind(this));
	}
});