// ----------------------------------------------------------------------------------------------------
// ACEGENE | Product * LayoutBuilderAndSearchEngine
//
// 2008.8.21 - 
// ----------------------------------------------------------------------------------------------------



var AjaxBox = Class.create();


AjaxBox.prototype.initialize = function() {
	this.loadMasterFile("json/master_data.json");
}


AjaxBox.prototype.loadMasterFile = function(uri) {
	var self = this;
	var loader = {
		request: function() { 
			//alert("request");
			var ajax = new Ajax.Request( uri, { method: 'get', onLoading: this.start, onComplete: this.response } );
		},
		start: function() {
			//alert("start");
			self.showLoading();
		},
		response: function(xhr) {
			//alert("response");
			self.showContent(xhr.responseText);
			//self.test(xhr.responseText);
		}
	};
	loader.request();
}



AjaxBox.prototype.showLoading = function() {
}


AjaxBox.prototype.test = function(xhr) {
	alert("test");
}


AjaxBox.prototype.showContent = function(xhr) {
	var self = this;

	//変数定義
	AjaxBox.prototype.masterData = eval("(" + xhr + ")");
	AjaxBox.prototype.checkedFuncs = new Array();
	AjaxBox.prototype.checkedTypes = new Array();
	AjaxBox.prototype.checkedSeries = new Array();
	AjaxBox.prototype.currentItems = new Array();
	AjaxBox.prototype.currentFeatures = new Array();
	AjaxBox.prototype.currentKey = -1;
	AjaxBox.prototype.viewMode = "default";
	AjaxBox.prototype.isIE = Boolean(navigator.userAgent.match("MSIE"));
	AjaxBox.prototype.isIE6 = Boolean(navigator.userAgent.match("MSIE 6.0"));
	AjaxBox.prototype.blindFps = (this.isIE6) ? 15 : 30;
	AjaxBox.prototype.directNode;
	
	
	var div = $("product-main");
	var cnt = 0;

	for(var i=0; i<this.masterData.length; i++) {
		//alert("showContent");
		var cdata = self.masterData[i];
		
		var seriesDiv = document.createElement("div");
		seriesDiv.id = cdata.id;
		seriesDiv.className="series-container";
		
		var titleDiv = document.createElement("div");
		titleDiv.className="series-title";
		
		titleDiv.innerHTML = "<div class='wrap'><strong>" + cdata.series + "</strong>";
		titleDiv.innerHTML += "<span>" + cdata.seriesjp + "</span>";
		titleDiv.innerHTML += "<p>" + cdata.description + "</p></div>";
		
		
		
		if(cdata.features.length) {
			var tfbObj = self.createToggleFeaturesButton(cdata.id);
			titleDiv.appendChild(tfbObj.node); 
		}
		
		var itemsDiv = document.createElement("div");
		itemsDiv.className="series-items";
		
		var items = cdata.items;
		for(var n=0; n<items.length; n++) {
			var iDiv = document.createElement("div");
			iDiv.id = "item" + items[n].pid;
			iDiv.sid = i;
			iDiv.iid = n;
			iDiv.enabled = true;
			iDiv.className = "item-col";
			iDiv.innerHTML = self.createThumbnailCol(items[n], cdata.id);
			iDiv.onclick = function() {
				if(this.enabled) { self.showDetail(this); }
			}
			iDiv.onmouseover = function() {
				if(this.enabled) { self.onmouseoverItem(this); }
			}
			iDiv.onmouseout = function() {
				if(this.enabled) { self.onmouseoutItem(this); }
			}
			iDiv.key = cnt++;
			
			self.currentItems.push(iDiv);
			itemsDiv.appendChild(iDiv);
		}
		
		
		
		
		var featureDiv = document.createElement("div");
		featureDiv.className="series-features";
		
		
		var features = cdata.features;
		
		if(features.length>0){
			var ttlDiv = document.createElement("div");
			ttlDiv.className = "feature-title-col";
			ttlDiv.innerHTML = "<h3><span>Detail</span>: "+cdata.series+" の特徴</h3>";
			featureDiv.appendChild(ttlDiv);
		}
		Element.makeClipping(featureDiv);
		
		
		for(var m=0; m<features.length; m++) {
			var dDiv = document.createElement("div");
			dDiv.sid = i;
			dDiv.iid = m;
			dDiv.className = "feature-item-col";
			dDiv.innerHTML = self.createFeaturesCol(features[m], cdata.id);
			dDiv.onclick = function() {
				self.showFeatures(this);
			}
			dDiv.onmouseover = function() {
				self.onmouseoverItem(this);
			}
			dDiv.onmouseout = function() {
				self.onmouseoutItem(this);
			}
			
			dDiv.key = m;
			
			
			featureDiv.appendChild(dDiv);
		}
			self.fillBlankCol(itemsDiv, items.length, false);
			self.fillBlankCol(featureDiv, features.length, true);
		
		
		var tDiv = document.createElement("div");
		tDiv.className = "pagetop-wrap";
		tDiv.innerHTML = self.createPageTop();
		featureDiv.appendChild(tDiv);
		
		
		var wrapperDiv = document.createElement("div");
		wrapperDiv.className = "series-wrapper";
		
		
		wrapperDiv.appendChild(itemsDiv);
		wrapperDiv.appendChild(featureDiv);
		
		seriesDiv.appendChild(titleDiv);
		seriesDiv.appendChild(wrapperDiv);
		div.appendChild(seriesDiv);
	}
	
	

	// オーバーレイ用エレメンツ
	
	var overlayDiv = document.createElement("div");
	overlayDiv.id = "overlay-container";
	Element.hide(overlayDiv);
	document.body.appendChild(overlayDiv);
	
	var ajaxDiv = document.createElement("div");
	ajaxDiv.id = "ajaxbox-content";
	overlayDiv.appendChild(ajaxDiv);
	
	var layerDiv = document.createElement("div");
	layerDiv.id = "overlay-layer";
	layerDiv.checkLayer = overlayDiv;
	layerDiv.onclick = function() {
		if(this.checkLayer.appeared) {
			self.closeOverlay();
		}
	}
	document.body.appendChild(layerDiv);
	
	
	var prevNav = document.createElement("div");
	var prevLink = document.createElement("a");
	
	prevNav.id = "pnav-prev";
	prevLink.enabled = true;
	prevLink.href = "javascript:void(0);";
	prevLink.onclick = function() {
		if(this.enabled) { self.moveDetailPage("prev"); }
	}
	prevLink.innerHTML = "前へ";
	
	prevNav.appendChild(prevLink);
	overlayDiv.appendChild(prevNav);
	

	var nextNav = document.createElement("div");
	var nextLink = document.createElement("a");
	
	nextNav.id = "pnav-next";
	nextLink.enabled = true;
	nextLink.href = "javascript:void(0);";
	nextLink.onclick = function() {
		if(this.enabled) { self.moveDetailPage("next"); }
	}
	nextLink.innerHTML = "次へ";
	
	nextNav.appendChild(nextLink);
	overlayDiv.appendChild(nextNav);
	
	
	var closeNav = document.createElement("div");
	var closeLink = document.createElement("a");
	
	closeNav.id = "pnav-close";
	closeLink.href = "javascript:void(0);";
	closeLink.onclick = function() {
		self.closeOverlay();
	}
	closeLink.innerHTML = "閉じる";
	
	closeNav.appendChild(closeLink);
	overlayDiv.appendChild(closeNav);
	
		
	this.setSearchNav();
	
	$("product-main").style.backgroundImage = "none";
	
	this.scrollWindow();
}




