jqueryUI's dialog box used as a large image privew box with back and next buttons

user clicks a thumbnail image and the large version is opened up in a dialog box.  The dialog box also has a next and previous button so they can navigate to the next large image without closing the box.

Its working fine in IE but not in firefox, the currentIndex value is "not defined" when clicking the next or previous buttons.

Thanks for any help.

**SCRIPTS INCLUDED**
   <script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>" type="text/javascript"></script>
<!-- JQUERY BASE -->
    <script src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
    
    <link href="../../Content/jqueryUI/jquery-ui-1.8.custom.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

**SCRIPT USED**
    $(document).ready(function() {
    
        //VARs TO HANDEL PREVIOUS AND NEXT BUTTON OPERATIONS
        var currentIndex = 0;
        var totalIndex = 0;

        totalIndex = ($("#RecentWinners li img").length - 1);

        //THUMB NAIL IMAGE CLICK, OPEND dialog - SET CURRENT INDEX AND SET LARGE IMAGE PATH
        $("#RecentWinners li img").click(function() {

            var lgImgPath = ($(this).attr("LGsrc"));
            currentIndex = this.index;

            $("#LargeImgPopup").dialog({
                open: function(event, ui) {
                    $('#LargeImg').attr("src", lgImgPath);
                },
                height: 360,
                width: 340,
                closeText: 'test',
                resizable: false,
                title: 'asdf',
                modal: false
            });

        });
        
        //dialog's NEXT BUTTON CLICK - FIND THE NEXT THUMBNAIL IMAGE BASED ON CURRENT INDEX AND CHANGE THE LARGE IMAGE PATH
        $("#NextLargeImage").click(function() {
       // alert(totalIndex);
            currentIndex++;
            if (currentIndex > totalIndex) { currentIndex = 0; }

            var lgImgPath = $("#RecentWinners li img").eq(currentIndex).attr("LGsrc")
            $('#LargeImg').attr("src", lgImgPath);

            //alert(currentIndex);

        });
        //dialog's PREVIOUS BUTTON CLICK - FIND THE PREVIOUS THUMBNAIL IMAGE BASED ON CURRENT INDEX AND CHANGE THE LARGE IMAGE PATH
        $("#PrevLargeImage").click(function() {
            //alert('prev');
            currentIndex--;
            if (currentIndex < 0) { currentIndex = totalIndex; }

            var lgImgPath = $("#RecentWinners li img").eq(currentIndex).attr("LGsrc")
            $('#LargeImg').attr("src", lgImgPath);
            //alert(currentIndex);
        });
    });
**HTML**
<div id="RecentWinners">
<ul>
<%--    CURRENTLY NOT USING THE CUSTOM ATTRIBUTE, "index" BUT MAY NEED TO SO IT'S NOT DELETED YET--%>
    <li><img LGsrc="../../Content/images/icons/Blinklist_24.png" index="0" src="../../Content/images/icons/Blinklist_24.png" /></li>
    <li><img LGsrc="../../Content/images/icons/delicious_24.png" index="1" src="../../Content/images/icons/delicious_24.png" /></li>
    <li><img LGsrc="../../Content/images/icons/Digg_24.png" index="2" src="../../Content/images/icons/Digg_24.png" /></li>
    <li><img LGsrc="../../Content/images/icons/diigo_24.png" index="3" src="../../Content/images/icons/diigo_24.png" /></li>
    <li><img LGsrc="../../Content/images/icons/DZone_24.png" index="4" src="../../Content/images/icons/DZone_24.png" /></li>
    <li><img LGsrc="../../Content/images/icons/Facebook_24.png" index="5" src="../../Content/images/icons/Facebook_24.png" /></li>
    <li><img LGsrc="../../Content/images/icons/letter.png" index="6" src="../../Content/images/icons/letter.png" /></li>
    <li><img LGsrc="../../Content/images/icons/NewsVine_24.png" index="7" src="../../Content/images/icons/NewsVine_24.png" /></li>
    <li><img LGsrc="../../Content/images/icons/Reddit_24.png" index="8" src="../../Content/images/icons/Reddit_24.png" /></li>
</ul>
</div>

<div id="LargeImgPopup" style="height:50px; width:50px;">
    <a href="#"><img id="LargeImg" style="height:50px; width:50px;" /></a>
    <div><a href="#">details</a></div>
    <div id="NextLargeImage">next</div>
    <div id="PrevLargeImage">prev</div>
</div>

Select allOpen in new window