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

function ProductScroll() {
	this.Name = "PScroll";
	this.ProductName = "bannerScrollArea";
	this.Speed = 70;
	this.ProductSetTime = null;
	
	this.LiBox_Num = 1;										// 한번에 스크롤할 배너 갯수
	this.LiBox_HiddenNum = 5;								// 한번에 노출할 배너 갯수
	
	this.ProductSetting();									// 초기값
	this.ImgSize();											// 노출될 배너의 넓이 높이값
	this.ProductlsArrange();									// 배너 순서대로 진열하기
	
	this.doMove = function(state) {
		this.sState = state;
		if(this.sState == "next") {
			this._nextFrame();
		} else if(this.sState == "prev") {
			this._prevFrame();
		}
	}
	
}

ProductScroll.prototype.ProductSetting = function() {
	this.ProductBox = document.getElementById(this.ProductName);
	this.OlBox = this.ProductBox.getElementsByTagName("ol")[0];
	this.LiBox = this.OlBox.getElementsByTagName("li");
	this.LiBox_Length = this.LiBox.length;					// 배너의 총 갯수
	this.LiBox_Width = this.LiBox.item(0).offsetWidth;	// 배너 한개의 넓이
	this.LiBox_Left = new Array();							// 각 배너의 위치값을 저장하는 배열
}

ProductScroll.prototype.ImgSize = function() {
	this.ImgBox = this.LiBox.item(0).getElementsByTagName("img");
	this.ImgBox_Height = 0;
	for ( var i=0; i < this.ImgBox.length; i++ ) {
		this.ImgBox_Height = this.ImgBox_Height + this.ImgBox.item(i).offsetHeight;
	}
	this.ProductBox.style.height = this.ImgBox_Height + 20 + "px";
	this.ProductBox.style.width = this.LiBox_Width * this.LiBox_HiddenNum + "px";
}

ProductScroll.prototype.ProductlsArrange = 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];
}

ProductScroll.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.ProductSetTime = setTimeout(this.Name + "._nextFrame()",40000);
	} else {
		this.ProductSetTime = setTimeout(this.Name + "._nextFrame()",10);
	}
}

ProductScroll.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.ProductSetTime = setTimeout(this.Name + "._prevFrame()",40000);
	} else {
		this.ProductSetTime = setTimeout(this.Name + "._prevFrame()",10);
	}
}

ProductScroll.prototype._nextBtn = function() {
	clearTimeout(this.ProductSetTime);
	this.ProductSetTime = setTimeout(this.Name + "._nextFrame()",10);
}
ProductScroll.prototype._prevBtn = function() {
	clearTimeout(this.ProductSetTime);
	this.ProductSetTime = setTimeout(this.Name + "._prevFrame()",10);
}