var RowNum    = 9;
var ColumnNum = 7; 
var min_row_num = 2;
var UnselectedColor = "#000000";
var SelectedColor = "#ff0000";
var area_table_head = '<table border="0" cellspacing="4" cellpadding="0" id="area_table" class="area"> ';
var server_table_head = '<table border="0" cellspacing="4" cellpadding="0" id="server_table" class="server"> ';
var table_tail = '</table>';
var old_area_id = null;
/******************************/
var g_select_td = "";
var g_not_first_time = 0;
function select_area(area_td_id)
{
	document.getElementById(area_td_id).className = "area_td_select";
	if (g_not_first_time && g_select_td!=area_td_id)
	{
		document.getElementById(g_select_td).className = "area_td";
	}
	g_not_first_time=1;
	g_select_td = area_td_id;
	setCookie("area_td_id", area_td_id, 30);
}
function area_onclick(area_td_id, area_id)
{
	select_area(area_td_id);
	show_servers(area_id);
}
/*****************************/ 
function gen_area_table()
{
	var inner_html = "";
	for(var i =0; i < RowNum; i++)
	{
		inner_html += "<tr>"
		for(var j=0; j < ColumnNum; j++)
		{
			inner_html += '<td id="' + (i * ColumnNum + j + 1) + '" class="area_td">&nbsp;</td>'
		}
		inner_html += "</tr>"
	}
	
	var table_html = area_table_head + inner_html + table_tail;
	$("area_table_panel").innerHTML = table_html;
}
function get_server_num_start()
{
	return RowNum * ColumnNum;
}
function gen_server_table()
{
	base_num = get_server_num_start();
	var inner_html = "";
	for(var i =0; i < min_row_num; i++)
	{
		inner_html += "<tr>"
		for(var j=0; j < ColumnNum; j++)
		{
			inner_html += '<td id="' + (base_num + i * ColumnNum + j + 1) + '">&nbsp;</td>'
		}
		inner_html += "</tr>"
	}
	
	var table_html = server_table_head + inner_html + table_tail;
	$("server_table_panel").innerHTML = table_html;
}

function fill_area_info()
{
	for(area_id in server_data)
	{
		var area_name = server_data[area_id][0][0];
		var position  = server_data[area_id][0][1].split("_");
		var el_id     = parseInt((position[1] -1) * ColumnNum) + parseInt(position[0]);
		var a_content = "<a id='"+ el_id +"_link' href=\"javascript:;\" onclick=\"area_onclick('"+ el_id +"', '"+ area_id +"')\" class='area_a'>" + area_name + "</a>";
		$(el_id).innerHTML = a_content;
	}
}

function server_list_init()
{
	gen_area_table();
	fill_area_info();
	gen_server_table();
	
	var area_id = null;
	if (getPara("area_id"))
	{
		area_id = getPara("area_id");
	}
	else
	{
		area_id = getCookieValue("area_id");
	}

	var area_td_id = null;
	area_td_id = getCookieValue("area_td_id");
	
	if (area_td_id && area_id)
	{
		area_onclick(area_td_id, area_id);
	}
}

function show_servers_with_position(area_id)
{
	var server_list = server_data[area_id][1];
	var i=0;
	base_num = get_server_num_start();
	for(i=0; i < server_list.length; i++)
	{
		var server = server_list[i];
		var position  = server[2].split("_");
		var el_id     = base_num + parseInt((position[1] -1) * ColumnNum) + parseInt(position[0]);
		$(el_id).innerHTML = '<a href=\'#\' onclick=\'select_server('+area_id
				+',"' + server_data[area_id][0][0] + '",' + server[0] + ',"' 
				+ server[1] + '");\' id="server_' + server[0] + server[1] + '" class="server_a">' + server[1] + '</a>';
	}
	var clear_idx = base_num + i + 1;
	var total_num = base_num + 1 + min_row_num*ColumnNum;
	for(clear_idx; clear_idx < total_num; clear_idx++)
	{
		$(clear_idx).innerHTML = "&nbsp;";
	}

}

function show_servers(area_id)
{
	setCookie("area_id", area_id, 30);
	if (use_server_position)
	{
		show_servers_with_position(area_id);
		return;
	}
	
	var server_list = server_data[area_id][1];
	
	var i=0;
	var base_num = get_server_num_start();
	var server_index = base_num + 1;
	for(i=0; i < server_list.length; i++)
	{
		var server = server_list[i];
		$(server_index++).innerHTML = '<a href=\'#\' onclick=\'select_server('+area_id
				+',"' + server_data[area_id][0][0] + '",' + server[0] + ',"' 
				+ server[1] + '");\' id="server_' + server[0] + server[1] + '" class="server_a">' + server[1] + '</a>';
	}
	i = server_index;
	var total_num = base_num + 1 + min_row_num*ColumnNum;
	for(i; i < total_num; i++)
	{
		$(i).innerHTML = "&nbsp;";
	}
}