[dreamcaster]

Here I am. I'm trying to append a tile that was dynamically created by tileSet into a dynamically created tr and table. The tileSet works. Map breaks. Why? :'(

 function map(numCellsX, numCellsY, tileset, mapData)
    {
         this.map = document.createElement('table');
         this.map.style.position = 'absolute';
         this.map.style.top = '0px';
         this.map.style.left = '0px';
         this.tileset = tileset;
         this.row = [];
         this.mapData = mapData;
         this.popMap = function()
                           {
                               this.tileset.makeTiles();
                               alert(this.tileset.tile[3] + 'gyff');
                               var yCount = 0;
                               var xCount = 0;
                               for(i = 0; i <= ((numCellsX * numCellsY) - 1); i++)
                                   {
                                       if (i <= 0)
                                           {
                                               this.row[yCount] = document.createElement('tr'); 
                                           }
                                        
                                       if (xCount >= numCellsX)
                                           {
                                               alert('stage1');
                                               this.map.appendChild(this.row[yCount]);
                                               xCount = 0;
                                               yCount++;
                                               //alert(this.map.row[yCount] + '$$$'); 
                                           }
                                       
                                       this.row[yCount].appendChild(this.tileset.tile[this.mapData[i]]);
                                       //alert(this.row.hasChildNodes()); 
                                       xCount++;
                                   }
                           }
         
        this.showMap = function()
                           {
                               this.popMap();
                               document.getElementById('main').appendChild(this.map);
                           }
    }
function tileSet(imgSrc, numCellsX, numCellsY)
    {
        this.img = [];
        this.tile = [];
        this.makeTiles = function()
            {
                var xCount = 0;
                var yCount = 0; 
                for (i = 0; i <= ((numCellsX * numCellsY) - 1); i++ )
                    { 
                 
                        //alert(xCount);
                        
                         if (xCount >= numCellsX)
                             {
                                 yCount++;
                                 xCount = 0;
                             }
                         
                         this.img[i] = new Image();
                         this.img[i].src = imgSrc;
                         this.img[i].style.position = 'relative';
                         this.img[i].style.left = ((this.img[i].width/numCellsX) * (-xCount)) + 'px';
                         //alert(this.img[i].style.left);
                         this.img[i].style.top = ((this.img[i].height/numCellsY) * (-yCount)) + 'px'; 
                         this.tile[i] = document.createElement('td');
                         this.tile[i].style.width = (this.img[i].width/numCellsX) + 'px';
                         this.tile[i].style.height = (this.img[i].height/numCellsY) + 'px';
                         this.tile[i].style.overflow = 'hidden';
                         this.tile[i].appendChild(this.img[i]);
                         
                         xCount++
                                    }
                             }
    }
 //------once Icall showMap(), it breaks.------
        var out = new tileSet('tiles.png', 16, 12);
        var thing = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 
        var town = new map(3, 3, out, thing);
        town.showMap();