AjaxBox.prototype.scrollWindow = function() {
	var param = location.hash.replace("#", "");
	if(! param) { return; }
	
	var node = $(param);
	var isItem = false;
	
	if(! node) {
		node = $("item"+param);
	}
	
	if(! node) {
		return;
	}
	else {
		isItem = true;
	}
	
	var positions = Position.cumulativeOffset(node);
	
	var finish = positions[1];
	window.scrollTo(0, finish);
	
	if(isItem) {
		this.directNode = node;
		Element.addClassName(node, "hover");
		setTimeout(function(){ node.onclick(); }, 200);
	}
}






// ----------------------------------------------------------------------------------------------------
// 空白セルで埋め尽くす（IE6のバグFIXのため）
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.fillBlankCol = function(node, num, isItem) {
	var cols;
	var col_class;
	if(!isItem){
		cols = 5 - (num % 5);
		if(cols == 5) { return; }
		col_class = "blank-col";
	} else {
		cols = 10 - (num % 10);
		if(cols == 10) { return; }
		col_class = "feature-blank-col";
	}
	for(var i=0; i<cols; i++) {
		var col = document.createElement("div");
		col.className = col_class;
		if(isItem){
			var col_span = document.createElement("span");
			col.appendChild(col_span);
		}
		node.appendChild(col);
	}
}






// ----------------------------------------------------------------------------------------------------
// 詳細画面内ナビ　enabled/disabled 切替え
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.activateNav = function() {
	var targetArray;
	if(this.viewMode == "detail-item") {
		targetArray = this.currentItems;
	}
	else if(this.viewMode == "detail-feature") {
		targetArray = this.currentFeatures;
	}

	var nextNav = $("pnav-next");
	var nextLink = nextNav.getElementsByTagName("a")[0];
	if(this.currentKey+1 >= targetArray.length) {
		nextLink.enabled = false
		nextNav.className = "disabled";
	}
	else {
		nextLink.enabled = true;
		nextNav.className = "";
	}

	var prevNav = $("pnav-prev");
	var prevLink = prevNav.getElementsByTagName("a")[0];
	if(this.currentKey-1 < 0) {
		prevLink.enabled = false
		prevNav.className = "disabled";
	}
	else {
		prevLink.enabled = true;
		prevNav.className = "";
	}
}





