From: Ben Klang <ben@alkaloid.net>
Date: Mon, 28 Nov 2005 04:30:59 +0000 (+0000)
Subject: Most of the dialplan UI now works!  Lots of visual tweaks still need to happen
X-Git-Url: https://git.internetallee.de/?a=commitdiff_plain;h=b691dfae8aa52eddbdd676a0ce8db665bfc9859e;p=horde.git

Most of the dialplan UI now works!  Lots of visual tweaks still need to happen
to really make it look sharp, but most of the envisioned functionality is in
place.

The ability to save changes it not yet present.

One known bug at this point: Renumbering a priority to an existing priority
seems to work.  However renumbering a priority to an empty slot
results in an empty target (the source prio is not saved).  Not sure why yet...


git-svn-id: https://svn.alkaloid.net/gpl/shout/trunk@97 06cd67b6-e706-0410-b29e-9de616bca6e9
---

diff --git a/andrew.webprj b/andrew.webprj
index 43c40b8a1..3e4f4a22f 100644
--- a/andrew.webprj
+++ b/andrew.webprj
@@ -11,7 +11,7 @@
     <item url="lib/Driver/" uploadstatus="1" />
     <item modified_time="1131765770" url="lib/Driver/ldap.php" uploadstatus="1" />
     <item modified_time="1131497449" url="lib/base.php" uploadstatus="1" />
-    <item modified_time="1132103803" url="lib/Dialplan.php" uploadstatus="1" />
+    <item modified_time="1132126017" url="lib/Dialplan.php" uploadstatus="1" />
     <item modified_time="1130769960" url="lib/Driver.php" uploadstatus="1" />
     <item modified_time="1131864412" url="lib/Shout.php" uploadstatus="1" />
     <item modified_time="1121689003" url="lib/System.php" uploadstatus="1" />
@@ -40,7 +40,7 @@
     <item url="themes/graphics/" uploadstatus="1" />
     <item modified_time="1121581526" url="themes/graphics/add-extension.gif" uploadstatus="1" />
     <item modified_time="1130861777" url="themes/graphics/add-user.gif" uploadstatus="1" />
-    <item modified_time="1131788314" url="themes/screen.css" uploadstatus="1" />
+    <item modified_time="1133149658" url="themes/screen.css" uploadstatus="1" />
     <item url="users/" uploadstatus="1" />
     <item modified_time="1122704539" url="users/add.php" uploadstatus="1" />
     <item modified_time="1122704539" url="users/delete.php" uploadstatus="1" />
@@ -52,7 +52,7 @@
     <item url="" uploadstatus="1" />
     <uploadprofiles showtreeviews="true" defaultProfile="Shout" >
       <profile remote_host="" remote_port="" remote_path="" remote_protocol="ftp" user="" name="@" />
-      <profile remote_host="picasso.v-office.biz" remote_port="22" remote_path="/srv/vhost/users/alkaloid/sites/intranet.v-office.biz/shout" remote_protocol="sftp" user="alkaloid" name="Shout" >
+      <profile remote_host="picasso.v-office.biz" remote_port="22" remote_path="/sites/intranet.v-office.biz/shout" remote_protocol="sftp" user="alkaloid" name="Shout" >
         <uploadeditem upload_time="0" url="config/" />
         <uploadeditem upload_time="1120073766" url="config/conf.xml" />
         <uploadeditem upload_time="1131044239" url="dialplan.php" />
@@ -60,7 +60,7 @@
         <uploadeditem upload_time="1130769960" url="dialplan/edit.php" />
         <uploadeditem upload_time="1131593241" url="index.php" />
         <uploadeditem upload_time="0" url="lib/" />
-        <uploadeditem upload_time="1132103803" url="lib/Dialplan.php" />
+        <uploadeditem upload_time="1132126017" url="lib/Dialplan.php" />
         <uploadeditem upload_time="1130769960" url="lib/Driver.php" />
         <uploadeditem upload_time="0" url="lib/Driver/" />
         <uploadeditem upload_time="1131765770" url="lib/Driver/ldap.php" />
