For yellowled: Remove this strange cloning dependency, port it to jquery.

Also remove as much inline JS as possible and move it into serendipity_editor.js
Got rid of category_selector JS file, as I prefer the single serendipity_editor.js file

NOTE: Those changes will need to be ported/merged into the 2k11 style, I think?

serendipity_editor.js

@@ -398,4 +398,249 @@ function serendipity_imageSelector_done(textarea)
     parent.self.close();
 }
 
+function toggle_extended(setCookie) {
+    var textarea = document.getElementById('serendipity[extended]');
+    var button   = document.getElementById('option_extended');
+    var tools    = document.getElementById('tools_extended');
+    if ( textarea.style.display == 'none' ) {
+        textarea.style.display = '';
+        tools.style.display = '';
+        button.src = minus_img;
+        if (setCookie == true) {
+            document.cookie = 'serendipity[toggle_extended]=true;';
+        }
+    } else {
+        textarea.style.display = 'none';
+        tools.style.display = 'none';
+        button.src = plus_img;
+        if (setCookie == true) {
+            document.cookie = 'serendipity[toggle_extended]=;';
+        }
+    }
+}
+
+var selector_toggle = new Array();
+function showItem(id) {
+    var selected = 0;
+    if (typeof(id) == 'undefined' || typeof(id) == 'object') {
+        id = 'categoryselector';
+    }
+
+    if (document.getElementById) {
+        el = document.getElementById(id);
+        if (selector_toggle[id] && selector_toggle[id] == 'off') {
+            selector_restore[id] = new Array();
+            selector_toggle[id]  = 'on';
+
+            /* Hack to make sure that when the single dropdown is shown, don't have multiple selections */
+            last = 0;
+
+            for (i=0; i < el.options.length; i++) {
+                if (el.options[i].selected == true) {
+                    selected++;
+                    last = i;
+                    selector_restore[id][last] = 'on';
+                }
+
+                if (selected > 1) {
+                    /* If there is more than one selected, we reset all those to false
+                       This is because otherwise the label will say 'No Category', but the categories will still be selected */
+                    for (j=0; j < el.options.length; j++) {
+                        /* Save selection in array to later restore them */
+                        if (el.options[j].selected == true) {
+                            el.options[j].selected = false;
+                            selector_restore[id][j] = 'on';
+                            last = j;
+                        } else {
+                            selector_restore[id][j] = false;
+                        }
+                    }
+                    break;
+                }
+            }
+
+            el.selectedIndex = null;
+            if (last > 0) {
+                el.selectedIndex = last;
+            }
+
+            el.size = 1;
+
+            /* Show a normal dropdown */
+            if (el.multiple) {
+                el.multiple = false;
+            }
+
+            document.getElementById('option_' + id).src = plus_img;
+        } else {
+            selector_store[id] = el.size;
+            if (selector_store[id] == 0) {
+                selector_store[id] = 5;
+            }
+
+            last = 0;
+            if (el.selectedIndex > 0) {
+                if (!selector_restore[id]) {
+                    selector_restore[id] = new Array();
+                }
+
+                for (j=0; j < el.options.length; j++) {
+                    /* Save selection in array to later restore them */
+                    if (el.options[j].selected == true) {
+                        selector_restore[id][j] = 'on';
+                        last = j;
+                    }
+                }
+            }
+            el.selectedIndex = -1;
+            el.size = cat_count;
+            selector_toggle[id] = 'off';
+
+            /* Show multiple items */
+            el.multiple = true;
+
+            /* Restore previously selected items? */
+            last = 0;
+            for (i = 0; i < el.options.length; i++) {
+                if (selector_restore && selector_restore[id] && selector_restore[id][i] && selector_restore[id][i] == 'on') {
+                    val = el.options[i].value;
+                    if (el.options[i].selected != true) {
+                        el.options[i].selected = true;
+                        last = i;
+                        // [TODO] IE Bug: Don't ask me why, but this restoring only works in Internet Explorer if you put this:
+                        // alert('it doesnt matter what, just the alert is important');
+                    }
+                }
+            }
+
+            document.getElementById('option_' + id).src = minus_img;
+        }
+    }
+}
+
+function rememberMediaOptions() {
+    el = document.getElementById('imageForm');
+    for (i = 0; i < el.elements.length; i++) {
+        elname = new String(el.elements[i].name);
+        elname = elname.replace(/\[/g, '_');
+        elname = elname.replace(/\]/g, '');
+
+        if (el.elements[i].type == 'radio') {
+            if (el.elements[i].checked) {
+                SetCookie(elname, el.elements[i].value);
+            }
+        } else if (typeof(el.elements[i].options) == 'object') {
+            SetCookie(elname, el.elements[i].options[el.elements[i].selectedIndex].value);
+        }
+    }
+}
+
+function rename(id, fname) {
+    if (newname = prompt('{$CONST.ENTER_NEW_NAME}' + fname, fname)) {
+        newloc = '?{$media.token_url}&serendipity[adminModule]=images&serendipity[adminAction]=rename&serendipity[fid]='+ escape(id) + '&serendipity[newname]='+ escape(newname);
+        location.href=newloc;
+    }
+}
+
+var tree_toggle_state = 'expand';
+function treeToggleAll() {
+    if (tree_toggle_state == 'expand') {
+        tree_toggle_state = 'collapse';
+        tree.expandAll();
+    } else {
+        tree_toggle_state = 'expand';
+        tree.collapseAll();
+        coreNode.expand();
+    }
+}
+
+function getfilename(value) {
+    re = /^.+[\/\\]+?(.+)$/;
+    return value.replace(re, "$1");
+}
+
+isFileUpload = true;
+function hideForeign() {
+    document.getElementById('foreign_upload').style.display = 'none';
+    document.getElementById('imageurl').value = '';
+    isFileUpload = false;
+}
+
+function rememberUploadOptions() {
+    td     = document.getElementById('target_directory_2');
+    td_val = td.options[td.selectedIndex].value;
+    SetCookie("addmedia_directory", td_val);
+}
+
+var upload_fieldcount = 1;
+function addUploadField() {
+    upload_fieldcount++;
+
+    fields = jQuery('#upload_template').clone();
+    fields.attr('id', 'upload_form_' + upload_fieldcount);
+    fields.css('display', 'block');
+
+    userfile       = jQuery('.uploadform_userfile',         fields);
+    targetfilename = jQuery('.uploadform_target_filename',  fields);
+    targetdir      = jQuery('.uploadform_target_directory', fields);
+    columncount    = jQuery('.uploadform_column_count',     fields);
+
+    userfile.attr('id', 'userfile_' + upload_fieldcount);
+    userfile.attr('name', 'serendipity[userfile][' + upload_fieldcount + ']');
+
+    targetfilename.attr('id', 'target_filename_' + upload_fieldcount);
+    targetfilename.attr('name', 'serendipity[target_filename][' + upload_fieldcount + ']');
+
+    targetdir.attr('id', 'target_directory_' + upload_fieldcount);
+    targetdir.attr('name', 'serendipity[target_directory][' + upload_fieldcount + ']');
+
+    columncount.attr('id', 'column_count_' + upload_fieldcount);
+    columncount.attr('name', 'serendipity[column_count][' + upload_fieldcount + ']');
+
+    fields.insertBefore('#upload_form');
+
+    document.getElementById(targetdir.attr('id')).selectedIndex = document.getElementById('target_directory_' + (upload_fieldcount - 1)).selectedIndex;
+}
+
+var inputStorage = new Array();
+function checkInputs() {
+    for (i = 1; i <= upload_fieldcount; i++) {
+        if (!inputStorage[i]) {
+            fillInput(i, i);
+        } else if (inputStorage[i] == document.getElementById('target_filename_' + i).value) {
+            fillInput(i, i);
+        }
+    }
+
+}
+
+function fillInput(source, target) {
+    useDuplicate = false;
+
+    // First field is a special value for foreign URLs instead of uploaded files
+    if (source == 1 && document.getElementById('imageurl').value != "") {
+        sourceval = getfilename(document.getElementById('imageurl').value);
+        useDuplicate = true;
+    } else {
+        sourceval = getfilename(document.getElementById('userfile_' + source).value);
+    }
+
+    if (sourceval.length > 0) {
+        document.getElementById('target_filename_' + target).value = sourceval;
+        inputStorage[target] = sourceval;
+    }
+
+    // Display filename in duplicate form as well!
+    if (useDuplicate) {
+        tkey = target + 1;
+
+        if (!inputStorage[tkey] || inputStorage[tkey] == document.getElementById('target_filename_' + tkey).value) {
+            document.getElementById('target_filename_' + (target+1)).value = sourceval;
+            inputStorage[target + 1] = '~~~';
+        }
+    }
+}
+
+
+
 // -->