// ----------------------------------------------------------------------------------------------------
// 詳細画面表示
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.showDetail = function(node) {
	var self = this;
	
	var i,len;
	
	this.viewMode = "detail-item";
	this.currentKey = node.key;
	
	var div = $("ajaxbox-content");
	var sid = this.masterData[node.sid].id;
	var stitle = this.masterData[node.sid].series;
	var idata = this.masterData[node.sid].items[node.iid];
	div.innerHTML = this.createDetailCol(idata, sid, stitle);
	div.innerHTML += this.getCloneList();

	var colorCol = $("color-changer");
	var colors = idata.color;
	len = colors.length;
	for(i=0; i<len; i++) {
		var span = document.createElement("span");
		span.innerHTML = "<img src='asset/colorchip/" + colors[i] + ".gif' />";
		span.key = i;
		span.sid = node.sid;
		span.iid = node.iid;
		span.cid = colors[i];
		if(colors.length > 1) {
			span.className = "multiple";
		}
		span.onclick = function() {
			self.changeItemView(this, "color");
		}
		span.onmouseover = function (){
			
			var img = this.getElementsByTagName("img")[0];
			img.src = 'asset/colorchip/' + this.cid + '_on.gif';
			//this.innerHTML = "<img src='asset/colorchip/" + this.cid + "_on.gif' />";
		}
		span.onmouseout = function (){
			var img = this.getElementsByTagName("img")[0];
			img.src = 'asset/colorchip/' + this.cid + '.gif';
		}
		colorCol.appendChild(span);
	}
	
	if(idata.pickup) {
		var pickupCol = $("pickup-changer");
		var pickups = idata.pickup;
		var li, a, src;
		
		li = document.createElement("li");
		a = document.createElement("a");
		a.sid = node.sid;
		a.iid = node.iid;
		a.cid = colors[0];
		a.href = "javascript:void(0)";
		src = "asset/pickup_feature/thumb/" + sid + "/" + idata.pid + ".jpg";
		a.innerHTML = "<img src='" + src + "' width='70' height='70' alt='' />";
		//a.innerHTML = "<span class='btnover'></span><img src='" + src + "' width='70' height='70' alt='' />";
		//a.className = "active";
		$("item-comment").style.display = "none";
		
		li.appendChild(a);
		pickupCol.appendChild(li);
		
		a.onclick = function() {
			self.changeItemView(this, "color");
		}
		a.onmouseover = function() {
			self.changeItemView(this, "color");
		}
		
		len = pickups.length;
		for(i=0; i<len; i++) {
			li = document.createElement("li");
			a = document.createElement("a");
			a.sid = node.sid;
			a.pid = pickups[i];
			a.key = i;
			a.href = "javascript:void(0)";
			src = "asset/pickup_feature/thumb/" + sid + "/" + pickups[i] + ".jpg";
			a.innerHTML = "<span class='btnover'></span><img src='" + src + "' width='70' height='70' alt='' />";
			
			a.onmouseover = function() {
				self.changeItemView(this, "pickup");
			}
			li.appendChild(a);
			pickupCol.appendChild(li);
		}
		if(len<4){
			for(ii=0; ii<(4-len); ii++) {
				li2 = document.createElement("li");
				li2.innerHTML = "<span><img src='../shared/js/blank.gif' width='70' height='70' alt='' class='blank-detail' /></span>";
				pickupCol.appendChild(li2);
			}
		}
	
	} else {
		var item_c = $("item-comment");
		item_c.style.display = "none";
	}
	if(pickups != undefined && colors != undefined){
		//alert("pickups:"+pickups+" colors:"+colors);
		if((pickups.length == 0) && colors) {
			var item_c = $("item-comment");
			item_c.style.display = "none";
			Element.addClassName(pickupCol, "disabled-changer");
		}
	}
	
	
	
	var ctype = idata.type;
	var cfuncs = idata.funcs;
	this.removeLinkFromCloneList(ctype, cfuncs);
	
	this.activateNav();
	this.showOverlay();
}




// ----------------------------------------------------------------------------------------------------
// エフェクト → 詳細画面表示
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.showOverlay = function() {

	var self = this;
	var layer = $("overlay-layer");
	var content = $("overlay-container");
	
	
	var pageinfo = this.getPageInfo();
	
	var margin = (this.isIE) ? 50 : 0;
	layer.style.height = (pageinfo.maximum.height + margin) + "px";
	layer.style.display = "block";
	
	content.style.top = (pageinfo.offset.y + 20) + "px";
	content.style.left = Math.floor( (pageinfo.inner.width - 974) / 2) + "px";
	content.style.display = "block";

	
	var contentNode;
	
	if(! layer.appeared) {
		this.setAlphaZero(layer);
		Element.hide(content);
		Element.makeClipping(content);
		showBaseLayer();
	}
	else {
		showInnerContent();
	}
	
	function showBaseLayer() {
		new Effect.Opacity(layer, {
			from: 0.0,
			to: 0.9,
			fps: 30,
			duration: 0.3,
			delay: 0.0,
			afterSetup: function(effect) {
			},
			beforeStartInternal: function(effect) {
				layer.appeared = true;
			},
			afterFinishInternal: function(effect) {
				showInnerContent();
			}
		});
	}
	
	function showInnerContent() {
		Element.hide(content);
		new Effect.BlindDown(content, {
			from: 0.0,
			to: 1.0,
			fps: self.blindFps,
			duration: ((self.isIE6) ? 0.2 : 0.5),
			delay: 0.3,
			restoreAfterFinish: true,
			afterSetup: function(effect) {
				Element.show(effect.element);
			},
			beforeStartInternal: function(effect) {
			},
			afterFinishInternal: function(effect) {
				content.appeared = true;
				content.className = "";
			}
		});
	}
}



// ----------------------------------------------------------------------------------------------------
// 詳細画面クローズ
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.closeOverlay = function() {
	var self = this;
	var layer = $("overlay-layer");
	var content = $("overlay-container");
	
	function hideBaseLayer() {
		new Effect.Opacity(layer, {
			to: 0.0,
			fps: self.blindFps,
			duration: 0.3,
			delay: 0.0,
			afterSetup: function(effect) {
			},
			beforeStartInternal: function(effect) {
				layer.appeared = false;
			},
			afterFinishInternal: function(effect) {
				layer.style.display = "none";
			}
		});
	}
	
	function hideInnerContent() {
		new Effect.BlindUp(content, {
			to: 1.0,
			fps: self.blindFps,
			duration: ((self.isIE6) ? 0.1 : 0.25),
			delay: 0.0,
			afterSetup: function(effect) {
			},
			beforeStartInternal: function(effect) {
				content.appeared = false;
				content.className = "moving";
			},
			afterFinishInternal: function(effect) {
				hideBaseLayer();
				Element.hide(effect.element);
				Element.makeClipping(effect.element);
				self.hideDirectNodeHover();
			}
		});
	}
	
	hideInnerContent();
}




AjaxBox.prototype.hideDirectNodeHover = function() {
	if(this.directNode) {
		Element.removeClassName(this.directNode, "hover");
		this.directNode = undefined;
	}
}




// ----------------------------------------------------------------------------------------------------
// アルファをゼロに
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.setAlphaZero = function(node) {
	node.style.opacity = "0";
	node.style.MozOpacity = "0";
	node.style.filter = "alpha(opacity=0)";
}


