Problem with ASP Ajax and javascript being used together

Hi,

I have a page that is using an update panel to handle the paging of a datalist of images.
these images are inside a div which is hidden at first but when a "select image" button is clicked the main content div is hidden and the image div is shown.

I have a function called ShowMainDiv() that basically just hides the image div and displays the main div.
I then have a fuction called SelectImage() which fires once an image has been clicked basically to enter the images details into the main content.

The ShowMainDiv() hides the image div perfectly when used as an onclick event of a button but when it is called from the SelectImage() function something weird happens.
Instead of hiding the entire image div it only hides the images (which are inside grey box-like containers) but the rest of the html is still displayed.
If i call the ShowMainDiv() with setTimeout set to 500 milli seconds it works but only about half the time.

I think it is a problem with the simultaneous calling of both the Ajax update panel function and the javvascript function. When i insert breakpoints it shows that the javascript functions run perfectly but the output is different.

//Hides the div with the images and shows the main div
    //The parent page must have a div with id="divMain"
    function ShowMainDiv()
    {
        var divMain = document.getElementById('divMain');
        var divImages = document.getElementById('<%= divImages.ClientID %>');
        divImages.style.display = "none";
        divMain.style.display = "";
    }
 
//Selects the Image and send it's information to the ChangeImage function on the main page
    function SelectImage(imgID, caption, filename, height, width)
    {         
        var txtImgID = document.getElementById('<%= txtImgID.ClientID %>');
        txtImgID.value = imgID;
 
        parent.ChangeImage(imgID, caption, filename, height, width);
        
        ShowMainDiv();
    }
 
//The image div
<div id="divImages" runat="server" style="display:none;">
            <b>Click on an image to select it.</b>
            <br /><br />
        
            <div id="divPgInfo" class="Footerlinks" runat="server" style="float: left; width: 100%;">
                <span>Currently on page <asp:Label ID="lblCurrentPage" runat="server"></asp:Label></span><br />
                <span>Viewing properties <asp:Label ID="lblNumItems" runat="server"></asp:Label></span><br />
                <asp:LinkButton ID="lnkPrev" runat="server" Text="<< previous" 
                    onclick="lnkPrev_Click" CausesValidation="false"></asp:LinkButton>&nbsp
                <asp:LinkButton ID="lnkNext" runat="server" Text="next >>" 
                    onclick="lnkNext_Click" CausesValidation="false"></asp:LinkButton>
            </div>
            <br />
            
            <asp:DataList ID="dtlImages" runat="server" RepeatColumns="3" 
                RepeatDirection="Vertical" onitemdatabound="dtlImages_ItemDataBound">
                <ItemTemplate>
                    <div style="border-style:solid; height:206px; width:206px; background-color:#F1F1F1">
                        <table width="100%" height="100%" onmouseover="this.style.backgroundColor = '#B8B9BD'" 
                            onmouseout="this.style.backgroundColor = '#F1F1F1'">
                            <tr align="center" valign="middle">
                                <td>
                                    <asp:LinkButton ID="lnkSelectImage" runat="server" CssClass="pointer" CausesValidation="false">
                                        <div style="display:none;">
                                            <asp:TextBox ID="txtID" runat="server"></asp:TextBox>
                                            <asp:TextBox ID="txtCaption" runat="server"></asp:TextBox>
                                            <asp:TextBox ID="txtFileName" runat="server"></asp:TextBox>
                                        </div>                                                    
                                        <di:DynamicImage ID="diImage" runat="server" /> 
                                    </asp:LinkButton>
                                </td>
                            </tr>
                        </table>
                    </div>                                                 
                </ItemTemplate>
            </asp:DataList>
            
            <input id="btnBack" type="button" value="Back" onclick="ShowMainDiv()" causesvalidation="false" />
        </div>

Select allOpen in new window