diff --git a/livesupport/modules/htmlUI/var/html/ui_browser.php b/livesupport/modules/htmlUI/var/html/ui_browser.php
index 89abce486..1a010f618 100644
--- a/livesupport/modules/htmlUI/var/html/ui_browser.php
+++ b/livesupport/modules/htmlUI/var/html/ui_browser.php
@@ -87,6 +87,10 @@ if (is_array($_REQUEST['popup'])){
                 $Smarty->display('popup/PLAYLIST.confirmRelease.tpl');
             break;
 
+            case "PL.arrangeItems":
+                $Smarty->display('popup/PLAYLIST.arrangeItems.tpl');
+            break;
+
             case "SCHEDULER.addItem":
                 $Smarty->display('popup/SCHEDULER.addItem.tpl');
             break;
diff --git a/livesupport/modules/htmlUI/var/html/ui_handler.php b/livesupport/modules/htmlUI/var/html/ui_handler.php
index fcff72da6..d2f5f85e2 100644
--- a/livesupport/modules/htmlUI/var/html/ui_handler.php
+++ b/livesupport/modules/htmlUI/var/html/ui_handler.php
@@ -231,6 +231,11 @@ switch($_REQUEST['act']){
         $uiHandler->PLAYLIST->setReturn();
     break;
 
+    case "PL.reArrange":
+        $uiHandler->PLAYLIST->reOrder($_REQUEST['pl_items']);
+        $uiHandler->PLAYLIST->setReload();
+    break;
+
     case "PL.editMetaData":
         $uiHandler->PLAYLIST->editMetaData($_REQUEST);
         $uiHandler->SCRATCHPAD->addItem($_REQUEST['id']);
diff --git a/livesupport/modules/htmlUI/var/templates/playlist/editor.tpl b/livesupport/modules/htmlUI/var/templates/playlist/editor.tpl
index a6f351529..55db9d0ea 100755
--- a/livesupport/modules/htmlUI/var/templates/playlist/editor.tpl
+++ b/livesupport/modules/htmlUI/var/templates/playlist/editor.tpl
@@ -1,145 +1,90 @@
-<div class="container_elements" style="width: 607px;">
+<!-- start playlist editor -->
+    <div class="container_elements" style="width: 607px;">
 
-    <div style="width: 574px;">
-       <div style="float: left;"><h1>##Playlist Editor## </h1></div>
-       <div style="float: right;"><h1><a href="{$UI_BROWSER}?act=PL.editMetaData" style="color: #666666">{$PL->title} &nbsp; {getHour time=$PL->duration}##h##&nbsp;{getMinute time=$PL->duration}##m##&nbsp;{getSecond time=$PL->duration}##s##</a></h1></div>
-    </div>
+                <div style="width: 574px;">
+                    <div style="float: left;"><h1>##Playlist Editor## </h1></div>
+                    <div style="float: right;"><h1><a href="{$UI_BROWSER}?act=PL.editMetaData" style="color: #666666">{$PL->title} &nbsp; {getHour time=$PL->duration}##h##&nbsp;{getMinute time=$PL->duration}##m##&nbsp;{getSecond time=$PL->duration}##s##</a></h1></div>
+                </div>
 
-    <div class="head" style="width: 574px;">
-        <div class="left">&nbsp;</div>
-        <div class="right">&nbsp;</div>
-        <div class="clearer">&nbsp;</div>
-    </div>
+                <div class="head" style="width: 574px;">
+                    <div class="left">&nbsp;</div>
+                    <div class="right">&nbsp;</div>
+                    <div class="clearer">&nbsp;</div>
+                </div>
+                <div class="container_table" style="width: 594px;">
+                    <table style="width: 574px;">
+                        <form name="PL">
+                    <!-- start repeat after 14 columns -->
+                        <tr class="blue_head">
+                            <td style="width: 30px"><input type="checkbox" name="all" onClick="collector_switchAll('PL')"></td>
+                                <script type="text/javascript">
+                                    document.forms['PL'].elements['all'].checked = false;
+                                </script>
+                            <td style="width: 200px">##Title##</td>
+                            <td>                     ##Duration##</td>
+                            <td style="width: 200px">##Artist##</td>
+                            <td style="width: 30px;">##Type##</td>
+                            <td style="width: 30px; border: 0">##Move##</td>
+                        </tr>
+                    <!-- end repeat after 14 columns -->
+                    <!-- start item -->
+                    {foreach from=$PL->getFlat($PL->activeId) key='pos' item='i'}
+                        <!-- {$n++} -->
+                        <!-- fade information -->
+                        <tr onClick="return contextmenu('{$i.attrs.id}', {if $n == 1}'PL.changeFadeIn'{else}'PL.changeTransition'{/if})" style="background-color: #bbb">
+                            <td></td>
+                            <td colspan="5" style="border: 0; cursor: pointer">##Fade## {$i.fadein_ms|string_format:"%d"} ms</td>
+                        </tr>
+                        <tr class="{cycle values='blue1, blue2'}">
+                            <td><input type="checkbox" class="checkbox" name="{$i.attrs.id}"/></td>
+                            <td {include file="playlist/actionhandler.tpl"}>{$i.title}</td>
+                            <td {include file="playlist/actionhandler.tpl"} style="text-align: right">
+                                {assign var="_duration" value=$i.duration}{niceTime in=$_duration}
+                            </td>
+                            <td {include file="playlist/actionhandler.tpl"}>{$i.creator}</td>
+                            <td {include file="playlist/actionhandler.tpl"}>
+                                <img src="img/{$i.type}.png" border="0" alt="{$i.type|capitalize}" {include file="sub/mouseover.tpl"} />
+                            </td>
+                            <td style="border: 0">
+                                <a href="#" onClick="hpopup('{$UI_HANDLER}?act=PL.moveItem&id={$i.attrs.id}&pos={$pos-1}')"><img src="img/bt_top_xsm.png"    alt="##move up##" vspace=1 hspace=1/></a>
+                                <a href="#" onClick="hpopup('{$UI_HANDLER}?act=PL.moveItem&id={$i.attrs.id}&pos={$pos+1}')"><img src="img/bt_bottom_xsm.png" alt="##move down##" vspace=1 hspace=1/></a>
+                            </td>
+                        </tr>
+                    {/foreach}
+                        {if $n}
+                        <!-- fade information -->
+                        <tr onClick="return contextmenu('{$i.attrs.id}', {if $n == 1}'PL.changeFadeIn'{else}'PL.changeFadeOut'{/if})" style="background-color: #bbb">
+                            <td></td>
+                            <td colspan="5" style="border: 0; cursor: pointer">##Fade## {$i.fadeout_ms|string_format:"%d"} ms</td>
+                        </tr>
+                        {else}
+                            <tr class="{cycle values='blue1, blue2'}">
+                                <td style="border: 0" colspan="6" align="center">##No Entry##</td>
+                            </tr>
+                        {/if}
+                    <!-- end item -->
+                        </form>
+                    </table>
+                </div>
+                <div class="footer" style="width: 569px;">
+                    <input type="button" class="button_large" onClick="collector_submit('PL', '0&popup[]=PL.changeAllTransitions', '{$UI_BROWSER}', 'chgAllTrans', 400, 150)" value="##Change Fades##" />
+                    <input type="button" class="button_large" onClick="collector_submit('PL', 'PL.removeItem')"   value="##Remove Selected##" />
+                    <input type="button" class="button_large" onClick="collector_clearAll('PL', 'PL.removeItem')" value="##Clear Playlist##" />
+                </div>
+                <div class="container_button">
+                    <input type="button" class="button_large" value="##Save Playlist##"    onClick="hpopup('{$UI_HANDLER}?act=PL.save')">
+                    <input type="button" class="button_large" value="##Revert to Saved##"  onClick="popup('{$UI_BROWSER}?popup[]=PL.confirmRevert',  'PL.revertChanges',  400, 50)">
+                    <input type="button" class="button_large" value="##Delete Playlist##"  onClick="popup('{$UI_BROWSER}?popup[]=PL.confirmDelete',  'PL.deleteActive',   400, 50)">
+                </div>
+                <div class="container_button">
+                    {if $UI_PL_DRAG_ENABLED}
+                        <input type="button" class="button_large" value="##Reorder Playlist##" onClick="popup('{$UI_BROWSER}?popup[]=PL.arrangeItems',   'PL.arrangeItems',   533, 600)">
+                    {/if}
+                    <input type="button" class="button_large" value="##Close Playlist##"   onClick="popup('{$UI_BROWSER}?popup[]=PL.confirmRelease', 'PL.confirmRelease', 400, 50)">
+                    <input type="button" class="button_large" value="##Description##"      onClick="location.href='{$UI_BROWSER}?act=PL.editMetaData'">
+                </div>
+            </div>
 
-<form name="PL" action="{$UI_HANDLER}" method="get">
-    <input type="hidden" name="act" value="PL.reOrder"
+        <!-- end playlist editor -->
 
-    <div class="container_table" style="width: 594px;">
-        <table style="width: 574px;">
-
-        <!-- start repeat after 14 columns -->
-           <tr class="blue_head">
-               <td style="width: 30px"><input type="checkbox" name="all" onClick="collector_switchAll('PL')"></td>
-                   <script type="text/javascript">
-                       document.forms['PL'].elements['all'].checked = false;
-                   </script>
-               <td>##Name##</td>
-               <td style="width: 50px;">##Duration##</td>
-               <td style="width: 200px">##Artist##</td>
-               <td style="width: 35px;">##Type##</td>
-               <td style="width: 35px; border: 0">##Move##</td>
-           </tr>
-        <!-- end repeat after 14 columns -->
-        </table>
-
-
-        <div id="draglist_container">
-
-           {foreach from=$PL->getFlat($PL->activeId) key='pos' item='i'}
-           <!-- start item -->
-           <div style="position: relative; left: 0px; top: 0px;">
-               <!-- {$n++} -->
-
-               <table style="width: 574px;">
-                   <!-- fade information -->
-                   <tr onClick="return contextmenu('{$i.attrs.id}', {if $n == 1}'PL.changeFadeIn'{else}'PL.changeTransition'{/if})" style="background-color: #bbb">
-                      <td style="width: 30px"></td>
-                      <td colspan="5" style="border: 0; cursor: pointer">##Fade## {$i.fadein_ms|string_format:"%d"} ms</td>
-                   </tr>
-                   <!-- end fade information -->
-
-                   <!-- clip information -->
-                   <tr class="{cycle values='blue1, blue2'}">
-                      <td style="width: 30px"><input type="checkbox" class="checkbox" name="{$i.attrs.id}"/></td>
-                      <td {include file="playlist/actionhandler.tpl"}>{$i.title}</td>
-                      <td style="width: 50px;" {include file="playlist/actionhandler.tpl"} style="text-align: right">
-                          {assign var="_duration" value=$i.duration}{niceTime in=$_duration}
-                      </td>
-                      <td style="width: 200px" {include file="playlist/actionhandler.tpl"}>{$i.creator}</td>
-                      <td  style="width: 35px" {include file="playlist/actionhandler.tpl"}>
-                          <img src="img/{$i.type}.png" border="0" alt="{$i.type|capitalize}" {include file="sub/mouseover.tpl"} />
-                      </td>
-                      <td  style="width: 35px; border: 0">
-                          <a href="#" onClick="hpopup('{$UI_HANDLER}?act=PL.moveItem&id={$i.attrs.id}&pos={$pos-1}')"><img src="img/bt_top_xsm.png"    alt="##move up##" vspace=1 hspace=1/></a>
-                          <a href="#" onClick="hpopup('{$UI_HANDLER}?act=PL.moveItem&id={$i.attrs.id}&pos={$pos+1}')"><img src="img/bt_bottom_xsm.png" alt="##move down##" vspace=1 hspace=1/></a>
-                      </td>
-                   </tr>
-                   <!-- end clip information -->
-               </table>
-
-               <input type="hidden" name="pl_items[{$i.attrs.id}]">
-           </div>
-           <!-- end item -->
-           {/foreach}
-        </div>
-
-        <table style="width: 574px;">
-            {if $n}
-                <!-- last item fadeout information -->
-                <tr onClick="return contextmenu('{$i.attrs.id}', {if $n == 1}'PL.changeFadeIn'{else}'PL.changeFadeOut'{/if})" style="background-color: #bbb">
-                   <td style="width: 30px"></td>
-                   <td style="border: 0; cursor: pointer">##Fade## {$i.fadeout_ms|string_format:"%d"} ms</td>
-                </tr>
-            {else}
-                <!-- empty playlist -->
-               <tr class="{cycle values='blue1, blue2'}">
-                   <td style="border: 0" colspan="6" align="center">##No Entry##</td>
-               </tr>
-           {/if}
-
-
-       </table>
-   </div>
-
-   <div class="footer" style="width: 569px;">
-       <input type="button" class="button_large" onClick="collector_submit('PL', '0&popup[]=PL.changeAllTransitions', '{$UI_BROWSER}', 'chgAllTrans', 400, 150)" value="##Change Fades##" />
-       <input type="button" class="button_large" onClick="collector_submit('PL', 'PL.removeItem')"   value="##Remove Selected##" />
-       <input type="button" class="button_large" onClick="collector_clearAll('PL', 'PL.removeItem')" value="##Clear Playlist##" />
-   </div>
-
-   <div class="container_button">
-       <input type="button" class="button_large" value="##Save Playlist##"   onClick="hpopup('{$UI_HANDLER}?act=PL.save')">
-       <input type="button" class="button_large" value="##Revert to Saved##" onClick="popup('{$UI_BROWSER}?popup[]=PL.confirmRevert', 'PL.revertChanges', 400, 50)">
-       <input type="button" class="button_large" value="##Delete Playlist##" onClick="popup('{$UI_BROWSER}?popup[]=PL.confirmDelete', 'PL.deleteActive', 400, 50)">
-   </div>
-
-   <div class="container_button">
-       <INPUT TYPE="button" class="button_large" VALUE="##Save Reorder##"    onClick="javascript:draglist_manager.do_submit('PL','draglist_container')">
-       <input type="button" class="button_large" value="##Close Playlist##"  onClick="popup('{$UI_BROWSER}?popup[]=PL.confirmRelease', 'PL.confirmRelease', 400, 50)">
-       <input type="button" class="button_large" value="##Description##"     onClick="location.href='{$UI_BROWSER}?act=PL.editMetaData'">
-   </div>
-
-</form>
-</div>
-
-{assign var="_duration"    value=null}
-
-<script language="JavaScript" src="assets/dom-drag.js" type="text/javascript"></script>
-<script language="JavaScript" src="assets/draglist.js" type="text/javascript"></script>
-
-<script language="JavaScript">
-
-// a bit ugly. draglist.js assumes the existence of a global
-// dragListIndex array.
-
-var dragListIndex = new Array();
-
-// manager classes.
-
-draglist_manager = new fv_dragList('draglist_container');
-
-// queries all top level <divs> under the draglist_container
-// div and sets up dragging.
-
-draglist_manager.setup();
-
-// queries all top level <span>'s under the draglist_container_horz
-// div and sets up horizontal dragging.
-
-
-// addes the newly created dragList to the list of draglists on
-// the page (i.e. we can have more than one on a page)
-
-addDragList( draglist_manager );
-
-</script>
\ No newline at end of file
+{assign var="_duration"    value=null}
\ No newline at end of file
diff --git a/livesupport/modules/htmlUI/var/templates/playlist/editor_dragitem.tpl b/livesupport/modules/htmlUI/var/templates/playlist/editor_dragitem.tpl
index a6f351529..5d4a07563 100755
--- a/livesupport/modules/htmlUI/var/templates/playlist/editor_dragitem.tpl
+++ b/livesupport/modules/htmlUI/var/templates/playlist/editor_dragitem.tpl
@@ -23,7 +23,7 @@
                    <script type="text/javascript">
                        document.forms['PL'].elements['all'].checked = false;
                    </script>
-               <td>##Name##</td>
+               <td>##Title##</td>
                <td style="width: 50px;">##Duration##</td>
                <td style="width: 200px">##Artist##</td>
                <td style="width: 35px;">##Type##</td>
diff --git a/livesupport/modules/htmlUI/var/templates/popup/PLAYLIST.arrangeItems.tpl b/livesupport/modules/htmlUI/var/templates/popup/PLAYLIST.arrangeItems.tpl
new file mode 100755
index 000000000..368a45083
--- /dev/null
+++ b/livesupport/modules/htmlUI/var/templates/popup/PLAYLIST.arrangeItems.tpl
@@ -0,0 +1,96 @@
+{include file="popup/header.tpl"}
+{include file="script/alttext.js.tpl"}
+
+<div class="container_elements" style="width: 500px">
+    <div>
+        <div style="float: left;"><h1>##Reorder Playlist## </h1></div>
+        <div style="float: right;"><h1>{$PL->title} &nbsp; {getHour time=$PL->duration}##h##&nbsp;{getMinute time=$PL->duration}##m##&nbsp;{getSecond time=$PL->duration}##s##</h1></div>
+    </div>
+
+    <br><br>
+    {$UI_PL_DRAG_INTRO}
+
+    <form name="PL" action="{$UI_HANDLER}">
+        <input type="hidden" name="act" value="PL.reArrange">
+         <div>
+        <table style="width: 500px;">
+           <tr class="blue_head">
+               <td>##Title##</td>
+               <td style="width: 50px;">##Duration##</td>
+               <td style="width: 150px">##Artist##</td>
+               <td style="width: 35px; border:0">##Type##</td>
+           </tr>
+        </table>
+
+          </div>
+        <div id="draglist_container">
+
+           {foreach from=$PL->getFlat($PL->activeId) key='pos' item='i'}
+           <!-- start item -->
+           <div style="position: relative; left: 0px; top: 0px;">
+               <!-- {$n++} -->
+
+               <table style="width: 500px;">
+                   <!-- clip information -->
+                   <tr><td style="border:0" colspan="5"></tr>
+                   <tr class="blue1">
+                      <td>{$i.title}</td>
+                      <td style="width: 50px;">{assign var="_duration" value=$i.duration}{niceTime in=$_duration}</td>
+                      <td style="width: 150px">{$i.creator}</td>
+                      <td style="width: 35px; border:0"><img src="img/{$i.type}.png" border="0" alt="{$i.type|capitalize}" {include file="sub/mouseover.tpl"} /></td>
+                   </tr>
+                   <!-- end clip information -->
+               </table>
+
+               <input type="hidden" name="pl_items[{$i.attrs.id}]">
+           </div>
+           <!-- end item -->
+           {/foreach}
+
+        </div>
+
+        <br>
+
+        <div style="width: 500px;">
+           <div style="float: left;"><input type="button" class="button_large" value="##Cancel##" onClick="window.close()"> </div>
+           <div style="float: right;"><INPUT TYPE="button" class="button_large" VALUE="##Save Reorder##" onClick="javascript:draglist_manager.do_submit('PL','draglist_container')"></div>
+        </div>
+
+    </form>
+    <br>
+</div>
+
+{assign var="_duration"    value=null}
+
+<script language="JavaScript" src="assets/dom-drag.js" type="text/javascript"></script>
+<script language="JavaScript" src="assets/draglist.js" type="text/javascript"></script>
+
+<script language="JavaScript">
+
+// a bit ugly. draglist.js assumes the existence of a global
+// dragListIndex array.
+
+var dragListIndex = new Array();
+
+// manager classes.
+
+draglist_manager = new fv_dragList('draglist_container');
+
+// queries all top level <divs> under the draglist_container
+// div and sets up dragging.
+
+draglist_manager.setup();
+
+// queries all top level <span>'s under the draglist_container_horz
+// div and sets up horizontal dragging.
+
+
+// addes the newly created dragList to the list of draglists on
+// the page (i.e. we can have more than one on a page)
+
+addDragList( draglist_manager );
+
+</script>
+
+</body>
+</html>