// ----------------------------------------------------------------------------------------------------
// 特徴[Features]詳細画面表示
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.showFeatures = function(node) {
	var self = this;
	
	this.viewMode = "detail-feature";
	this.currentKey = node.key;
	
	var div = $("ajaxbox-content");
	var fileId = this.masterData[node.sid].features[node.iid];
	var sid = this.masterData[node.sid].id;
	
	//if(! this.currentFeatures.length) {
		this.currentFeatures = $A($(sid).getElementsByClassName("feature-item-col"));
	//}
	
	div.innerHTML = this.createFeaturesZoomCol(fileId, sid);
	
	this.activateNav();
	this.showOverlay();
}





// ----------------------------------------------------------------------------------------------------
// マウスオーバー／マウスアウト
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.onmouseoverItem = function(node) {
	Element.addClassName(node, "hover");
}

AjaxBox.prototype.onmouseoutItem = function(node) {
	Element.removeClassName(node, "hover");
}



// ----------------------------------------------------------------------------------------------------
// 商品詳細 チェンジ
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.changeItemView = function(node, mode) {
	var img = $("item-image").getElementsByTagName("img")[0];
	var imgsrc;
	var txt = "";
	var pickttl = "";
	var pickuptxt;
	if(mode == "color") {
		var idata = this.masterData[node.sid].items[node.iid];
		var cid = "_" + node.cid;		
		txt = this.getPickupText(node.sid, node.iid, mode);
		imgsrc = "asset/item/zoom/" + idata.pid + cid + ".jpg";
	}
	else if(mode == "pickup") {
		var sid = this.masterData[node.sid].id;
		var pid = node.pid;
		pickuptxt = this.getPickupTtl(node.sid, pid, mode);
		txt = pickuptxt[0];
		pickttl = pickuptxt[1];
		imgsrc = "asset/pickup_feature/zoom/" + sid + "/" + pid + ".jpg";
		
	}
	
	
	
	
	img.className = "";
	
	if(this.isIE6) {
		var loader = new Image();
		loader.src = imgsrc;
		loader.onload = function(){
			if(img.className == "loaded") { return; }
			img.className = "loaded";
			img.src = imgsrc;
		}
		if(loader.complete) {
			loader.onload();
		}
	}
	else {
		img.src = imgsrc;
	}
	
	if(txt == "" || mode == "color") {
		$("item-comment").style.display = "none";
	} else {
		$("item-comment").style.display = "block";
	}
	
	if(txt != undefined) {
		$("item-comment").innerHTML = "<h3>"+pickttl+"</h3><p>"+txt+"</p>";
	}
	
	this.togglePickupThumb(node, mode);
}

AjaxBox.prototype.getPickupTtl = function(sid, exid, mode) {
	var str = "";
	var ttl = "";
	var strArr=[];
	if(mode == "pickup") {
		var pdata = this.masterData[sid].pickups;
		var i;
		var len = pdata.length;
		for(i=0; i<len; i++) {
			if(pdata[i].pid === exid) {
				str = pdata[i].comment;
				ttl = pdata[i].pttl;
				strArr = [str,ttl];
				break;
			}
		}
	}
	else {
	}
	return strArr;
}

AjaxBox.prototype.getPickupText = function(sid, exid, mode) {
	var str = "";
	if(mode == "color") {
		var idata = this.masterData[sid].items[exid];
		str = idata.comment;
	}
	else {
	}
	return str;
}



AjaxBox.prototype.togglePickupThumb = function(node, mode) {
	var elems;
	var key;
	if(mode == "color") {
		var idata = this.masterData[node.sid].items[node.iid];
		if(idata.pickup) {
			key = 0;
			elems = $("pickup-changer").getElementsByTagName("a");
		}
	}
	else if(mode == "pickup") {
		key = node.key + 1;
		elems = $("pickup-changer").getElementsByTagName("a");
	}
	
	var i;
	var len = elems.length;
	for(i=0; i<len; i++) {
		var elem = elems[i];
		if(i === key) {
			elem.className = "active";
		}
		else {
			elem.className = "";
		}
	}
}










// ----------------------------------------------------------------------------------------------------
// サムネイル用 HTML生成
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.createThumbnailCol = function(obj, dir) {
	var str = "";
	str += "<dl>";
	str += "<dt>" + obj.pid + "</dt>";
	str += "<dd class='size'>" + this.formatSizeShort(obj.size) + "</dd>";
	str += "<dd class='price'>" + this.formatPrice(obj.price) + "</dd>";
	str += "<dd class='weight'>" + this.formatWeight(obj.weight) + "</dd>";
	str += "</dl>";
	str += "<span>" + this.createThumbImage(obj.pid, dir) + "</span>";
	
	return str;
}




// ----------------------------------------------------------------------------------------------------
// 詳細画面用 HTML生成
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.createDetailCol = function(obj, dir, ttl) {
	var str = "";
	str = "<div class='product-detail detail-col'>";
	str += "<dl class='title-list'>";
	str += "<dt>" + ttl + "</dt>";
	str += "<dd>" + obj.pid + "</dt>";
	str += "</dl>";
	
	str += "<dl class='spec-list'>";
	str += "<dt>Size</dt>";
	str += "<dd>: " + this.formatSizeLong(obj.size) + "</dd>";
	str += "<dt>Weight</dt>";
	str += "<dd>: " + this.formatWeight(obj.weight) + this.formatLiter(obj.liter, obj.type) + "</dd>";
	str += "<dt>Price</dt>";
	str += "<dd>: " + this.formatPrice(obj.price) + "</dd>";
	if(obj.url) {
		str += "<dd class='buynow'>" + this.createBuynowButton(obj.url) + "</dd>";
	}
	str += "</dl>";
	
	str += "<dl class='color-list'>";
	str += "<dt>Color</dt>";
	str += "<dd id='color-changer'></dd>";
	str += "</dl>";
	
	if(obj.pickup) {
		str += "<ul class='pickup-list' id='pickup-changer'>";
		str += "</ul>";
	}
	
	if(obj.caption) {
		str += "<p class='caption'>";
		str += this.formatCaption(obj.caption);
		str += "</p>";
	} else {
		str += "<p class='caption'></p>";
	}
	
	str += "<span id='item-image'>" + this.createDetailImage(obj.pid, dir, obj.color[0]) + "</span>";
	str += "<div id='item-comment'>" + (obj.comment ? obj.comment : "") + "</div>";
	str += "</div>";
	
	return str;
}


