$grid = (function(){
	// Grid Dhtml Event Callback
	function grid_dhtml_event_tr_onmouseover($dom, $param)
	{
		$dom.className = "hover";
	}
	function grid_dhtml_event_tr_onmouseout($dom, $param)
	{
		$dom.className = $param.className || "";
	}
	function create_callback_tr_click($key, $idx)
	{
		return function(){
			var config = $config.grid[$key];
			var arrRS = $data.getData(config.data);
			var dataIdx = $idx + arrGrids[$key].page * config.row.count;
			if(typeof(config.row.onclick) == "function")
				config.row.onclick(arrRS[dataIdx]);
		};
	}
	click_authorgroup_author = function($event, $key, $idx)
	{
		var evt = $event ? $event : (window.event ? window.event : null);
		evt.cancelBubble = true;

		var config = $config.grid[$key];
		var value = $data.getFieldValue(config.data, "@title", $idx);

		$search.search("addon", { "author" : value }, true);
		$grid.show("addon");
		return false;
	}
	click_author_author = function($event, $key, $idx)
	{
		var evt = $event ? $event : (window.event ? window.event : null);
		evt.cancelBubble = true;

		var config = $config.grid[$key];
		var value = $data.getFieldValue(config.data, "@title", $idx);
		window.open("http://cwowaddon.com/blog/" + value, "_blank"); 
	}
	click_addon_author = function($event, $key, $idx)
	{
		var evt = $event ? $event : (window.event ? window.event : null);
		evt.cancelBubble = true;

		var config = $config.grid[$key];
		var value = $data.getFieldValue(config.data, "author", $idx);
		alert(value);
		return false;
	}
	// Grid Dhtml Render
	var $arrRenderPropMap = {
		html : "innerHTML"
		,colspan : "colSpan"
		,width : "width"
	};
	function grid_render_copyproperty($rc, $prop)
	{
		for(var key in $prop)
		{
			if($arrRenderPropMap[key])
				$rc[$arrRenderPropMap[key]] = $prop[key];
		}
	}
	function grid_render($parent, $rc)
	{
		var config = $config.grid[$rc.name];
		if(typeof(config) != "object")
			return null;

		var $rcGrid = {
			$tag : "table"
			,className : "grid"
			,$childs : []
		};
		var idxRow = 0;
		var idxDataRowStart = 0
		if(config.heads && config.heads.length > 0)
		{
			var $rcRow = { $tag : "tr", $childs : [] };
			for(var i=0;i<config.heads.length;i++)
			{
				$rcRow.$childs[i] = {
					$tag : "td"
					,className : "head"
					,noWrap : "nowrap"
				};
				grid_render_copyproperty($rcRow.$childs[i], config.heads[i]);
			}
			$rcGrid.$childs[idxRow++] = $rcRow;
			idxDataRowStart ++;
		}
		if(config.subheads && config.subheads.length > 0)
		{
			var $rcRow = { $tag : "tr", $childs : [] };
			for(var i=0;i<config.subheads.length;i++)
			{
				$rcRow.$childs[i] = {
					$tag : "td"
					,className : "subhead"
					,noWrap : "nowrap"
				};
				grid_render_copyproperty($rcRow.$childs[i], config.subheads[i]);
			}
			$rcGrid.$childs[idxRow++] = $rcRow;
			idxDataRowStart ++;
		}
		if(config.row.count && config.row.count > 0)
		{
			for(var i=0;i<config.row.count;i++)
			{
				var $rcRow = { $tag : "tr", $childs : [] };
				if(i % 2 == 1)
					$rcRow.className = "even";
				$rcRow.$events = {
					onmouseover : { callback : grid_dhtml_event_tr_onmouseover, param : { className : $rcRow.className} }
					,onmouseout : { callback : grid_dhtml_event_tr_onmouseout, param : { className : $rcRow.className} }
				}
				$rcRow.onclick = create_callback_tr_click($rc.name, i);

				for(var j=0;j<config.fields.length;j++)
				{
					$rcRow.$childs[j] = {
						$tag : "td"
						,align : config.fields[j].align || "left"
					};
					if(config.fields[j].nowrap)
						$rcRow.$childs[j].noWrap = "nowrap";
					if(config.fields[j].overflow && config.fields[j].overflow == "hidden")
					{
						var sID = $rc.name + "_" + i + "_" + j;
						$rcRow.$childs[j].$childs = [
							{
								$tag : "table"
								,className : "fixed"
								,cellSpacing : "0"
								,cellPadding : "0"
								,$childs : [{ $tag : "tr" ,$childs : [{ $tag : "td", id : sID, innerHTML : "&nbsp;" }] }]
							}
						];
					}
					else
						$rcRow.$childs[j].innerHTML = "&nbsp;";
				}
				$rcGrid.$childs[idxRow++] = $rcRow;
			}
		}
		if(config.pageIndex)
		{
			$rcRow = { 
				$tag : "tr"
				,$childs : [
					{
						$tag : "td"
						,id : "PageIndex_" + $rc.name
						,className : "pageindex"
						,colSpan : config.fields.length
					}
				] 
			};
			arrGrids[$rc.name].pageIndexRowIdx = idxRow;
			$rcGrid.$childs[idxRow++] = $rcRow;
		}
		else
			arrGrids[$rc.name].pageIndexRowIdx = -1;
		arrGrids[$rc.name].dom = $dhtml.create($parent, $rcGrid);
		arrGrids[$rc.name].dataStartRowIdx = idxDataRowStart;

		if(config.autoupdate)
			setTimeout(create_callback_dataOnLoad($rc.name), 1);
	}
	$dhtml.registerRcType("grid", grid_render);
	//
	function create_callback_onload($key)
	{
		return function(){ grid_onload($key) };
	}

	function create_callback_dataOnLoad($key, $reset)
	{
		return function(){ grid_data_onload($key, $reset || false) };
	}
	function create_callback_pageindex_onclick($key, $pageindex)
	{
		return function(){
			var config = $config.grid[$key];
			arrGrids[$key].page = $pageindex;
			setTimeout(create_callback_dataOnLoad($key, false), 1);
		};
	}
	//
	function grid_onload($key)
	{
	}

	function grid_update_pageindex($key)
	{
		var config = $config.grid[$key];
		if(!config.pageIndex)
			return
		var domFrm = document.getElementById("PageIndex_" + $key);
		if(!domFrm)
			return;
		var iRecordCount = $data.getRecordCount($key);
		if(arrGrids[$key].pageIndexRowIdx < 0 || iRecordCount <= config.row.count)
		{
			domFrm.style.display = "none";
			return;
		}
		else
			domFrm.style.display = "";

		var iIdxCount = Math.floor(iRecordCount / config.row.count);
		if(iRecordCount % config.row.count != 0)
			iIdxCount += 1;

		var id, dom, rc;
		for(var i=0;i<iIdxCount;i++)
		{
			id = "PageIndex_" + $key + "_" + i;
			dom = document.getElementById(id);
			if(!dom)
			{
				rc = {
					$tag : "a"
					,id : id
					,innerHTML : (i+1)
					,onclick : create_callback_pageindex_onclick($key, i)
				};
				dom = $dhtml.create(domFrm, rc);

				arrGrids[$key].maxPageIndex = Math.max(arrGrids[$key].maxPageIndex, i);
			}
			dom.style.dispaly = "";
			if(arrGrids[$key].page == i)
				dom.className = "pageIndexSelect";
			else
				dom.className = "pageIndex";
		}
		for(;i<=arrGrids[$key].maxPageIndex;i++)
		{
			id = "PageIndex_" + $key + "_" + i;
			dom = document.getElementById(id);
			if(dom)
				dom.style.display = "none";
		}
	}

	function grid_data_onload($key, $reset)
	{
		if($reset)
		{
			arrGrids[$key].page = 0;
		}
		var config = $config.grid[$key];
		var iRowCount = config.row.count;
		var row, cell;
		var fd;
		var fValue;
		var map;
		var dataIdx;
		for(var i=0;i<iRowCount;i++)
		{
			row = arrGrids[$key].dom.rows[i + arrGrids[$key].dataStartRowIdx];
			dataIdx = i + arrGrids[$key].page * config.row.count;
			if(config.row.tooltip)
				row.title = $data.getFieldValue(config.data, config.row.tooltip.field, dataIdx) || "";
			for(var j=0;j<row.cells.length;j++)
			{
				cell = row.cells[j];
				if(config.fields && config.fields.length > j)
					fd = config.fields[j];
				else
					fd = null;
				fValue = "--";
				if(fd != null)
				{
					switch(fd.type)
					{
						case "$index":
							fValue = dataIdx + 1;
							break;
						case "$group":
							map = $config.map[$config.data[config.data].group.map];
							switch(fd.field)
							{
								case "name":
									fValue = $data.getGroupValue(config.data, fd.field, dataIdx) || map[dataIdx].name;
									break;
								case "count":
									fValue = $data.getGroupValue(config.data, fd.field, dataIdx) || "--";
									break;
							}
							break;
						case "addon_authorlink":
							fValue =  $data.getFieldValue(config.data, fd.field, dataIdx) || "--";
							if(fValue != "--")
								fValue = '<a class="author" href="javascript:void(0)" onclick="click_addon_author(event, \'' + $key + '\', ' + dataIdx + ')">' + fValue + '</a>';
							break;
						case "author_authorlink":
							fValue =  $data.getFieldValue(config.data, fd.field, dataIdx) || "--";
							if(fValue != "--")
								fValue = '<a class="author" href="javascript:void(0)" onclick="click_author_author(event, \'' + $key + '\', ' + dataIdx + ')">' + fValue + '</a>';
							break;
						case "authorgroup_authorlink":
							fValue =  $data.getFieldValue(config.data, fd.field, dataIdx) || "--";
							if(fValue != "--")
								fValue = '<a class="author" href="javascript:void(0)" onclick="click_authorgroup_author(event, \'' + $key + '\', ' + dataIdx + ')">' + fValue + '</a>';
							break;
						default:
							fValue = $data.getFieldValue(config.data, fd.field, dataIdx) || "--";
							break;
					}
				}
				if(config.fields && config.fields.length > j && config.fields[j].overflow && config.fields[j].overflow == "hidden")
				{
					var sID = $key + "_" + i + "_" + j;
					var dom = document.getElementById(sID);
					if(dom)
					{
						dom.innerHTML = fValue;
					}
				}
				else
					cell.innerHTML = fValue;
			}
		}
		grid_update_pageindex($key);
	}

	var arrGrids = {};
	for(key in $config.grid)
	{
		arrGrids[key] = {
			onload : null
			,callback : create_callback_onload(key)
			,dom : null
			,dataStartRowIdx : -1
			,page : 0
			,maxPageIndex : -1
		};
		$data.registerOnLoad($config.grid[key].data, key, create_callback_dataOnLoad(key, true));
	}

	var displayViewId = null;
	function grid_show($key)
	{
		var config = $config.grid[$key];
		var dom;
		if(displayViewId != null)
		{
			dom = document.getElementById(displayViewId);
			dom.style.display = "none";
		}
		displayViewId = config.view;
		dom = document.getElementById(displayViewId);
		dom.style.display = "";
	}

	return {
		show : grid_show
	};
})();