﻿/**
 * GridViewBTD
 * 
 * @author     banhthidiem <banhthidiem@gmail.com>
 * @copyright  2008 Bach Khoa Computer Inc.
 * @version    1.0 2008/09/30
 */
 
var EventName =
{
	/******* Event Name of Paging GridView *******/
	pagingChange : "pagingChange",

	/******* Event Name of Columm GridView *******/
	click : "click",
	blur : "blur",
	focus : "focus",
	change : "change",
	dblClick : "dblclick",
	keyDown : "keydown",
	keyPress : "keypress",
	keyUp : "keyup",
	mouseDown : "mousedown",
	mouseUp : "mouseup",
	mouseOver : "mouseover",
	mouseMove : "mousemove",
	mouseOut : "mouseout",
	
	/******* Event Name of Row GridView *******/
	rowDataBound : "rowDataBound",
	rowClick : "rowClick",
	rowDblClick : "rowDblClick",
	rowMouseDown : "rowMouseDown",
	rowMouseUp : "rowMouseUp",
	rowMouseOver : "rowMouseOver",
	rowMouseMove : "rowMouseMove",
	rowMouseOut : "rowMouseOut",
	
	/******* Event Name of Function GridView *******/
	insertNewRecord : "insertNewRecord",
	editRecord : "editRecord",
	deleteRecord : "deleteRecord"
};

var BoundStatus =
{
	insert : "Insert",
	update : "Update",
	remove : "Remove"
};

var ColummType =
{
	radioBox : "radiobox",
	checkBox : "checkbox",
	textBox : "textbox",
	selectBox : "selectBox",
	label : "label",
	linkButton : "linkbutton",
	hyperLink : "hyperlink",
	image : "image",
	textArea : "textArea"
};

GridViewBTD = function(objContainer, listData, myName)
{
	this.listData = listData;
	this.myName = myName;
	this.objContainer = objContainer;
	this.elGridView = null;
	this.elRowEdit = null;
	
	/*************** Event ******************/
	this.listEvent = new Array();
	
	/*************** Properties ******************/
	this.isShowAddNew = false;
	this.isShowEdit = true;
	this.isShowDelete = false;
	this.isShowPaging = false;
	this.isShowTotal = false;
	
	/*************** Paging ******************/
	this.pagingRecord = { begin : 0, end : 0 };
	this.elPageChoose = null;
	this.currentIndexContainerPage = 1;
	this.listContainerPages = new Array();
	
	this.viewRecord = 0;
	this.totalPage = 0;
	this.maxPage = 10;
	
	this.elContainerPagingPreview = null;
	this.elContainerPagingNext = null;
};

/*****************************************************************************74 5
								Private Methods Start
*****************************************************************************/

GridViewBTD.prototype.getElContainer = function()
{
	var re = null;
	if(typeof(this.objContainer) == "string")
		re = utilObj.getElById(this.objContainer);
	else
		re = this.objContainer;
	return re;
};

GridViewBTD.prototype.createGridView = function()
{
	var el = utilObj.createEl("TABLE");
	el.id = "GridView" + this.myName;
	el.className = "gridView";
	this.elGridView = el;
	this.getElContainer().appendChild(el);
};

GridViewBTD.prototype.createTHead = function()
{
	var el = this.elGridView.createTHead();
	el.id = "tHeadGridView" + this.myName;
	var elRow = el.insertRow(el.rows.length);
	elRow.className = "gridViewTitle";
	var elCell = null;
	for (var i = 0; i < this.listData.head.length; i++)
	{
		var item = this.listData.head[i];
		elCell = elRow.insertCell(i);
		if (typeof(item) != "undefined")
		{
			if (typeof(item.captionNote) != "undefined")
			{
				elCell.title = item.captionNote;
			}
			elCell.className = item.css;
			elCell.innerHTML = item.caption;
		}
	}
	this.createFunctionAddNew(elRow);
};

