[jQuery] Variable Scope

[QuickScriptz]

So I've been over my code again and again and I've scoured through the
Wiki and Help Documentation but I still cannot seem to make it work. I
have a row of icons and the idea is when you mouseover, a popup (<p>)
appears below it and then when you mouseout, it fades again.

I've found the best way to do it is that start with all the popups to
the side of the icons (so you can still hover over the icons and the
popups don't just block your way) and the popups begin as hidden
(opacity: 0). When you mouseover the icons, it sets the "top" and
"left" attribute of the popup to just below the icon and then it
slowly fades the popup from 0 to .7 and then vice versa when mouseout.

So, here is my code. You can view the product at the site below. Any
suggestions?
http://dev.quickscriptz.ca/v4/index.php

<script type="text/javascript"> //<![CDATA[
        $(document).ready(function(){
                // PNG transparency fix
                $(document).pngFix();

                // Basic variables
                var outSpeed = "medium";
                var outOpacity = .7;
                var inSpeed = "fast";
                var inOpacity = 1;

                // Variables for icons & popups
                var nowIcon, nowPopup, topPx, leftPx, topPxH, leftPxH, topPxS,
leftPxS;

                // Loop it five times
                for(var i = 1; i <= 5; i++){

                        // Variable for icon id
                        nowIcon = "#icon" + i;
                        nowPopup = "#popup" + i;

                        // Height from top of icon
                        topPx = $(nowIcon).css("top");
                        leftPx = $(nowIcon).css("left");

                        // Popup hidden position
                        topPxH = topPx - 10;
                        leftPxH = leftPx - 150;

                        // Popup showing position
                        topPxS = topPx + 100;
                        leftPxS = leftPx - 50;

                        // Start by hiding popups
                        $(nowPopup).css({top: topPxH});
                        $(nowPopup).css({left: leftPxH});

                        // Set opacity to zero (invisible)
                        //$(nowPopup).animate({opacity: 0});

                        // Mouse over event
                        $(nowIcon).mouseover(function(){
                                $(this).fadeTo(outSpeed, outOpacity);
                                $(nowPopup).css({top: topPxS});
                                $(nowPopup).css({left: leftPxS});
                                $(nowPopup).fadeTo(outSpeed, outOpacity);
                        })

                        // Mouse out event
                        $(nowIcon).mouseout(function(){
                                $(this).fadeTo(inSpeed, inOpacity);
                                $(nowPopup).fadeTo(inSpeed, 0);
                        })

                }

        })
//]]></script>