var txt="";
var fill="Fill me in...";
var kidCount = 0;
var lastKidCount = 0;
function load()
{
    var childCount = document.getElementById("numKids");
    childCount.addEventListener("change", ShowChildren(childCount.value), false);
}
function Init()
{
    if (document.getElementById("numKids") > 0)
    {
        document.getElementById("submit").enabled=true;
    }
}
    
function ChildString(i, mod)
{
    var myStyle;
    if (mod == 0)
    {
        myStyle = " style='background-color: #f4bc21'";
    }
    else
    {   
        myStyle = " style='background-color: #8ec142'";
    }

    var builtString = "<table align='center' style='width: 600px;' cellpadding='3' cellspacing='0'>" + 
        "<tr" + myStyle + "><td class='style5'>Child Number " + i + "&nbsp;&nbsp;&nbsp;</td><td>&nbsp;</td></tr>" +
        "<tr" + myStyle + "><td class='style4'>Child&#39;s name&nbsp;&nbsp;&nbsp;</td><td><input id='name" + i + "' name='name" + i + "' align='middle' type='text' onclick='ClearMe(this.id)' />&nbsp;*</td></tr>" +
        "<tr" + myStyle + "><td class='style4'>Last grade completed?&nbsp;&nbsp;&nbsp;<br />(<i>birthdate for preschoolers</i>)&nbsp;&nbsp;&nbsp;</td><td><input id='grade" + i + "' name='grade" + i + "' align='middle' type='text' onclick='ClearMe(this.id)' />&nbsp;*</td></tr>" +
        "<tr" + myStyle + "><td class='style4'>Medical and other info&nbsp;&nbsp;&nbsp;<br />we need to know&nbsp;&nbsp;&nbsp;<br />(<i>please include food allergies</i>)&nbsp;&nbsp;&nbsp;</td><td><textarea id='allergy" + i + "' name='allergy" + i + "' rows='3' style='width: 200px'></textarea>&nbsp;</td></tr>" +
        "<tr" + " style='background-color: #FFFFFF'" + "><td class='style4'>&nbsp;</td><td>&nbsp;</td></tr>" +
        "</table>";
    
    return builtString;
}


function ShowChildren(count)
{
    kidCount = count;
    var countI = 0;
    var htmlBuilder;
    
    if (count > 0 && count < 11)
    {
    
        if (lastKidCount != count)
        {
            lastKidCount = count;        
        
        
            document.getElementById('ChildArea').innerHTML = "";
            for (countI = 0; countI < count; countI++)
            {
                htmlBuilder=ChildString(countI + 1, countI%2);
                document.getElementById('ChildArea').innerHTML += htmlBuilder; //countI + 1;
                //document.write(htmlBuilder);
                //document.getElementById('ChildArea').innerHTML = ChildString(countI + 1); //countI + 1;
                //document.getElementById('ChildArea').innerHTML = countI;
                //document.body.appendChild('<p>' & countI & '</p>');
            }
            
            
        }
                
        document.getElementById('submit').disabled=false; 
        document.getElementById('continueText').innerHTML="";            
    }
    else
    {
        lastKidCount = count;
        document.getElementById('ChildArea').innerHTML="";
        document.getElementById('submit').disabled=true;
        document.getElementById('continueText').innerHTML="<-- Select to continue";
    }
}
function VerifyInputs()
{
    var elem = ['parentName', 'homePhone', 'address', 'city', 'state', 'zip', 'contactName1', 'contactPhone1', 'dismissalName', 'photoR','publishR' ];
    var elemFriendly = ['Parents name', 'Home phone number', 'Address', 'City', 'State', 'Zip', 'Contact name #1', 'Contact phone #1', 'Name of person who may pick up your child', 'Can we photograph your child?','Can we use your childs photograph in church publications?' ];
    
    var elemCount = elem.length;
    var kidNum = 0;
    for ( var elemI = 0; elemI < kidCount; elemI++ )
    {
        kidNum = elemI + 1;
        //document.write('name' + kidNum.toString());
    
        elem[(elemI * 3) + elemCount + 0] = 'name' + kidNum.toString();
        elem[(elemI * 3) + elemCount + 1] = 'grade' + kidNum.toString();
        elem[(elemI * 3) + elemCount + 2] = 'shirt' + kidNum.toString();
        
        elemFriendly[(elemI * 3) + elemCount + 0] = 'Name of child #' + kidNum.toString();
        elemFriendly[(elemI * 3) + elemCount + 1] = 'Grade of child #' + kidNum.toString();
        elemFriendly[(elemI * 3) + elemCount + 2] = 'T-shirt size of child #' + kidNum.toString();
        
    }
    var errorStr = "";
    var rads;
    var checkedFound=false;
    for (var printI = 0; printI < elem.length; printI++)
    {
        if (document.getElementById(elem[printI]).type=="text" && (document.getElementById(elem[printI]).value == "" || document.getElementById(elem[printI]).value == fill) )
        {
            errorStr += "\t" + elemFriendly[printI] + " \n";
            document.getElementById(elem[printI]).value = fill;
            
        }
        else if (document.getElementsByName(elem[printI]).length > 1 && document.getElementsByName(elem[printI]).item(0).type=="radio") 
        {
            rads = document.getElementsByName(elem[printI]);
            checkedFound = false;
            for (var radsI = 0; radsI < rads.length; radsI++)
            {
                if (rads.item(radsI).checked)
                {
                    checkedFound = true;
                }
            }
            if (!checkedFound)
            {
                errorStr += "\t" + elemFriendly[printI] + " \n";
            }            
        }             
        //document.write(elem[printI] + '<br />');
    }
    if (errorStr != "")
    {
        alert("You must fill in the following inputs, then click SUBMIT again: \n" + errorStr);
        return false;
    }
    else
    {
        return true;
    }
    

}

function ClearMe(myId)
{
    
    if (document.getElementById(myId).value == fill)
    {
        document.getElementById(myId).value = "";
    }
}