templates/default/admin/category_selector.js

@@ -1,118 +0,0 @@
-function toggle_extended(setCookie) {
-    var textarea = document.getElementById('serendipity[extended]');
-    var button   = document.getElementById('option_extended');
-    var tools    = document.getElementById('tools_extended');
-    if ( textarea.style.display == 'none' ) {
-        textarea.style.display = '';
-        tools.style.display = '';
-        button.src = minus_img;
-        if (setCookie == true) {
-            document.cookie = 'serendipity[toggle_extended]=true;';
-        }
-    } else {
-        textarea.style.display = 'none';
-        tools.style.display = 'none';
-        button.src = plus_img;
-        if (setCookie == true) {
-            document.cookie = 'serendipity[toggle_extended]=;';
-        }
-    }
-}
-
-function showItem(id) {
-    var selected = 0;
-    if (typeof(id) == 'undefined' || typeof(id) == 'object') {
-        id = 'categoryselector';
-    }
-
-    if (document.getElementById) {
-        el = document.getElementById(id);
-        if (selector_toggle[id] && selector_toggle[id] == 'off') {
-            selector_restore[id] = new Array();
-            selector_toggle[id]  = 'on';
-
-            /* Hack to make sure that when the single dropdown is shown, don't have multiple selections */
-            last = 0;
-
-            for (i=0; i < el.options.length; i++) {
-                if (el.options[i].selected == true) {
-                    selected++;
-                    last = i;
-                    selector_restore[id][last] = 'on';
-                }
-
-                if (selected > 1) {
-                    /* If there is more than one selected, we reset all those to false
-                       This is because otherwise the label will say 'No Category', but the categories will still be selected */
-                    for (j=0; j < el.options.length; j++) {
-                        /* Save selection in array to later restore them */
-                        if (el.options[j].selected == true) {
-                            el.options[j].selected = false;
-                            selector_restore[id][j] = 'on';
-                            last = j;
-                        } else {
-                            selector_restore[id][j] = false;
-                        }
-                    }
-                    break;
-                }
-            }
-
-            el.selectedIndex = null;
-            if (last > 0) {
-                el.selectedIndex = last;
-            }
-
-            el.size = 1;
-
-            /* Show a normal dropdown */
-            if (el.multiple) {
-                el.multiple = false;
-            }
-
-            document.getElementById('option_' + id).src = plus_img;
-        } else {
-            selector_store[id] = el.size;
-            if (selector_store[id] == 0) {
-                selector_store[id] = 5;
-            }
-
-            last = 0;
-            if (el.selectedIndex > 0) {
-                if (!selector_restore[id]) {
-                    selector_restore[id] = new Array();
-                }
-
-                for (j=0; j < el.options.length; j++) {
-                    /* Save selection in array to later restore them */
-                    if (el.options[j].selected == true) {
-                        selector_restore[id][j] = 'on';
-                        last = j;
-                    }
-                }
-            }
-            el.selectedIndex = -1;
-            el.size = cat_count;
-            selector_toggle[id] = 'off';
-
-            /* Show multiple items */
-            el.multiple = true;
-
-            /* Restore previously selected items? */
-            last = 0;
-            for (i = 0; i < el.options.length; i++) {
-                if (selector_restore && selector_restore[id] && selector_restore[id][i] && selector_restore[id][i] == 'on') {
-                    val = el.options[i].value;
-                    if (el.options[i].selected != true) {
-                        el.options[i].selected = true;
-                        last = i;
-                        // [TODO] IE Bug: Don't ask me why, but this restoring only works in Internet Explorer if you put this:
-                        // alert('it doesnt matter what, just the alert is important');
-                    }
-                }
-            }
-
-            document.getElementById('option_' + id).src = minus_img;
-        }
-    }
-}

