// PRIMO PIANO ---------------------------------------------------------------

PrimoPiano = {

	init: function(el) {
		this.counter = 0;
		this.pages = el.getElements('div');
		
		this.pages.setStyle('opacity', '0');
		this.pages[0].setStyle('opacity', '1');
		
		if (this.pages.length > 1) {
			this.next.periodical(8000, this);
		}
	},
	
	next: function(){
		var prossimo = this.counter + 1;
		if (prossimo == this.pages.length) prossimo = 0;
		
		this.pages[this.counter].fade('out');
		this.pages[prossimo].fade('in');
		
		this.counter++;
		if (this.counter == this.pages.length) this.counter = 0;
	}

}


// CAROUSEL ------------------------------------------------------------------
var Carousel = {
  
  init: function(carousel) {
  	this.carousel = carousel;
  	this.pages = this.carousel.getElements('.page');//$ES('.page', this.carousel);
  	this.actualpage = 0;
  	this.moving = false;
  	
  	// Aggiunge gli eventi di over/out al contenitore
  	this.carousel.addEvent('mouseover', function(){
  		this.stoptimer();
  	}.bind(this));
  	this.carousel.addEvent('mouseout', function(){
  		this.starttimer();
  	}.bind(this));
  	
  	// crea <div class="controls"></div>
  	this.controlsdiv = new Element('div', {
  	  'class': 'controls'
  	}).inject(this.carousel);
  	
  	// crea le frecce
  	this.sxarrow = new Element('a', {
  	  'class': 'prevbtn',
  	  'title': 'Precedente',
  	  'html': 'Precedente',
  	  'events': {
  	    'click': function(){ this.prev(); }.bind(this)
  	  }
  	}).inject(this.controlsdiv);
  	this.dxarrow = new Element('a', {
  	  'class': 'nextbtn',
  	  'title': 'Seguente',
  	  'html': 'Seguente',
  	  'events': {
  	    'click': function(){ this.next(); }.bind(this)
  	  }
  	}).inject(this.controlsdiv);
  	
  	// crea la paginazione
    this.pagination = new Element('ul', {
  	  'class': 'pagination'
  	}).inject(this.controlsdiv);
  	
  	this.pages.each(function(item, index) {
  	  var pagebtn = new Element('li', {
  	  	'html': '<em><span>Pagina '+(index+1)+'</span></em>',
  	    'events': {
  	      'click': function() { this.goto(index); }.bind(this)
  	    }
  	  });
  	  if (index == 0) pagebtn.addClass('active');
  	  pagebtn.inject(this.pagination);
  	}.bind(this));

    // Lancia il timer per cambiare pagina
    this.starttimer();
    
  },
  
  starttimer: function() {
  	this.timer = this.next.periodical(10000, this);
  },
  
  stoptimer: function() {
  	$clear(this.timer)
  },

  goto: function(newpage, direction) {
    if (newpage != this.actualpage && this.moving == false) {
      
      // Calcola i valori dell'animazione e blocca il click dell'utente
      var divwidth = this.pages[this.actualpage].getSize().x;
      
      if (direction) {
        if (direction == 'next') { animvalues = [0, -divwidth, divwidth, 0]; }
        else if (direction == 'prev') { animvalues = [0, divwidth, -divwidth, 0]; }
      }
      else {
        if (newpage > this.actualpage) { animvalues = [0, -divwidth, divwidth, 0]; }
        else if (newpage < this.actualpage) { animvalues = [0, divwidth, -divwidth, 0]; }
      }
      
      this.moving = true;
      
      // Visualizza il blocco nascosto e anima quello visibile
      this.pages[newpage].addClass('selected');
      this.fx1 = new Fx.Tween(this.pages[this.actualpage], {
        duration: 1000,
        transition: Fx.Transitions.Cubic.easeInOut
      });
      this.fx1.set('left',animvalues[0]);
      this.fx1.start('left',animvalues[1]);

      
      // Nasconde il blocco visibile e anima quello nascosto,
      // quindi aggiorna la variabile di pagina e di movimento
      this.fx2 = new Fx.Tween(this.pages[newpage], {
        duration: 1000,
        transition: Fx.Transitions.Cubic.easeInOut
      });
      this.fx2.set('left', animvalues[2]);
      this.fx2.start('left', animvalues[3]).chain(function() {
        this.pages[this.actualpage].removeClass('selected');
        this.actualpage = newpage;
        this.moving = false;
      }.bind(this));
      
      // Aggiorna la paginazione
      this.pagination.getElement('.active').removeClass('active');
      this.pagination.getElements('li')[newpage].addClass('active');
    }
  },
  
  next: function(timer) {
    if (this.actualpage+1 > this.pages.length-1) { this.goto(0, 'next') }
    else { this.goto(this.actualpage+1, 'next'); }
  },
  
  prev: function() {
    if (this.actualpage-1 < 0) { this.goto(this.pages.length-1, 'prev') }
    else { this.goto(this.actualpage-1, 'prev'); }
  }
  
};


// INIZIALIZZA SITO ----------------------------------------------------------
window.addEvent('domready', function(){
	if ($('home_primopiano')) { PrimoPiano.init($('home_primopiano')); }
	if ($('home_carousel')) { Carousel.init($('home_carousel')); }
});