Pause on MouseOver not working with Cross Browser Marquee II

Question

I'm using Dynamic Drive's Cross Browser Marquee II scroller script find here. I had some help to alter the script where the content would have a random StartIndex on page load and the random part is working great; the forum thread for that is here. The problem I'm having now is that the altered script is not producing the pause on MouseOver function. I've made a JSFiddle here and tried everything I could think of to fix it but I'm stuck. The JavaScript is as follows:

function scrollmarquee() {
    if (parseInt(cross_marquee.style.top) > (actualheight * (-1) + 8)) {
        cross_marquee.style.top = parseInt(cross_marquee.style.top) - copyspeed + "px";
    } else {
        cross_marquee.style.top = parseInt(marqueeheight) + 8 + "px";
    }
}

function marqueescroll(o) {
    marqueePause(o.id);
    o.srt += o.ss;
    if ((o.ss < 0 && o.srt > o.h) || (o.ss > 0 && o.srt < o.ph)) {
        o.s.style.top = o.srt + 'px';
    } else {
        o.srt = o.ss < 0 ? o.ph : o.h;
        o.s.style.top = o.srt + 'px';
    }
    o.to = setTimeout(function () {
        marqueescroll(o);
    }, 60);
}

function marquee(o) {
    var id = o.ID,
        ss = o.Speed,
        i = o.StartIndex,
        srt = o.AutoDelay,
        p = document.getElementById(id),
        s = p ? p.getElementsByTagName('DIV')[0] : null,
        ary = [],
        z0 = 0;
    if (s) {
        var clds = s.childNodes,
            o = marquee[id] = {
                id: id,
                p: p,
                h: -s.offsetHeight,
                ph: p.offsetHeight,
                s: s,
                ss: typeof (ss) == 'number' && ss != 0 ? ss : -2,
                srt: 0
            }
        for (; z0 < clds.length; z0++) {
            if (clds[z0].nodeType == 1) {
                ary.push(clds[z0]);
            }
        }
        ary[i] ? o.srt = -ary[i].offsetTop : null;
        o.s.style.position = 'absolute';
        o.s.style.top = o.srt + 'px';
        typeof (srt) == 'number' && srt > 1 ? marqueeAuto(id, srt) : null;
    }
}

function marqueeAuto(id, ms) {
    var o = marquee[id];
    o ? o.to = setTimeout(function () {
        marqueescroll(o);
    }, ms || 200) : null;
}

function marqueePause(id) {
    var o = marquee[id];
    o ? clearTimeout(o.to) : null;
}

function marqueeInit() {
    marquee({
        ID: 'marqueecontainer', // the unique ID name of the parent DIV.(string)
        AutoDelay: 2000, //(optional) the delay before starting scroll in milli seconds. (number, default = no auto scroll)
        Speed: -1, //(optional) the scroll speed, < 0 = up. > 0 = down.            (number, default = -2)
        StartIndex: Math.floor(Math.random() * 4) //(optional) the index number of the element to start.          (number, default = 0)
    });
}

if (window.addEventListener) window.addEventListener("load", marqueeInit, false);
else if (window.attachEvent) window.attachEvent("onload", marqueeInit);
else if (document.getElementById);
window.onload = marqueeInit;

It's probably a real simple fix I'm just not catching. Any help would greatly be appreciated. Also, does anyone know of a way to make the scroller where there will be no blank space between the last and first items being scrolled in the list?

Answer 1

This has now been fixed and is completely cross browser and twitter bootstrap friendly. You can check out the new edited jsfiddle here. Fixed javascript is as follows:

 function marqueescroll(o) {
     marqueePause(o.id);
     o.srt += o.ss;
     if ((o.ss < 0 && o.srt > o.sz) || (o.ss > 0 && o.srt < (o.w ? -o.sz : o.psz))) {
     o.s.style[o.m] = o.srt + 'px';
     } else {
         o.srt = (o.w ? 0 : o.ss < 0 ? o.psz : o.sz) + o.ss;
         o.s.style[o.m] = o.srt + 'px';
     }
     o.to = setTimeout(function () {
         marqueescroll(o);
     }, 30);
 }

 function marquee(o) {
     var id = o.ID,
         m = o.Mode,
         ss = o.Speed,
         i = o.StartIndex,
         srt = o.AutoDelay,
         p = document.getElementById(id),
         s = p ? p.getElementsByTagName('DIV')[0] : null,
         clds = s ? s.childNodes : [],
         ary = [],
         sz, l, z0 = 0;
     if (s && !marquee[id]) {
         var m = typeof (m) == 'string' && m.charAt(0).toUpperCase() == 'H' ? ['left', 'offsetLeft', 'offsetWidth'] : ['top', 'offsetTop', 'offsetHeight'],
             sz = p[m[2]],
             slide = document.createElement('DIV'),
             c;
         slide.style.width = 'inherit',//added this for fluid bootstrap width
         slide.style.position = s.style.position = 'absolute';
         for (; z0 < clds.length; z0++) {
             if (clds[z0].nodeType == 1) {
                 if (m[0] == 'left') {
                     clds[z0].style.position = 'absolute';
                     clds[z0].style.left = sz * ary.length + 'px';
                     clds[z0].style.top = '0px';
                 }
                 ary.push([clds[z0], clds[z0][m[1]]]);
             }
         }
         l = ary[ary.length - 1][0];
         o = marquee[id] = {
             m: m[0],
             id: id,
             p: p,
             sz: -(l[m[1]] + l[m[2]]),
             psz: sz,
             s: slide,
             ss: typeof (ss) == 'number' && ss != 0 ? ss : -2,
             w: o.Wrap !== false
         }
         o.s.appendChild(s);
         c = s.cloneNode(true);
         c.style.left = c.style.top = '0px';
         c.style[m[0]] = o.sz * (ss > 0 ? 1 : -1) + 'px';
         o.w ? o.s.appendChild(c) : null;
         o.srt = ary[i] ? -ary[i][1] : 0;
         o.s.style.position = 'absolute';
         o.s.style[m[0]] = o.srt + 'px';
         p.appendChild(o.s);
         p.style.overflow = 'hidden';
         typeof (srt) == 'number' && srt > 1 ? marqueeAuto(id, srt) : null;
     }
 }

 function marqueeAuto(id, ms) {
     var o = marquee[id];
     o ? o.to = setTimeout(function () {
         marqueescroll(o);
     }, ms || 200) : null;
 }

 function marqueePause(id) {
     var o = marquee[id];
     o ? clearTimeout(o.to) : null;
 }

 function marqueeInit() {

     marquee({
         ID: 'marqueecontainer', // the unique ID name of the parent DIV.                        (string)
         Mode: 'vertical', // the display type, 'vertical' or 'horizontal'                 (string. defalut = 'vertical')
         AutoDelay: 2000, //(optional) the delay before starting scroll in milli seconds. (number, default = no auto scroll)
         Speed: -2, //(optional) the scroll speed, < 0 = up. > 0 = down.            (number, default = -2)
         Wrap: true, //(optional) true = no gap, false = gap.                        (boolean, default = true)
         StartIndex: Math.floor(Math.random() * 4) //(optional) the index number of the element to start.          (number, default = 0)
     });

 }

 if (window.addEventListener) window.addEventListener("load", marqueeInit, false);
 else if (window.attachEvent) window.attachEvent("onload", marqueeInit);
 else if (document.getElementById) window.onload = marqueeInit;