Javascript error
<p>I get an error "popup undefined" anyone know why?</p>

<p>here is my code
edit: <a href="http://jsfiddle.net/aDFSR/13/" rel="nofollow">http://jsfiddle.net/aDFSR/13/</a></p>

<p>edit:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.js"&gt;&lt;/script&gt;


 &lt;script type="text/javascript"&gt;

 var popupInstance = null;

 function createCrossBrowserPopup(){
     alert("creating");
     return new _popup();
 }

 function _popup() {
     this.wnd = null;
     this.hiddenFrame = null; //workaround for IE 6 - with divs and select (divs are appearing behind select elements)
     this.showHiddenFrame = showHiddenFrame;
     this.displayPopupContainer = displayPopupContainer;
     this.html = "";
     this.setHTML = _setHTML;
     this.show = _show;
     this.hide = _hide;
     this.triggerElementId = null;
     this.blur = null;
 }

 function _setHTML(html, event) {
     this.html = html;
     if (this.wnd != null) {
         this.wnd.html(this.html);
     }

     if (event != null)
         stopEventPropagation(event, null);
 }

 /// leftOffset: the left offset of the popup
 /// topOffset: the top offset of the popup
 /// width: the width of the popup
 /// height: the height of the popup
 /// element: the element which causes the popup to be opened
 /// event: the event which cased the popup to be opened
 function _show(leftOffset, topOffset, width, height, element, event) {

          // Hide previous popup if existed
     if (popupInstance != null &amp;&amp; element.id != popupInstance.triggerElementId) {
         popupInstance.hide();
         return;
     }

     // if popupInstance != null this means that the same popup was called, makes no sense to create it again
     if (popupInstance == null){
         leftOffset = leftOffset != null ? leftOffset : 0;
         topOffset = topOffset != null ? topOffset : 0;

         this.displayPopupContainer(element, width, height, leftOffset, topOffset);

         //workaround for IE 6 - with divs and select (divs are appearing behind select elements)
         this.showHiddenFrame(element, width, height, leftOffset, topOffset);
         // end of workaround

         setElementsPosition(element, leftOffset, topOffset);

         // save the id, onblur event of the element that fires the popup
         // and also save the instance of this object - for $(document).click and $(window).resize
         this.triggerElementId = element.id;
         this.blur = element.onblur;
         element.onblur = null;
         popupInstance = this;
     }

     stopEventPropagation(event);
 }

 function _hide() {
     $(".modal_popup_container").hide();
     if (this.triggerElementId != null) {
         // Assign  back the blur event (using simple Javascript, not jQuery as it is  causing onblur to be fired 2 times) and reset some variables
         $('#' + this.triggerElementId)[0].onblur = this.blur;
         if ($.isFunction(this.blur)) {
             $('#' + this.triggerElementId)[0].onblur();
         }
         else
         if(typeof(this.blur) == 'string')
         {
             var regex = new RegExp('(?=[\w.])this(?!\w)/g');
             eval(this.blur.replace(regex, '$(\'#' + this.triggerElementId + '\')[0]'));
         }

         // reset variables
         this.triggerElementId = null;
         this.blur = null;
         popupInstance = null;
     }
 }

 function displayPopupContainer(element, width, height, leftOffset, topOffset) {
     if (this.wnd == null) {
         this.wnd = $('&lt;div /&gt;');
         this.wnd.addClass('modal_popup_container');
         this.wnd.css({
                 'position' : 'absolute',
                 'z-index' : '999',
                 'margin' : '0'});
     }

     this.wnd.css({ 'width': width, 'height': height });
     this.wnd.html(this.html);
     this.wnd.show();

     var parentElement = $(element).parent();
     $(parentElement).append(this.wnd);
 }

 function showHiddenFrame(element, width, height, leftOffset, topOffset) {
     if (this.hiddenFrame == null) {
         this.hiddenFrame = $('&lt;iframe /&gt;');
         this.hiddenFrame.addClass('modal_popup_container');

         this.hiddenFrame.attr({
             "src": "javascript:'&amp;lt;html&amp;gt;&amp;lt;/html&amp;gt;';",
             "scrolling": "no",
             "frameborder": 0
         });
         this.hiddenFrame.css({
             "position": "absolute",
             "border": "none",
             "display": "block",
             "z-index": "998",
             "margin": "0"
         });
     }

     this.hiddenFrame.css({ "width": width, "height": height });
     this.hiddenFrame.show();

     var parentElement = $(element).parent();
     $(parentElement).append(this.hiddenFrame);
 }

 function setElementsPosition(element, leftOffset, topOffset) {
     $(".modal_popup_container").position({
         my: "left top",
         at: "left bottom",
         of: $(element),
         offset: leftOffset + " " + topOffset,
         collision: "fit"
     });
 }

 function stopEventPropagation(event)
 {
     // manage FireFox and IE events, check if event was passed, else try and get window.event
     var e = (!event) ? window.event : event;
     // avoid that the current click event propagates up
     if (typeof (e) != "undefined") {
         if (e.stopPropagation)
             e.stopPropagation();
         else e.cancelBubble = true;
     }
 }

 // hide the popup when user clicks outside it
 $(document).click(
     function(event) {
         if ($(event.target).closest('.modal_popup_container').get(0) == null
         &amp;&amp; popupInstance != null) {
             popupInstance.hide();
         }
     });

 $(window).resize(
     function(event) {
         if (popupInstance != null) {
             popupInstance.hide();
         }
     });

 &lt;/script&gt;

 &lt;script language="javascript" type="text/javascript"&gt;

  var popup = createCrossBrowserPopup();
  popup.setHTML("&lt;div style='width:100%; height:100%;
 background-color:#AAFFEE;border-width: 2px; border-color: silver; border-style:
 solid;' onclick='changePopupHTML();'&gt; test &lt;/div&gt;", null);

 function changePopupHTML() {
     popup.setHTML("&lt;div style='width:100%; height:100%; background-color:#AA11EE;border-width: 2px; border-color: silver; border-style: solid;'&gt; test222 &lt;/div&gt;", null);
 }

 &lt;/script
&lt;body&gt;

&lt;input type="text" id="txtExample" onclick="popup.show(25, 0, 100, 50, this, event);" /&gt;

&lt;/body&gt;
&lt;/html&gt;  
</code></pre>