@@ -90,7 +90,7 @@
         <uploadeditem upload_time="1121689030" url="templates/dialplan/priority-form-end.inc" />
         <uploadeditem upload_time="1121689030" url="templates/dialplan/priority-form-line.inc" />
         <uploadeditem upload_time="0" url="templates/javascript/" />
-        <uploadeditem upload_time="1132103877" url="templates/javascript/dialplan.js" />
+        <uploadeditem upload_time="1133151900" url="templates/javascript/dialplan.js" />
         <uploadeditem upload_time="1131772201" url="templates/menu.inc" />
         <uploadeditem upload_time="1121578596" url="templates/table-limiter-begin.inc" />
         <uploadeditem upload_time="1121578596" url="templates/table-limiter-end.inc" />
@@ -100,7 +100,7 @@
         <uploadeditem upload_time="0" url="themes/graphics/" />
         <uploadeditem upload_time="1121581526" url="themes/graphics/add-extension.gif" />
         <uploadeditem upload_time="1130861777" url="themes/graphics/add-user.gif" />
-        <uploadeditem upload_time="1131788314" url="themes/screen.css" />
+        <uploadeditem upload_time="1133149658" url="themes/screen.css" />
         <uploadeditem upload_time="1122704475" url="users.php" />
         <uploadeditem upload_time="0" url="users/" />
         <uploadeditem upload_time="1122704539" url="users/add.php" />
@@ -112,6 +112,11 @@
     <templates>templates/</templates>
     <toolbars>toolbars/</toolbars>
     <item modified_time="1131600576" url="lib/api.php" uploadstatus="1" />
+    <item modified_time="1131045729" url="lib/defines.php" uploadstatus="1" />
+    <item modified_time="1131497712" url="security.php" uploadstatus="1" />
+    <item url="templates/javascript/" uploadstatus="1" />
+    <item modified_time="1133151900" url="templates/javascript/dialplan.js" uploadstatus="1" />
+    <item modified_time="1132102884" url="templates/dialplan/manager.inc" uploadstatus="1" />
     <author>Ben Klang</author>
     <email>ben@alkaloid.net</email>
     <debuggerclient>No Debugger</debuggerclient>
@@ -122,11 +127,6 @@
       <mailinglist address="" />
     </teamdata>
     <events/>
-    <item modified_time="1131045729" url="lib/defines.php" uploadstatus="1" />
-    <item modified_time="1131497712" url="security.php" uploadstatus="1" />
-    <item url="templates/javascript/" uploadstatus="1" />
-    <item modified_time="1132103877" url="templates/javascript/dialplan.js" uploadstatus="1" />
-    <item modified_time="1132102884" url="templates/dialplan/manager.inc" uploadstatus="1" />
     <treestatus>
       <openfolder url="lib" />
       <openfolder url="lib/Driver" />
diff --git a/lib/Dialplan.php b/lib/Dialplan.php
index 26cce25b1..1447f5a86 100644
--- a/lib/Dialplan.php
+++ b/lib/Dialplan.php
@@ -195,7 +195,7 @@ class Shout_Dialplan
             print '//-->'."\n";
             print '</script>'."\n";
 
-            print '<form id="shout_dialplan_'.$this->_instance.'">'."\n";
+            print '<form id="shout_dialplan_form_'.$this->_instance.'" action="#">'."\n";
             print '<div id="extensionDetail">'."\n";
             $e = 0;
             foreach($this->_dialplan['extensions'] as $extension => $priorities) {
diff --git a/templates/javascript/dialplan.js b/templates/javascript/dialplan.js
index c41f3c57c..0b9d2cbf7 100644
--- a/templates/javascript/dialplan.js
+++ b/templates/javascript/dialplan.js
@@ -21,22 +21,16 @@ function Dialplan(instanceName)
     this.dp = eval('shout_dialplan_entry_'+instanceName);
     this.applist = eval('shout_dialplan_applist_'+instanceName);
     this.object = 'shout_dialplan_object_'+instanceName;
-    this.curExten = '';
-    this.curPrio = '';
-    this.dom = new Array(); // Store rendered elements for IE
-    for (var e in this.dp) {
-        this.dom[e] = new Array();
-    }
+    this.curExten = 0;
+    this.curPrio = 0;
+    this.prioActive = false;
 }
 
 Dialplan.prototype.highlightExten = function(exten)
 {
-    this.drawPrioTable(exten);
     if (this.curExten && this.curExten != exten) {
-        this.deactivatePriority();
-
-        document.getElementById('eBox-' + this.curExten).className = 'extensionBox';
-        document.getElementById('pList-' + this.curExten).className = 'pList';
+        this.dehighlightPrio();
+        this.dehighlightExten();
     }
 
     this.curExten = exten;
@@ -44,42 +38,101 @@ Dialplan.prototype.highlightExten = function(exten)
     document.getElementById('pList-' + exten).className = 'pListHighlight';
 }
 
