
function Rolling(canvas, option) {
    this.canvas = canvas;

    // 스크롤러의 가로크기    
    this.sliderwidth = option.sliderwidth==null?'100%':option.sliderwidth;
    
    // 스크롤러의 높이    
    this.sliderheight = option.sliderheight==null?'100px':option.sliderheight;
    
    // 배경색상    
    this.slidebgcolor = option.slidebgcolor==null?'#FFFFFF':option.slidebgcolor;
    
    // 스크롤 속도 (클수록 빠릅니다 1-10)    
    this.slidespeed = option.slidespeed==null?1:option.slidespeed;
    
    this.clearObject();
}

Rolling.prototype.clearObject = function() {
    this.leftrightslide = new Array();
}

Rolling.prototype.addObject = function(html) {
    var idx = this.leftrightslide.length;
    
    this.leftrightslide[idx] = html;
}

Rolling.prototype.init = function() {
    if(this.interval != null) {
        clearInterval(this.interval);
    }
    
    this.copyspeed=this.slidespeed;
    
    //div create
    this.canvas.style.position = "relative";
    this.canvas.style.width = this.sliderwidth;
    this.canvas.style.height = this.sliderheight;
    this.canvas.style.overflow = "hidden";
    
    this.box = document.createElement("DIV");
    this.box.style.position = "absolute";
    this.box.style.width = this.sliderwidth;
    this.box.style.height = this.sliderheight;
    this.box.style.backgroundColor = this.slidebgcolor;

    var ROLLING_OBJ = this;
    this.box.onmouseover = function () { ROLLING_OBJ.copyspeed = 0; };
    this.box.onmouseout = function () { ROLLING_OBJ.copyspeed = ROLLING_OBJ.slidespeed };
    
    this.area1 = document.createElement("DIV");
    this.area1.style.position = "absolute";
    this.area1.style.left = "0";
    this.area1.style.top = "0";
    
    this.area2 = document.createElement("DIV");
    this.area2.style.position = "absolute";
    this.area2.style.left = "-1000px";
    this.area2.style.top = "0";
    
    this.box.appendChild(this.area1);
    this.box.appendChild(this.area2);
    
    this.canvas.appendChild(this.box);
    
    //두개의 div 영역설정
    this.area1.innerHTML = this.area2.innerHTML = '<nobr>'+this.leftrightslide.join("")+'</nobr>';

    //영역 넓이 설정
    var list = this.area1.childNodes[0].childNodes;
    var w = 0;
    for (var i = 0; i < list.length; i++) {
        w += parseInt(list[i].offsetWidth);
    }
    
    this.area1.style.width = w+'px';
    this.area2.style.width = w+'px';
    
    this.area2.style.left = this.area1.offsetWidth+'px';
    
    //inteval 설정
    this.interval = setInterval(function() {
        var copyspeed = ROLLING_OBJ.copyspeed;
        var actualwidth = ROLLING_OBJ.area1.offsetWidth;
        
        if (parseInt(ROLLING_OBJ.area1.style.left) > (actualwidth*(-1)+8))
            ROLLING_OBJ.area1.style.left=parseInt(ROLLING_OBJ.area1.style.left)-copyspeed+'px';
        else
            ROLLING_OBJ.area1.style.left=parseInt(ROLLING_OBJ.area2.style.left)+actualwidth+'px';

        if (parseInt(ROLLING_OBJ.area2.style.left)>(actualwidth*(-1)+8))
            ROLLING_OBJ.area2.style.left=parseInt(ROLLING_OBJ.area2.style.left)-copyspeed+'px';
        else
            ROLLING_OBJ.area2.style.left=parseInt(ROLLING_OBJ.area1.style.left)+actualwidth+'px';
    }, 30);
};