GridViewBTD.prototype.createTFoot = function()
{
	if (!this.isShowPaging && !this.isShowTotal) return;
	var el = this.elGridView.createTFoot();
	el.id = "tFootGridView" + this.myName;
	var elRow = el.insertRow(el.rows.length);
	var elCell = elRow.insertCell(0);
	elCell.colSpan = this.elGridView.tHead.rows[0].cells.length;
	elCell.className = "gridViewFoot";
};


GridViewBTD.prototype.createTBody = function()
{
	this.elGridView.appendChild(utilObj.createEl("TBODY"));
	for (var i = 0; i < this.listData.data.length; i++)
	{
		this.insertRow(this.listData.data[i]);
	}
};

GridViewBTD.prototype.insertRow = function(item)
{
	var tBody = this.elGridView.tBodies[0];
	item.rowID = tBody.rows.length;
	var elRow = tBody.insertRow(tBody.rows.length);
	elRow.className = tBody.rows.length % 2 != 0 ? "bgColor" : "alternatingBgColor";
	elRow.item = item;
	item.elRow = elRow;
	for (var j = 0; j < this.listData.head.length; j++)
	{
		this.insertCell(elRow, this.listData.head[j]);
	}
	this.createFunctionUpdate(elRow);
	this.mapEventForRow(elRow);
	
	var e = new Object();
	e.boundStatus = BoundStatus.insert;
	this.executeEventForRow(e, elRow, EventName.rowDataBound);
};

GridViewBTD.prototype.insertCell = function(elRow, oHead)
{
	switch (oHead.type)
	{
		case ColummType.hyperLink:
			this.createHyperLink(elRow, oHead);
			break;
		case ColummType.linkButton:
			this.createLinkButton(elRow, oHead);
			break;
		case ColummType.textBox:
			this.createTextBox(elRow, oHead);
			break;
		case ColummType.checkBox:
			this.createCheckBox(elRow, oHead);
			break;
		case ColummType.radioBox:
			this.createRadioBox(elRow, oHead);
			break;
		case ColummType.selectBox:
			this.createSelectBox(elRow, oHead);
			break;
		case ColummType.label:
			this.createLabel(elRow, oHead);
			break;
		case ColummType.image:
			this.createImage(elRow, oHead);
			break;
		case ColummType.textArea:
			this.createTextArea(elRow, oHead);
			break;
	}
};

GridViewBTD.prototype.updateCell = function(cellIndex)
{
	var oHead = this.listData.head[cellIndex];
	var elCell = this.elRowEdit.cells[cellIndex];
	switch (oHead.type)
	{
		case ColummType.hyperLink:
			elCell.element.href = this.elRowEdit.item[oHead.fieldURL];
			elCell.element.innerHTML = this.elRowEdit.item[oHead.field];
			break;
		case ColummType.linkButton:
			elCell.element.innerHTML = this.elRowEdit.item[oHead.field];
			break;
		case ColummType.textBox:
			elCell.element.value = this.elRowEdit.item[oHead.field];
			break;
		case ColummType.checkBox:
			elCell.element.checked = this.elRowEdit.item[oHead.field];
			break;
		case ColummType.radioBox:
			elCell.element.checked = this.elRowEdit.item[oHead.field];
			break;
		case ColummType.selectBox:
			for (var i = 0; i < oHead.listItem.length; i++)
			{
				elCell.element[i].selected = this.elRowEdit.item[oHead.field] == oHead.listItem[i].value;
			}
			break;
		case ColummType.label:
			elCell.element.innerHTML = this.elRowEdit.item[oHead.field];
			break;
		case ColummType.image:
			elCell.element.src = this.elRowEdit.item[oHead.fieldURL];
			break;
		case ColummType.textArea:
			elCell.element.value = this.elRowEdit.item[oHead.field];
			break;
	}
};

/*============================================================================
====================Create Element Insert, Edit, Delete=======================
============================================================================*/

