function debug() {
  if (window.console && console.debug) {
    console.debug.apply(console, arguments);
  }
}

try {
  // Fix slideshow flickering in IE6.
  document.execCommand("BackgroundImageCache", false, true)
} catch (e) {
}

Prototype.BrowserFeatures.WebkitCSSTransitions = S2.Extensions.webkitCSSTransitions = false;

S2.FX.Base.addMethods({
  stop: function() {
    this.options.queue.remove(this);
    return this;
  }
});

function ImagePreloader(src, callback) {
  var img = new Image();
  img.src = src;
  if (img.width && img.complete) {
    debug(src + " est déjà chargée.")
    callback();
  } else {
    function handler() {
      img.onload = img.onerror = img.onabort = null;
      debug(src + " vient d'être chargée.")
      callback();
    }
    img.onload = img.onerror = img.onabort = handler;
  }
}

var Slideshow = Class.create((function() {
  function initialize(slides, options) {
    this.slides = slides;
    this.preloadedSlides = {};
    this.options = Object.extend({
      duration: 2,
      wait: 2,
      loop: true,
      splash: null
    }, options);

    this.createMarkup();
  }
  
  function createMarkup() {
    this.container = new Element('div', { 'class': 'slideshower' });
    this.imgA = new Element('div', { 'class': 'slide' });
    this.imgB = new Element('div', { 'class': 'slide' });
    if (this.options.splash) {
      this.imgA.style.backgroundImage = 'url(' + this.options.splash +  ')';
    } else {
      this.imgA.hide();
    }
    this.imgB.hide();
    this.container.appendChild(this.imgA);
    this.container.appendChild(this.imgB);
  }
  
  function toElement() {
    return this.container;
  }
  
  function run() {
    this.preloadFirstSlide();
    this.index = 0;
    this.currentImage = null;
    this.nextImage = null;
    this.next(true);
  }
  
  function preloadSlide(slide) {
    var preloadedSlides = this.preloadedSlides;
    new ImagePreloader(slide, function() {
      preloadedSlides[slide] = true;
    });
  }
  
  function preloadFirstSlide() {
    this.preloadSlide(this.slides[0]);
  }
  
  function preloadOtherSlides() {
    this.slides.slice(1).each(this.preloadSlide, this);
    this.preloaded = true;
  }
  
  function isSlideLoaded(slide) {
    return this.preloadedSlides[slide];
  }
  
  function getCurrentSlide() {
    return this.slides[this.index];
  }
  
  function next(noEffect) {
    if (!this.hasNext()) {
      debug("fin de boucle");
      if (this.options.loop) {
        this.index = 0;
      } else {
        this.finish();
        return;
      }
    }
    var current = this.getCurrentImage();
    var next = this.getNextImage();
    var currentSlide = this.getCurrentSlide();
    
    if (!this.isSlideLoaded(currentSlide)) {
      debug("la slide " + currentSlide + " n'est pas loadée, on defere");
      // Defer until the current slide is loaded
      this.next.bind(this, noEffect).delay(0.01);
      return;
    } else if (this.index === 0 && !this.preloaded) {
      debug("la première slide est loadée, on lance le preload des autres");
      this.preloadOtherSlides();
    }
    
    next.setStyle({
      display: 'none',
      backgroundImage: 'url("' + currentSlide + '")',
      zIndex: 11
    });
    current.setStyle({ zIndex: 10 });
    this.index++;
    
    var self = this;
    function after() {
      self.next.bind(self).delay(self.options.wait);
    }
    
    if (noEffect) {
      next.show();
      after();
    } else {
      next.appear({
        duration: this.options.duration,
        after: after
      });
    }
  }
  
  function hasNext() {
    return this.index <= this.slides.length - 1;
  }
  
  function getCurrentSlide() {
    return this.slides[this.index];
  }

  function getCurrentImage() {
    return this[this.index % 2 ? 'imgA' : 'imgB'];
  }
  
  function getNextImage() {
    return this[!(this.index % 2) ? 'imgA' : 'imgB'];
  }
  
  function finish() {
    if (this.options.before) {
      this.options.before(this);
    }
    var self = this;
    this.container.fade({
      duration: this.options.duration,
      after: function() {
        self.container.remove();
      }
    });
  }
  
  return {
    initialize: initialize,
    createMarkup: createMarkup,
    toElement: toElement,
    finish: finish,
    run: run,
    preloadSlide: preloadSlide,
    preloadFirstSlide: preloadFirstSlide,
    preloadOtherSlides: preloadOtherSlides,
    isSlideLoaded: isSlideLoaded,
    getCurrentSlide: getCurrentSlide,
    next: next,
    hasNext: hasNext,
    getNextImage: getNextImage,
    getCurrentImage: getCurrentImage
  };
})());

function setBackgroundImage(src) {
  document.body.style.backgroundImage = 'url(' + src + ')';
}

document.observe('dom:loaded', function() {
  var backgroundsCount = Number(Element.readAttribute(document.body, 'data-backgrounds-count')),
      slideshowImages = $R(1, backgroundsCount).toArray().collect(function(i) {
        return 'images/backgrounds/' + i + '.png';
      });
  
  slideshowImages = slideshowImages.sortBy(Math.random);
  var slideshow = new Slideshow(slideshowImages, {
    loop: true,
    splash: slideshowImages.first().replace('.png', '.jpg')
  });
  $(document.body).insert({ top: slideshow });
  slideshow.run();
  
  // var firstImage = slideshowImages.first(),
  //     waitingImage = firstImage.replace('.png', '.jpg');
  // 
  // setBackgroundImage(waitingImage);
  // 
  // new ImagePreloader(firstImage, function() {
  //   setBackgroundImage(firstImage);
  // });
  
  
  
  // trouver le nb d'images
  // générer une liste aléatoire
  // précharger la 1
  // afficher jpg de 1
  // quand 1 prete, afficher png de 1
  // précharger la 2
  // quand 2 prete fondu vers 2
  // précharger la 3
  
  var closedSize = $$('.square').first().getDimensions().width,
      openedSize = 233,
      options = {
        duration: .45,
        transition: S2.FX.Transitions.spring,
        after: function(animation) {
          animation.element.animation = null;
        }
      };
  
  function zoomTo(size) {
    return function(e) {
      var square = e.findElement('.square');
      if (!square) return;
      if (square.animation) {
        square.animation.stop();
        square.animation = null;
      }
      var opts = Object.extend({
        style: {
          width: size + 'px',
          height: size + 'px'
        }
      }, options);
      square.animation = new S2.FX.Morph(square, opts);
      square.animation.play(square, opts);
    };
  }
  
  $('squares').observe('mouseover', zoomTo(openedSize))
              .observe('mouseout',  zoomTo(closedSize));
});