/**
* 	查詢結果表格左右滾動支持腳本，<restable>標簽內部要使用此腳本.
* 頁面上顯示查詢結果的表格有時因為字段過多會顯得很擁擠，采用分幀技術可以讓瀏覽器自動
* 加上滾動條，但分幀會帶來很多麻煩，因此采用了CSS來處理此問題。
* 	目前的解決方法是：查詢結果的所有字段都生成到頁面里，只是某些列的style的display屬性
* 設為none,既不顯示出來。當用戶點擊了向右滾動按鈕時，將最左面一列的display設為none,
* 初始隱藏的第一列顯示出來，這樣就產生了向右"卷滾"了一列的假象。向左滾動也是一樣的原理。
* 	可視的幾列稱為視口(ViewPort)，在視口之外的列display屬性都設為none隱藏起來。視口移
* 動后重新設置列的顯示隱藏屬性
*	有些列要固定，不能隨表格一起滾動。DBGrid的實現機制是將這些列的<td>的id屬性都設為"fix"
* 當顯示或隱藏表格的列時先判斷該單元格的id是否為"fix"，如果是則不動它的display屬性(值為顯示)
* 否則再判斷是否在視口內，顯示不顯示。
*/

/**
* 視口類，表示當前可見的顯示區域，用來控制顯示查詢結果的哪些列.
*/
function ViewPort(){
	this.left = 0;
	this.width = 0;
	this.setLeft = ViewPort_setLeft;
	this.getLeft = ViewPort_getLeft;
	this.setWidth = ViewPort_setWidth;
	this.getWidth = ViewPort_getWidth;
	this.getRight = ViewPort_getRight;
	this.forward = ViewPort_forward;
	this.backward = ViewPort_backward;
	this.isInViewPort = ViewPort_isInViewPort;
}

/**
* 設置視口的左邊界列
* param pos 左邊界
*/
function ViewPort_setLeft(pos){
	this.left = pos;
}

function ViewPort_getLeft(){
	return this.left;
}

/**
* 返回視口的右邊界列
* return 右邊界列
*/
function ViewPort_getRight(){
	return this.left + this.width - 1;
}

/**
* 設置視口的寬度
* @param width 寬多少列
*/
function ViewPort_setWidth(width){
	this.width = width;
}

function ViewPort_getWidth(){
	return this.width;
}

/**
* 視口向右滑動一列
*/
function ViewPort_forward(){
	this.left++;
}

/**
* 視口向左滑動一列
*/
function ViewPort_backward(){
	this.left--;
}

/**
* 判斷某列是否在視口之內
*/
function ViewPort_isInViewPort(col){
	return col >= this.getLeft() && col <= this.getRight();
}

/**
* Grid類，表示頁面上的顯示查詢結果的表格.
* @param tbl 頁面上顯示查詢結果的<table>對象的ID
* @param rows 顯示的列數
*/
function Grid(tbl,cols){
	var count = tbl.rows[0].cells.length;

	//properties
	this.grid = tbl;
	this.viewPort = new ViewPort();

	if(cols == null)
		this.cols = count;
	else
		this.cols = cols;

	this.startCol = 0;
	this.endCol = count - 1;

	//methods
	this.scroll = scroll;
	this.show = show;

	//initialize
	var fixCols = 0;
	//計算顯示的第一列是哪列,并累計固定列數
	while(this.startCol < count &&
		   this.grid.rows[0].cells[this.startCol].id == "fix"){
		this.startCol++;
		fixCols++;
	}

	//計算顯示的最后一列是哪列,并累計固定列數
	while(this.endCol >= this.startCol &&
		   this.grid.rows[0].cells[this.endCol].id == "fix"){
		this.endCol--;
		fixCols++;
	}

	this.viewPort.setLeft(this.startCol);//視口初始位置

	//視口初始寬度
	if(this.cols - fixCols > 0)
		this.viewPort.setWidth(this.cols - fixCols);
	else
		this.viewPort.setWidth(0);

	this.show();
}

/**
* 向左或向右滾動查詢結果表格
* @param direction "left"|"right"
*/
function scroll(direction,num){
	for(i=0;i<num;i++){
	if(direction == "right"){//向右卷一列
		if(this.viewPort.getRight() < this.endCol){
			this.viewPort.forward();
		}
	}else if(direction == "left"){//向左卷一列
		if(this.viewPort.getLeft() > this.startCol){
			this.viewPort.backward();
		}
	}
}
	this.show();
}

/**
* 顯示查詢結果表格，顯示在視口內的列，隱藏之外的列
*/
function show(){
	var x = this.grid.rows.length;
	var y = this.grid.rows[0].cells.length;

	//隱藏在viewPort之外的所有非固定列，顯示在viewPort之內的所有列
	for(var i = 0; i < x; i++){
		for(var j = 0; j < y; j++){
			with(this.grid.rows[i].cells[j]){
				if(id != "fix"){
					if(this.viewPort.isInViewPort(j)){
						style.display = "";
					}else{
						style.display = "none";
					}
				}
			}
		}
	}
}