/* ＵＴＦー８ */

/**
 * @param idPrefix li要素のidのプリフィクス
 * @param itemCount li要素の数
 * @param itemWidth li要素同士の間隔
 * @param destinationLeft クリックされたジャケットの移動先left
 */
ListItemScroll.create = function(idPrefix, itemCount, itemWidth, destinationLeft) {
	var identifier = 'ListItemScroll._instances[\'' + idPrefix + '\']';
	var instance = new ListItemScroll(identifier, 'scroll_', itemCount, itemWidth, destinationLeft); 
	ListItemScroll._instances[idPrefix] = instance;
	return instance;
};

// 内部でインスタンスを参照するためのmap
ListItemScroll._instances = {};

/**
 * @param identifier JavaScriptからこのインスタンスを参照する識別子
 * @param idPrefix li要素のidのプリフィクス
 * @param itemCount li要素の数
 * @param itemWidth li要素同士の間隔
 * @param destinationLeft クリックされたジャケットの移動先left
 */
function ListItemScroll(identifier, idPrefix, itemCount, itemWidth, destinationLeft) {
	
	this.identifier = identifier;
	this.idPrefix = idPrefix;
	this.itemCount = itemCount;
	this.itemWidth = itemWidth;
	this.destinationLeft = destinationLeft;

	this.minTimeoutMilliSec = 50;
	this.maxTimeoutMilliSec = 100;

	this.timeoutMilliSec = this.minTimeoutMilliSec;
	this.leftmostIndex = 0;
	this.left = 0;
	this.over = false;
	this.pause = true;

	this.targetIndex = 0;
	this.targetUrl = '';
	this.targetLeft = 0;
	
	this.start = function(timeout) {

		if (this.pause) {
			if (timeout) {
				return;
			} else {
				this.pause = false;
			}
		}

		if (this.timeoutMilliSec < this.minTimeoutMilliSec) {
			this.timeoutMilliSec = this.minTimeoutMilliSec;
		} 
    	if (this.over && this.maxTimeoutMilliSec > this.minTimeoutMilliSec) {
			if (this.timeoutMilliSec < this.maxTimeoutMilliSec) {
				this.timeoutMilliSec += 10;
			} 
		}
		if (!this.over) {
			if (this.timeoutMilliSec > this.minTimeoutMilliSec) {
				//this.timeoutMilliSec -= 10;
				this.timeoutMilliSec = this.minTimeoutMilliSec;
			} 
		}

		this.left -= 1;
		if (this.left < -this.itemWidth) {
			this.left += this.itemWidth;
			this.leftmostIndex = (this.leftmostIndex + 1) % this.itemCount;
		}
		for (var i = 0; i < this.itemCount; i++) {
			this.setStyle(i, 'left', this.getLeft(i) + 'px');
		}
		setTimeout(this.identifier + '.start(true);', this.timeoutMilliSec);
	};
	
	this.onMouseOver = function () {
		this.over = true;
	};
	
	this.onMouseOut = function () {
		this.over = false;
	};
	
	this.stop = function () {
		this.pause = true;
	};

	this.onClick = function (index, url) {
		this.stop();
		this.targetIndex = index;
		this.targetUrl = url;
		this.targetLeft = this.getLeft(index);
		for (var i = 0; i < this.itemCount; i++) {
			if (i != index) {
				this.setStyle(i, 'visibility', 'hidden');
			}
		}
		this.moveJacket(0);
	};

	this.moveJacket = function (cnt) {
		cnt += 1;
		if (this.targetLeft == this.destinationLeft) {
			goTo(this.targetUrl);
			return;
		} else if (this.targetLeft < this.destinationLeft - 10) {
			var move = parseInt((this.destinationLeft - this.targetLeft) / 10);
			if (move > cnt) {
				move = cnt;
			}
			this.targetLeft += move;
		} else if (this.targetLeft > this.destinationLeft + 10) {
			var move = parseInt((this.targetLeft - this.destinationLeft) / 10);
			if (move > cnt) {
				move = cnt;
			}
			this.targetLeft -= move;
		} else if (this.targetLeft < this.destinationLeft) {
			this.targetLeft += 1;
		} else {
			this.targetLeft -= 1;
		}
		this.setStyle(this.targetIndex, 'left', this.targetLeft + 'px');
		setTimeout(this.identifier + '.moveJacket(' + cnt + ')',  10);
	};

	this.getLeft = function (index) {
		if (index == this.leftmostIndex) {
			return this.left;
		} else if (index < this.leftmostIndex) {
			return this.left + ((this.itemCount + index - this.leftmostIndex) * this.itemWidth);
		} else {
			return this.left + ((index - this.leftmostIndex) * this.itemWidth);
		}
	};

	this.setStyle = function(index, prop, value) {
		document.getElementById(this.idPrefix + index).style[prop] = value;
	};
	
	this.reload = function() {
		for (var i = 0; i < this.itemCount; i++) {
			this.setStyle(i, 'visibility', 'visible');
		}
		this.start();
	};
}