$(window).addEvent('domready', function() {
  var bg = $("chrysalis-bg");
  var fg = $("chrysalis-fg");
  var index = -1;
  var zIndex = 1;
  var pressed = false;
  var pressedPos, pressedIndex;
  
  if (Browser.Engine.gecko) {
    fg.setStyle('cursor', '-moz-grab');
  }
  
  fg.addEvent('mousedown', function(e) {
    e = new Event(e);
    e.stop();
    pressedIndex = index;
    pressedPos = e.page.x;
    pressed = true;
    if (Browser.Engine.gecko) {
      fg.setStyle('cursor', '-moz-grabbing');
    }
  });
  
  document.addEventListener('touchstart', function(e) {
    if (e.touches.length == 1 && $(e.target).get('id') == 'chrysalis-fg') {
      e.preventDefault();
      e.stopPropagation();
      pressedIndex = index;
      pressedPos = e.touches[0].pageX;
      pressed = true;
    }
  }, false);
  
  $(window).addEvent('mouseup', function(e) {
    pressed = false;
    if (Browser.Engine.gecko) {
      fg.setStyle('cursor', '-moz-grab');
    }
  });
  
  document.addEventListener('touchend', function(e) {
    pressed = false;
  }, false);
  
  function pressUpdate(pos) {
    var diff = Math.round((pressedPos - pos) / 30);
    var diffIndex = (pressedIndex + diff) % 11;
    if (diffIndex < 0) {
      diffIndex += 11;
    }
    if (diffIndex != index) {
      index = diffIndex;
      show(index, function(target) {
        target.fade('show');
      });
    }
  }
  
  $(window).addEvent('mousemove', function(e) {
    if (pressed) {
      e = new Event(e);
      pressUpdate(e.page.x);
    }
  });
  
  document.addEventListener('touchmove', function(e) {
    if (pressed && e.touches.length == 1) {
      e.preventDefault();
      e.stopPropagation();
      pressUpdate(e.touches[0].pageX);
    }
  }, false);
  
  function normalize(n) {
    if (n < 10) {
      return "0" + n;
    } else {
      return n;
    }
  }
  
  function rotate() {
    if (!pressed) {
      index++;
      if (index == 11) {
        index = 0;
      }
      if (index < 11) {
        load(index + 2);
      }
      show(index, function(target) {
        target.fade('in');
      });
    }
  }
  
  function show(index, callback) {
    var id = normalize(index);
    var target = $("bg" + id);
    if (!target) {
      return load(index, function() {
        show(index, callback);
      });
    }
    target.setStyles({
      opacity: 0,
      zIndex: zIndex++,
    });
    fg.setStyle('z-index', zIndex + 1);
    if (callback) {
      callback(target);
    }
    return target;
  }
  
  function load(id, callback) {
    id = normalize(id);
    if (!$("bg" + id)) {
      var target = new Element('img', {
        id: "bg" + id,
        src: "/chrysalis-bg/" + id + ".jpg",
        styles: {
          opacity: 0,
          zIndex: zIndex++
        }
      });
      if (callback) {
        target.addEvent('load', callback);
      }
      target.inject(bg);
      return target;
    }
    return $("bg" + id);
  }
  
  load(1, function() {
    rotate();
    setInterval(rotate, 1000);
  });
  
});