GridViewBTD.prototype.createFunctionAddNew = function(elRow)
{
	if (!this.isShowAddNew && !this.isShowEdit && !this.isShowDelete) return;
	
	var elCell = elRow.insertCell(elRow.cells.length);
	elCell.style.textAlign = "center";
	
	if (!this.isShowAddNew) return;
	
	// Tag A Add New Record
	elCell.element = utilObj.createEl("A");
	elCell.element.innerHTML = "Thêm mới";
	elCell.element.href = "javascript:void(0);";
	elCell.appendChild(elCell.element);
	
	var self = this;
	// Add Event
	utilObj.addEvent(elCell.element, "click", function(e)
	{
		self.executeEvent(e, elCell, EventName.insertNewRecord);
	});
};

GridViewBTD.prototype.createFunctionUpdate = function(elRow)
{
	if (!this.isShowAddNew && !this.isShowEdit && !this.isShowDelete) return;
	var elCell = elRow.insertCell(elRow.cells.length);
	elCell.style.textAlign = "center";
	var self = this;
	
	if (this.isShowEdit)
	{
		// Tag A Edit
		elCell.elEdit = utilObj.createEl("A");
		elCell.elEdit.innerHTML = "Sửa";
		elCell.elEdit.href = "javascript:void(0);";
		elCell.appendChild(elCell.elEdit);
	
		// Add Event
		utilObj.addEvent(elCell.elEdit, "click", function(e)
		{
			self.elRowEdit = elRow;
			self.executeEvent(e, elCell, EventName.editRecord);
		});
	}
	
	if (this.isShowEdit && this.isShowDelete)
	{
		// Sep
		elCell.appendChild(utilObj.createElText(" - "));
	}
	
	if (this.isShowDelete)
	{
		// Tag A Delete
		elCell.elDelete = utilObj.createEl("A");
		elCell.elDelete.innerHTML = "Xóa";
		elCell.elDelete.href = "javascript:void(0);";
		elCell.appendChild(elCell.elDelete);
		// Add Event
		utilObj.addEvent(elCell.elDelete, "click", function(e)
		{
			self.executeEvent(e, elCell, EventName.deleteRecord);
		});
	}
};

/*============================================================================
=========================Create Element for GridView==========================
============================================================================*/

GridViewBTD.prototype.createHyperLink = function(elRow, oHead)
{
	elCell = elRow.insertCell(elRow.cells.length);
	elCell.element = utilObj.createEl("A");
	if (oHead.fieldURL != null && elRow.item[oHead.fieldURL])
	{
		elCell.element.href = elRow.item[oHead.fieldURL];
	}
	else
	{
		elCell.element.href = "#";
	}
	elCell.element.innerHTML = elRow.item[oHead.field];
	elCell.appendChild(elCell.element);
	// Map event
	this.mapEvent(elCell, oHead.name);
};

GridViewBTD.prototype.createLinkButton = function(elRow, oHead)
{
	elCell = elRow.insertCell(elRow.cells.length);
	elCell.element = utilObj.createEl("A");
	elCell.element.href = "javascript:void(0);";
	elCell.element.innerHTML = elRow.item[oHead.field];
	elCell.appendChild(elCell.element);
	// Map event
	this.mapEvent(elCell, oHead.name);
	// Add Event
	if (oHead.fieldAction != null && elRow.item[oHead.fieldAction])
	{
		utilObj.addEvent(elCell.element, "click", function(e)
		{
			eval(elRow.item[oHead.fieldAction]);
		});
	}
};

GridViewBTD.prototype.createTextBox = function(elRow, oHead)
{
	elCell = elRow.insertCell(elRow.cells.length);
	elCell.element = utilObj.createEl("INPUT");
	elCell.element.type = "text";
	elCell.element.className = "inputText " + oHead.css;
	elCell.element.value = elRow.item[oHead.field];
	elCell.appendChild(elCell.element);
	// Map event
	this.mapEvent(elCell, oHead.name);
};

