var marquee = {
    speed : 50,
    setup : function() {
        $$(".marquee").each(function(e) {
            this.elem = e;
            this.name = e.id;
            this.addDuplicate();
            this.animate();
        }.bind(this))
    },
    addDuplicate : function() {
        if(!this.content) {
            this.content = this.elem.down("div").innerHTML;
        }
        this.elem.insert('<div>'+this.content+'</div>');

        if(!this.width) {
            var dimensions = this.elem.down().getDimensions();
            this.width = dimensions.width+100;
            this.duration = this.width/this.speed;
        }
        this.elem.down().next().setStyle({
            left:this.width+'px'
            });
    },
    animate : function() {
        this.remove = 1;
        $$("#"+this.name+" div").each(function(e) {
            this.moveit(e,this.remove);
            this.remove = 0;
        }.bind(this))
    },
    movetoback : function() {
        console.log("moved to back");
        this.elem.down().setStyle({
            left:this.width+'px'
            });
    },
    moveit : function(e,remove) {
        var dim = e.getDimensions();
        width = 0 - this.width;
        new Effect.Move(e, {
            x: width,
            duration: this.duration,
            transition: Effect.Transitions.linear,
            afterFinish: function() {
                if(remove == 1) {
                    e.remove();
                    this.addDuplicate();
                    //this.movetoback();
                    this.animate();
                }
                
            }.bind(this)
        })
    }
}

document.observe( "dom:loaded", function() {
    marquee.setup();
})