// Á¦ÀÛÀÚ : ¾Æ½ºÇǸ°
// Á¦ÀÛÀÚ ºí·Î±× : http://cleanup.tistory.com
// ¼Ò½º ÁÖ¼Ò : http://cleanup.tistory.com/8
// ÀÚÀ¯·Ó°Ô »ç¿ë °¡´ÉÇϽøç, ¼Ò½º ÁÖ¼Ò·Î ¿À¼Å¼­ ´ñ±Û·Î Æò°¡¸¸ ³²°Ü ÁÖ¼¼¿ä

function GoodsScroll() {
	this.Name = "GScroll";
	this.GoodsName = "Goods_Scroll";
	this.Speed = 70;
	this.GoodsSetTime = null;
	
	this.LiBox_Num = 1;										// Çѹø¿¡ ½ºÅ©·ÑÇÒ »óÇ° °¹¼ö
//	this.LiBox_HiddenNum = 4;								// Çѹø¿¡ ³ëÃâÇÒ »óÇ° °¹¼ö
	
	this.GoodsSetting();									// ÃʱⰪ
	this.DivSize();											// ³ëÃâµÉ »óÇ°ÀÇ ³ÐÀÌ ³ôÀÌ°ª
	this.GoodlsArrange();									// »óÇ° ¼ø¼­´ë·Î Áø¿­Çϱâ
	
	this.doMove = function(state) {
		this.sState = state;
		if(this.sState == "next") {
			this._nextFrame();
		} else if(this.sState == "prev") {
			this._prevFrame();
		}
	}
	
}

GoodsScroll.prototype.GoodsSetting = function() {
	this.GoodsBox = document.getElementById(this.GoodsName);
	this.OlBox = this.GoodsBox.getElementsByTagName("ul")[0];
	this.LiBox = this.OlBox.getElementsByTagName("li");
	this.LiBox_Length = this.LiBox.length;					// »óÇ°ÀÇ ÃÑ °¹¼ö
//	this.LiBox_Width = this.LiBox.item(0).offsetWidth;	// »óÇ° ÇÑ°³ÀÇ ³ÐÀÌ
//	this.LiBox_Width = "110";	// »óÇ° ÇÑ°³ÀÇ ³ÐÀÌ
	this.LiBox_Left = new Array();							// °¢ »óÇ°ÀÇ À§Ä¡°ªÀ» ÀúÀåÇÏ´Â ¹è¿­
}

GoodsScroll.prototype.DivSize = function() {

	this.LiBox_Width = this.LiBox.item(0).offsetWidth;	// »óÇ° ÇÑ°³ÀÇ ³ÐÀÌ
	this.LiBox_HiddenNum = 4;								// Çѹø¿¡ ³ëÃâÇÒ »óÇ° °¹¼ö
	
	this.DivBox = this.LiBox.item(0).getElementsByTagName("div");
	this.DivBox_Height = 0;

	for ( var i=0; i < this.DivBox.length; i++ ) {
		this.DivBox_Height = this.DivBox_Height + this.DivBox.item(i).offsetHeight;
	}
	this.GoodsBox.style.height = this.DivBox_Height + 20 + "px";

	this.GoodsBox.style.width = (parseInt(this.LiBox_Width) * parseInt(this.LiBox_HiddenNum)) + "px";
}

GoodsScroll.prototype.GoodlsArrange = function() {
	this.Default_left = -(this.LiBox_Num * this.LiBox_Width);		// »óÇ°ÀÇ Ãʱâ À§Ä¡°ª
	
	for ( var i=0; i < this.LiBox_Length; i++ ) {
		this.LiBox_Left[i] = this.Default_left + ( i * this.LiBox_Width );
		this.LiBox.item(i).style.left = this.LiBox_Left[i] + "px";
	}
	
	this.Last_Left = this.LiBox_Left[this.LiBox_Length-1];
}

GoodsScroll.prototype._nextFrame = function() {
	for ( var i=0; i<this.LiBox_Length; i++ ) {
		this.LiBox_Left[i] = this.LiBox_Left[i] - this.Speed;
		if ( this.LiBox_Left[i] == ( this.Default_left - this.LiBox_Width ) ) {
			this.LiBox_Left[i] = ( ( this.LiBox_Length - 1 ) * this.LiBox_Width ) + this.Default_left;
			this.LiBox[i].style.left = this.LiBox_Left[i] + "px"
		} else {
			this.LiBox[i].style.left = this.LiBox_Left[i]+"px";
		}
	}
	if ( this.LiBox_Left[0] % ( this.LiBox_Width * this.LiBox_Num ) == 0 ) {
		this.GoodsSetTime = setTimeout(this.Name + "._nextFrame()",3000);
	} else {
		this.GoodsSetTime = setTimeout(this.Name + "._nextFrame()",100);
	}
}

GoodsScroll.prototype._prevFrame = function() {

	for ( var i=0; i<this.LiBox_Length; i++ ) {
	this.LiBox_Left[i] = this.LiBox_Left[i] + this.Speed;
		if ( this.LiBox_Left[i] == this.Last_Left + this.LiBox_Width ) {
			this.LiBox_Left[i] = this.Default_left;
			this.LiBox[i].style.left = this.LiBox_Left[i] + "px"
		} else {
			this.LiBox[i].style.left = this.LiBox_Left[i]+"px";
		}
	}
	if ( this.LiBox_Left[0] % ( this.LiBox_Width * this.LiBox_Num ) == 0 ) {
		this.GoodsSetTime = setTimeout(this.Name + "._prevFrame()",3000);
	} else {
		this.GoodsSetTime = setTimeout(this.Name + "._prevFrame()",100);
	}
}

GoodsScroll.prototype._nextBtn = function() {
	clearTimeout(this.GoodsSetTime);
	this.GoodsSetTime = setTimeout(this.Name + "._nextFrame()",100);
}
GoodsScroll.prototype._prevBtn = function() {
	clearTimeout(this.GoodsSetTime);
	this.GoodsSetTime = setTimeout(this.Name + "._prevFrame()",100);
}

    function escape(id){
   
        var openDiv = document.getElementById("profile"+id);

        
        for(var i=1; i < 29; i++){
            if(i < 12)
            {
                var objTop = (id * 23) - 645;
            }
            else
            {
                var objTop = (id * 23) - 945;
            }
            if(i != id) {
                
               //document.getElementById("profile" + id).style.display = "none";
               
            }else{
                openDiv.style.display = "block";
                openDiv.style.top = objTop;
                openDiv.style.left = "200px";
            }
        }
       
    }
    function displayNone(id){
        var openDiv = document.getElementById("profile"+id);
        openDiv.style.display = "none";
        
    }