GridViewBTD.prototype.createCheckBox = function(elRow, oHead)
{
	elCell = elRow.insertCell(elRow.cells.length);
	elCell.element = utilObj.createEl("INPUT");
	elCell.element.type = "checkbox";
	elCell.appendChild(elCell.element);
	elCell.element.checked = elRow.item[oHead.field];
	// Map event
	this.mapEvent(elCell, oHead.name);
};

GridViewBTD.prototype.createRadioBox = function(elRow, oHead)
{
	elCell = elRow.insertCell(elRow.cells.length);
	elCell.element = utilObj.createEl("INPUT");
	elCell.element.type = "radio";
	elCell.element.checked = elRow.item[oHead.field];
	elCell.appendChild(elCell.element);
	// Map event
	this.mapEvent(elCell, oHead.name);
};

GridViewBTD.prototype.getOption = function(item)
{
	var elOption = utilObj.createEl("OPTION");
	elOption.text = item.text;
	elOption.value = item.value;
	return elOption;
};

GridViewBTD.prototype.createSelectBox = function(elRow, oHead)
{
	elCell = elRow.insertCell(elRow.cells.length);
	elCell.element = utilObj.createEl("SELECT");
	elCell.element.className = "inputText";
	for (var i = 0; i < oHead.listItem.length; i++)
	{
		var elOption = this.getOption(oHead.listItem[i]);
		try
		{
			elCell.element.add(elOption, null); // standards compliant
		}
		catch(ex)
		{
			elCell.element.add(elOption); // IE only
		}
		elOption.selected = elRow.item[oHead.field] == oHead.listItem[i].value;
	}
	elCell.appendChild(elCell.element);
	// Map event
	this.mapEvent(elCell, oHead.name);
};

GridViewBTD.prototype.createLabel = function(elRow, oHead)
{
	elCell = elRow.insertCell(elRow.cells.length);
	elCell.element = utilObj.createEl("LABEL");
	elCell.element.innerHTML = elRow.item[oHead.field];
	elCell.appendChild(elCell.element);
	// Map event
	this.mapEvent(elCell, oHead.name);
};

GridViewBTD.prototype.createImage = function(elRow, oHead)
{
	elCell = elRow.insertCell(elRow.cells.length);
	elCell.element = utilObj.createEl("IMG");
	if (oHead.fieldURL != null && elRow.item[oHead.fieldURL])
	{
		elCell.element.src = elRow.item[oHead.fieldURL];
	}
	elCell.appendChild(elCell.element);
	// Map event
	this.mapEvent(elCell, oHead.name);
};

GridViewBTD.prototype.createTextArea = function(elRow, oHead)
{
	elCell = elRow.insertCell(elRow.cells.length);
	elCell.element = utilObj.createEl("TEXTAREA");
	elCell.element.rows = 4;
	elCell.element.className = "inputText " + oHead.css;
	elCell.element.value = elRow.item[oHead.field];
	elCell.appendChild(elCell.element);
	// Map event
	this.mapEvent(elCell, oHead.name);
};

/*****************************************************************************
								Private Methods End
*****************************************************************************/

/*****************************************************************************
								Public Methods Start
*****************************************************************************/

GridViewBTD.prototype.dataBind = function()
{
	this.createGridView();
	this.createTHead();
	this.createTBody();
	this.createTFoot();
};

GridViewBTD.prototype.reloadData = function()
{
	try
	{
		this.elGridView.removeChild(this.elGridView.tBodies[0]);
		this.createTBody();
	}
	catch (e) { }
};

GridViewBTD.prototype.insertNewRow = function(item)
{
	this.listData.data.push(item);
	this.insertRow(item);
};
		
GridViewBTD.prototype.updateRow = function(item)
{
	item.rowID = this.elRowEdit.item.rowID;
	//item.recordID = this.elRowEdit.item.recordID;
	this.elRowEdit.item = item;
	item.elRow = this.elRowEdit;
	for (var j = 0; j < this.listData.head.length; j++)
	{
		this.updateCell(j);
	}
	var e = new Object();
	e.boundStatus = BoundStatus.update;
	this.executeEventForRow(e, this.elRowEdit, EventName.rowDataBound);
};
		