+Dialplan.prototype.dehighlightExten = function(exten)
+{
+    document.getElementById('eBox-' + this.curExten).className = 'extensionBox';
+    document.getElementById('pList-' + this.curExten).className = 'pList';
+    this.curExten = 0;
+}
 
-Dialplan.prototype.activatePriority = function(exten, prio)
+Dialplan.prototype.highlightPrio = function(exten, prio)
 {
-    prio = Number(prio);
-    this.curPrio = Number(this.curPrio);
-    if (prio != this.curPrio || exten != this.curExten) {
-        if (this.curExten) {
-            this.deactivatePriority();
-        }
-        if (exten != this.curExten) {
-            this.highlightExten(exten);
-        }
+    if (exten != this.curExten) {
+        this.highlightExten(exten);
+    }
+    if (this.curPrio && prio != this.curPrio) {
+        this.dehighlightPrio();
+    }
 
-        this.curPrio = prio;
-        this.dom[exten][prio]['priority'].className = 'priorityHighlight';
-        this.dom[exten][prio]['pButtons'].style['visibility'] = 'visible';
+    this.curPrio = prio;
+    priority = document.getElementById('priority-'+exten+'-'+prio);
+    priority.className = 'priorityHighlight';
+    priority.onclick = priority.activate;
+    document.getElementById('pButtons-'+exten+'-'+prio).style['visibility'] = 'visible';
+}
 
-    } else {
-        var form = '';
-        form += '    <span class="priorityBox">';
-        form += '        <input id="p" type="text" size="3" maxlength="3" name="newprio"';
-        form +=              ' value="'+this.curPrio+'" />';
-        form += '    </span>';
-        this.dom[exten][prio]['pBox'].innerHTML = form;
-        this.dom[exten][prio]['pBox'].p.focus;
-        this.dom[exten][prio]['pBox'].p.select;
+Dialplan.prototype.dehighlightPrio = function()
+{
+    this.deactivatePrio();
+    if (!this.curPrio) {
+        return true;
     }
+
+    priority = document.getElementById('priority-'+this.curExten+'-'+this.curPrio);
+    priority.className = 'priority';
+    priority.onclick = priority.highlight;
+    document.getElementById('pButtons-'+this.curExten+'-'+this.curPrio).style['visibility'] = 'hidden';
+    this.curPrio = 0;
+    return true;
 }
 
-Dialplan.prototype.deactivatePriority = function()
+
+Dialplan.prototype.activatePrio = function(exten, prio)
 {
-    if (this.curPrio && document.getElementById('pButtons-'+this.curExten+'-'+this.curPrio)) {
-        this.dom[this.curExten][this.curPrio]['priority'].className = 'priority';
-        this.dom[this.curExten][this.curPrio]['pButtons'].style['visibility'] = 'hidden';
+    document.getElementById('pBox-'+exten+'-'+prio).style['display'] = 'none';
+    document.getElementById('pBoxInput-'+exten+'-'+prio).style['display'] = 'inline';
+    document.getElementById('pApp-'+exten+'-'+prio).style['display'] = 'none';
+    document.getElementById('pAppInput-'+exten+'-'+prio).style['display'] = 'inline';
+    document.getElementById('pArgs-'+exten+'-'+prio).style['display'] = 'none';
+    document.getElementById('pArgsInput-'+exten+'-'+prio).style['display'] = 'inline';
+    this.prioActive = true;
+}
+
+Dialplan.prototype.deactivatePrio = function()
+{
+    if (!this.prioActive) {
+        // Speed hack: If thie priority isn't active, don't go through the
+        // motions to deactivate it.
+        return true;
     }
-    this.curPrio = 0;
+    var dirty = false;
+    var pAppInput = document.getElementById('pAppInput-'+this.curExten+'-'+this.curPrio);
+    var pArgsInput = document.getElementById('pArgsInput-'+this.curExten+'-'+this.curPrio);
+
+    if (pAppInput.value != this.dp[this.curExten]['priorities'][this.curPrio]['application']) {
+        this.dp[this.curExten]['priorities'][this.curPrio]['application'] = pAppInput.value;
+        dirty = true;
+    }
+
+    if (pArgsInput != this.dp[this.curExten]['priorities'][this.curPrio]['args']) {
+        this.dp[this.curExten]['priorities'][this.curPrio]['args'] = pArgsInput.value;
+        dirty = true;
+    }
+
+    // Check to see if the priority number was updated
+    prio = Number(document.getElementById('pBoxInput-'+this.curExten+'-'+this.curPrio).value);
+    if (this.curPrio != prio) {
+        this.renumberPrio(prio);
+        this.curPrio = prio;
+        // Since we've just redrawn the prio table no sense in drawing it again
+        dirty = false;
+    }
+
+    // This test is purely a speed hack.  Redrawing the prio table is slower than simply resetting
+    // the status of the elements.  However if data has changed we are forced to redraw the prio table.
+    if (dirty) {
+        this.drawPrioTable(this.curExten);
+    } else {
+        document.getElementById('pBox-'+this.curExten+'-'+this.curPrio).style['display'] = 'inline';
+        document.getElementById('pBoxInput-'+this.curExten+'-'+this.curPrio).style['display'] = 'none';
+        document.getElementById('pApp-'+this.curExten+'-'+this.curPrio).style['display'] = 'inline';
+        document.getElementById('pAppInput-'+this.curExten+'-'+this.curPrio).style['display'] = 'none';
+        document.getElementById('pArgs-'+this.curExten+'-'+this.curPrio).style['display'] = 'inline';
+        document.getElementById('pArgsInput-'+this.curExten+'-'+this.curPrio).style['display'] = 'none';
+    }
+    this.prioActive = false;
+
+    return true;
 }
 
 Dialplan.prototype.drawPrioTable = function (exten)
@@ -102,20 +155,24 @@ Dialplan.prototype.drawPrioTable = function (exten)
         var priority = document.createElement('div');
         priority.className = 'priority';
         priority.id = 'priority-' + exten + '-' + p;
+        // The next 5 lines are hijinks required to make the highlighting work properly.  We
+        // have to save a reference to this object in the pElement object so we can call back
+        // into the activate/deactivate routines.  We also have to save the prio and exten because
+        // the onclick assignment has to be a function reference which takes no arguments.
+        // See above and below comments disparaging javascript.
+        priority.dp = this;
+        priority.exten = exten;
+        priority.prio = p;
+        priority.highlight = function () { this.dp.highlightPrio(this.exten, this.prio); }
+        priority.activate = function () { this.dp.activatePrio(this.exten, this.prio); }
+        priority.onclick = priority.highlight;
         pList.appendChild(priority);
-        this.dom[exten][p] = new Array();
-        this.dom[exten][p]['priority'] = priority;
 
-//         table += '        <span class="pButtons" id="pButtons-'+exten+'-'+p+'"\n';
-//         table += '            name="pButtons-'+exten+'-'+p+'">\n';
         var pButtons = document.createElement('span');
         pButtons.className = 'pButtons';
         pButtons.id = 'pButtons-' + exten + '-' + p;
         priority.appendChild(pButtons);
-        this.dom[exten][p]['pButtons'] = pButtons;
 
-//         table += '            <span class="add" onclick="javascript:'+this.object+'.addPrio(\''+exten+'\',';
-//         table +=                  ' \''+p+'\');">+</span>\n';
         var button = document.createElement('span');
         button.className = 'add';
         button.id = 'pButton-add-'+exten+'-'+p;
@@ -126,10 +183,7 @@ Dialplan.prototype.drawPrioTable = function (exten)
         button.onclick = button.addPrio;
         button.innerHTML='+';
         pButtons.appendChild(button);
-        this.dom[exten][p]['pButton-add'] = button;
 
-//         table += '            <span class="remove" onclick="javascript:'+this.object+'.delPrio(\''+exten+'\',';
-//         table +=                  ' \''+p+'\');">-</span>\n';
         var button = document.createElement('span');
         button.className = 'remove';
         button.id = 'pButton-del-'+exten+'-'+p;
@@ -140,99 +194,85 @@ Dialplan.prototype.drawPrioTable = function (exten)
         button.onclick = button.delPrio;
         button.innerHTML='-';
         pButtons.appendChild(button);
-        this.dom[exten][p]['pButton-del'] = button;
-
-//         table += '        </span>\n';
 
-//         table += '        <span class="pElement" id="pBox-'+exten+'-'+p+'"\n';
-//         table += '            name="pBox-'+exten+'-'+p+'"\n';
-//         table += '            onclick="javascript:'+this.object+'.activatePriority(\''+exten+'\',';
-//         table +=                  ' \''+p+'\')">\n';
         var pElement = document.createElement('span');
         pElement.className = 'pElement';
-        pElement.id = 'pBox-'+exten+'-'+p;
-        // The next 5 lines are hijinks required to make the highlighting work properly.  We
-        // have to save a reference to this object in the pElement object so we can call back
-        // into the activate/deactivate routines.  We also have to save the prio and exten because
-        // the onclick assignment has to be a function reference which takes no arguments.
-        // See above and below comments disparaging javascript.
-        pElement.dp = this;
-        pElement.exten = exten;
-        pElement.prio = p;
-        pElement.activate = function () { this.dp.activatePriority(this.exten, this.prio); }
-        pElement.onclick = pElement.activate;
         priority.appendChild(pElement);
-        this.dom[exten][p]['pBox'] = pElement;
-
-//         table += '            <span class="priorityBox">'+p+'</span>\n';
-        var priorityBox = document.createElement('span');
-        priorityBox.className = 'priorityBox';
-        priorityBox.innerHTML = p;
-        pElement.appendChild(priorityBox);
 
-//         table += '        </span>\n';
+        var pBox = document.createElement('span');
+        pBox.className = 'pBox';
+        pBox.id = 'pBox-'+exten+'-'+p;
+        pBox.style['display'] = 'inline';
+        pBox.innerHTML = p;
+        pElement.appendChild(pBox);
+
+        var pBoxInput = document.createElement('input');
+        pBoxInput.type = 'text';
+        pBoxInput.size = 3;
+        pBoxInput.id = 'pBoxInput-'+exten+'-'+p;
+        pBoxInput.name = 'pBoxInput-'+exten+'-'+p;
+        pBoxInput.value = p;
+        pBoxInput.maxlength = 3;
+        pBoxInput.style['display'] = 'none';
+        pBoxInput.dp = this;
+        pBoxInput.exten = exten;
+        pBoxInput.prio = p;
+        pBoxInput.onblur = pBoxInput.deactivate;
+        pBoxInput.deactivate = function () { this.dp.deactivatePriority(); }
+        pElement.appendChild(pBoxInput);
 
-//         table += '        <span class="pElement" id="pApp-'+exten+'-'+p+'"\n';
-//         table += '            name="pApp-'+exten+'-'+p+'">\n';
         var pElement = document.createElement('span');
         pElement.className = 'pElement';
-        pElement.id = 'pApp-' + exten + '-' + p;
         priority.appendChild(pElement);
-        this.dom[exten][p]['pApp'] = pElement;
-
-//         table += '            <span class="applicationBox">\n';
-        var applicationBox = document.createElement('span');
-        applicationBox.className = 'applicationBox';
-        applicationBox.id = 'applicationBox-' + exten + '-' + p;
-        pElement.appendChild(applicationBox);
-        this.dom[exten][p]['applicationBox'] = applicationBox;
-
-        var selectHTML = '';
-        selectHTML += '                <select name="app['+exten+']['+p+']"';
-        selectHTML +=                    'onclick="javascript:'+this.object+'.activatePriority(\''+exten+'\', ';
-        selectHTML +=                    '\''+p+'\')">\n';
-        selectHTML += this.genAppList(this.dp[exten]['priorities'][p]['application']);
-        selectHTML += '                </select>\n';
-        applicationBox.innerHTML = selectHTML;
-
-//         table += '            </span>\n';
-//         table += '        </span>\n';
-
-//         table += '        <span class="pElement" id="pArgs-'+exten+'-'+p+'"\n';
-//         table += '            name="pArgs-'+exten+'-'+p+'">\n';
+
+        var pApp = document.createElement('span');
+        pApp.className = 'pApp';
+        pApp.id = 'pApp-' + exten + '-' + p;
+        pApp.style['display'] = 'inline';
+        pElement.appendChild(pApp);
+        pApp.innerHTML = this.dp[exten]['priorities'][p]['application'];
+
+        var pAppInput = document.createElement('select');
+        pAppInput.className = 'pAppInput';
+        pAppInput.id = 'pAppInput-' + exten + '-' + p;
+        pAppInput.name = 'pAppInput-' + exten + '-' + p;
+        pAppInput.style['display'] ='none';
+        pElement.appendChild(pAppInput);
+        this.genAppList(pAppInput, this.dp[exten]['priorities'][p]['application']);
+
         var pElement = document.createElement('span');
         pElement.className = 'pElement';
-        pElement.id = 'pArgs-' + exten + '-' + p;
         priority.appendChild(pElement);
-        this.dom[exten][p]['pArgs'] = pElement;
-
-//         table += '            <span class="argBox" id="args-'+exten+'-'+p+'"\n';
-//         table += '                name="args-'+exten+'-'+p+'">';
-//         table +=                      this.dp[exten]['priorities'][p]['args']+'</span>\n';
-        var argsBox = document.createElement('span');
-        argsBox.className = 'argBox';
-        argsBox.id = 'argsBox-' + exten + '-' + p;
-        argsBox.innerHTML = this.dp[exten]['priorities'][p]['args'];
-        pElement.appendChild(argsBox);
-        this.dom[exten][p]['argsBox'] = argsBox;
-
-//         table += '        </span>\n';
-//         table += '</div>\n';
+
+        var pArgs = document.createElement('span');
+        pArgs.className = 'pArgs';
+        pArgs.id = 'pArgs-' + exten + '-' + p;
+        pArgs.innerHTML = this.dp[exten]['priorities'][p]['args'];
+        pElement.appendChild(pArgs);
+
+        var pArgsInput = document.createElement('input');
+        pArgsInput.className = 'pArgsInput';
+        pArgsInput.id = 'pArgsInput-' + exten + '-' + p;
+        pArgsInput.name = 'pArgsInput-' + exten + '-' + p;
+        pArgsInput.value = this.dp[exten]['priorities'][p]['args'];
+        pArgsInput.style['display'] = 'none';
+        pElement.appendChild(pArgsInput);
     }
-//     document.getElementById('pList-'+exten).innerHTML = table;
+    return true;
 }
 
