[Marquee] addMarquee

(function() {

    var addEvent = comYahooAnswersPuckettTim.base.addEvent;
    var beforeLoad = true;

    var addMarquee = function ()
    {
        var support = document.getElementById("support");
        var supportChild = support && support.firstChild;
        var head = document.getElementsByTagName("head")[0];

        if (!supportChild || !head)
        {
            (beforeLoad)
                && !(beforeLoad = false)
                && addEvent(addMarquee);
            return;
        }

        var marqueeRel = document.createAttribute("rel");
        marqueeRel.value = "stylesheet";
        var marqueeHref = document.createAttribute("href");
        marqueeHref.value = "marquee-style.txt";
        var marqueeStyle = document.createElement("link");
        marqueeStyle.setAttributeNode(marqueeRel);
        marqueeStyle.setAttributeNode(marqueeHref);
        head.insertBefore(marqueeStyle, head.lastChild);

        var marquee = document.createElement("div");

        var position = 0;
        var width = 0;
        var parentWidth = 0;

        var mouseover = false;
        var mousecap = document.createElement("div");
        mousecap.appendChild(marquee);

        var focus = function (e)
        {
            if (!isStop && !mouseover) return;

            var max = parentWidth - width;
            if (width > parentWidth) return;
            else if (position < 0)
                position = (position > -1) ? 0
                    : (position * 2/3);
            else if (position > max)
                position = (position - max < 1) ? (position = max)
                    : (position*2 + max)/3;
            else return;
            marquee.style.left = position + "px";
            setTimeout(function (e) { focus(e) }, 1);
            return true;
        }

        var isStop = true;
        var step = -4;

        var scroll = function (e)
        {
            if (isStop || mouseover) return;
            position += step;
            if (position < -width) position = parentWidth;
            if (position > parentWidth) position = -width;
            marquee.style.left = position + "px";
            setTimeout(function (e) { scroll(e) }, 20);
        }

        mousecap.onmouseover = function (e) {
            mouseover = true;
            focus(e);
            return true;
        }

        mousecap.onmouseout = function (e) {
            mouseover = false;
            scroll(e);
            return true;
        }

        while (supportChild) {
            if (!parentWidth && 1===supportChild.nodeType) parentWidth = supportChild.offsetWidth;
            var marqueeChild = supportChild;
            supportChild = supportChild.nextSibling;
            marquee.appendChild(marqueeChild);
        }

        var start = function (e)
        {
            this.onclick = stop;
            this.firstChild.nodeValue = "Stop the marquee";
            isStop = false;
            if (marquee.offsetWidth) width = marquee.offsetWidth;
            position = parentWidth - step;
            scroll(e);
            return true;
        }

        var stop = function (e)
        {
            isStop = true;
            focus(e);
            this.onclick = start;
            this.firstChild.nodeValue = "Start the marquee";
            return true;
        }

        var startButton = document.createElement("button");
        startButton.onclick = start;
        startButton.appendChild(document.createTextNode("Start the marquee"));

        support.appendChild(startButton);
        support.insertBefore(mousecap, startButton);
        return true;
    }

    if (comYahooAnswersPuckettTim.base.W3CDOM) addMarquee();
})();