Use a jQuery dialog to display the generated query

Signed-off-by: Madhura Jayaratne <madhura.cj@gmail.com>

js/pmd/history.js

@@ -10,6 +10,7 @@
 var history_array = []; // Global array to store history objects
 var select_field = [];  // Global array to store informaation for columns which are used in select clause
 var g_index;
+var vqb_editor;
 
 /**
  * function for panel, hides and shows toggle_container <div>,which is for history elements uses {@link JQuery}.
@@ -621,26 +622,6 @@ function check_rename(id_this)
     return "";
 }
 
-function gradient(id, level)
-{
-    var box = document.getElementById(id);
-    box.style.opacity = level;
-    box.style.MozOpacity = level;
-    box.style.KhtmlOpacity = level;
-    box.style.filter = "alpha(opacity=" + level * 100 + ")";
-    box.style.display = "block";
-}
-
-
-function fadein(id)
-{
-    var level = 0;
-    while (level <= 1) {
-        setTimeout("gradient('" + id + "'," + level + ")", (level * 1000) + 10);
-        level += 0.01;
-    }
-}
-
  /**
   * This function builds from clause of query
   * makes automatic joins.
@@ -771,25 +752,50 @@ function build_query(formtitle, fadin)
     if (query_having() !== "") { q_select += "\nHAVING " + query_having(); }
     if (query_orderby() !== "") { q_select += "\nORDER BY " + query_orderby(); }
     var box = document.getElementById('box');
-    document.getElementById('filter').style.display = 'block';
-    var btitle = document.getElementById('boxtitle');
-    btitle.innerHTML = 'SELECT';//formtitle;
-    if (fadin) {
-        gradient("box", 0);
-        fadein("box");
-    } else {
-        box.style.display = 'block';
-    }
-    document.getElementById('textSqlquery').innerHTML = q_select;
-}
 
-function closebox()
-{
-    document.getElementById('box').style.display = 'none';
-    document.getElementById('filter').style.display = 'none';
+    /**
+     * @var button_options Object containing options
+     *                     for jQueryUI dialog buttons
+     */
+    var button_options = {};
+    button_options[PMA_messages.strClose] = function () {
+        $(this).dialog("close");
+    };
+    button_options[PMA_messages.strGo] = function () {
+        if (vqb_editor) {
+            var $elm = $ajaxDialog.find('textarea');
+            vqb_editor.save();
+            $elm.val(vqb_editor.getValue());
+        }
+        $('#vqb_form').submit();
+    };
+
+    var $ajaxDialog = $(box).dialog({
+        width: 500,
+        buttons: button_options,
+        modal: true,
+        title: 'SELECT'
+    });
+    // Attach syntax highlighted editor to query dialog
+    /**
+     * @var $elm jQuery object containing the reference
+     *           to the query textarea.
+     */
+    var $elm = $ajaxDialog.find('textarea');
+    if (! vqb_editor) {
+        vqb_editor = PMA_getSQLEditor($elm);
+    }
+    if (vqb_editor) {
+        vqb_editor.setValue(q_select);
+        vqb_editor.focus();
+    } else {
+        $elm.val(q_select);
+        $elm.focus();
+    }
 }
 
 AJAX.registerTeardown('pmd/history.js', function () {
+    vqb_editor = null;
     $("#ok_edit_rename").unbind('click');
     $("#ok_edit_having").unbind('click');
     $("#ok_edit_Aggr").unbind('click');

templates/designer/query_details.phtml

@@ -9,19 +9,11 @@
 <a class="trigger" href="#">
     <?php echo __('Active options'); ?>
 </a>
-<div id="filter">
-</div>
 <div id="box">
-    <span id="boxtitle">
-    </span>
-    <form method="post" action="db_qbe.php">
+    <form method="post" action="db_qbe.php" id="vqb_form">
         <textarea cols="80" name="sql_query" id="textSqlquery" rows="15">
         </textarea>
-        <div id="tblfooter">
-            <input type="submit" name="submit_sql" class="btn" />
-            <input type="button" name="cancel" value="<?php echo __('Cancel'); ?>" onclick="closebox()" class="btn" />
-            <?php echo PMA_URL_getHiddenInputs($_GET['db']); ?>
-        </div>
-        <p></p>
+        <input type="hidden" name="submit_sql" value="true">
+        <?php echo PMA_URL_getHiddenInputs($_GET['db']); ?>
     </form>
 </div>

themes/pmahomme/css/pmd.css.php

@@ -497,58 +497,8 @@ h2.active {
     background-color: #DBE4E8;
 }
 
-#filter {
-    display: none;
-    position: absolute;
-    top: 0%;
-    left: 0%;
-    width: 100%;
-    height: 100%;
-    background-color: #CCA;
-    z-index: 10;
-    opacity: .5;
-    filter: alpha(opacity=50);
-}
-
 #box {
     display: none;
-    position: absolute;
-    top: 20%;
-    <?php echo $left; ?>: 30%;
-    width: 500px;
-    height: 220px;
-    padding: 48px;
-    margin: 0;
-    border: 1px solid #000;
-    background-color: #fff;
-    z-index: 101;
-    overflow: visible;
-}
-
-#boxtitle {
-    position: absolute;
-    float: center;
-    top: 0;
-    <?php echo $left; ?>: 0;
-    width: 593px;
-    height: 20px;
-    padding: 0;
-    padding-top: 4px;
-    margin: 0;
-    border-bottom: 4px solid #3CF;
-    background-color: #D0DCE0;
-    color: black;
-    font-weight: bold;
-    padding-<?php echo $left; ?>: 2px;
-    text-align: <?php echo $left; ?>;
-}
-
-#tblfooter {
-    background-color: #D3DCE3;
-    float: <?php echo $right; ?>;
-    padding-top: 10px;
-    color: black;
-    font-weight: normal;
 }
 
 #foreignkeychk {