/**
 * 
 */
this.JS_DIRECTRY = "/common/scripts/"; //javascript files path
/*
 * 
 */

uaImport('UaPrototype');

// テンプレート
var TEMPLATE_TAB = '<li class="tab1"><a href="javascript:void(0);" onclick="tableSwitch(\'list1\');" class="tab1-rollover"><span>単色</span></a></li>';
TEMPLATE_TAB += '<li class="tab2"><a href="javascript:void(0);" onclick="tableSwitch(\'list2\');" class="tab2-rollover"><span>3 in 1</span></a></li>';


// 初期設定
function tableSwitchInt(imgs, path){
	var len = imgs.length;
	
	var img = new Array();
	for (var i=0; i < len ; i++) {
		img[i] = new Image();
		img[i].src = path + imgs[i];
	}
}


function tableSwitch(cls){
	var tabs = $GEI('js-tab');
	var a =  tabs.$GET('a');
	var len = a.length;
	
	setTable(this, cls);
	createTab(cls);
}

// テーブル表示処理
function setTable(elem, clsName) {
	var id = $GEI('main');

	var cls = id.$GEC('js-list-item');
	var len = cls.length;
	
	for(var i=0; i<len; i++){
		var item = cls[i];
		var listId = item.id;
		
		if(listId == clsName){
			item.style.display = 'block';
		}else {
			item.style.display = 'none';
		}
	}
}

// タブ生成
function createTab(cls) {
	var html = TEMPLATE_TAB;
	
	var id = $GEI('js-tab');
	var li = id.$GET('li');
	var len = li.length;
	
	var tabName = cls.strReplace('list', 'tab');
	var crt = tabName + '-crt';
	
	for(var i=0; i<len; i++){
		var tab = li[i];
		var tabCls = tab.className;
		tabCls = tabCls.strReplace('-crt','');
		
		if(tabCls == tabName){
			var html = html.strReplace(tabName, crt);
		}
	}

	id.innerHTML = html;
}