templates/default/admin/entries.tpl

@@ -1,3 +1,6 @@
+<script type="text/javascript" language="JavaScript" src="serendipity_define.js.php"></script>
+<script type="text/javascript" language="JavaScript" src="serendipity_editor.js"></script>
+
 <!-- ADMIN-ENTRY TEMPLATE: entries.tpl START -->
 {*** POSSIBLE ERROR MESSAGES START ***}
 {if $entry_vars.errMsg}
@@ -73,7 +76,6 @@
 
             selector_toggle['categoryselector'] = '{$entry_vars.cat_state}';
             </script>
-            <script type="text/javascript" language="JavaScript" src="{serendipity_getFile file='admin/category_selector.js'}"></script>
             <script type="text/javascript" language="JavaScript">
              addLoadEvent(showItem);
             </script>
@@ -227,6 +229,4 @@
 {/if}
 {*** SPAWN WYSIWYG EDITORS END ***}
 
-<script type="text/javascript" language="JavaScript" src="serendipity_define.js.php"></script>
-<script type="text/javascript" language="JavaScript" src="serendipity_editor.js"></script>
 <!-- ADMIN-ENTRY TEMPLATE: entries.tpl END -->

templates/default/admin/media_choose.tpl

@@ -43,8 +43,6 @@
             position:                    relative;
             display:                     block;
         {rdelim}
