var CbCollection = function() {
	var tData;

	this.init = function() {
		
		$(".catBtn").click(function(){
			toggleList(this.rel);
			rerenderingCss();
		});
		
		$.getJSON(
			'item.json',
			'',
			function(d) {
				setTaffy(d);
				defaultDisplay();
			}
		);
	}

	// SWF Interface
	
	this.hideList = function(cid) {
		hideList(cid);
		offCatBtn(cid);
		rerenderingCss();
	};

	this.showItem = function(cid, pid) {
		showItem(cid, pid);
		rerenderingCss();
	};
	
	// Inner Function
	
	var setTaffy = function(rawData) {
		tData = new TAFFY(rawData);
	};

	var rerenderingCss = function() {
		$("#footer").css({bottom:"0", position:"relative"});
		$("#footer").css({bottom:"0", position:"absolute"});
	};
	
	var defaultDisplay = function() {
		if(location.search.length > 1) {
			toggleList(location.search.replace("?",""));
		} else if(defaultDisplayList.length > 0) {
			jQuery.each(defaultDisplayList, function(k,v){
				toggleList(v);
			});
		}
	};

	var toggleList = function(cid) {
		if($("#itemList_"+cid).length == 0){
			showList(cid);
			onCatBtn(cid);
		} else {
			hideList(cid);
			offCatBtn(cid);
		}
	};

	var showList = function(cid) {
		var divName = 'itemList_'+cid;
		$("#main").append('<div id="'+divName+'" class="itemList"></div>');
		$("#itemList_"+cid).flash({
			src: "../images/collection.swf?"+ new Date().getTime(),
			width: 720,
			height: 130,
			id : 'externalitemlist'+cid,
			allowScriptAccess: 'always',
			flashvars: {"cid":cid}
		});

	};
	
	var hideList = function(cid) {
		hideItem(cid);
		$("#itemList_"+cid).remove();
	};
	
	var generateItemContainer = function(cid) {
		var containerId = "#itemDetail_"+cid;
		$("#itemList_"+cid).after('<div id="itemDetail_'+cid+'" class="itemDetail"><a href="#" class="close"><img src="../images/btn_close_off.gif" ref="over" width="40" height="11" alt="close" /></a></div>')
		$(containerId).append('<a class="prevBtn"><img src="../images/collection/btn_scroll_left_off.gif" ref="over" width="20" height="25" alt="" /></a>');
		$(containerId).append('<a class="nextBtn"><img src="../images/collection/btn_scroll_right_off.gif" ref="over" width="20" height="25" alt="" /></a>');
		jqOver();
		$(containerId).append('<span class="detailImage"><img src="" width="411" height="259" alt="" /></span>');
		$(containerId).append('<div class="detailText"></div>');
		$(containerId+" > .close").bind(
			"click",
			function(){
				hideItem(cid);
			}
		);
	};
	
	var bindMigrationBtn = function(cid, pid) {
		var containerId = "#itemDetail_"+cid;
		var catArr = tData.find({"cid":cid});
		var pPointer = tData.find({"pid":pid})[0];
		var catPointer = jQuery.inArray(pPointer, catArr);
		
		if(catPointer > -1) {
			var prevPointer = catArr[catPointer-1];
			var nextPointer = catArr[catPointer+1];
			if(prevPointer != undefined) {
				$(containerId+" > .prevBtn").show();
				var prevPid =  tData.raw[prevPointer].pid;
				$(containerId+" > .prevBtn").unbind();
				$(containerId+" > .prevBtn").bind(
					"click",
					function(){
						showItem(cid, prevPid);
					}
				);
			} else {
				$(containerId+" > .prevBtn").hide();
			}
			if(nextPointer != undefined) {
				$(containerId+" > .nextBtn").show();
				var nextPid =  tData.raw[nextPointer].pid;
				$(containerId+" > .nextBtn").unbind();
				$(containerId+" > .nextBtn").bind(
					"click",
					function(){
						showItem(cid, nextPid);
					}
				);
			} else {
				$(containerId+" > .nextBtn").hide();
			}
		}
	}
	
	var showItem = function(cid, pid) {
		if($("#itemDetail_"+cid).length == 0){
			generateItemContainer(cid);
		}
		var itemData = tData.get({"pid":pid})[0];
		$("#itemDetail_"+cid+"> .detailImage > img").attr("src", 'images/detail/'+pid+'.jpg');
		bindMigrationBtn(cid, pid);
		//HTML format
		var detailHTML = "";
		jQuery.each(itemData.ring, function(key, value){
			detailHTML += '<div class="detailNo">■No.'+this.no+'</div>'+
			'<div class="detailMetal">Metal : '+this.metal+'</div>'+
			'<div class="detailWidth">Width : '+this.width+'</div>'+
			'<div class="detailDiamond">Diamond : '+this.diamond+'</div>'+
			'<div class="detailNote">'+this.note+'</div>'+
			'<div class="detailPrice">Price : '+this.price+'yen</div>';
		});
		
		$("#itemDetail_"+cid+" > .detailText").html(detailHTML);
	};
	
	var hideItem = function(cid) {
		if($("#itemDetail_"+cid).length != 0){
			$("#itemDetail_"+cid).remove();
		}
	}
	
	var onCatBtn = function(cid) {
		var btnSrc = $(".catBtn[rel='"+cid+"'] > img").attr("src");
		$(".catBtn[rel='"+cid+"'] > img").attr("src", btnSrc.replace("_off.", "_on."));
	};
	
	var offCatBtn = function(cid) {
		var btnSrc = $(".catBtn[rel='"+cid+"'] > img").attr("src");
		$(".catBtn[rel='"+cid+"'] > img").attr("src", btnSrc.replace("_on.", "_off."));
	};
};