function ShowChildren (specNo, controlID, childRowCount, cellCount, columnCount, tabIndex)
{
    var parentHTML = $('#' + controlID).html();
    var imageControl = $('#' + controlID + '_img');
 
    SetCursorAction ('wait');
    
    // Remove all the rows is currently shown, this is called first due to a bug if user's click too fast & too many times on the row.
    for(var i = 0; i <= childRowCount; i++)
    {
        var currentRowID = specNo + '_child_' + i;

        $('#' + currentRowID).remove();
    }
    
    // If the image is to expand then get the children and change the icon to collapse
    if (imageControl.attr('src') == 'images/expand.gif')
    {
        GetChildrenSpecRows(specNo, controlID, childRowCount, cellCount, columnCount, tabIndex);

        imageControl.attr('src', 'images/collapsed.gif');
    }
    else // Otherwise, reset the icon to expand
    {
        imageControl.attr('src', 'images/expand.gif');
    }
    
    SetCursorAction ('default');
}

function SetCursorAction (cursorAction)
{
    document.body.style.cursor = cursorAction;
}

function GetChildrenSpecRows (specNo, controlID, childRowCount, cellCount, columnCount, tabIndex)
{
    // Ajax to get the children rows, using synchronous calls to remove a bug if the user clicks too quickly several times on the row
    $.ajax({
        type: 'GET',
        url: '/pop/Services/ChildrenSpecDetail.aspx',
        data: 's=' + specNo + '&mn=getchildrenspecs&noheader=1&cc=' + cellCount + '&clmc=' + columnCount + '&t=' + tabIndex,
        dataType: 'text',
        cache: false,
        async: false,
        success: function(childrenRows) {
        
            // Strip out the table tags of the returning data
            var childrenRows = childrenRows.replace('<table id=\"tblChildrenRows\" border=\"0\">', '').replace('</table>', '');
            
            // Add the table rows after the parent spec record
            $('#' + controlID).after(childrenRows);
        },
        error: function(xhr, msg, e) {
            SetCursorAction ('cursor');
        }                
    });
}