-
-
         </style>
         <script type="text/javascript" src="{serendipity_getFile file='dragdrop.js'}" ></script>
         <script type="text/javascript" src="{serendipity_getFile file='imgedit.js'}" ></script>
@@ -52,45 +50,16 @@
 
         <script type="text/javascript" src="{serendipity_getFile file='YahooUI/treeview/YAHOO.js'}"></script>
         <script type="text/javascript" src="{serendipity_getFile file='YahooUI/treeview/treeview.js'}"></script>
+
+        <script src="{serendipity_getFile file='admin/header_spawn.js'}"></script>
+        <script type="text/javascript" language="JavaScript" src="{$serendipityHTTPPath}serendipity_define.js.php"></script>
+        <script type="text/javascript" language="Javascript" src="{$serendipityHTTPPath}serendipity_editor.js"></script>
+
+        {serendipity_hookPlugin hook="backend_header" hookAll="true"}
+script>
     </head>
 
     <script type="text/javascript">
-        function addLoadEvent(func) {ldelim}
-          var oldonload = window.onload;
-          if (typeof window.onload != 'function') {ldelim}
-            window.onload = func;
-          {rdelim} else {ldelim}
-            window.onload = function() {ldelim}
-              oldonload();
-              func();
-            {rdelim}
-          {rdelim}
-        {rdelim}
-
-        function SetCookie(name, value) {ldelim}
-            var today  = new Date();
-            var expire = new Date();
-            expire.setTime(today.getTime() + (60*60*24*30*1000));
-            document.cookie = 'serendipity[' + name + ']='+escape(value) + ';expires=' + expire.toGMTString();
-        {rdelim}
-
-        function rememberOptions() {ldelim}
-            el = document.getElementById('imageForm');
-            for (i = 0; i < el.elements.length; i++) {ldelim}
-                elname = new String(el.elements[i].name);
-                elname = elname.replace(/\[/g, '_');
-                elname = elname.replace(/\]/g, '');
-
-                if (el.elements[i].type == 'radio') {ldelim}
-                    if (el.elements[i].checked) {ldelim}
-                        SetCookie(elname, el.elements[i].value);
-                    {rdelim}
-                {rdelim} else if (typeof(el.elements[i].options) == 'object') {ldelim}
-                    SetCookie(elname, el.elements[i].options[el.elements[i].selectedIndex].value);
-                {rdelim}
-            {rdelim}
-        {rdelim}
-
 {if $media.only_path}
         if (parent.frames && parent.frames['tree']) {ldelim}
             parent.frames['tree'].document.getElementById('newdirlink').href =