AjaxBox.prototype.createBuynowButton = function(url) {
	var str = "<a href='" + url + "' target='_blank'>この商品を購入する</a>";
	return str;
}





// ----------------------------------------------------------------------------------------------------
// 機能・種類リスト　クローン生成
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.getCloneList = function() {
	var str = "";
	var seriesDiv = $("list-series");
	var funcDiv = $("list-functions");
	var typeDiv = $("list-types");
	
	str += "<div id='detail-list-clone'>";
	str += "<div id='dlist-func'>" + funcDiv.innerHTML + "</div>";
	str += "<div id='dlist-type'>" + typeDiv.innerHTML + "</div>";
	str += "</div>";
	
	return str;
}


// ----------------------------------------------------------------------------------------------------
// 機能・種類リスト　クローンからリンクを削除
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.removeLinkFromCloneList = function(ctype, cfuncs) {
	var self = this;

	var cloneTList = $("dlist-type");
	var tlists = cloneTList.getElementsByTagName("li");
	for(var i=0; i<tlists.length; i++) {
		var node = tlists[i].getElementsByTagName("a")[0];
		var txt = node.innerHTML;
		var img = "";
		
		node.sid = i+1;
		
		if(this.isIE6) {
			var file = (ctype-1 == i) ? "square_black.gif" : "square_gray.gif";
			img = "<img src='img/" + file + "' />";
			node.innerHTML = img + txt;
		}
		
		
		node.className = (ctype-1 == i) ? "checked" : "unchecked";
	}
	
	var cloneFList = $("dlist-func");
	var flists = cloneFList.getElementsByTagName("li");
	for(var i=0; i<flists.length; i++) {
		var node = flists[i].getElementsByTagName("a")[0];
		var txt = node.innerHTML;
		var bool = false;
		for(var n=0; n<cfuncs.length; n++) {
			if(Number(cfuncs[n]) - 1 == i) { bool = true; break; }
		}
		var img = "";
		
		node.sid = i+1;
		
		if(this.isIE6) {
			var file = (bool) ? "square_black.gif" : "square_gray.gif";
			img = "<img src='img/" + file + "' />";
			node.innerHTML = img + txt;
		}
		
	
		
		node.className = (bool) ? "checked" : "unchecked";
	}
}







// ----------------------------------------------------------------------------------------------------
// 特徴[Features] サムネイル用 HTML生成
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.createFeaturesCol = function(fid, dir) {
	var str = "";
	str += "<span>" + this.createFeatureImage(fid.pid, dir) + "</span>";
	
	return str;
}


AjaxBox.prototype.createFeaturesZoomCol = function(fid, dir) {
	var str = "<div id='feature-zoom'>";
	str += "<span>" + this.createFeatureZoomImage(fid.pid, dir) + "</span>";
	str += "<div class='zoom-features-txt'><div class='zoom-features-ttl'><div class='txtbox'><h3>"+fid.series+"</h3><h4>"+fid.ttl+"</h4></div><p class='addtxt'>"+fid.addition+"</p></div><p class='detail'>"+fid.comment+"</p></div>";
	str += "</div>";
	
	return str;
}




// ----------------------------------------------------------------------------------------------------
// 特徴[Features] 表示切替えボタン生成
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.createToggleFeaturesButton = function(tid) {
	var self = this;

	var div = document.createElement("div");
	var btn = document.createElement("a");

	return {node:div, btn:btn};
}


// ----------------------------------------------------------------------------------------------------
// 特徴[Features] 折りたたみボタン生成
// ----------------------------------------------------------------------------------------------------

/*
AjaxBox.prototype.createFeatureNav = function(node) {
	var self = this;
	
	var div = document.createElement("div");
	var btn = document.createElement("a");
	div.className = "blind-button-area";
	btn.tnode = node;
	btn.href = "javascript:void(0);";
	btn.innerText = "シリーズの特徴を閉じる";
	btn.onclick = function() {
		self.closeFeatures(this);
	}
	
	div.appendChild(btn);
	
	return div;
}
*/







// ----------------------------------------------------------------------------------------------------
// テキスト整形
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.formatSizeShort = function(obj) {
	var str = "";
	str += "W" + ((obj.w) ? obj.w : "--");
	str += "/H" + ((obj.h) ? obj.h : "--");
	str += "/D" + ((obj.d) ? obj.d : "--");
	str += "cm";
	str += (obj.info) ? ("<em>" + obj.info + "</em>") : "";
	return str;
}

AjaxBox.prototype.formatSizeLong = function(obj) {
	var str = "";
	str += "W" + ((obj.w) ? obj.w : "--") + "cm";
	str += " / H" + ((obj.h) ? obj.h : "--") + "cm";
	str += " / D" + ((obj.d) ? obj.d : "--") + "cm";
	str += (obj.info) ? ("<em>" + obj.info + "</em>") : "";
	str += (obj.optional) ? ("<br /><span class='size_opt'>" + obj.optional + "</span>") : "";
	return str;
}