-Dialplan.prototype.genAppList = function (app)
+Dialplan.prototype.genAppList = function (selectObj, app)
 {
-    var appstring = '';
     for (var a in this.applist) {
-        appstring += '<option value="'+this.applist[a]+'"';
+        var o = document.createElement('option');
+        o.value = this.applist[a];
         if (this.applist[a] == app) {
-            appstring += ' selected';
+            o.selected = true;
         }
-        appstring += '>'+this.applist[a]+'</option>\n';
+        o.innerHTML = this.applist[a];
+        selectObj.appendChild(o);
     }
-    return appstring;
+    return true;
 }
 
 Dialplan.prototype.addExten = function (exten, extenName)
@@ -251,7 +291,13 @@ Dialplan.prototype.addPrio = function(exten, prio)
         var tmp = new Array();
         var plist = new Array();
         var i = 0;
-        var p;
+        var firstEmpty = prio + 1;
+
+        // Locate an empty priority.  We should not increment any priorities past this as
+        // the lower priorities will move to fill this hole.
+        while (this.dp[exten]['priorities'][firstEmpty]) {
+            firstEmpty++;
+        }
 
         for (p in this.dp[exten]['priorities']) {
             p = Number(p);
@@ -261,7 +307,7 @@ Dialplan.prototype.addPrio = function(exten, prio)
             // more information.
             // TODO: Make a decision about whether this is the best way to handle
             // error handling priorities.
-            if (p > prio && (p < prio + 90 || p > prio + 100)) {
+            if (p > prio && (p < prio + 90 || p > prio + 100) && p < firstEmpty) {
                 tmp[p + 1] = this.dp[exten]['priorities'][p];
                 plist[i++] = p + 1;
             } else {
@@ -289,12 +335,19 @@ Dialplan.prototype.addPrio = function(exten, prio)
         }
     }
 
-    this.curPrio = 0;
     this.drawPrioTable(exten);
-    this.activatePriority(exten, prio);
+    this.highlightPrio(exten, prio);
     return true;
 }
 