@@ -98,29 +67,6 @@
                 "{$media.only_path|@escape}"
         {rdelim}
 {/if}
-
-{if $media.case == 'default'}
-        function rename(id, fname) {ldelim}
-            if (newname = prompt('{$CONST.ENTER_NEW_NAME}' + fname, fname)) {ldelim}
-                newloc = '?{$media.token_url}&serendipity[adminModule]=images&serendipity[adminAction]=rename&serendipity[fid]='+ escape(id) + '&serendipity[newname]='+ escape(newname);
-                location.href=newloc;
-            {rdelim}
-        {rdelim}
-{/if}
-
-{if $media.case == 'tree'}
-    var toggle_state = 'expand';
-    function treeToggleAll() {ldelim}
-        if (toggle_state == 'expand') {ldelim}
-            toggle_state = 'collapse';
-            tree.expandAll();
-        {rdelim} else {ldelim}
-            toggle_state = 'expand';
-            tree.collapseAll();
-            coreNode.expand();
-        {rdelim}
-    {rdelim}
-{/if}
     </script>
 
 {if $media.frameset}
@@ -170,8 +116,6 @@
 
     <!-- MEDIA SELECTION START -->
     {$media.external}
-    <script type="text/javascript" language="JavaScript" src="{$serendipityHTTPPath}serendipity_define.js.php"></script>
-    <script type="text/javascript" language="Javascript" src="{$serendipityHTTPPath}serendipity_editor.js"></script>
     <div>
     {if $media.file.is_image}
         {serendipity_hookPlugin hook="frontend_image_selector" eventData=$media.file hookAll=true}
@@ -267,7 +211,7 @@
 
                     {serendipity_hookPlugin hookAll=true hook='frontend_image_selector_more' eventData=$media.file}
                     <input class="serendipityPrettyButton input_button" type="button" value="{$CONST.BACK}" onclick="history.go(-1);" />
-                    <input class="serendipityPrettyButton input_button" type="button" value="{$CONST.DONE}" onclick="rememberOptions(); {$media.file.origfinishJSFunction}" />
+                    <input class="serendipityPrettyButton input_button" type="button" value="{$CONST.DONE}" onclick="rememberMediaOptions(); {$media.file.origfinishJSFunction}" />
                     {serendipity_hookPlugin hookAll=true hook='frontend_image_selector_submit' eventData=$media.file}
                 {/if}
             </div>

templates/default/admin/media_upload.tpl

@@ -1,176 +1,10 @@
+{* Customization notes: All classnames and especially DOM IDs should be kept to keep compatibility with JavaSCript calls! *}
+
+<script type="text/javascript" language="Javascript" src="{$serendipityHTTPPath}serendipity_editor.js"></script>
+
 <div class="image_add_form">{$CONST.ADD_MEDIA_BLAHBLAH}</div>
 