AjaxBox.prototype.formatPrice = function(str) {
	if(! str) { return ""; }
	str = "&yen;" + str;
	return str;
}


AjaxBox.prototype.formatWeight = function(str) {
	if(! str) { return ""; }
	str = str + "g";
	return str;
}

AjaxBox.prototype.formatLiter = function(str, type) {
	if(! str) { return ""; }
	if(type == 4) { return ""; }
	str = "（" + str + "L）";
	return str;
}

AjaxBox.prototype.formatCaption = function(str) {
	if(! str) { return ""; }
	return str;
}




// ----------------------------------------------------------------------------------------------------
// 画像生成
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.createThumbImage = function(str, dir) {
	str = "<img src='asset/item/thumb/" + str + ".jpg'" + " alt='" + str + "' />";
	return str;
}

AjaxBox.prototype.createDetailImage = function(str, dir, colorId) {
	str = "<img src='asset/item/zoom/" + str + "_" + colorId + ".jpg'" + " alt='" + str + "' />";
	return str;
}

AjaxBox.prototype.createFeatureImage = function(str, dir) {
	str = "<img src='asset/feature/thumb/" + dir + "/" + str + ".jpg'" + " alt='" + str + "' />";
	return str;
}

AjaxBox.prototype.createFeatureZoomImage = function(str, dir) {
	str = "<img src='asset/feature/zoom/" + dir + "/" + str + ".jpg'" + " alt='" + str + "' />";
	return str;
}

// ----------------------------------------------------------------------------------------------------
// ページトップ挿入
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.createPageTop = function() {
	str = '<div class="pagetop"><a href="#" onclick="backToTop(); return false">↑&nbsp;page top</a></div>';
	return str;
}






// ----------------------------------------------------------------------------------------------------
// 詳細画面内ページ移動
// ----------------------------------------------------------------------------------------------------


AjaxBox.prototype.moveDetailPage = function(mode) {
	//alert(this.currentItems);
	//alert(this.currentKey);
	
	var self = this;
	var func;
	
	this.hideDirectNodeHover();
	
	if(this.viewMode == "detail-item") {
		if(mode == "next") {
			func = function() { self.currentItems[self.currentKey+1].onclick() };
		}
		else {
			func = function() { self.currentItems[self.currentKey-1].onclick(); };
		}
	}
	else if(this.viewMode == "detail-feature") {
		if(mode == "next") {
			func = function() { self.currentFeatures[self.currentKey+1].onclick(); };
		}
		else {
			func = function() { self.currentFeatures[self.currentKey-1].onclick(); };
		}
	}
	
	
	var content = $("overlay-container");
	
	new Effect.BlindUp(content, {
		from: 0.0,
		to: 1.0,
		fps: self.blindFps,
		duration: ((self.isIE6) ? 0.2 : 0.5),
		delay: 0.0,
		afterSetup: function(effect) {
		},
		beforeStartInternal: function(effect) {
			content.className = "moving";
			content.appeared = false;
		},
		afterFinishInternal: function(effect) {
			Element.hide(effect.element);
			func();
		}
	});
}





// ----------------------------------------------------------------------------------------------------
// 特徴[Features] 表示切替え
// ----------------------------------------------------------------------------------------------------
/*
AjaxBox.prototype.toggleFeatures = function(node) {

	node.lock = true;
	var tNode = $(node.tid).getElementsByClassName("series-features")[0];
	
	
	if(node.state == "closed") {
		new Effect.BlindDown(tNode, {
			from: 0.0,
			to: 1.0,
			fps: 30,
			duration: 0.5,
			restoreAfterFinish: true,
			afterSetup: function(effect) {
				Element.show(effect.element);
			},
			beforeStartInternal: function(effect) {
			},
			afterFinishInternal: function(effect) {
				node.lock = false;
				node.state = "opened";
				node.className = "opened";
				node.innerText = "シリーズの特徴を閉じる";
			}
		});
	}
	else if(node.state == "opened") {
		new Effect.BlindUp(tNode, {
			from: 0.0,
			to: 1.0,
			fps: 30,
			duration: 0.5,
			restoreAfterFinish: true,
			beforeStartInternal: function(effect) {
			},
			afterFinishInternal: function(effect) {
				Element.hide(effect.element);
				node.lock = false;
				node.state = "closed";
				node.className = "closed";
				node.innerText = "シリーズの特徴を見る";
			}
		});
	}
}
*/
/*
AjaxBox.prototype.closeFeatures = function(node) {
	var btnNode = node.tnode;
	this.toggleFeatures(btnNode);
}

*/