+Dialplan.prototype.insertPrio = function(exten, prio)
+{
+    // Simple wrapper for addPrio()
+    // Create an empty slot.  Subtract one from the new prio because the
+    // behavior of addPrio is to append to the specified location.
+    return this.addPrio(exten, prio - 1);
+}
+
 Dialplan.prototype.delPrio = function(exten, prio)
 {
     prio = Number(prio);
@@ -347,13 +400,30 @@ Dialplan.prototype.delPrio = function(exten, prio)
     return true;
 }
 
-Dialplan.prototype._numCompare = function(a, b)
+Dialplan.prototype.renumberPrio = function(newPrio)
 {
-    return (a - b);
-}
+    // Copy the old prio to a temporary location for future use
+    var tmp = new Array();
+    var oldPrio = Number(this.curPrio);
+    tmp = this.dp[this.curExten]['priorities'][oldPrio];
+    newPrio = Number(newPrio);
 
-Dialplan.prototype._incrPrio = function (exten, prio)
-{
+    // Empty out the old priority
+    this.delPrio(this.curExten, oldPrio);
+
+    this.insertPrio(this.curExten, newPrio);
+    // Copy the old priority into its new home
+    this.dp[this.curExten]['priorities'][newPrio] = tmp;
+    this.drawPrioTable(this.curExten);
+
+    // Highlight the renumbered priority
+    this.curPrio = newPrio;
+    this.highlightPrio(this.curExten, this.curPrio);
 
     return true;
+}
+
+Dialplan.prototype._numCompare = function(a, b)
+{
+    return (a - b);
 }
\ No newline at end of file
diff --git a/themes/screen.css b/themes/screen.css
index b559a31bf..057a159c8 100644
--- a/themes/screen.css
+++ b/themes/screen.css
@@ -69,7 +69,7 @@ table {
     border: 2px solid #000;
     background: inherit;
     padding: 5px;
-    width: 400px;
+    width: 450px;
 }
 
 #extensionDetail .extensionHighlight {
@@ -126,7 +126,7 @@ table {
     font-color: #000;*/
 }
 
-/*#extensionDetail .pElement {
+#extensionDetail .pElement {
     background: inherit;
     padding: 3px;
 }
@@ -137,9 +137,9 @@ table {
     border-top: 1px solid #000;
     text-decoration: none;
     font-color: #000;
-}*/
+}
 
-#extensionDetail .priorityBox {
+#extensionDetail .pBox {
     background: #fff;
     color: #a22;
     padding: 3px;
@@ -174,6 +174,12 @@ table {
     padding: 1px;
 }
 
+#extensionDetail .pArgs {
+    border: 1px #777 dotted;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
 /*#extensionDetail .pButtonsHighlight {
     visibility: visible;
     background: #ccf;