-<script type="text/javascript">
+<form action="?" method="POST" id="uploadform" enctype="multipart/form-data" onsubmit="rememberUploadOptions()">
-// Function prototype inspired by http://molily.de/javascript-nodelist
-function showNodes(n) {ldelim}
-    var html;
-    html = '<!--nodeset--><li>';
-
-    switch (n.nodeType) {ldelim}
-        case 1:
-            html += 'Type is <em>' + n.nodeName + '<\/em>';
-            if (n.hasChildNodes()) {ldelim}
-                ausgabe += ' - childNodes: ' + n.childNodes.length;
-            {rdelim}
-            break;
-
-        case 3:
-            var nval = n.nodeValue.replace(/</g, '&lt;').replace(/\n/g, '\\n');
-            html += 'Content: <strong>' + nval + '<\/strong>';
-            break;
-
-        case 8:
-            var nval = n.nodeValue.replace(/</g, '&lt;').replace(/\n/g, '\\n');
-            html += 'Hidden: <em>' + nval + '<\/em>';
-            break;
-
-        default:
-            html += 'Type is ' + n.nodeType + ', Content is <strong>' + n.nodeValue + '<\/strong>';
-    {rdelim}
-
-    if (n.hasChildNodes()) {ldelim}
-        html += '\n<ol>\n';
-        for (i=0; i < n.childNodes.length; i++) {ldelim}
-            j = n.childNodes[i];
-            html += showNodes(j);
-        {rdelim}
-        html += '</ol>\n';
-    {rdelim}
-    html += '</li>\n';
-
-    return html;
-{rdelim}
-
-function getfilename(value) {ldelim}
-    re = /^.+[\/\\]+?(.+)$/;
-    return value.replace(re, "$1");
-{rdelim}
-
-isFileUpload = true;
-function hideForeign() {ldelim}
-    document.getElementById('foreign_upload').style.display = 'none';
-    document.getElementById('imageurl').value = '';
-    isFileUpload = false;
-{rdelim}
-
-var fieldcount = 1;
-function addField() {ldelim}
-    fieldcount++;
-
-    fields = document.getElementById('upload_template').cloneNode(true);
-    fields.id = 'upload_form_' + fieldcount;
-    fields.style.display = 'block';
-
-    // Get the DOM outline be uncommenting this:
-    //document.getElementById('debug').innerHTML = showNodes(fields);
-
-    // garvin: This gets a bit weird. Opera, Mozilla and IE all have their own numbering.
-    // We cannot operate on "ID" basis, since a unique ID is not yet set before instancing.
-    if (fields.childNodes[0].nodeValue == null) {ldelim}
-        // This is Internet Explorer, it does not have a linebreak as first element.
-        userfile       = fields.childNodes[0].childNodes[0].childNodes[0].childNodes[1].childNodes[0];
-        targetfilename = fields.childNodes[0].childNodes[0].childNodes[2].childNodes[1].childNodes[0];
-        targetdir      = fields.childNodes[0].childNodes[0].childNodes[3].childNodes[1].childNodes[0];
-        columncount    = fields.childNodes[1].childNodes[0];
-    {rdelim} else {ldelim}
-        // We have a browser which has \n's as their own nodes. Don't ask me. Now let's check if it's Opera or Mozilla.
-        if (fields.childNodes[1].childNodes[0].nodeValue == null) {ldelim}
-            // This is Opera.
-            userfile       = fields.childNodes[1].childNodes[0].childNodes[0].childNodes[1].childNodes[0];
-            targetfilename = fields.childNodes[1].childNodes[0].childNodes[2].childNodes[1].childNodes[0];
-            targetdir      = fields.childNodes[1].childNodes[0].childNodes[3].childNodes[1].childNodes[0];
-            columncount    = fields.childNodes[3].childNodes[0];
-        {rdelim} else if (fields.childNodes[1].childNodes[1].childNodes[0].childNodes[3] == null) {ldelim}
-        	// This is Safari.
-            userfile       = fields.childNodes[1].childNodes[1].childNodes[0].childNodes[1].childNodes[0];
-            targetfilename = fields.childNodes[1].childNodes[1].childNodes[2].childNodes[1].childNodes[0];
-            targetdir      = fields.childNodes[1].childNodes[1].childNodes[3].childNodes[1].childNodes[0];
-            columncount    = fields.childNodes[3].childNodes[0];
-        {rdelim} else {ldelim}
-            // This is Mozilla.
-            userfile       = fields.childNodes[1].childNodes[1].childNodes[0].childNodes[3].childNodes[0];
-            targetfilename = fields.childNodes[1].childNodes[1].childNodes[4].childNodes[3].childNodes[0];
-            targetdir      = fields.childNodes[1].childNodes[1].childNodes[6].childNodes[3].childNodes[0];
-            columncount    = fields.childNodes[3].childNodes[0];
-        {rdelim}
-    {rdelim}
-
-    userfile.id   = 'userfile_' + fieldcount;
-    userfile.name = 'serendipity[userfile][' + fieldcount + ']';
-
-    targetfilename.id   = 'target_filename_' + fieldcount;
-    targetfilename.name = 'serendipity[target_filename][' + fieldcount + ']';
-
-    targetdir.id   = 'target_directory_' + fieldcount;
-    targetdir.name = 'serendipity[target_directory][' + fieldcount + ']';
-
-    columncount.id   = 'column_count_' + fieldcount;
-    columncount.name = 'serendipity[column_count][' + fieldcount + ']';
-
-    iNode = document.getElementById('upload_form');
-    iNode.parentNode.insertBefore(fields, iNode);
-
-    document.getElementById(targetdir.id).selectedIndex = document.getElementById('target_directory_' + (fieldcount - 1)).selectedIndex;
-{rdelim}
-
-var inputStorage = new Array();
-function checkInputs() {ldelim}
-    for (i = 1; i <= fieldcount; i++) {ldelim}
-        if (!inputStorage[i]) {ldelim}
-            fillInput(i, i);
-        {rdelim} else if (inputStorage[i] == document.getElementById('target_filename_' + i).value) {ldelim}
-            fillInput(i, i);
-        {rdelim}
-    {rdelim}
-
-{rdelim}
-
-function debugFields() {ldelim}
-    for (i = 1; i <= fieldcount; i++) {ldelim}
-        debugField('target_filename_' + i);
-        debugField('userfile_' + i);
-    {rdelim}
-{rdelim}
-
-function rememberOptions() {ldelim}
-    td     = document.getElementById('target_directory_2');
-    td_val = td.options[td.selectedIndex].value;
-    SetCookie("addmedia_directory", td_val);
-{rdelim}
-
-function debugField(id) {ldelim}
-    alert(id + ': ' + document.getElementById(id).value);
-{rdelim}
-
-function fillInput(source, target) {ldelim}
-    useDuplicate = false;
-
-    // First field is a special value for foreign URLs instead of uploaded files
-    if (source == 1 && document.getElementById('imageurl').value != "") {ldelim}
-        sourceval = getfilename(document.getElementById('imageurl').value);
-        useDuplicate = true;
-    {rdelim} else {ldelim}
-        sourceval = getfilename(document.getElementById('userfile_' + source).value);
-    {rdelim}
-
-    if (sourceval.length > 0) {ldelim}
-        document.getElementById('target_filename_' + target).value = sourceval;
-        inputStorage[target] = sourceval;
-    {rdelim}
-
-    // Display filename in duplicate form as well!
-    if (useDuplicate) {ldelim}
-        tkey = target + 1;
-
-        if (!inputStorage[tkey] || inputStorage[tkey] == document.getElementById('target_filename_' + tkey).value) {ldelim}
-            document.getElementById('target_filename_' + (target+1)).value = sourceval;
-            inputStorage[target + 1] = '~~~';
-        {rdelim}
-    {rdelim}
-{rdelim}
-</script>
-
-<form action="?" method="POST" id="uploadform" enctype="multipart/form-data" onsubmit="rememberOptions()">
     <div>
         {if $media.max_file_size}
         <input type="hidden" name="MAX_FILE_SIZE" value="{$max_file_size}" />