GridViewBTD.prototype.removeRow = function(elRow)
{
	// Delete data array
	for (var i = 0; i < this.listData.data.length; i++)
	{
		if (elRow.item.rowID == this.listData.data[i].rowID)
		{
			this.listData.data.splice(i, 1);
			break;
		}
	}
	
	var tBody = this.elGridView.tBodies[0];
	
	// Change css row
	for (var i = elRow.rowIndex; i < tBody.rows.length; i++)
	{
		tBody.rows[i].className = i % 2 != 0 ? "bgColor" : "alternatingBgColor";
		var e = new Object();
		e.boundStatus = BoundStatus.remove;
		this.executeEventForRow(e, tBody.rows[i], EventName.rowDataBound);
	}
	
	// Delete row
	tBody.removeChild(elRow);
};

//
// Dùng để ẩn một cột
//
GridViewBTD.prototype.hideColumn = function(columnIndex)
{
	// Kiểm tra xem còn bao nhiêu cột chưa ẩn 
	var count = 0;
	for (var i = 0; i < this.elGridView.tHead.row[0].cells.length; i++)
	{
		if(this.elGridView.tHead.row[0].cells[i].style.display == "")
		{
			count++;
		}
	}
	if(count <= 1)
	{
		return false;
	}
	
	var tBody = this.elGridView.tBodies[0];
	// Change css row
	for (var i = 0; i < tBody.rows.length; i++)
	{
		tBody.rows[i].cells[columnIndex].style.display = "none";
	}

	this.elGridView.tHead.row[0].cells[columnIndex].style.display = "none";
	return true;
};

//
// Dùng để hiện một cột bị ẩn
//
GridViewBTD.prototype.showColumn = function(columnIndex)
{
	
	var tBody = this.elGridView.tBodies[0];
	
	// Change css row
	for (var i = 0; i < tBody.rows.length; i++)
	{
		tBody.rows[i].cells[columnIndex].style.display = "";
	}
	this.elGridView.tHead.row[0].cells[columnIndex].style.display = "";
	
};

/*****************************************************************************
								Public Methods End
*****************************************************************************/

/*****************************************************************************
								Event Start
*****************************************************************************/

GridViewBTD.prototype.mapEventForRow = function(elRow)
{
	var self = this;
	// Add Event
	elRow["onclick"] = function(e)
	{
		self.executeEventForRow(e, elRow, EventName.rowClick);
	};
	
	elRow["ondblclick"] = function(e)
	{
		self.executeEventForRow(e, elRow, EventName.rowDblClick);
	};
		
	elRow["onmousedown"] = function(e)
	{
		self.executeEventForRow(e, elRow, EventName.rowMouseDown);
	};
	
	elRow["onmousemove"] = function(e)
	{
		self.executeEventForRow(e, elRow, EventName.rowMouseMove);
	};
	elRow["onmouseout"] = function(e)
	{
		self.executeEventForRow(e, elRow, EventName.rowMouseOut);
	};
	
	elRow["onmouseover"] = function(e)
	{
		self.executeEventForRow(e, elRow, EventName.rowMouseOver);
	};
	
	elRow["onmouseup"] = function(e)
	{
		self.executeEventForRow(e, elRow, EventName.rowMouseUp);
	};
};

