var cellList = new Array();
var rows = 5;
var cols = 20;
    
function buildTable(containerId)
{
    var container = document.getElementById(containerId);        
    var tbl = document.createElement("table");   
       
    var counter = 0;
    
    for(var i=0; i<rows; i++)
    {
        // create row
        var row = tbl.insertRow(i);	
          
        // Create cells
	    for(var j=0; j<cols; j++)
	    {
            var cell = row.insertCell(j);
            cell.setAttribute("class", "cell");
            cell.setAttribute("className", "cell");
            cell.innerHTML = "&nbsp;"     
            
            cell.onclick = function()
                {
                    setActiveCell(this);
                } 
                    
            cell.onmouseover = function()
                {
                    
                }
                
            cell.onmouseout = function()
                {
                    
                }
            
            cellList[counter++] = cell;
        }        
       
    }    
    
    container.appendChild(tbl);
    
}

function redraw()
{    
    var button = document.getElementById("btnRedraw");
    button.disabled = true;
    
    var percentage = parseInt(document.getElementById("txtPercent").value);
    percentage = Math.min(100, percentage);
    percentage = Math.max(0, percentage);
    
    var random = document.getElementById("chkRandom").checked;    
    
    // Clear all items
    for(var i=0; i<rows * cols; i++)
    {
        cellList[i].setAttribute("class", "cell");
        cellList[i].setAttribute("className", "cell");
    }
    
    if(random)
    {
        var Counter = 0;              
        
        while(Counter < percentage)
        {
            var Selected = Math.random();  
            Selected = Math.round(Selected * 100);
            Selected = Math.min(99, Selected);
            Selected = Math.max(0, Selected);            
            
            if(cellList[Selected].getAttribute("class") != "cellsel")
            {
                cellList[Selected].setAttribute("class", "cellsel");
                cellList[Selected].setAttribute("className", "cellsel");
                
                Counter++;                
            }
        }
    }
    else
    {
        for(var i=0; i< (percentage) ; i++)
        {
            cellList[i].setAttribute("class", "cellsel");           
            cellList[i].setAttribute("className", "cellsel");
        }
    }  
    
    button.disabled = false;      
}

function setActiveCell(cell)
{
    for(var i=0; i< 100 ; i++)
    {
        cellList[i].innerHTML = "&nbsp;";
        cellList[i].style.border = "solid 8px #FFFFFF";
    }
      
    if(cell)  
        cell.style.border = "solid 8px #B2B2B2";
}

function erase()
{
    // Clear all items
    for(var i=0; i<rows * cols; i++)
    {
        cellList[i].setAttribute("class", "cell");
        cellList[i].setAttribute("className", "cell");
    }
    
    setActiveCell(null);   
}