var Marquee = Class.create({
  initialize: function(element) {
    $(element).setStyle({ width: document.viewport.getWidth()+'px'});
	this.element = $(element);
    this.paused = false;
    if(this.element.scrollWidth == this.element.clientWidth) return;
    var duration = 40; //element.getAttribute('data-duration') || 140;
    this.container = this.element.wrap('div');
    this.container.setStyle({
      width: this.element.clientWidth+'px',
      height: this.element.clientHeight+'px',
      overflow: 'hidden'
    });
    this.originalWidth = this.element.scrollWidth;
    this.element.innerHTML += this.element.innerHTML;
    this.resetWidth = this.element.scrollWidth - this.originalWidth;
    this.element.setStyle({
      width: this.element.scrollWidth+'px',
      height: this.element.scrollHeight+'px',
      overflow: 'auto'
    });
    var frequency = duration/this.element.getWidth();
    frequency = (100*frequency).round() / 100;
    new PeriodicalExecuter(this.move.bind(this), frequency);
    this.element.observe('mouseover', this.pause.bind(this));
    this.element.observe('mouseout', this.play.bind(this));
  },
  move: function() {
    if(this.paused) return;
    if(this.container.scrollLeft == this.resetWidth)
      this.container.scrollLeft = 0;
    this.container.scrollLeft += 1;
  },
  pause: function() {this.paused = true},
  play: function() {this.paused = false}
});
function _rollover(el,im){ el.src = im;}
Event.observe(window, 'load', function() {
  $$('.marquee').each(function(e) {new Marquee(e)})
})