GridViewBTD.prototype.mapEvent = function(elCell, name)
{
	var self = this;
	// Add Event
	elCell.element["onclick"] = function(e)
	{
		self.executeEvent(e, elCell, name + EventName.click);
	};
	
	elCell.element["onblur"] = function(e)
	{
		self.executeEvent(e, elCell, name + EventName.blur);
	};
	
	elCell.element["onfocus"] = function(e)
	{
		self.executeEvent(e, elCell, name + EventName.focus);
	};
	
	elCell.element["onchange"] = function(e)
	{
		self.executeEvent(e, elCell, name + EventName.change);
	};
	
	elCell.element["ondblclick"] = function(e)
	{
		self.executeEvent(e, elCell, name + EventName.dblClick);
	};
	
	elCell.element["onkeydown"] = function(e)
	{
		self.executeEvent(e, elCell, name + EventName.keyDown);
	};
	
	elCell.element["onkeypress"] = function(e)
	{
		self.executeEvent(e, elCell, name + EventName.keyPress);
	};
	
	elCell.element["onkeyup"] = function(e)
	{
		self.executeEvent(e, elCell, name + EventName.keyUp);
	};
	
	elCell.element["onmousedown"] = function(e)
	{
		self.executeEvent(e, elCell, name + EventName.mouseDown);
	};
	
	elCell.element["onmousemove"] = function(e)
	{
		self.executeEvent(e, elCell, name + EventName.mouseMove);
	};
	elCell.element["onmouseout"] = function(e)
	{
		self.executeEvent(e, elCell, name + EventName.mouseOut);
	};
	
	elCell.element["onmouseover"] = function(e)
	{
		self.executeEvent(e, elCell, name + EventName.mouseOver);
	};
	
	elCell.element["onmouseup"] = function(e)
	{
		self.executeEvent(e, elCell, name + EventName.mouseUp);
	};
};

GridViewBTD.prototype.addEventForFunction = function(eventName, func)
{
	this.addEvent("", eventName, func);
};
	
GridViewBTD.prototype.removeEventForFunction = function(eventName, func)
{
	this.removeEvent("", eventName, func);
};

GridViewBTD.prototype.addEvent = function(colName, eventName, func)
{
	if(this.listEvent[colName + eventName] == null)
	{
		this.listEvent[colName + eventName] = [];
	}
	this.listEvent[colName + eventName].push(func);
};
	
GridViewBTD.prototype.removeEvent = function(colName, eventName, func)
{
	if(this.listEvent[colName + eventName] == null)
	{
		return;
	}
	for (var i = 0; i < this.listEvent[colName + eventName].length; i++)
	{
		if (func == this.listEvent[colName + eventName][i])
		{
			this.listEvent[colName + eventName].splice(i, 1);
			break;
		}
	}
};
	
GridViewBTD.prototype.executeEvent = function(e, elCell, eventName)
{
	e = utilObj.getWindowEvent();
	e.elementCell = elCell;
	this.executeEventForRow(e, elCell.parentNode, eventName);
};
	
GridViewBTD.prototype.executeEventForRow = function(e, elRow, eventName)
{
	if (e == null)
	{
		e = utilObj.getWindowEvent();
	}
	e.elementRow = elRow;
	if (this.listEvent[eventName] != null)
	{
		for (var i = 0; i < this.listEvent[eventName].length; i++)
		{
			this.listEvent[eventName][i](e);
		}
	}
};

GridViewBTD.prototype.executeEventForPaging = function(e, eventName)
{
	if (this.listEvent[eventName] != null)
	{
		for (var i = 0; i < this.listEvent[eventName].length; i++)
		{
			this.listEvent[eventName][i](e);
		}
	}
};

	
/*****************************************************************************
								Event End
*****************************************************************************/

/*****************************************************************************
						Calc total of Columm function
*****************************************************************************/

GridViewBTD.prototype.calcTotal = function(colName, charSep)
{
	if (!this.isShowTotal) return;
	try
	{
		var row = this.elGridView.tFoot.rows[1];
		var cell = null;
		
		if (this.isShowPaging && row == null)
		{
			row = this.elGridView.tFoot.insertRow(1);
			cell = row.insertCell(0);
			cell.className = "gridViewFoot";
			cell.colSpan = this.elGridView.tHead.rows[0].cells.length;
		}
		else
		{
			cell = this.elGridView.tFoot.rows[0].cells[0];
		}
		var total = 0;
		for (var i = 0; i < this.listData.data.length; i++)
		{
			total += this.listData.data[i][colName];
		}
		cell.innerHTML = "Tổng: <span class='calcTotal'>" + utilObj.formatNumber(total, charSep) + "</span>";
		return total;
	}
	catch (e) { }
};

