function createDragPanel(url, i)
   {
            //======initialize elements============
            btnClose = document.createElement('div');
            dragDiv = document.createElement('div');
            newDiv = document.createElement('div');
            headDiv = document.createElement('div');
            divContent = document.createElement('div');
            btnClose.setAttribute('id', 'btnClose'+ i);
            dragDiv.setAttribute('id', 'draggable' + i);
            newDiv.setAttribute('id', 'dynamic'+ i);
            dragDiv.setAttribute('style', 'margin: 1em;');
            divContent.setAttribute('id', 'content' + i);
          
            var className;
            if ($.browser.msie) {
                className = "className";
            }
            else {
                className = 'class';
            }
            divContent.setAttribute(className, 'portlet-content');
            headDiv.setAttribute(className, 'portlet-header');
            btnClose.setAttribute(className, 'btnClose');
            newDiv.setAttribute(className, 'portlet');

            dragDiv.setAttribute(className, 'drag');
            btnClose.innerHTML = 'close';
            $(headDiv).append(divContent);
            $(newDiv).append(btnClose);
            $(newDiv).append(headDiv);
            $(dragDiv).append(newDiv);
            $('#form1').append(dragDiv);  // append this as a child of "dynamic"
            $('#draggable' + i).show("slow"); // simple effect
           

            $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
   			.find(".portlet-header")
    				.addClass("ui-widget-header ui-corner-all")
   			.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
    			.end()
   		   .find(".portlet-content");

            $(".portlet-header .ui-icon").click(function() {
                $(this).toggleClass("ui-icon-minusthick");
                $(this).parents(".portlet:first").find(".portlet-content").toggle();
            });
            
            $(dragDiv).draggable({

            cancel: '.portlet-content'
            
        });
            $(btnClose).click(function() {
            $('#draggable' + i).css({}).hide();

        });

        $('#draggable').resizable({

    });

    $("#gridcurrProv").tablesorter({
        sortList: [[0, 1]]
    });
                     
       
       
       setTable(url, divContent.id, dragDiv);   
   }
    function parseToHTML(str) {
        str = str.replace(/&quot;/g, '"');
        str = str.replace(/&amp;/g, "&");
        str = str.replace(/&lt;/g, "<");
        str = str.replace(/&gt;/g, ">");

        return str;
    }
 

    function setTable(url, objID, dragDiv) {
        
        //========Table Traversal============================
        //MOUSE OVER
        $('#gridcurrProv').filter(function() {
            var btn = $(this).find("#img"); // pass parameter here
            //            var coln = $('td').cells[5];

            return $(btn).bind("mouseover",
               function(e) {
                   var height = $(dragDiv).height();
                   var width = $(dragDiv).width();
                   leftVal = e.pageX - (width / 2 - (-150)) + "px";
                   topVal = e.pageY - (height / 2) + "px";
                   setTimeout(function(){$(dragDiv).css({ left: leftVal, top: topVal }).show()}, 2000);

                   //Get UserID and getAjax
                   //var col = $(this).parent().children().index($(this));
                   //                   alert(col);

                   //alert($(col).parent(0).children().index($(this)));//.attr("id"));
                   // alert($(this).parent(0).parent(0).attr("innerHTML"));
                   var selrow = $(this).parent().parent().children()[0];
                  // alert(selrow.innerHTML);

                   var UserID = selrow.innerHTML;

                   getAjax(UserID, objID, url)
               });

        });
        
        //MOUSE OUT
        $('td').filter(function() {
            return $("#img").bind("mouseout",
               function(e) {
                   $(dragDiv).css({ left: leftVal, top: topVal }).hide();
               });


        });
    }

    function getAjax(UserID, objID, url) {
        if ($.browser.msie) {
        }
        else {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead UniversalBrowserWrite");
            netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
        }

        $.ajax({ type: "GET",
            url: url,
            contentType: "application/json; charset=utf-8",
            dataType: "html",
            data: 'UserID=' + UserID,
            success: function(data) {
                var div2 = document.getElementById(objID);
                //Look for javascript urldecoder
//                var result = $.URLDecode(data);
                var result = parseToHTML(data);
                div2.innerHTML = result;
            },
            error: function(xhr) {
                if (xhr.responseText) {
                    alert("Error: " + xhr.responseText);
                }
                else {
                    alert("An Unknown Error was detected.");
                }
                return;
            },
            cache: false
        });
    }

    function createModalPopup() {
        dialogDiv = document.createElement('div');
        dialogDiv.setAttribute('id', 'dialog');
        dialogDiv.setAttribute('title', 'updatePanel');
        dialogDiv.innerHTML = 'Content here';
        $('#form1').append(dialogDiv);

        $.ui.dialog.defaults.bgiframe = true;
        $(function() {
            $("#dialog").dialog();
        });
    
    }