@@ -203,12 +37,11 @@ function fillInput(source, target) {ldelim}
             </tr>
         </table>
 
-        <!-- WARNING: Do not change spacing or breaks below. If you do, the JavaScript childNodes need to be edited. Newlines count as nodes! -->
         <div id="upload_template">
         <table style="margin-top: 35px" id="upload_table" class="image_add_local">
             <tr>
                 <td nowrap='nowrap'>{$CONST.ENTER_MEDIA_UPLOAD}</td>
-                <td><input class="input_file" id="userfile_1" name="serendipity[userfile][1]"
+                <td><input class="input_file uploadform_userfile" id="userfile_1" name="serendipity[userfile][1]"
                          onchange="checkInputs();"
                            type="file" /></td>
             </tr>
@@ -219,12 +52,12 @@ function fillInput(source, target) {ldelim}
 
             <tr>
                 <td>{$CONST.SAVE_FILE_AS}</td>
-                <td><input class="input_textbox" type="text" id="target_filename_1" name="serendipity[target_filename][1]" value="" size="40" /> <span class="input-desc image-upload">{$CONST.PLAIN_ASCII_NAMES}</span></td>
+                <td><input class="input_textbox uploadform_target_filename" type="text" id="target_filename_1" name="serendipity[target_filename][1]" value="" size="40" /> <span class="input-desc image-upload">{$CONST.PLAIN_ASCII_NAMES}</span></td>
             </tr>
 
             <tr>
                 <td>{$CONST.STORE_IN_DIRECTORY}</td>