/*****************************************************************************
						Calc total of Columm function
*****************************************************************************/

/*****************************************************************************
								Paging function
*****************************************************************************/
GridViewBTD.prototype.showOrHidePreviewOrNext = function()
{
	this.elContainerPagingNext.style.display = 
		(this.totalPage <= this.currentIndexContainerPage * this.maxPage) ? "none" : "";
	this.elContainerPagingPreview.style.display = (this.currentIndexContainerPage == 1) ? "none" : "";
}

GridViewBTD.prototype.gotoPage = function(elPageChoose)
{
	if (this.elPageChoose == elPageChoose) return;
	var e = new Object();
	e.end = elPageChoose["indexPage"] * this.viewRecord;
	e.begin = e.end - this.viewRecord + 1;
	this.pagingRecord = { begin : e.begin, end : e.end };
	if (this.elPageChoose != null)
	{
		this.elPageChoose.className = "pageNoChoose";
	}
	this.elPageChoose = elPageChoose;
	this.elPageChoose.className = "pageChoose";
	this.executeEventForPaging(e, EventName.pagingChange);
};

GridViewBTD.prototype.gotoPreviewOrNext = function(isNext)
{
	this.listContainerPages["page" + this.currentIndexContainerPage].className = "containerNoShowPage";
	if (isNext) this.currentIndexContainerPage++;
	else this.currentIndexContainerPage--;
	this.showOrHidePreviewOrNext();
	
	var elNow = this.listContainerPages["page" + this.currentIndexContainerPage];
	if (elNow != null)
	{
		elNow.className = "containerShowPage";
		var elPage = elNow.firstChild;
		if (elPage.tagName.toLowerCase() != "span")
		{
			elPage = elPage.nextSibling;
		}
		this.gotoPage(elPage);
	}
};

GridViewBTD.prototype.gotoPreview = function()
{
	this.gotoPreviewOrNext(false);
};

GridViewBTD.prototype.gotoNext = function()
{
	this.gotoPreviewOrNext(true);
};

GridViewBTD.prototype.setPaging = function(viewRecord, totalRecord, maxPage)
{
	if (!this.isShowPaging) return;
	this.viewRecord = viewRecord;
	this.totalPage = parseInt(totalRecord / this.viewRecord, 10);
	this.totalPage += (totalRecord % this.viewRecord == 0) ? 0 : 1;
	this.pagingRecord = { begin : 1, end : this.viewRecord };
	this.maxPage = (typeof(maxPage) == "undefined") ? this.maxPage : maxPage;
	this.listContainerPages = new Array();
	this.elPageChoose = null;
	this.currentIndexContainerPage = 1;
	
	this.elContainerPagingPreview = null;
	this.elContainerPagingNext = null;
	try
	{
		this.elGridView.tFoot.rows[0].cells[0].innerHTML = "";
		this.elGridView.tFoot.rows[0].cells[0].appendChild(this.getPaging());
		this.showOrHidePreviewOrNext();
	}
	catch (e) { }
};

GridViewBTD.prototype.createElPage = function(elContainerPaging, indexPage, indexContainerPaging)
{
	var self = this;
	var elPage = utilObj.createEl("SPAN");
	elPage["indexPage"] = indexPage;
	elPage.innerHTML = indexPage;
	elContainerPaging.appendChild(elPage);
	
	if (indexPage == 1)
	{
		elPage.className = "pageChoose";
		this.elPageChoose = elPage;
		this.currentIndexContainerPage = indexContainerPaging;
		elContainerPaging.className = "containerShowPage";
	}
	else
	{
		elPage.className = "pageNoChoose";
	}
	utilObj.addEvent(elPage, EventName.click, function(e)
	{
		self.gotoPage(elPage);
	});
};