// ----------------------------------------------------------------------------------------------------
// 絞り込みナビ設定
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.setSearchNav = function() {
	var self = this;
	
	var SeriesNav = $("list-series");
	var sbtns = SeriesNav.getElementsByTagName("a");
	for(var i=0; i<sbtns.length; i++) {
		var btn = sbtns[i];
		btn.sid = i+1;
		btn.stype = "series";
		btn.checked = false;
		btn.className = "unchecked";
		btn.href = "javascript:void(0);";
		if(!self.isIE) {btn.title=""}
		btn.onclick = function() {
			self.searchSeries(this);
		}
		/*btn.onmouseover = function() {
			self.showBalloon(this);
		}
		btn.onmouseout = function() {
			self.hideBalloon(this);
		}*/		
	}

	var funcNav = $("list-functions");
	var fbtns = funcNav.getElementsByTagName("a");
	for(var i=0; i<fbtns.length; i++) {
		var btn = fbtns[i];
		btn.sid = i+1;
		btn.stype = "func";
		btn.checked = false;
		btn.className = "unchecked";
		btn.href = "javascript:void(0);";
		if(!self.isIE) {btn.title=""}
		btn.onclick = function() {
			self.searchItems(this);
		}
		btn.onmouseover = function() {
			self.showBalloon(this);
		}
		btn.onmouseout = function() {
			self.hideBalloon(this);
		}		
	}

	var typeNav = $("list-types");
	var tbtns = typeNav.getElementsByTagName("a");
	for(var i=0; i<tbtns.length; i++) {
		var btn = tbtns[i];
		btn.sid = i+1;
		btn.stype = "type";
		btn.checked = false;
		btn.className = "unchecked";
		if(!self.isIE) {btn.title=""};
		btn.href = "javascript:void(0);";
		btn.onclick = function() {
			self.searchItems(this);	
		}
		btn.onmouseover = function() {
			self.showBalloon(this);			
		}		
		btn.onmouseout = function() {
			self.hideBalloon(this);
		}	
	}
	
	var clearBtn = $("clearbtn").getElementsByTagName("a")[0];
	clearBtn.href = "javascript:void(0);";
	clearBtn.onclick = function() {
		self.resetSearch();
	}
	
	var allBtn2 = $("allbtn2").getElementsByTagName("a")[0];
	allBtn2.href = "javascript:void(0);";
	allBtn2.onclick = function() {
		self.resetSearch();
		allBtn2.className = "checked";
	}
	
	var allBtn1 = $("allbtn1").getElementsByTagName("a")[0];
	allBtn1.href = "javascript:void(0);";
	allBtn1.onclick = function() {
		self.resetSeries();
		allBtn1.className = "checked";
	}
	resetSeries();
}


// ----------------------------------------------------------------------------------------------------
// バルーン表示
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.showBalloon = function(node, isOverlay) {
	
	var self = this;
	var div = node.parentNode.getElementsByTagName("div")[0];
	var nav = node.parentNode.parentNode.parentNode.parentNode.parentNode;
	var idname = nav.getAttributeNode("id").nodeValue;
	Element.addClassName(div, "hover");
	
	var boxWidth  = Element.getDimensions(div).width;
	var bodyWidth = Element.getDimensions(document.body).width;
	var offset = 0;
	
	bodyWidth -= 10;
	var navRight  = Position.cumulativeOffset(nav)[0]+Element.getDimensions(nav).width;
	
	if(isOverlay) {
		var pleft = Position.cumulativeOffset(node.parentNode.parentNode)[0];
		var left  = Position.cumulativeOffset(node)[0] - pleft;
		if(boxWidth + left > 835) {
			offset = 835 - (left + boxWidth);
		}
		
		div.style.marginLeft = offset + "px";
	}
	else {
		var left = Position.cumulativeOffset(node)[0];
		var nodeRight = left + boxWidth-16;
		
		
		if(nodeRight > navRight){
			offset = navRight-nodeRight-4;
		} else {
			offset = 0;
		}
		
		if(this.isIE){
			offset-=10;
		}
		div.style.marginLeft = offset + "px";
	}
	
	if(idname == "list-functions"){
		div.style.marginTop = - (Element.getHeight(div)+24) + "px";
	} else if(idname == "list-types"){
		div.style.marginTop = 8 + "px";
	}
	
}


// ----------------------------------------------------------------------------------------------------
// バルーン表示
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.hideBalloon = function(node) {
	var div = node.parentNode.getElementsByTagName("div")[0];
	Element.removeClassName(div, "hover");
}






// ----------------------------------------------------------------------------------------------------
// 絞り込み開始
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.searchItems = function(node) {
	//alert("searchItems");
	//alert("search +++ " + node.stype + "/" + node.sid);
	
	if(node) {
		if(node.checked) {
			this.removeSearchCondition(node);
			node.className = "unchecked";
			node.checked = false;
		}
		else {
			this.addSearchCondition(node);
			node.className = "checked";
			node.checked = true;
		}
	}
	
	var items = document.getElementsByClassName("item-col");
	
	//alert(this.checkedTypes)
	//alert(this.checkedFuncs)
	//alert(this.checkedTypes+","+this.checkedFuncs+","+this.checkedSeries)
	
	this.currentItems = new Array();
	var cnt = 0;
	
	for(var i=0; i<items.length; i++) {
		var citem = items[i];
		var obj = this.masterData[citem.sid].items[citem.iid];
		if(this.checkMatchingCondition(obj)) {
			citem.key = cnt++;
			this.currentItems.push(citem);
			citem.enabled = true;
			Element.removeClassName(citem, "disabled");
		}
		else {
			citem.key = -1;
			citem.enabled = false;
			Element.addClassName(citem, "disabled");
		}
	}
	
	var allBtn2 = $("allbtn2").getElementsByTagName("a")[0];
	
	if(this.checkedTypes=="" && this.checkedFuncs==""){
		allBtn2.checked = true;
		allBtn2.className = "checked";
	} else {
		allBtn2.checked = false;
		allBtn2.className = "unchecked";
	}
	
}


AjaxBox.prototype.searchSeries = function(node) {
	
	//alert("searchSeries +++ " + node.stype + "/" + node.sid);
	//alert("checked"+node.checked+" id:"+node.sid);
	//alert("checkedSeries"+checkedSeries);
	
	
	if(node) {
		if(node.checked) {
			this.removeSearchSeriesCondition(node);
			node.className = "unchecked";
			node.checked = false;
		}
		else {
			this.addSearchSeriesCondition(node);
			node.className = "checked";
			node.checked = true;
		}
	}
	var seriesDiv = document.getElementsByClassName("series-container");
	
	var allBtn1 = $("allbtn1").getElementsByTagName("a")[0];
	if(this.checkedSeries==""){
		allBtn1.checked = true;
		allBtn1.className = "checked";
	} else {
		allBtn1.checked = false;
		allBtn1.className = "unchecked";
	}
	
	for(var i=0; i<seriesDiv.length;i++){
		if(this.checkedSeries.length==0){
			seriesDiv[i].style.display = "block";
		} else {
			seriesDiv[i].style.display = "none";
		}
	}
	
	for(var ii=0; ii<this.checkedSeries.length;ii++){
		seriesDiv[this.checkedSeries[ii]-1].style.display = "block";
	}
	
}



