var Marquee = Class.create({
	initialize: function (element) {
		this.element = $(element);
		this.over = false;
		this.observe();
		
		// find the width of the original element
		this.start_point = this.element.getWidth();
		// wrap the element in a marquee div
		var content = this.element.down('p').innerHTML.replace(/[\n\r]/g, ' ');
		var span = new Element('span').update(content + '    |    ').setStyle({
			whiteSpace: 'pre'
		});
		this.element.update('');
		this.elements = $A([span, span.cloneNode(true)]);
		this.elements.each(function (span) {
			this.element.insert(span);
		}, this);
		
		// get the width and offset of the marquee div
		this.width = this.element.getWidth() - 100;
		this.x = parseInt(this.element.getStyle('marginLeft') || 0, 10);
		
		// start animating
		this.start();
	},
	
	observe: function () {
		// this function sets a flag to stop animation on hover
		this.element.observe('mouseover', function () {
			this.over = true;
		}.bind(this));
		
		this.element.observe('mouseout', function () {
			this.over = false;
		}.bind(this));
		
		return this;
	},
	
	moveLeft: function () {
		// this function moves the marquee 1px to the left
		this.elements[0].setStyle({
			marginLeft: --this.x + 'px'
		});
		
		// this.element.update(this.element.innerHTML + this.element.innerHTML);
		
		if (this.x % this.width === 0) {
			this.elements.last().insert({
				after: this.elements.first().cloneNode(true).setStyle({ marginLeft: '' })
			});
		}

		return this;
	},
	
	start: function () {
		// return this;
		// this functions starts the timer to move the marquee
		this.pe = new PeriodicalExecuter(function (pe) {
			if (!this.over) {
				this.moveLeft();
			}
		}.bind(this), 0.02);
		
		return this;
	}
});