-                <td><select id="target_directory_1" name="serendipity[target_directory][1]">
+                <td><select class="uploadform_target_directory" id="target_directory_1" name="serendipity[target_directory][1]">
                     <option value="">{$CONST.BASE_DIRECTORY}</option>
                     {foreach from=$media.folders item="folder"}
                     <option {if $media.only_path == $folder.relpath}selected="selected"{/if} value="{$folder.relpath}">{'&nbsp;'|str_repeat:($folder.depth*2)}{$folder.name}</option>
@@ -233,24 +66,23 @@ function fillInput(source, target) {ldelim}
                 </td>
             </tr>
        </table>
-       <div id="ccounter"><input type="hidden" name="serendipity[column_count][1]" id="column_count_1" value="true" /></div>
+       <div id="ccounter"><input class="uploadform_column_count" type="hidden" name="serendipity[column_count][1]" id="column_count_1" value="true" /></div>
        </div>
 
        <div id="debug">
        </div>
 
+       {* Placeholder for upload form, gets duplicated if users uploads multiple files *}
+       <span id="upload_form"></span>
        <script type="text/javascript">
             document.getElementById('upload_template').style.display  = 'none';
-            document.write('<span id="upload_form"><' + '/span>');
+            addUploadField();
-            addField();
        </script>
 
         {serendipity_hookPlugin hook="backend_image_addform" hookAll=true}
 
         <div style="text-align: center; margin-top: 15px; margin-bottom: 15px">
-            <script type="text/javascript">
+            <input class="serendipityPrettyButton input_button" type="button" value="{$CONST.IMAGE_MORE_INPUT}" onclick="hideForeign(); addUploadField()" /><br />
-                document.write('<input class="serendipityPrettyButton input_button" type="button" value="{$CONST.IMAGE_MORE_INPUT}" onclick="hideForeign(); addField()"' + '/><br' + '/>');
-            </script>
             <input type="hidden" name="serendipity[all_authors]" value="true" checked="checked" id="all_authors" />
             <br />
             <input onclick="checkInputs();" type="submit" value="{$CONST.GO}" class="serendipityPrettyButton input_button" />