//---------------------------------
var result;
function bind()
{
	var input={"tablename": {
		  "data": [[1,	"basio"],
			  [2,	"mosta"],
			  [3,	"fo2sh"]]
			}}
			
	result=document.getElementById('result');
	//alert(input["tablename"]["data"][0]);
	var records=input["tablename"]["data"];
	
	
	for ( var i in records )
	{
		result.innerHTML +='<hr/>';
	} 
	
	
}

function CSGridview(params)
{
	
    this.id;
	this.rowsPerPage = 5;
    this.enablePaging = false;
	this.total = 0;
	this.noRecords="no records to show";
	this.noTable="no valid table to show";
	this.rowCSSClass="defaultCSG";
	this.tableCSSClass="CSGTable";
	this.statusHolder;					//in document text to hold current page status, going to page,pending status
	
	//internal data
	this.data=[];
	this.containerDiv;
	this.statusDiv;
	this.dataDiv;
	
	
	//paging properties
	this.dataRetrieverFn="";
	this.curPage=0;		//internal field
	this.goToPage=0;	//keep the next page index to be going to (ethier previous or next)
	this.pending=0;
	this.arrows=true;
	this.numbering=false;
	this.numbersLimit=0;		//limit number of numbers (i.e if numbersLimit=5 then paging view :  1  2  3  4  5  ....)
	this.pagingAreaClass = "CSGpaging";
	this.prevArrowClass = "CSGprev";
	this.nextArrowClass = "CSGnext";
	this.numberingClass = "CSGnumbering";
	this.numberChosenClass = "CSGnumberChosen";
	this.prevArrowText = "السابق";
	this.nextArrowText = "التالى";
	//for image arrows
	this.prevArrowImg = "";
	this.nextArrowImg = "";

	
	
	
	//constructor functionality

	if(params)
	{
	    this.rowsPerPage = params["rowsPerPage"]?params["rowsPerPage"]:5;
	    this.enablePaging = params["enablePaging"]?params["enablePaging"]:true;
		this.total = params["total"]?params["total"]:0;
		this.noRecords=params["noRecords"]?params["noRecords"]:"no records to show";
		this.noTable=params["noTable"]?params["noTable"]:"no valid table to show";
		this.rowCSSClass=params["rowCSSClass"]?params["rowCSSClass"]:"defaultCSG";
		this.tableCSSClass=params["tableCSSClass"]?params["tableCSSClass"]:"CSGTable";
		this.statusHolder=params["statusHolder"]?params["statusHolder"]:"";
		
		//paging properties
		this.dataRetrieverFn=params["dataRetrieverFn"]?params["dataRetrieverFn"]:"";
		this.curPage=params["curPage"]?params["curPage"]:0;	
		this.pending=params["pending"]?params["pending"]:0;
		
		this.arrows=params["arrows"]?params["arrows"]:true;
		this.numbersLimit=params["numbersLimit"]?params["numbersLimit"]:0;
		this.numbering=params["numbering"]?params["numbering"]:false;
		this.pagingAreaClass = params["pagingArea"]?params["pagingArea"]:"CSGpaging";
		this.prevArrowClass = params["prevArrowClass"]?params["prevArrowClass"]:"CSGprev";
		this.nextArrowClass = params["nextArrowClass"]?params["nextArrowClass"]:"CSGnext";
		this.numberingClass = params["numberingClass"]?params["numberingClass"]:"CSGnumbering";
		this.numberChosenClass = params["numberChosenClass"]?params["numberChosenClass"]:"CSGnumberChosen";
		this.prevArrowText = params["prevArrowText"]?params["prevArrowText"]:"السابق";
		this.nextArrowText = params["nextArrowText"]?params["nextArrowText"]:"التالى";
		//for image arrows
		this.prevArrowImg = params["prevArrowImg"]?params["prevArrowImg"]:"";
		this.nextArrowImg = params["nextArrowImg"]?params["nextArrowImg"]:"";

	}
	
	//take data from status holder
	if(this.statusHolder)
	{
		
		var info=document.getElementById(this.statusHolder).value.split(",");
		this.curPage=info[0];
		this.goToPage=info[1];
		this.pending=info[2];
		
		
	
	}
	
	
	this.initUI=function(container)
			{
			
					//create UI
					var _container=document.getElementById(container);
					_container.innerHTML="";
					this.dataDiv=document.createElement("Div");
					this.statusDiv=document.createElement("Div");
					_container.appendChild(this.dataDiv);
					_container.appendChild(this.statusDiv);
					this.containerDiv =_container;
					//-------------
				
			}
	
	this.bindJSON=function(data,container)
				{
		
					this.initUI(container);
					if(!data || !container){
						this.statusDiv.innerHTML=this.noTable;
						return;
					}
					
					
					
					if(!data["tablename"])
					{
						this.statusDiv.innerHTML=this.noTable;
						return;
					}
					var records=data["tablename"]["data"];
					if(!records || records.length==0)
					{
						this.statusDiv.innerHTML=this.noRecords;
						return;					
					}
					
					//start rendering
					this.data=records;
					this.render();
				}

				
	this.bindArray=function(data,container)
				{
		
					this.initUI(container);
					if(!data || !container){
						this.statusDiv.innerHTML=this.noTable;
						return;
					}
					
					
					var records=data;
					if(records.length==0)
					{
						this.statusDiv.innerHTML=this.noRecords;
						return;					
					}
					this.data=records;
					//alert("length:"+this.data.length);
					if(records[records.length-1].search("_total:")!=-1)
					{
						this.total=records[records.length-1].split(":")[1];
						//alert(this.total);
						this.data.length--;
						//alert(this.data.length);
					}
					
					//start rendering
					this.data=records;
					this.render();
					this.renderPaging();
				}

	
	this.render=function()
	{
		//-------------
		//-------------
		//create table for UI
		
		var oTbl=document.createElement("Table");
		oTbl.setAttribute("class",this.tableCSSClass );
       for(i=0;i<this.data.length;i++)
       {
            var  oTR= oTbl.insertRow(i);
			oTR.setAttribute("class",this.rowCSSClass );
			
			//alert(typeof(this.data[i]));
			if(typeof(this.data[i]) == "object")
			{
               for(j=0;j<2;j++)
                {
                    var  oTD= oTR.insertCell(j);
	oTD.setAttribute("class",this.rowCSSClass );					
                    oTD.innerHTML=this.data[i][j];
                }
			}
			else
			{
				var  oTD= oTR.insertCell(0);    
				oTD.setAttribute("class",this.rowCSSClass );  
                			oTD.innerHTML=this.data[i];
			}

		}
		this.dataDiv.appendChild(oTbl);		
	}
	
	this.renderPaging=function()
	{
		if(this.enablePaging == true)
		{
            var oTbl=document.createElement("Table");		//paging table
            oTbl.setAttribute("class",this.pagingAreaClass ); 
			var  oTR= oTbl.insertRow(0);
			if(this.numbering==true && this.arrows==true)
			{
				var  prevCell= oTR.insertCell(0);
				var  pgsCell= oTR.insertCell(1);

				var  nextCell= oTR.insertCell(2);

			}
			else if(this.numbering==true)
			{
				var  pgsCell= oTR.insertCell(0);
			}
			else if(this.arrows==true)
			{
				var  prevCell= oTR.insertCell(0);
				var  nextCell= oTR.insertCell(1);

			}

            if(this.numbering==true)
			{
			    //alert();
			    


				
                var pagecount=Math.ceil(this.total  / this.rowsPerPage);
				if(pagecount > 1)
		        {
                    var line0,line1,line2,onclicktxt;

                    
					//limiting number of viewed pages
					var num_limit;
					if(this.numbersLimit==0)
					{
						num_limit=pagecount;
					}
					else
					{
						num_limit=	this.numbersLimit < pagecount ? this.numbersLimit : pagecount;
					}
					for(var i=0;i<num_limit;i++)
                    {
                    
                        line0="ensurePageRetrieval('"+this.statusHolder+"');";
        				line1="document.getElementById('"+this.statusHolder+"').value='"+this.curPage+","+i+","+"1"+"';";
				        line2=this.dataRetrieverFn+"("+ i*this.rowsPerPage +","+  this.rowsPerPage+");";
				        onclicktxt=line1+line0+line2;
				        if(i==this.curPage)
				        {
                            pgsCell.innerHTML+="<span class=\""+this.numberChosenClass+"\">&nbsp;" + (i+1)+"&nbsp;<span/>";
                        }
                        else
                        {
                            pgsCell.innerHTML+="<input class=\""+this.numberingClass+"\" type=\"button\" onclick=\""+onclicktxt+"\" style=\"background-color:Transparent; border:0;\"  value=\""+ (i+1) +"\" />";
                        }
                    }
					if(this.numbersLimit!=0 && num_limit < pagecount )
					{
						//removed the ... due to change request
						//pgsCell.innerHTML+="   ..."
					}
		        }
			    this.dataDiv.appendChild(oTbl);
			}
			if(this.arrows==true)
			{
				
				
				var line0,line1,line2,onclicktxt;
				line0="ensurePageRetrieval('"+this.statusHolder+"');";
				line1="document.getElementById('"+this.statusHolder+"').value='"+this.curPage+","+(parseInt(this.curPage)-1)+","+"1"+"';";
				line2=this.dataRetrieverFn+"("+ (parseInt(this.curPage)-1)*this.rowsPerPage +","+  this.rowsPerPage+");";
				onclicktxt=line1+line0+line2;
				//prevCell.innerHTML="<a href=\"#\" onclick=\""+onclicktxt+"\">"+this.prevArrowText + "</a>";
				if(this.prevArrowImg=="")
				{
					prevCell.innerHTML="<input type=\"button\" onclick=\""+onclicktxt+"\" style=\"background-color:Transparent; border:0;\"  value=\""+this.prevArrowText +"\" />";
					
				}
				else
				{
					//prevCell.innerHTML="<input type=\"image\" src=\""+this.prevArrowImg +"\" alt=\""+ this.prevArrowText+"\" onclick=\""+onclicktxt+"\" style=\"\" />";
					prevCell.innerHTML="<button style=\"background-color:Transparent; border:0;\" onclick=\""+onclicktxt+"\" ><img src=\""+this.prevArrowImg +"\" alt=\""+ this.prevArrowText+"\"/></button>";
				}

				
				
				line1="document.getElementById('"+this.statusHolder+"').value='"+this.curPage+","+(parseInt(this.curPage)+1)+","+"1"+"';";
				line2=this.dataRetrieverFn+"("+ (parseInt(this.curPage)+1)*this.rowsPerPage +","+  this.rowsPerPage+");";
				onclicktxt=line1+line0+line2;
				//nextCell.innerHTML="<a href=\"#\" onclick=\""+onclicktxt+"\">"+this.nextArrowText + "</a>";

				if(this.nextArrowImg=="")
				{
					nextCell.innerHTML="<input type=\"button\" onclick=\""+onclicktxt+"\" style=\"background-color:Transparent; border:0;\"  value=\""+this.nextArrowText +"\" />";
				}
				else
				{
					//nextCell.innerHTML="<input type=\"image\" src=\""+this.nextArrowImg +"\" alt=\""+ this.nextArrowText+"\" onclick=\""+onclicktxt+"\" style=\"\" />";
					nextCell.innerHTML="<button style=\"background-color:Transparent; border:0;\" onclick=\""+onclicktxt+"\" ><img src=\""+this.nextArrowImg +"\" alt=\""+ this.nextArrowText+"\"/></button>";
				}

				
				this.dataDiv.appendChild(oTbl);
				
				
				//show/hide correct arrow
				var pagecount=Math.ceil(this.total  / this.rowsPerPage);
				// 4/11/2008------addition to limit arrows with numberlimit (if set)
				//limiting number of viewed pages
				var num_limit;
				if(this.numbersLimit==0)
				{
					num_limit=pagecount;
				}
				else
				{
					num_limit=	this.numbersLimit < pagecount ? this.numbersLimit : pagecount;
				}

				
				
				if(num_limit<= 1)
		        {
					prevCell.innerHTML="";
					nextCell.innerHTML="";
		        }
		        else
		        {
		            if(this.curPage == num_limit-1)
		            {

		                nextCell.innerHTML="";
		            }
		            else if(this.curPage == 0)
		            {

		                prevCell.innerHTML="";
		            }
		        
		        }
			}			
		}

	}
	/*
	this.ensurePageRetrieval=function()
	{
		var info=document.getElementById(this.statusHolder).value.split(",");
		info[0]=info[1];	//curpage=gotopage
		this.curPage=info[0];
		this.goToPage=info[1];
		info[2]=0;	//pending status ended
		this.pending=info[2];
		document.getElementById(this.statusHolder).value=info;
		
	}
	*/
	this.getID=function()
	{
		var initial="CSGrid_";
		var id=0;
		while(document.getElementById(initial+id)!=null)
		{
			id++;
		}
		//this.setAttribute("id",initial+id);
		this.id=initial+id;
	}
	
	this.getID();
	
		
}

	function ensurePageRetrieval(statusHolder)
	{
		var info=document.getElementById(statusHolder).value.split(",");
		info[0]=info[1];	//curpage=gotopage
		info[2]=0;	//pending status ended

		document.getElementById(statusHolder).value=info;
		
	}