// JavaScript Document

var ImageSwapperTimer = new Class({
  Implements: [Options],
  options: {
    swappers: [],
    timeout: 6000
    
  },

                

  initialize: function(options) {
      this.setOptions(options);
  },
  
  start: function() {
    this.next.periodical(this.options.timeout, this);
  },
  
  next: function() {
    this.options.swappers.forEach(function(_swapper, _index) {
      _swapper.next();    
    });
  }
  
  
  
});

var ImageSwapperController = new Class({
  Implements: [Options],
  options: {
    swappers: [],
    leftButton: null,
    rightButton: null
    
  },

                

  initialize: function(options) {
      this.setOptions(options);
      this.options.rightButton.addEvent('click', this.rightClicked.bindWithEvent(this));
      this.options.leftButton.addEvent('click', this.leftClicked.bindWithEvent(this));
  },
  
  start: function() {
    
  },
  
  rightClicked: function(_event) {
    _event.stop();
    this.next();
  },
  
  leftClicked: function(_event) {
    _event.stop();
    this.previous();
  },
  
  next: function() {
    this.options.swappers.forEach(function(_swapper, _index) {
      _swapper.next();    
    });
  },
  
  previous: function() {
    this.options.swappers.forEach(function(_swapper, _index) {
      _swapper.previous();    
    });
  }
  
  
  
});

var TextSwapper = new Class( {
  Implements: [Options],
  options: {
    element: null
  },
  currentIndex: 0,
  
  initialize: function(options) {
      this.setOptions(options);
      this.setup();
  },
  
  next: function() {
    this.currentIndex++;
    if (this.currentIndex > this.divs.length - 1) {
      this.currentIndex = 0;
    }
    this.display();
    
  },
  
  previous: function() {
    this.currentIndex--;
    if (this.currentIndex < 0) {
      this.currentIndex = this.divs.length - 1;
    }
    this.display();
    
  },
  
  display: function() {
    this.divs.each(function(_e) {
      _e.setStyle('display', 'none');
      
    });
    this.divs[this.currentIndex].setStyle('display', 'block');
  },
  
  setup: function() {
    this.divs = [];
    this.options.element.getElements('div').each(function(_e) {
      this.divs.push(_e);
    }, this);
    
    this.display();
    
  }
  
  

});


var ImageSwapper = new Class({
  Implements: [Options],
  options: {
    images: [],
    urls: [],
    element: null,
    loaderClass: 'loader'
    
  },
  useLinks: false,
  currentImage: null,
  newImage: null,
  anchor: null,
  currentIndex: 0,

  initialize: function(options) {
      this.setOptions(options);
      this.setup();
  },
  
  next: function() {
    this.currentIndex++;
    if (this.currentIndex > this.images.length - 1) {
      this.currentIndex = 0;
    }
    this.display();
    
  },
  
  previous: function() {
    this.currentIndex--;
    if (this.currentIndex < 0) {
      this.currentIndex = this.images.length - 1;
    }
    this.display();
    
  },
 
  preLoad: function() {
    if (this.images[this.currentIndex].domImg == null) {
      this.images[this.currentIndex].domImg = Asset.image(this.images[this.currentIndex].image, {
      onload: this.preLoaded.bind(this)});
   
      if (this.preLoader == null) {
        this.preLoader = new Element('div', {'class': this.options.loaderClass});
        this.preLoader.inject(this.options.element);
      }
      this.preLoader.setStyle('display', 'block');
    }
    else {
      this.preLoaded();
    }
    
  
  },
  
  preLoaded: function() {
    //alert('loaded' + this.images[this.currentIndex].image);
    this.preLoader.setStyle('display', 'none');
    this.currentImage.set('src', this.images[this.currentIndex].domImg.get('src'));
    this.anchor.set('href', this.options.urls[this.currentIndex]);
    this.currentImage.get('tween', {property: 'opacity'}).start(1);
    
  },
  
  setDisplayImage: function() {
      this.preLoad();

  },
  
  fadeOldImage: function() {
    this.currentImage.get('tween', {property: 'opacity'}).start(0);
  },


  
  display: function() {
    this.fadeOldImage();
    
    
    var o = this.currentImage;
    this.currentImage = this.newImage;
    this.newImage = o;
    this.setDisplayImage();
    
    
    
    

  },
  
  setup: function() {
    this.images = [];
    this.options.images.each(function(_img,_index) {
      this.images.push({image: _img, cached: false, domImg: null});
    }, this);
    
    this.anchor = new Element('a', {
      styles: {
        display: 'block',
        position: 'relative'
      }
    });
    this.currentImage = new Element('img', {
      styles: {
        display: 'block',
        position: 'absolute',
        opacity: 0
      }
    });
    this.newImage = this.currentImage.clone();
    this.newImage.inject(this.anchor);
    this.currentImage.inject(this.anchor);
    this.anchor.inject(this.options.element);
    this.setDisplayImage();
  }


});