/* Globaldizajn MooMarquee - marquee replacement 2008-06-04 */

/* Modified by kane 2010.02.21 for MooTools 1.2 */

var MooMarquee = new Class({
    options: {
        direction: 'vertical', //'vertical', //horizontal
        speed: 50,
        width: 150,
        height: 150,
        step: 1
    },

    Implements: [Options, Events],

    initialize: function(el, options) {
        this.setOptions(options);
        this.element = el;
        this.periodical = "";

        this.newDiv = new Element("div");

        if(this.options.direction!="vertical"){
            this.newDiv.setStyles({
                "white-space":"nowrap",
                position:"relative"
            })
        }

        this.element.setStyles({
            width : this.options.width,
            height: this.options.height,
            overflow:"hidden",
            position:"relative"
        })
        this.newDiv.innerHTML = this.element.innerHTML;

        this.element.innerHTML = "";
        this.newDiv.inject(this.element);

        this.newDiv.addEvents({

            "mouseover" : function() {
                $clear(this.periodical)
            }.bind(this),
            "mouseout"  : function() {

                this.periodical = this.anim.bind(this).periodical(this.options.speed)

            }.bind(this)

        })

        this.marqueeSize = this.options.direction=="vertical" ? this.newDiv.getSize().y*-1 : this.newDiv.getSize().x*-1;
        this.limit = this.options.direction=="vertical" ? this.element.getSize().y : this.element.getSize().x;
        this.position = this.limit;

        this.style = this.options.direction=="vertical" ? "marginTop" : "left";

        this.periodical = this.anim.bind(this).periodical(this.options.speed);

    },
    anim: function() {

        if(this.position<this.marqueeSize) this.position = this.limit;
        this.position = this.position-this.options.step;
        this.newDiv.setStyle(this.style,this.position);
        //this.newDiv.style[this.style] = this.position+"px";

    }

});