/*
  Class:     Carousel
  Author:    Cédric Pellevillain
  Website:   http://devintact.com
  Version:   0.1
  Date:      06/10/2010
  Built For: MooTools 1.2
*/

(function () {
  var $ = document.id;
  this.Carousel = new Class({
    Implements: [Elements, Options],
    options: {            
      thumbs: 'player_thumbs',
      previews: 'player_previews',            
      infos: 'player_infos',
      cache: 'player_fake',
      active: 'active',
      autostart: false,
      mouseover: false,
  		showDuration: 3500,
  		fadeDuration: 750,
  		infoDuration: 250
    },
	   
	  // initialize
    initialize: function (element,options) {
        
        this.setOptions(options);
        
        if($(element) == null) return false;
              
        this.dim = $(this.options.previews).getSize();
        
        this.options.thumbs = $(this.options.thumbs).getElements('a');
        
        this.options.infos = $(this.options.infos);
        this.options.infos.dim = this.options.infos.getCoordinates($(element));
        this.options.infos.elements = this.options.infos.getElements('li');
        
        this.options.files = $(this.options.previews).getChildren('div[id^='+ this.options.previews +']');    
        this.options.files.reverse();
this.setFiles.delay(1.5,this.setFiles(this.options.files)); 
  			//this.setFiles(this.options.files);
  			this.loadImage(0);
      
        if(this.options.mouseover == true) {
          $(this.options.previews).addEvents({
              'mouseenter': this.playerEvent.bind(this, 'in'),
              'mouseleave': this.playerEvent.bind(this, 'out')
          });
        }
                  
    		if (this.options.autostart) this.play();
    
    },
        
  	// play the carousel
  	play: function() {
    	this.player = this.carousel.periodical(this.options.showDuration, this);
  		return this;
    },
	
  	// stop the carousel
  	stop: function() {
    	$clear(this.player);
  		return this;	
    },
	
  	// defines position images, infos and thumbs
  	setFiles: function(files) {
  			
  		this.options.files.each(function(f,i) {
       
          //resize : image portrait 
          if(f.getElement('img').getHeight() < this.dim.y) {
            f.getElement('img').setStyles({
              'width': 'auto',
              'height': this.dim.y+'px'
            });
          } 
          //resize : image paysage
          else if(f.getElement('img').getWidth() < this.dim.x) {
            f.getElement('img').setStyles({
              'width': this.dim.x+'px',
              'height': 'auto'
            });
          }
          // alignement vertical et horizontal
          f.getElement('img').setStyles({
            'margin-top': -(f.getElement('img').getHeight() - this.dim.y) / 2 +'px',
            'margin-left': -(f.getElement('img').getWidth() - this.dim.x) / 2 +'px'
          });
  				
  				f.setStyle('z-index',this.options.files.length-i);
  				f.set('tween', {duration: this.options.fadeDuration});
  				
  				this.options.infos.elements[i].set('tween', {duration: this.options.fadeDuration});
  
  	      this.options.thumbs[i].addEvent(
            'click', function() {
          						this.loadImage(i);
          						this.stop().play();
            }.bind(this)
          );
  	
  		}.bind(this));
  		
  		$(this.options.infos).setStyle('z-index',this.options.files.length+1);
      
      $(this.options.cache).set('tween', {duration: this.options.fadeDuration, onComplete:function() { $(this.options.cache).destroy(); }.bind(this) });
      $(this.options.cache).tween('opacity',0);
  		
  		return this;
  	
    },
	
  	loadImage: function(i) {
    	this.currentImage = i;
  		this.options.files.each(function(s, j) {
        this.options.thumbs[j].removeClass(this.options.active);
        var pos_info = this.options.infos.elements[j].getStyle('left').toInt();
        if(  pos_info <= this.options.infos.dim.left &&  pos_info > -this.options.infos.dim.width ) {
  			 this.options.infos.elements[j].tween('left', '-'+this.options.infos.dim.width+'px');
        }
  			if (i == j) { // show this slide
  				s.fade(1);        
          this.options.infos.elements[j].tween('left', this.options.infos.dim.left);
  				this.options.thumbs[j].addClass(this.options.active);
  			} else { // else hide it
  				s.fade(0);
  			}
  		}.bind(this));
  	},
	
  	carousel: function() {
  		var t = this.currentImage + 1;
  		if (t > this.options.thumbs.length - 1) t = 0;
  		this.loadImage(t);
  		return this;
  	},
  
    playerEvent: function (evt) {
        $(this.options.infos).set('tween', {duration: this.options.infoDuration});      
        switch (evt) {
        case 'in':
  				this.stop();
            this.options.mouseover = true;
  	        $(this.options.infos).tween('top', this.options.infos.dim.top + this.options.infos.dim.height);
            break;
        case 'out':
        default:
            this.options.mouseover = false;
            $(this.options.infos).tween('top', this.options.infos.dim.top);
            this.play();
            break;
        }
    }
  
  });
})();