/*
	--------------------------------
	Created: 2008.05.19
	Last Modified: 2008.05.19
	--------------------------------
	- Table of Contents -

	カラー切り替え
	--------------------------------
*/



/* --------------------------------
	カラー切り替え
-------------------------------- */

var color = new Color();

$(function() {
	color.init('#lineup .item');
});

function Color() {
	// 初期化
	this.init = function(selector) {
		this.list = [];
		var self = this;
		var i = 0;

		// 商品ごとのセットアップ
		$(selector).each(function() {
			var j = 0;

			// 商品の要素をストア
			self.list.push({
				selected: j,
				img: $(this).find('.img img').get(0),
				btn: $(this).find('.colortip img')
			});

			// 色バリエーションのセットアップ
			$(this).find('.colortip img').each(function() {
				if (j != 0) {
					var img = self.list[i].img;
					var ext = self.getImgExtension(img);
					new Image().src = img.src.replace((self.list[i].selected + 1) + ext, (j + 1) + ext);
				}

/*
				var ext = self.getImgExtension(this);
				var out = this.src;
				var over = this.src.replace(ext, '_ov' + ext);
				var on = this.src.replace(ext, '_on' + ext);
				new Image().src = over;
				new Image().src = on;
				var cursor = (j == 0) ? 'default' : 'pointer';
*/
				var item = i;
				var color = j;
/*
				$(this).css('cursor', cursor).bind('mouseover', function() {
					if (this.src != on) this.src = over;
				}).bind('mouseout', function() {
					if (this.src != on) this.src = out;
				}).bind('click', function() {
					if (this.src != on) self.select(item, color, this, on);
				});
*/
				if (!$(this).hasClass('tip')) {
					$(this).css('cursor', 'pointer').bind('mouseover', function() {
						self.select(item, color);
					});
				}
//				if (j == 0) this.src = on;
				j++;
			});
			i++;
		});
	}

	// 色の選択
//	this.select = function(item, color, elm, on) {
	this.select = function(item, color) {
		item = this.list[item];

		// 商品イメージ
		var ext = this.getImgExtension(item.img);
		item.img.src = item.img.src.replace((item.selected + 1) + ext, (color + 1) + ext);

		// 選択ボタン
/*
		var selected = item.btn.get(item.selected);
		var ext = this.getImgExtension(selected);
		$(selected).css('cursor', 'pointer');
		selected.src = selected.src.replace('_on' + ext, ext);
		$(elm).css('cursor', 'default');
		elm.src = on;
*/
		item.selected = color;
	}

	// 画像の拡張子を取得
	this.getImgExtension = function(elm) {
		elm.src.match('(\.gif|\.jpg|\.png)([\?].*|$)');
		return RegExp.$1;
	}
}