var SPEED = 25;
var PIC_WIDTH = 140;
var PIC_HEIGHT = 108;
var PIC_MARGINRIGHT = 8;

var body = document.getElementById("rp-content");
var container = document.getElementById("rp-container");
var content1 = document.getElementById("rp-content1");
var content2 = document.getElementById("rp-content2");

container.style.overflow= "hidden";
container.style.width = "100%";

content2.innerHTML = content1.innerHTML;

for(var i = 0; i < container.getElementsByTagName("li").length; i++){
    var li = container.getElementsByTagName("li")[i];
    li.style.width = PIC_WIDTH + "px";
    li.style.height = PIC_HEIGHT + "px";
    li.style.marginRight =  PIC_MARGINRIGHT+ "px";
    li.style.styleFloat = "left";
    li.style.cssFloat = "left";
}

content1.style.width = content2.style.width = content1.getElementsByTagName("li").length * (PIC_WIDTH + PIC_MARGINRIGHT) + "px";
container.style.width = content1.getElementsByTagName("li").length * (PIC_WIDTH + PIC_MARGINRIGHT) * 2 + "px";

function marquee(){
    if(content2.offsetWidth - body.scrollLeft <= 0){
        body.scrollLeft -= content1.offsetWidth;
    }
    else{
        body.scrollLeft++;
    }
}

var mar = setInterval(marquee,SPEED);

container.onmouseover = function(){
    clearInterval(mar) 
}

container.onmouseout = function(){
    mar = setInterval(marquee,SPEED)
}