var ex1=new DeepGrid("dgexample1",1,'50%');
      ex1.setWallpaper("images/usaflag1big.jpg");

      ex1.columnheaders.add(null,null,"Area Name",null,190)
      ex1.columnheaders.add(null,null,"Land Area",null,190)

      row=ex1.rowset.add()
      row.cells(1).setValue('UNITED STATES')
      row.cells(2).setValue('3539289')

      row=ex1.rowset.add()
      row.cells(1).setValue('ALABAMA')
      row.cells(2).setValue('50767')

	  row=ex1.rowset.add()
	  row.cells(1).setValue('ALASKA')
	  row.cells(2).setValue('570833')

	  row=ex1.rowset.add()
	  row.cells(1).setValue('ARIZONA')
	  row.cells(2).setValue('113508')

	  row=ex1.rowset.add()
	  row.cells(1).setValue('ARKANSAS')
	  row.cells(2).setValue('52078')

	  row=ex1.rowset.add()
	  row.cells(1).setValue('CALIFORNIA')
	  row.cells(2).setValue('156299')

	  row=ex1.rowset.add()
	  row.cells(1).setValue('COLORADO')
	  row.cells(2).setValue('103595')

	  row=ex1.rowset.add()
	  row.cells(1).setValue('CONNECTICUT')
	  row.cells(2).setValue('4872')

	  row=ex1.rowset.add()
	  row.cells(1).setValue('DELAWARE')
	  row.cells(2).setValue('1932')

	  row=ex1.rowset.add()
	  row.cells(1).setValue('DISTRICT OF COLUMBIA')
	  row.cells(2).setValue('63')

	  row=ex1.rowset.add()
	  row.cells(1).setValue('FLORIDA')
	  row.cells(2).setValue('54153')

	  row=ex1.rowset.add()
	  row.cells(1).setValue('GEORGIA')
	  row.cells(2).setValue('58056')

	  row=ex1.rowset.add()
	  row.cells(1).setValue('HAWAII')
	  row.cells(2).setValue('6425')

	  row=ex1.rowset.add()
	  row.cells(1).setValue('IDAHO')
	  row.cells(2).setValue('82412')

	  row=ex1.rowset.add()
	  row.cells(1).setValue('ILLINOIS')
	  row.cells(2).setValue('55645')
    

     var coin=0

     function TicTac(obj){
		cellObj=ex2.getCell(ex2.getRowNumber(obj),ex2.getColumnNumber(obj))
		imageStr=cellObj.getValue()
		imageStr=imageStr.substring(imageStr.lastIndexOf("/")+1)
		if(imageStr!="space.gif") return;
		if(coin%2==0)
		  placeImg="./images/nought.gif"
		else
		  placeImg="./images/cross.gif"

		cellObj.setValue(placeImg)
		coin++;
     }

     function resetBoard(){
        for(var r=1;r<=3;r++){
          for(var c=1;c<=3;c++){
            ex2.getCell(r,c).setValue("images/space.gif")
          }
        }
     }

	 var ex2=new DeepGrid("dgexample2",1,130);
   	 ex2.ColumnHeaders.setRaised(false)
   	 ex2.setBackgroundColor("khaki")

  	 ex2.columnheaders.add(null,null,"",null,null,null,DG_IMAGE,"images/space.gif",null,"onClick='TicTac(this)'")
  	 ex2.columnheaders.add(null,null,"",null,null,null,DG_IMAGE,"images/space.gif",null,"onClick='TicTac(this)'")
  	 ex2.columnheaders.add(null,null,"",null,null,null,DG_IMAGE,"images/space.gif",null,"onClick='TicTac(this)'")

  	 row=ex2.rowset.add()
  	 row=ex2.rowset.add()
  	 row=ex2.rowset.add()
    

	  function addItem(){
		row=ex3.rowSet.add();
		row.cells(1).setValue("Item " + ex3.getRowCount())
	  }

	  var ex3=new DeepGrid("dgexample3",1,"50%")
	  ex3.setAltColor(true)
	  ex3.ColumnHeaders.setBackgroundColor("#fff0ff")
	  ex3.Footer.setBackgroundColor("#fff0ff")

	  ex3.columnHeaders.add(null,null,"Item Name","./images/item.gif",null,null)
	  ex3.columnHeaders.add(null,null,"Quantity","./images/draw.gif",null,null,DG_NUMERIC,0)

	  row=ex3.rowset.add()
	  row.cells(1).setValue("Item 1")

	  row=ex3.rowset.add()
	  row.cells(1).setValue("Item 2")
    

	 var ex4=new DeepGrid("dgexample4",1)
	 ex4.showGridLines(true)
	 ex4.setForegroundColor("yellow");
	 ex4.setBackgroundImage("./images/bar3.jpg");

	 ex4.ColumnHeaders.add(null,null,"Column 1",null,null,null,DG_TEXT,"1","./images/item.gif")
	 ex4.ColumnHeaders.add(null,null,"Column 2",null,null,null,DG_TEXT,"","./images/item.gif")

	 ex4.RowSet.add().cells(1).setValue(1);
	 ex4.RowSet.add().cells(1).setValue(2);
	 ex4.RowSet.add().cells(1).setValue(3);

     // Code for Controls Box starts here

     function processClick(obj){
       if(obj.value=="Add Column"){
          ex4.columnHeaders.add(ex4_1.getCell(1,2).getValue(),null,"Column " + (ex4.getColumnCount()+1))
       }

       if(obj.value=="Delete Column"){
          ex4.columnHeaders.deleteColumn(ex4_1.getCell(2,2).getValue())
       }

       if(obj.value=="Add Row"){
          ex4.RowSet.add(ex4_1.getCell(3,2).getValue()).cells(1).setValue(ex4.getRowCount())
       }

       if(obj.value=="Delete Row"){
          ex4.Rowset.deleteRow(ex4_1.getCell(4,2).getValue())
       }
     }

     ex4_1=new DeepGrid("dgexample4_1",1)
     ex4_1.ColumnHeaders.setRaised(false)
	 ex4_1.ColumnHeaders.add(null,null,"",null,20,null)
	 ex4_1.ColumnHeaders.add(null,null,"",null,150,null,DG_NUMERIC,1)
	 ex4_1.ColumnHeaders.add(null,null,"",null,150,null,DG_BUTTON,"Click",null,"onClick='processClick(this)'")

	 row=ex4_1.RowSet.add();
	 row.cells(1).setValue("Column at position")
	 row.cells(3).setValue("Add Column")

	 row=ex4_1.RowSet.add();
	 row.cells(1).setValue("Column at position")
	 row.cells(3).setValue("Delete Column")

	 row=ex4_1.RowSet.add();
	 row.cells(1).setValue("Row at position")
	 row.cells(3).setValue("Add Row")

	 row=ex4_1.RowSet.add();
	 row.cells(1).setValue("Row at position")
	 row.cells(3).setValue("Delete Row")

    

     var itemArray=new Array(
                         new Array('Duck','1'),
                         new Array('Fish Bowl','2'),
                         new Array('Flowers','3'),
                         new Array('Jaws','4'),
                         new Array('Snooker Ball','5'),
                         new Array('BasketBall','6')
                         );

     var itemDetails=new Array(
      					 new Array(1,"./images/duck.jpg",5),
      					 new Array(2,"./images/fishbowl.jpg",40),
      					 new Array(3,"./images/flowers.jpg",15),
      					 new Array(4,"./images/jaws.jpg",17),
      					 new Array(5,"./images/snooker.jpg",20),
      					 new Array(6,"./images/basketball.jpg",60)
     				 )


     function setDetails(obj){
        rowN=ex5.getRowNumber(obj)
        colN=ex5.getColumnNumber(obj)
        ex5.getCell(rowN,2).setValue(itemDetails[obj.selectedIndex][1])
        ex5.getCell(rowN,3).setValue(itemDetails[obj.selectedIndex][2])

     }

     function calculateAmount(){
        total=0;
        for(var i=1;i<=ex5.getRowCount();i++){
          total += ex5.getCell(i,3).getValue() * ex5.getCell(i,4).getValue()
        }
        document.all.totalcost.value=total
     }

     function removeRows(){
        for(var i=ex5.getRowCount();i>=1;i--){
          if(ex5.getCell(i,5).getValue()==true)  ex5.RowSet.deleteRow(i)
        }
        calculateAmount()
	 }

	 var ex5=new DeepGrid("dgexample5",1,"70%")

	 ex5.ColumnHeaders.setBackgroundColor("#68A366");

	 ex5.ColumnHeaders.add(null,null,"Item",null,null,null,DG_SELECT,itemArray,null,"onChange='setDetails(this);calculateAmount()'")
	 ex5.ColumnHeaders.add(null,null,"Preview",null,null,null,DG_IMAGE,"./images/duck.jpg")
	 ex5.ColumnHeaders.add(null,null,"Cost",null,null,null,DG_READONLY,"5")
	 ex5.ColumnHeaders.add(null,null,"Quantity",null,null,null,DG_NUMERIC,"0",null,"onKeyUp='calculateAmount()'")
	 ex5.ColumnHeaders.add(null,null,"Remove",null,100,null,DG_BOOLEAN)

	 ex5.RowSet.add()
	 ex5.RowSet.add()
	 ex5.RowSet.add()

    

    function showFavourites(){
	   msgStr="So you like ";
	   favStr="";
	   favStr += (ex6.getCell(1,2).getValue()!=null)?"\n " +ex6.getCell(1,2).getValue():""
	   favStr += (ex6.getCell(2,2).getValue()!=null)?"\n " +ex6.getCell(2,2).getValue():""
	   favStr += (ex6.getCell(3,2).getValue()!=null)?"\n " +ex6.getCell(3,2).getValue():""
	   if(favStr=="") msgStr="Too bad!! You dont like fruits!!!"
	   alert(msgStr + favStr)
    }

 	var ex6=new DeepGrid("dgexample6",0,"50%")
 	ex6.ColumnHeaders.add(null,null,"Options",null,100)
 	ex6.ColumnHeaders.add(null,null,null,null,30,null,DG_CHECKBOX)

 	row=ex6.RowSet.add()
 	row.cells(1).setValue("Apple")
 	row.cells(1).setIcon("./images/apple.jpg");
 	row.cells(2).setValue(['false','Apple'])

 	row=ex6.RowSet.add()
 	row.cells(1).setValue("Kiwi Fruit")
 	row.cells(1).setIcon("./images/kiwi.jpg");
 	row.cells(2).setValue(['false','Kiwi Fruit'])

 	row=ex6.RowSet.add()
 	row.cells(1).setValue("Plantain")
 	row.cells(1).setIcon("./images/corn.jpg");
 	row.cells(2).setValue(['false','Plaintain'])
    

    function isSupported(){
		if(ex7.getCell(1,1).getValue()=='Yes')
		  alert("I like your optimism but Deepgrid is currently only supported on Internet Explorer 5.0 and above. \nI am exploring all possibilities to make it cross-browser functional")
		else
		  alert("Deepgrid is currently only supported on Internet Explorer 5.0 and above. \nI am exploring all possibilities to make it cross-browser functional")
    }

 	var ex7=new DeepGrid("dgexample7",0,"50%")
 	ex7.ColumnHeaders.setRaised(false)

 	ex7.ColumnHeaders.add(null,null,null,null,30,null,DG_RADIO)

 	row=ex7.RowSet.add()
 	row.cells(1).setValue(['false','Yes','Yes'])

 	row=ex7.RowSet.add()
 	row.cells(1).setValue(['true','No','No'])
    

 	var ex8=new DeepGrid("dgexample8",0,"60%")
 	ex8.ColumnHeaders.setRaised(false)
 	ex8.RowSet.setBackgroundColor("LavenderBlush")

 	ex8.ColumnHeaders.add(null,null,null,null,30,null,DG_LABEL,"User Name : ")
 	ex8.ColumnHeaders.add(null,null,null,null,30,null,DG_TEXT)
 	ex8.ColumnHeaders.add(null,null,null,null,30,null,DG_LABEL,"Password : ")
 	ex8.ColumnHeaders.add(null,null,null,null,30,null,DG_PASSWORD)
 	ex8.ColumnHeaders.add(null,null,null,null,30,null,DG_SUBMIT,"Login")

 	row=ex8.RowSet.add()