GridViewBTD.prototype.changePageByIndex = function(indexPage)
{
	this.listContainerPages["page" + this.currentIndexContainerPage].className = "containerNoShowPage";
	var currentIndex = parseInt(indexPage / this.maxPage, 10);
	currentIndex += (indexPage % this.maxPage == 0) ? 0 : 1;
	
	this.currentIndexContainerPage = currentIndex;
	this.showOrHidePreviewOrNext();
	
	var elNow = this.listContainerPages["page" + this.currentIndexContainerPage];
	if (elNow != null)
	{
		elNow.className = "containerShowPage";
		var elPage = null;
		for (var i = 0; i < elNow.childNodes.length; i++)
		{
			elPage = elNow.childNodes[i];
			if (elPage.tagName.toLowerCase() == "span" && elPage["indexPage"] == indexPage)
			{
				break;
			}
		}
		if (elPage != null) this.gotoPage(elPage);
	}
};

GridViewBTD.prototype.textBoxGotoPage_change = function(elTextBox)
{
	elTextBox.value = elTextBox.value.trim();
	var indexPage = parseInt(elTextBox.value, 10);
	if (elTextBox.value == "" || isNaN(elTextBox.value) || 
		(indexPage > this.totalPage) || (indexPage <= 0))
	{
		return;
	}
	
	this.changePageByIndex(indexPage);
};

GridViewBTD.prototype.createTextBoxGotoPage = function(elContainer)
{
	var self = this;
	// Create text paping
	var elSpan = utilObj.createEl("SPAN");
	elSpan.className = "pagingText";
	elSpan.innerHTML = "Tới trang: ";
	elContainer.appendChild(elSpan);
	var elTextBox = utilObj.createEl("INPUT");
	elTextBox.type = "text";
	elTextBox.className = "inputText w30px";
	utilObj.addEvent(elTextBox, EventName.change, function(e)
	{
		self.textBoxGotoPage_change(elTextBox);
	});
	utilObj.addEvent(elTextBox, EventName.focus, function(e)
	{
		elTextBox.select();
	});
	elContainer.appendChild(elTextBox);
};

GridViewBTD.prototype.getPaging = function()
{
	var totalPage = this.totalPage;
	var self = this;
	// Create Element container
	var elContainer = utilObj.createEl("SPAN");
	this.createTextBoxGotoPage(elContainer);
	
	var timeNext = parseInt(totalPage / this.maxPage, 10);
	timeNext += (totalPage % this.maxPage == 0) ? 0 : 1;

	var elContainerPagingPreview = utilObj.createEl("SPAN");
	elContainerPagingPreview.className = "pageNoChoose";
	elContainerPagingPreview.innerHTML = "|&lt;";
	utilObj.addEvent(elContainerPagingPreview, EventName.click, function(e)
	{
		self.gotoPreview();
	});
	elContainer.appendChild(elContainerPagingPreview);
	this.elContainerPagingPreview = elContainerPagingPreview;
	
	for (var j = 1; j <= timeNext; j++)
	{
		var elContainerPaging = utilObj.createEl("SPAN");
		elContainerPaging.className = "containerNoShowPage";
		elContainer.appendChild(elContainerPaging);
		this.listContainerPages["page" + j] = elContainerPaging;
		var max = j * this.maxPage;
		var min = max - this.maxPage + 1;
		max = totalPage <= max ? totalPage : max;
		for (var i = min; i <= max; i++)
		{
			this.createElPage(elContainerPaging, i, j);
		}
	}
	
	var elContainerPagingNext = utilObj.createEl("SPAN");
	elContainerPagingNext.className = "pageNoChoose";
	elContainerPagingNext.innerHTML = "&gt;|";
	utilObj.addEvent(elContainerPagingNext, EventName.click, function(e)
	{
		self.gotoNext();
	});
	elContainer.appendChild(elContainerPagingNext);
	this.elContainerPagingNext = elContainerPagingNext;
	return elContainer; 
};

GridViewBTD.prototype.getBeginAndEndRecord = function()
{
	return this.pagingRecord; 
};
/*****************************************************************************
								Paging function
*****************************************************************************/