/*
 * version : 1
 * var slider = new sliderWidth("slider", "bannerViewDiv", 600, 38, 1);
 * slider.itemList[slider.itemList.length] = '<img src="" width="113" height="38">';
 * slider.itemList[slider.itemList.length] = "<label>º£³Ê¸µÅ©</label>";
 * slider.init();
 *
 * var [ÀνºÅϽº¸í] = new SliderWidth("[ÀνºÅϽº¸í]","[Ãâ·ÂµÇ¾îÁú ·¹À̾î]", [°¡·Î ±æÀÌ], [¼¼·Î ±æÀÌ], [¼Óµµ]);
 * 
 * ¸ðµçÇ׸ñ Çʼö
 * instanceName         : ¼±¾ðµÈ instanceÀÇ À̸§ : timer ÁöÁ¤½Ã ´ë»ó object ¼±º°¿¡ »ç¿ë
 * outLayer		: Ãâ·ÂµÇ¾îÁú ·¹À̾î À̸§
 * sliderWidth		: º¸¿©Áú slider °¡·Î ±æÀÌ
 * sliderHeight		: º¸¿©Áú slider ¼¼·Î ±æÀÌ
 * slideSpeed		: sliding ¼Óµµ
 *
 */
 
function SliderWidth(instanceName, outLayer, sliderWidth, sliderHeight, slideSpeed){
    this.instanceName = instanceName;
    this.outLayer = outLayer;
    this.sliderWidth = sliderWidth;
    this.sliderHeight = sliderHeight;
    this.slideSpeed = slideSpeed;
    this.itemList = "";

    this.inited = false;
    this.cross_slide = null;
    this.cross_slide2 = null;
    this.copySpeed = 1;
    this.actualWidth = 0;

    this.init = function (){
        if(!this.inited){
            this.copySpeed = this.slideSpeed;

            var str = '<div style="position:relative;width:'+this.sliderWidth+'px;height:'+this.sliderHeight+'px;overflow:hidden;">';
                str+= '<div id="'+this.instanceName+'BASE_DIV" style="position:absolute;width:'+this.sliderWidth+';height:'+this.sliderHeight+';" onMouseover="'+this.instanceName+'.copySpeed=0" onMouseout="'+this.instanceName+'.copySpeed='+this.slideSpeed+'">';
                str+= '<div id="'+this.instanceName+'FIRST_SLIDE_LAYER" style="position:absolute;left:0px;top:0px;"></div>';
                str+= '<div id="'+this.instanceName+'LAST_SLIDE_LAYER" style="position:absolute;left:0px;top:0px;"></div>';
                str+= '</div></div>';
            document.getElementById(outLayer).innerHTML = str;
            
            this.cross_slide = document.getElementById(this.instanceName+"FIRST_SLIDE_LAYER");
            this.cross_slide2 = document.getElementById(this.instanceName+"LAST_SLIDE_LAYER");
            this.cross_slide.innerHTML = this.itemList;
            this.cross_slide2.innerHTML = this.itemList;
            //document.getElementById(outLayer).style.display = "block";
            this.inited = true;
        }
        if(document.getElementById(this.instanceName+'FIRST_SLIDE_LAYER').offsetWidth < 1){
            setTimeout(this.instanceName + ".init()", 30);
        }else{
            this.startSliding();
        }
    }
    
    this.startSliding = function (){
        this.actualWidth = this.cross_slide.offsetWidth;
        this.cross_slide.style.width = this.cross_slide.offsetWidth;
        this.cross_slide2.style.width = this.cross_slide2.offsetWidth;
        this.cross_slide2.style.left = this.actualWidth + 4;
        setInterval(this.instanceName + ".slideLeft()", 30);
    }

    this.slideLeft = function (){
        if(parseInt(this.cross_slide.style.left) > (this.actualWidth * (-1) + 8)){
            this.cross_slide.style.left = parseInt(this.cross_slide.style.left) - this.copySpeed;
        }else{
            this.cross_slide.style.left = parseInt(this.cross_slide2.style.left) + this.actualWidth + 30;
        }

        if(parseInt(this.cross_slide2.style.left) > (this.actualWidth * (-1) + 8)){
            this.cross_slide2.style.left = parseInt(this.cross_slide2.style.left) - this.copySpeed;
        }else{
            this.cross_slide2.style.left = parseInt(this.cross_slide.style.left) + this.actualWidth + 30;
        }
    }
}