document.observe('dom:loaded', function() {
  new Slideable('javascriptSlideable');
});

Element.addMethods((function() {
  var g = {
    enter: 'over',
    leave: 'out'
  }, h = /^mouse(enter|leave)$/;
  function i(f) {
    if(Prototype.Browser.IE)
      return f;
    f = f.wrap(function(a, b) {
      var c = Object.isElement(this) ? this : this.element, d = b.relatedTarget;
      while(d && d != c) {
        try {
          d = d.parentNode
        }catch(e) {
          d = c
        }
      }
      if(d == c)
        return;
      a(b)
    });
    return f
  }
  var j = Prototype.Browser.IE ? Event.observe : function(a, b, c) {
    var a = $(a), d = h.exec(b);
    if(d) {
      b = 'mouse' + g[d[1]];
      c = i(c)
    }
    Event.observe(a, b, c);
    return a
  };
  return {
    customObserve: j
  }
})());

var Slideable = Class.create( {
  initialize: function(b) {
    this.element = $(b);
    this.options = Object.extend( {
      hoverBackground: 'transparent',
      defaultBackground: 'transparent',
      minimumWidth: 150,
      resizeDuration: 0.6,
      colorDuration: 0.2,
      transition: function(a) {
        return((a /= 0.5) < 1 ? 0.5 * Math.pow(a, 4) : -0.5 * ((a -= 2) * Math.pow(a, 3) - 2))
      }
    }, arguments[1] || {});
    this.prepare()
  },
  prepare: function() {
    this.wrapper = this.element.down('.wrapper'), this.children = this.wrapper.childElements(), totalWidth = 0;
    this._0 = this.element.getWidth();
    this._2 = (this._0 / this.children.length).round();
    this.children.each(function(a) {
      a._1 = a.getWidth();
      totalWidth += a._1;
      a.setStyle( {
        width: this._2 + 'px'
      }).customObserve('mouseenter', this.mouseenter.bindAsEventListener(this)).customObserve('mouseleave', this.mouseleave.bindAsEventListener(this));
      var b = a.getStyle('backgroundColor');
      if(b) {
        a._3 = b;
        a.setStyle( {
          backgroundColor: b
        })
      }
    }.bind(this));
    this.element.customObserve('mouseleave', this.restore.bindAsEventListener(this)).down('.wrapper').setStyle( {
      width: totalWidth * 3 + 'px',
      visibility: 'visible'
    })
  },
  mouseenter: function(b) {
    var c = b.findElement('.slide');
    if(!c)
      return;
    var d = this.children.without(c), f = ((this._0 - c._1) / d.length).round();
    Effect.Queues.get('resizeable').each(function(a) {
      a.cancel()
    });
    c.morph( {
      backgroundColor: this.options.hoverBackground
    }, {
      duration: this.options.colorDuration,
      queue: {
        scope: 'resizeable'
      }
    });
    new Effect.Morph(c, {
      style: {
        width: c._1 + 'px'
      },
      queue: {
        scope: 'resizeable'
      },
      transition: this.options.transition,
      delay: this.options.colorDuration,
      duration: this.options.resizeDuration
    });
    new Effect.multiple(d, Effect.Morph, {
      style: {
        width: f + 'px'
      },
      queue: {
        scope: 'resizeable'
      },
      transition: this.options.transition,
      delay: this.options.colorDuration,
      duration: this.options.resizeDuration
    })
  },
  mouseleave: function(a) {
    var b = a.findElement('.slide');
    if(!b)
      return;
    b.morph( {
      backgroundColor: b._3 || this.options.defaultBackground
    }, {
      duration: this.options.colorDuration
    })
  },
  restore: function() {
    Effect.Queues.get('resizeable').each(function(a) {
      a.cancel()
    });
    var b = this.children.last();
    b.setStyle( {
      width: this._0 + 'px'
    });
    new Effect.multiple(this.children.without(b), Effect.Morph, {
      style: {
        width: this._2 + 'px'
      },
      queue: {
        scope: 'resizeable'
      },
      transition: this.options.transition,
      duration: this.options.resizeDuration
    })
  }
});