// ----------------------------------------------------------------------------------------------------
// 絞り込み条件にマッチしているかどうかの判定
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.checkMatchingCondition = function(obj) {
	if(this.checkedTypes.length == 0 && this.checkedFuncs.length == 0 && this.checkedSeries.length == 0) {
		return true;
	}
	
	var isMatchType = Boolean(! this.checkedTypes.length);
	var isMatchFunc = Boolean(! this.checkedFuncs.length);
	var isMatchSeries = Boolean(! this.checkedSeries.length);

	for(var i=0; i<this.checkedTypes.length; i++) {
		if(this.checkedTypes[i] == obj.type) {
			isMatchType = true;
			break;
		}
	}
	
	
	for(var n=0; n<this.checkedFuncs.length; n++) {
		for(var m=0; m<obj.funcs.length; m++) {
			if(this.checkedFuncs[n] == obj.funcs[m]) {
				isMatchFunc = true;
				break;
			}
		}
	}
	
	for(var j=0; j<this.checkedSeries.length; j++) {
		if(this.checkedSeries[j] == obj.series) {
			isMatchSeries = true;
			break;
		}
	}
	
	var bool = Boolean(isMatchType && isMatchFunc);
 //var bool = Boolean(isMatchType && isMatchFunc && isMatchSeries);
	return bool;
}





// ----------------------------------------------------------------------------------------------------
// 絞り込み条件を増やす
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.addSearchCondition = function(node) {
	var targetArray;
	if(node.stype == "func") {
		targetArray = this.checkedFuncs;
	}
	else if(node.stype == "type") {
		targetArray = this.checkedTypes;
	}
	else if(node.stype == "series") {
		targetArray = this.checkedSeries;
	}
	
	targetArray.push(node.sid);
	targetArray.sort();
	
}

AjaxBox.prototype.addSearchSeriesCondition = function(node) {
	var targetArray;
	targetArray = this.checkedSeries;
	
	targetArray.push(node.sid);
	targetArray.sort();
	
}



// ----------------------------------------------------------------------------------------------------
// 絞り込み条件を減らす
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.removeSearchCondition = function(node) {
	var targetArray;
	if(node.stype == "func") {
		targetArray = this.checkedFuncs;
	}
	else if(node.stype == "type") {
		targetArray = this.checkedTypes;
	}
	else if(node.stype == "series") {
		targetArray = this.checkedSeries;
	}
	
	for(var i=0; i<targetArray.length; i++) {
		if(targetArray[i] == node.sid) {
			targetArray.splice(i, 1);
		}
	}
}

AjaxBox.prototype.removeSearchSeriesCondition = function(node) {
	var targetArray;
		targetArray = this.checkedSeries;
	
	for(var i=0; i<targetArray.length; i++) {
		if(targetArray[i] == node.sid) {
			targetArray.splice(i, 1);
		}
	}
}




// ----------------------------------------------------------------------------------------------------
// 絞り込み条件リセット
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.resetSearch = function() {
	
	this.checkedFuncs = new Array();
	this.checkedTypes = new Array();
	this.searchItems();
	
	var funcNav = $("list-functions");
	var fbtns = funcNav.getElementsByTagName("a");
	for(var i=0; i<fbtns.length; i++) {
		var btn = fbtns[i];
		btn.checked = false;
		btn.className = "unchecked";
	}

	var typeNav = $("list-types");
	var tbtns = typeNav.getElementsByTagName("a");
	for(var i=0; i<tbtns.length; i++) {
		var btn = tbtns[i];
		btn.checked = false;
		btn.className = "unchecked";
	}
	
	var allBtn2 = $("allbtn2").getElementsByTagName("a")[0];
	allBtn2.checked = true;
	allBtn2.className = "checked";
}


AjaxBox.prototype.resetSeries = function() {
	this.checkedSeries = new Array();
	this.searchSeries();
	
	var seriesNav = $("list-series");
	var sbtns = seriesNav.getElementsByTagName("a");
	for(var i=0; i<sbtns.length; i++) {
		var btn = sbtns[i];
		btn.checked = false;
		btn.className = "unchecked";
	}

		
	var allBtn1 = $("allbtn1").getElementsByTagName("a")[0];
	allBtn1.checked = true;
	allBtn1.className = "checked";
}













// ----------------------------------------------------------------------------------------------------
// ウインドウのプロパティを取得
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.getPageInfo = function() {
	var pageinfo = {
		inner: { width:Number, height:Number },
		maximum: { width:Number, height:Number },
		offset: { x:Number, y:Number }
	};

	pageinfo.inner.width  = window.innerWidth
						 || document.documentElement.clientWidth
						 || document.body.clientWidth;

	pageinfo.inner.height = window.innerHeight
						 || document.documentElement.clientHeight
						 || document.body.clientHeight;

	pageinfo.maximum.width  = document.body.scrollWidth
						   || document.body.offsetWidth;

	pageinfo.maximum.height = window.innerHeight + window.scrollMaxY
						   || document.body.scrollHeight
						   || document.body.offsetHeight;

	pageinfo.offset.x = window.pageXOffset
					 || document.documentElement.scrollLeft
					 || document.body.scrollLeft
					 || 0;
	pageinfo.offset.y = window.pageYOffset
					 || document.documentElement.scrollTop
					 || document.body.scrollTop
					 || 0;
	return pageinfo;
}