// 제작자 : 아스피린
// 제작자 블로그 : http://cleanup.tistory.com
// 소스 주소 : http://cleanup.tistory.com/8
// 자유롭게 사용 가능하시며, 소스 주소로 오셔서 댓글로 평가만 남겨 주세요

function BannersScroll(idName, BannerName,imgWidth,imgHeight,LiBox_Num,LiBox_HiddenNum, Speed) {

	this.Name = idName;
	this.BannersName = BannerName;

    this.Speed =Speed;
	this.BannersSetTime = null;
	
	this.LiBox_Num = LiBox_Num;										// 한번에 스크롤할 상품 갯수
	this.LiBox_HiddenNum = LiBox_HiddenNum;							// 한번에 노출할 상품 갯수
	
	this.BannersSetting(imgWidth);									// 초기값
	this.DivSize(imgHeight);										// 노출될 상품의 넓이 높이값
	this.GoodlsArrange();											// 상품 순서대로 진열하기
	
	this.doMove = function(state) {
		this.sState = state;
		if(this.sState == "next") {
			this._nextFrame();
		} else if(this.sState == "prev") {
			this._prevFrame();
		}
	}	
}

BannersScroll.prototype.BannersSetting = function(imgWidth) {
  
    this.BannersBox = document.getElementById(this.BannersName);
	this.OlBox = this.BannersBox.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 = imgWidth;						// 상품 한개의 넓이
	this.LiBox_Left = new Array();					    // 각 상품의 위치값을 저장하는 배열

}

BannersScroll.prototype.DivSize = function(imgHeight) {

	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.BannersBox.style.height = imgHeight+"px";
	this.BannersBox.style.width = this.LiBox_Width * this.LiBox_HiddenNum + "px";
	
}

BannersScroll.prototype.GoodlsArrange = function() {

	this.Default_left =2;// (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];
	
}

BannersScroll.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.BannersSetTime = setTimeout(this.Name + "._nextFrame()",3000);
	} else {
		this.BannersSetTime = setTimeout(this.Name + "._nextFrame()",100);
	}
}

BannersScroll.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.BannersSetTime = setTimeout(this.Name + "._prevFrame()",3000);
	} else {
		this.BannersSetTime = setTimeout(this.Name + "._prevFrame()",100);
	}
}

BannersScroll.prototype._nextBtn = function() {

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