// JavaScript Document


var Slide = new Class({
  options: {
		cont: 'slider-kont', 
		duration: 2500,	
		delay: 1000,
		auto: false,
		slides: {},
		transition: Fx.Transitions.Quint.easeOut
	},
  initialize: function(options) {
    this.setOptions(options);
    this.cont = $(this.options.cont);
    this.cont.setStyles({
      position: 'relative'
    });
    this.buttons = new Element('div').injectInside(this.cont);
    this.buttons.set('id', this.options.cont + '-buttons');
    this.first = true;
    this.auto = this.options.auto;
    var instance = this;
    this.buttons.addEvents({
      'mouseenter': function() {
        instance.stop();
      },
      'mouseleave': function() {
        instance.play();
      }
    });
  },
  start: function() {
    this.images = new Array();
    this.nav = new Array();
    var x = 0;
    for(var i in this.options.slides) {
      var slide = this.options.slides[i];
      this.images[x] = new Element('img').injectInside(this.cont);
      this.images[x].setStyles({
        position: 'absolute',
		top: 0,
        left: 0,
        display: 'none'
      });
      this.images[x].set('src', slide);      
      this.nav[x] = new Element('a').injectInside(this.buttons);
      var instance = this;
      this.nav[x].addEvent('click', function() {
        instance.setSlide(instance.nav.indexOf(this));
      });
     
      x++;                                    
    } 
    new Element('div').injectInside(this.buttons)
    this.buttons.setStyles({
      clear: 'both'    
    }); 
    this.buttons.setStyles({
      left: (this.cont.getStyle('width').toInt()/2) - (this.buttons.getStyle('width').toInt()/2)   
    }); 
    
    this.images[0].setStyle('display', 'block');
    this.nav[0].addClass('active');  
    this.step = 0;    
    if (this.step+1 < this.images.length) {
      this.next = 1;   
    } else {
        this.next = 0;
      }
    this.efekt();   
  },
  efekt: function() {
    this.progress = true;
    var d = this.options.duration;
    var t = this.options.transition;    
    if (!this.first) {
      this.images[this.step].set('morph', {duration:d, transition: t}); 
      this.images[this.next].set('morph', {duration:d, transition: t});
      this.images[this.step].setStyles({display: 'block', opacity: 1});
      this.images[this.next].setStyles({display: 'block', opacity: 0});
      
      this.images[this.step].morph({
    		opacity: [1, 0]
      });
      this.images[this.next].morph({
    		opacity: [0, 1]
      });
      this.nav[this.step].removeClass('active');
      this.nav[this.next].addClass('active');
      
    } 
    this.afterEfekt.delay(d + 25, this);  
    
  },
  afterEfekt: function() {
    this.progress = false; 
    if (!this.first) {
      this.step = this.next;
      this.next++;        
      if (this.next < this.images.length) {       
      } else {
        this.next = 0;         
      }
    } 
    this.first = false;    
    if(this.auto) {
			$clear(this.timer);
			this.timer = this.efekt.delay(this.options.delay, this);
		}
  },
  stop: function(){
		$clear(this.timer);
		this.auto = false;
	},
	play: function() {
		if(!this.auto ) {
			$clear(this.timer);
			this.auto = true;
			if(!this.progress) {
				this.efekt();
			}
		}
	},
  setSlide: function(i) {    
    if(this.progress) { return; }  
    this.next = i;  
    $clear(this.timer);
    this.efekt();
  }   
});

Slide.implement(new Options, new Events);