var iPhoneCarousel = new Class({

  Implements: [Options, Events],

  options: {
    cssImage: 'img',
    cssStrip: '.screenstrip',
    cssArea: 'slideArea',
    cssControls: 'slideControls',
    cssLeftArrow: 'leftSlideArrow',
    cssRightArrow: 'rightSlideArrow',
    cssBullets: 'slideBullets',
    bulletOpacity: 0.5,
    autoPlay: true,
    duration: 600,
    delay: 3500
  },

  initialize: function(el, options) {
    this.element = document.id(el);
    this.setOptions(options);
    this.strip = this.element.getElement(this.options.cssStrip);
    this.leftArrow = document.id(this.options.cssLeftArrow);
    this.rightArrow = document.id(this.options.cssRightArrow);
    this.area = document.id(this.options.cssArea);
    if (typeof(this.options.cssControls) == 'array') {
      this.controls = [document.id(this.options.cssControls)];
    } else {
      this.controls = this.options.cssControls.map(function(control) {
        return document.id(control);
      }.bind(this));
    }
    this.bulletContainer = document.id(this.options.cssBullets);
    this.position = 0;
    this.images = [];
    this.bullets = [];
    this.playing = false;
    this.slideWidth = 0;
    this.slideTimer = null;
    this.slideFx = null;
    
    this.scrollLeft = this.scrollByLeft.bind(this);
    this.scrollRight = this.scrollByRight.bind(this);
    
    this.setup();
    
    if (this.options.autoPlay) {
      window.addEvent('load', this.startSlideShow.bind(this));
    }
  },
  
  toElement: function() {
    return this.element;
  },
  
  setup: function() {
    // + Setup images
    this.images = this.strip.getElements(this.options.cssImage);
    
    var width = 0;
    this.images.each(function(img) {
      var _width = document.id(img).getSize().x;
      this.slideWidth = Math.max(this.slideWidth, _width);
      width += _width;
    }.bind(this));
    
    this.strip.setStyle('width', width);
    // - Setup images

    // + Setup bullets
    width = 0;    
    for(var i = 0; i < this.images.length; i++) {
      var bullet = new Element('div', {'class': 'bullet'}).setStyle('opacity', this.options.bulletOpacity).inject(this.bulletContainer);
      width += bullet.getSize().x;
      this.bullets.push(bullet);
    }
    this.bulletContainer.setStyle('width', width);

    var bullet = this.currentBullet();
    if (bullet) bullet.setStyle('opacity', 1);
    // - Setup bullets

    // + Setup arrows    
    if (this.leftArrow) {
      this.leftArrow.setStyles({'display': 'block', 'opacity': (this.position > 0) ? 1 : 0});
      this.leftArrow.addEvent('click', this.scrollLeft);
    }
    if (this.rightArrow) {
      this.rightArrow.setStyles({'display': 'block', 'opacity': (this.position < (this.images.length - 1)) ? 1 : 0});
      this.rightArrow.addEvent('click', this.scrollRight);
    }
    // - Setup arrows

    // Setup slide fx
    this.slideFx = new Fx.Scroll(this.element, {transition: Fx.Transitions.Quart.easeInOut, duration: this.options.duration, link: 'chain'});
    
    // + Setup controls
    if (this.area && this.controls) {
      this.controls.each(function(el) { el.setStyle('opacity', 0); });
      this.area.addEvents({
        'mouseenter': function() {
          this.controls.each(function(el) { el.tween('opacity', 1); });
        }.bind(this),
        'mouseleave': function() {
          this.controls.each(function(el) { el.tween('opacity', 0); });
        }.bind(this)
      });
    }
    // - Setup controls
  },
  
  updateArrows: function() {
    if (this.leftArrow) {
      this.leftArrow.tween('opacity', (this.position > 0) ? 1 : 0);
    }
    if (this.rightArrow) {
      this.rightArrow.tween('opacity', (this.position < (this.images.length - 1)) ? 1 : 0);
    }
  },

  prevImage: function() {
    this.position--;
    if (this.position < 0) this.position = this.images.length - 1;
    return this.images[this.position];
  },
  
  nextImage: function() {
    this.position++;
    if (this.position >= this.images.length) this.position = 0;
    return this.images[this.position];
  },
  
  currentBullet: function() {
    if (this.position < 0 || this.position >= this.bullets.length) return null;
    return this.bullets[this.position];
  },
  
  scrollByLeft: function() {
    this.stopSlideShow();

    this.scrollTo(false);
  },

  scrollByRight: function() {
    this.stopSlideShow();

    this.scrollTo(true);
  },
  
  scrollTo: function(forward) {
    if (forward == null) forward = true;
    
    var bullet = this.currentBullet();
    if (bullet) bullet.tween('opacity', this.options.bulletOpacity);
    
    this.slideFx.toElement(this[forward ? 'nextImage' : 'prevImage']());
    
    var bullet = this.currentBullet();
    if (bullet) bullet.tween('opacity', 1);
    
    if (this.playing) {
      $clear(this.slideTimer);
      this.slideTimer = this.scrollTo.delay(this.options.delay, this);
    }
    
    this.updateArrows();
  },
  
  startSlideShow: function() {
    if (this.playing) return;
    
    this.playing = true;
    
    this.slideTimer = this.scrollTo.delay(this.options.delay, this);
  },

  stopSlideShow: function() {
    if (!this.playing) return;
    
    this.playing = false;
    
    $clear(this.slideTimer);
    this.slideFx.cancel();
  }

});