var FontRs = $w('Verdana Arial Impact Georgia Vrinda Garamond Papyrus');
var FontCs = $w('red darkred #FFCCCC');

var Looper = Class.create({
  initialize: function(element, i) {
    this.element = element;
    this.element.style.color=FontCs[Math.floor(Math.random()*3)];
    this.element.style.fontFamily = FontRs[Math.floor(Math.random()*7)];
    this.element.style.fontSize =  Math.floor(Math.random()*50 + 15) + 'px';
    this.element.style.position = 'absolute';
    this.element.style.top = '-100px';
    this.element.style.left = Math.floor((Math.random() * 14 - 7) + 15*i) + 'px';
    this.duration=5*Math.random()+10.0;
    setTimeout(this.loopDown.bind(this), Math.random()*5000);
    this.element.show();
  },
  loopDown: function() {
    new Effect.Parallel([
    new Effect.Fade(this.element, {sync: true}),
    new Effect.Morph(this.element, {
	style: {top: '550px'},sync: true
    })], {
	afterFinish: this.loopUp.bind(this),
	duration: this.duration
    });
  },
  loopUp: function() {
    new Effect.Parallel([
    new Effect.Appear(this.element, {sync: true}),
    new Effect.Morph(this.element, {
	style: {top: '-100px'},sync: true
    })], {
	afterFinish: this.loopDown.bind(this),
	duration: this.duration
    });
  }
});

function init() {
	var main = $('main');
	for(i = 0; i < 50; i+=2) {
		main.insert($('r_proto').innerHTML.replace('_X_', i));
	}
	for(i = 0; i < 50; i+=2) {
		var protoR = $('r_proto_' + i);
		new Looper(protoR, i);
	}
}