var timerID = 0;
var repWidth = 0;
var totalWidth = 0;
var barWidth = 0;
var objs = new Array();

function init() {
    var el = document.getElementById('rep1');
    objs.push(el);
    
    el.onmouseover = function() { stop(); }
    el.onmouseout = function() { start(); }
    
    var els = el.getElementsByTagName('div');
    
    for( var i = 0, n = els.length; i < n; i++ ) {
        var e = els[i];
        e.style.left = repWidth + "px";
        repWidth += e.offsetWidth;
    }
    
    totalWidth = repWidth;
    
    var bar = document.getElementById('bar');
    barWidth = bar.offsetWidth;
    
    var i = 2;
    el.style.display = 'block';
    do {
        var obj = el.cloneNode(true);
        
        obj.id = "rep"+i;
        obj.style.left = totalWidth + "px";
        obj.onmouseover = function() { stop(); }
        obj.onmouseout = function() { start(); }
        
        bar.appendChild(obj);
        objs.push(obj);
        
        totalWidth += repWidth;
        i++;
    } while( totalWidth < (barWidth + repWidth) );
    
    timerID = setTimeout(trans, 35);
}

function trans() {
    for( var i = 0, n = objs.length; i < n; i++ ) {
        var el = objs[i];
        var left = el.offsetLeft;
        left--;
        
        if( left <= (-repWidth) ) {
            left = totalWidth - repWidth;
        }
        el.style.left = left + "px";
    }
    
    timerID = setTimeout(trans, 35);
}

function stop() {
    if( timerID > 0 ) {
        clearTimeout(timerID);
    }
}

function start() {
    timerID = setTimeout(trans, 35);
}