From 83cab23538795560cc52939c1e0fee65eb96e4fe Mon Sep 17 00:00:00 2001
From: Michael M Slusarz <slusarz@curecanti.org>
Date: Tue, 27 Jul 2010 02:02:51 -0600
Subject: [PATCH] Move all edit screen javascript to a static file.

This started off as converting to Horde_Core_Ui_JsCalendar usage, but
ended up an entire rewrite of the edit screen.
---
 kronolith/js/edit.js                           | 528 +++++++++++++++++++++++++
 kronolith/lib/Event.php                        |  48 +--
 kronolith/lib/View/EditEvent.php               |   9 +-
 kronolith/new.php                              |   6 +-
 kronolith/search.php                           |   5 +
 kronolith/templates/edit/edit.inc              | 120 +++---
 kronolith/templates/edit/edit_timespan.inc     |  30 +-
 kronolith/templates/edit/javascript.inc        | 288 --------------
 kronolith/templates/javascript_defs.php        |   8 +-
 kronolith/templates/search/search_advanced.inc |   4 -
 kronolith/themes/screen.css                    |   3 +
 11 files changed, 633 insertions(+), 416 deletions(-)
 create mode 100644 kronolith/js/edit.js
 delete mode 100644 kronolith/templates/edit/javascript.inc

diff --git a/kronolith/js/edit.js b/kronolith/js/edit.js
new file mode 100644
index 000000000..b9e02f62d
--- /dev/null
+++ b/kronolith/js/edit.js
@@ -0,0 +1,528 @@
+/**
+ * edit.js - Base application logic.
+ *
+ * Copyright 2010 The Horde Project (http://www.horde.org/)
+ *
+ * See the enclosed file COPYING for license information (GPL). If you
+ * did not receive this file, see http://www.fsf.org/copyleft/gpl.html.
+ *
+ * @author   Michael Slusarz <slusarz@curecanti.org>
+ * @category Horde
+ * @package  Kronolith
+ */
+
+var KronolithEdit =
+{
+    calendarSelect: function(e)
+    {
+        var prefix;
+
+        switch (e.element().identify()) {
+        case 'end_img':
+            prefix = 'end';
+            break;
+
+        case 'recur_end_img':
+            prefix = 'recur_end';
+            break;
+
+        case 'start_img':
+            prefix = 'start';
+            break;
+
+        default:
+            return;
+        }
+
+        $(prefix + '_year').setValue(e.memo.getFullYear());
+        $(prefix + '_month').setValue(e.memo.getMonth() + 1);
+        $(prefix + '_day').setValue(e.memo.getDate());
+
+        this.doAction(prefix + '_year');
+    },
+
+    updateWday: function(p)
+    {
+        $(p + '_wday').update('(' + Horde_Calendar.fullweekdays[this.getFormDate(p).getDay()] + ')');
+    },
+
+    getFormDate: function(p)
+    {
+        return new Date($F(p + '_year'), $F(p + '_month') - 1, $F(p + '_day'));
+    },
+
+    clickHandler: function(e)
+    {
+        if (e.isRightClick()) {
+            return;
+        }
+
+        var elt = e.element(),
+            id = elt.readAttribute('id');
+
+        switch (id) {
+        case 'allday':
+        case 'allday_label':
+            this.doAction('allday');
+            break;
+
+        case 'am':
+        case 'am_label':
+        case 'pm':
+        case 'pm_label':
+            this.doAction('am');
+            break;
+
+        case 'attendees_button':
+            Horde.popup({
+                params: Object.toQueryString({
+                    date: (('000' + $F('start_year')).slice(-4) + ('0' + $F('start_month')).slice(-2) + ('0' + $F('start_day')).slice(-2) + ('0' + $F('start_hour')).slice(-2) + ('0' + $F('start_min')).slice(-2) + '00'),
+                    enddate: (('000' + $F('end_year')).slice(-4) + ('0' + $F('end_month')).slice(-2) + ('0' + $F('end_day')).slice(-2) + ('0' + $F('end_hour')).slice(-2) + ('0' + $F('end_min')).slice(-2) + '00')
+                }),
+                url: elt.readAttribute('href')
+            });
+            e.stop();
+            break;
+
+        case 'eam':
+        case 'eam_label':
+        case 'epm':
+        case 'epm_label':
+            this.doAction('eam');
+            break;
+
+        case 'edit_current':
+        case 'edit_future':
+            $('start_year').setValue(parseInt($F('recur_ex').substr(0, 4), 10));
+            $('start_month').selectedIndex = parseInt($F('recur_ex').substr(4, 2), 10) - 1;
+            $('start_day').selectedIndex = parseInt($F('recur_ex').substr(6, 2), 10) - 1;
+
+            this.updateWday('start');
+            this.updateEndDate();
+
+            $('recur_weekly_interval').adjacent('.checkbox').invoke('setValue', 0);
+            break;
+
+        case 'end_img':
+        case 'recur_end_img':
+        case 'start_img':
+            Horde_Calendar.open(elt, this.getFormDate(id.slice(0, -4)));
+            e.stop();
+            break;
+
+        case 'mo':
+        case 'tu':
+        case 'we':
+        case 'th':
+        case 'fr':
+        case 'sa':
+        case 'su':
+            this.setInterval('recurweekly', 'recur_weekly_interval');
+            this.setRecur(2);
+            break;
+
+        case 'nooverwrite':
+        case 'yesoverwrite':
+            if ($F('nooverwrite')) {
+                $('notification_options').hide();
+            } else {
+                $('notification_options').show();
+                $('yesalarm').setValue(1);
+            }
+            break;
+
+        case 'recurdaily':
+        case 'recurdaily_label':
+            this.setInterval('recurdaily', 'recur_daily_interval');
+            break;
+
+        case 'recurmonthday':
+        case 'recurmonthday_label':
+            this.setInterval('recurmonthday', 'recur_day_of_month_interval');
+            break;
+
+        case 'recurmonthweek':
+        case 'recurmonthweek_label':
+            this.setInterval('recurmonthweek', 'recur_week_of_month_interval');
+            break;
+
+        case 'recurnone':
+            this.clearFields(0);
+            break;
+
+        case 'recurweekly':
+        case 'recurweekly_label':
+            this.setInterval('recurweekly', 'recur_weekly_interval');
+            break;
+
+        case 'recuryear':
+        case 'recuryear_label':
+            this.setInterval('recuryear', 'recur_yearly_interval');
+            break;
+
+        case 'recuryearday':
+        case 'recuryearday_label':
+            this.setInterval('recuryearday', 'recur_yearly_day_interval');
+            break;
+
+        case 'recuryearweekday':
+        case 'recuryearweekday_label':
+            this.setInterval('recuryearweekday', 'recur_yearly_weekday_interval');
+            break;
+
+        default:
+            if (elt.readAttribute('name') == 'resetButton') {
+                $('eventform').reset();
+                this.updateWday('start');
+                this.updateWday('end');
+            } else {
+                if (!elt.match('TD')) {
+                    elt = elt.up('TD');
+                }
+                if (elt && elt.hasClassName('toggle')) {
+                    elt.down().toggle().next().toggle();
+                    $('section' + elt.identify().substr(6)).toggle();
+                }
+            }
+            break;
+        }
+    },
+
+    changeHandler: function(e)
+    {
+        this.doAction(e.element().readAttribute('id'));
+    },
+
+    keypressHandler: function(e)
+    {
+        switch (e.element().readAttribute('id')) {
+        case 'recur_daily_interval':
+            this.setRecur(1);
+            break;
+
+        case 'recur_weekly_interval':
+            this.setRecur(2);
+            break;
+
+        case 'recur_day_of_month_interval':
+            this.setRecur(3);
+            break;
+
+        case 'recur_week_of_month_interval':
+            this.setRecur(4);
+            break;
+
+        case 'recur_yearly_interval':
+            this.setRecur(5);
+            break;
+
+        case 'recur_yearly_day_interval':
+            this.setRecur(6);
+            break;
+
+        case 'recur_yearly_weekday_interval':
+            this.setRecur(7);
+            break;
+        }
+    },
+
+    doAction: function(id)
+    {
+        var endDate, endHour, duration, durHour, durMin, failed, startDate,
+            startHour;
+
+        switch (id) {
+        case 'allday':
+            if ($F('allday')) {
+                if (KronolithVar.twentyFour) {
+                    $('start_hour').selectedIndex = 0;
+                } else {
+                    $('start_hour').selectedIndex = 11;
+                    $('am').setValue(1);
+                }
+                $('start_min').setValue(0);
+                $('dur_day').setValue(1);
+                $('dur_hour').setValue(0);
+                $('dur_min').setValue(0);
+            }
+            this.updateEndDate();
+            $('duration').setValue(1);
+            break;
+
+        case 'am':
+            $('allday').setValue(0);
+            this.updateEndDate();
+            break;
+
+        case 'dur_day':
+        case 'dur_hour':
+        case 'dur_min':
+            $('allday').setValue(0);
+            this.updateEndDate();
+            $('end').setValue(1);
+            break;
+
+        case 'eam':
+        case 'epm':
+            break;
+
+        case 'end_year':
+        case 'end_month':
+        case 'end_day':
+            this.updateWday('end');
+            // Fall-through
+
+        case 'end_hour':
+        case 'end_min':
+        case 'pm':
+            $('end').setValue(1);
+
+            startHour = this.convertTo24Hour(parseInt($F('start_hour'), 10), 'pm');
+            endHour = this.convertTo24Hour(parseInt($F('end_hour'), 10), 'epm');
+            startDate = Date.UTC(
+                $F('start_year'),
+                $F('start_month') - 1,
+                $F('start_day'),
+                startHour,
+                $F('start_min')
+            );
+            endDate = Date.UTC(
+                $F('end_year'),
+                $F('end_month') - 1,
+                $F('end_day'),
+                endHour,
+                $F('end_min')
+            );
+
+            if (endDate < startDate) {
+                if (KronolithVar.twentyFour &&
+                    $F('start_year') == $F('end_year') &&
+                    $F('start_month') == $F('end_month') &&
+                    $F('start_day') == $F('end_day') &&
+                    !$F('pm') && !$F('epm')) {
+                    /* If the end hour is marked as the (default) AM, and
+                     * the start hour is also AM, automatically default
+                     * the end hour to PM if the date is otherwise the
+                     * same - assume that the user wants a 9am-2pm event
+                     * (for example), instead of throwing an error. */
+
+                    // Toggle the end date to PM.
+                    $('epm').checked = true;
+
+                    // Recalculate end time
+                    endHour = this.convertTo24Hour(parseInt($F('end_hour'), 10), 'epm');
+                    endDate = Date.UTC(
+                        $F('end_year'),
+                        $F('end_month') - 1,
+                        $F('end_day'),
+                        endHour,
+                        $F('end_min')
+                    );
+                } else {
+                    alert(KronolithText.enddate_error);
+                    endDate = startDate;
+                    failed = true;
+                }
+            }
+
+            duration = (endDate - startDate) / 1000;
+            $('dur_day').setValue(Math.floor(duration / 86400));
+            duration %= 86400;
+
+            durHour = Math.floor(duration / 3600);
+            duration %= 3600;
+
+            durMin = Math.floor(duration / 60 / 5);
+
+            $('dur_hour').selectedIndex = durHour;
+            $('dur_min').selectedIndex = durMin;
+            $('allday').setValue(false);
+
+            if (failed) {
+                this.updateEndDate();
+            }
+            break;
+
+        case 'recur_end_year':
+        case 'recur_end_month':
+        case 'recur_end_day':
+            $('recur_end_type').setValue(1);
+            this.updateWday('recur_end');
+            break;
+
+        case 'recur_daily_interval':
+            this.setRecur(1);
+            break;
+
+        case 'recur_weekly_interval':
+            this.setRecur(2);
+            break;
+
+        case 'recur_day_of_month_interval':
+            this.setRecur(3);
+            break;
+
+        case 'recur_week_of_month_interval':
+            this.setRecur(4);
+            break;
+
+        case 'recur_yearly_interval':
+            this.setRecur(5);
+            break;
+
+        case 'recur_yearly_day_interval':
+            this.setRecur(6);
+            break;
+
+        case 'recur_yearly_weekday_interval':
+            this.setRecur(7);
+            break;
+
+        case 'start_year':
+        case 'start_month':
+        case 'start_day':
+            this.updateWday('start');
+            // Fall-through
+
+        case 'start_hour':
+        case 'start_min':
+            $('allday').setValue(0);
+            this.updateEndDate();
+            break;
+        }
+    },
+
+    updateEndDate: function()
+    {
+        var endHour, endYear, msecs,
+            startHour = this.convertTo24Hour(parseInt($F('start_hour'), 10), 'pm'),
+            startDate = new Date(
+                $F('start_year'),
+                $F('start_month') - 1,
+                $F('start_day'),
+                startHour,
+                $F('start_min')
+            ),
+            endDate = new Date(),
+            minutes = $F('dur_day') * 1440;
+
+        minutes += $F('dur_hour') * 60;
+        minutes += parseInt($F('dur_min'));
+        msecs = minutes * 60000;
+
+        endDate.setTime(startDate.getTime() + msecs);
+
+        endYear = endDate.getFullYear();
+
+        $('end_year').setValue(endYear);
+        $('end_month').selectedIndex = endDate.getMonth();
+        $('end_day').selectedIndex = endDate.getDate() - 1;
+
+        endHour = endDate.getHours()
+        if (!KronolithVar.twentyFour) {
+            if (endHour < 12) {
+                if (endHour == 0) {
+                    endHour = 12;
+                }
+                $('eam').setValue(1);
+            } else {
+                if (endHour > 12) {
+                    endHour -= 12;
+                }
+                $('epm').setValue(1);
+            }
+            endHour -= 1;
+       }
+
+        $('end_hour').selectedIndex = endHour;
+        $('end_min').selectedIndex = endDate.getMinutes() / 5;
+
+        this.updateWday('end');
+    },
+
+    // Converts a 12 hour based number to its 24 hour format
+    convertTo24Hour: function(val, elt)
+    {
+        if (KronolithVar.twentyFour) {
+            if ($F(elt)) {
+                if (val != 12) {
+                    val += 12;
+                }
+            } else if (val == 12) {
+                val = 0;
+            }
+        }
+
+        return val;
+    },
+
+    setInterval: function(elt, id)
+    {
+        if (!$F(id)) {
+            $(elt).setValue(1);
+        }
+
+        switch (id) {
+        case 'recur_daily_interval':
+            KronolithEventForm.clearFields(1);
+            break;
+
+        case 'recur_weekly_interval':
+            KronolithEventForm.clearFields(2);
+            break;
+
+        case 'recur_day_of_month_interval':
+            KronolithEventForm.clearFields(3);
+            break;
+
+        case 'recur_week_of_month_interval':
+            KronolithEventForm.clearFields(4);
+            break;
+
+        case 'recur_yearly_interval':
+            KronolithEventForm.clearFields(5);
+            break;
+        }
+    },
+
+    setRecur: function(index)
+    {
+        document.eventform.recur[index].checked = true;
+        KronolithEventForm.clearFields(index);
+    },
+
+    clearFields: function(index)
+    {
+        if (index != 1) {
+            $('recur_daily_interval').setValue('');
+        }
+        if (index != 2) {
+            $('recur_weekly_interval').setValue('');
+            $('recur_weekly_interval').adjacent('.checkbox').invoke('setValue', 0);
+        }
+        if (index != 3) {
+            $('recur_day_of_month_interval').setValue('');
+        }
+        if (index != 4) {
+            $('recur_week_of_month_interval').setValue('');
+        }
+        if (index != 5) {
+            $('recur_yearly_interval').setValue('');
+        }
+    },
+
+    onDomLoad: function()
+    {
+        this.updateWday('start');
+        this.updateWday('end');
+        this.updateWday('recur_end');
+
+        $('eventform').observe('click', this.clickHandler.bindAsEventListener(this));
+        $('eventform').observe('change', this.changeHandler.bindAsEventListener(this));
+        $('eventform').observe('keypress', this.keypressHandler.bindAsEventListener(this));
+    }
+
+};
+
+document.observe('dom:loaded', KronolithEdit.onDomLoad.bind(KronolithEdit));
+document.observe('Horde_Calendar:select', KronolithEdit.calendarSelect.bindAsEventListener(KronolithEdit));
diff --git a/kronolith/lib/Event.php b/kronolith/lib/Event.php
index 4ef5718fa..b2d932de7 100644
--- a/kronolith/lib/Event.php
+++ b/kronolith/lib/Event.php
@@ -2364,7 +2364,7 @@ abstract class Kronolith_Event
         case 'start[year]':
             return  '<label for="' . $this->_formIDEncode($property) . '" class="hidden">' . _("Start Year") . '</label>' .
                 '<input name="' . $property . '" value="' . $this->start->year .
-                '" type="text" onchange="' . $this->js($property) .
+                '" type="text"' .
                 '" id="' . $this->_formIDEncode($property) . '" size="4" maxlength="4" />';
 
         case 'start[month]':
@@ -2372,7 +2372,6 @@ abstract class Kronolith_Event
             for ($i = 1; $i < 13; ++$i) {
                 $options[$i] = strftime('%b', mktime(1, 1, 1, $i, 1));
             }
-            $attributes = ' onchange="' . $this->js($property) . '"';
             $label = _("Start Month");
             break;
 
@@ -2381,7 +2380,6 @@ abstract class Kronolith_Event
             for ($i = 1; $i < 32; ++$i) {
                 $options[$i] = $i;
             }
-            $attributes = ' onchange="' . $this->js($property) . '"';
             $label = _("Start Day");
             break;
 
@@ -2392,7 +2390,6 @@ abstract class Kronolith_Event
             for ($i = $hour_min; $i < $hour_max; ++$i) {
                 $options[$i] = $i;
             }
-            $attributes = ' onchange="document.eventform.whole_day.checked = false; KronolithEventForm.updateEndDate();"';
             $label = _("Start Hour");
             break;
 
@@ -2402,14 +2399,13 @@ abstract class Kronolith_Event
                 $min = sprintf('%02d', $i * 5);
                 $options[$min] = $min;
             }
-            $attributes = ' onchange="document.eventform.whole_day.checked = false; KronolithEventForm.updateEndDate();"';
             $label = _("Start Minute");
             break;
 
         case 'end[year]':
             return  '<label for="' . $this->_formIDEncode($property) . '" class="hidden">' . _("End Year") . '</label>' .
                 '<input name="' . $property . '" value="' . $this->end->year .
-                '" type="text" onchange="' . $this->js($property) .
+                '" type="text"' .
                 '" id="' . $this->_formIDEncode($property) . '" size="4" maxlength="4" />';
 
         case 'end[month]':
@@ -2417,7 +2413,6 @@ abstract class Kronolith_Event
             for ($i = 1; $i < 13; ++$i) {
                 $options[$i] = strftime('%b', mktime(1, 1, 1, $i, 1));
             }
-            $attributes = ' onchange="' . $this->js($property) . '"';
             $label = _("End Month");
             break;
 
@@ -2426,7 +2421,6 @@ abstract class Kronolith_Event
             for ($i = 1; $i < 32; ++$i) {
                 $options[$i] = $i;
             }
-            $attributes = ' onchange="' . $this->js($property) . '"';
             $label = _("End Day");
             break;
 
@@ -2439,7 +2433,6 @@ abstract class Kronolith_Event
             for ($i = $hour_min; $i < $hour_max; ++$i) {
                 $options[$i] = $i;
             }
-            $attributes = ' onchange="KronolithEventForm.updateDuration(); document.eventform.end_or_dur[0].checked = true"';
             $label = _("End Hour");
             break;
 
@@ -2450,7 +2443,6 @@ abstract class Kronolith_Event
                 $min = sprintf('%02d', $i * 5);
                 $options[$min] = $min;
             }
-            $attributes = ' onchange="KronolithEventForm.updateDuration(); document.eventform.end_or_dur[0].checked = true"';
             $label = _("End Minute");
             break;
 
@@ -2458,7 +2450,7 @@ abstract class Kronolith_Event
             $dur = $this->getDuration();
             return  '<label for="' . $property . '" class="hidden">' . _("Duration Day") . '</label>' .
                 '<input name="' . $property . '" value="' . $dur->day .
-                '" type="text" onchange="' . $this->js($property) .
+                '" type="text"' .
                 '" id="' . $property . '" size="4" maxlength="4" />';
 
         case 'dur_hour':
@@ -2467,7 +2459,6 @@ abstract class Kronolith_Event
             for ($i = 0; $i < 24; ++$i) {
                 $options[$i] = $i;
             }
-            $attributes = ' onchange="' . $this->js($property) . '"';
             $label = _("Duration Hour");
             break;
 
@@ -2478,7 +2469,6 @@ abstract class Kronolith_Event
                 $min = sprintf('%02d', $i * 5);
                 $options[$min] = $min;
             }
-            $attributes = ' onchange="' . $this->js($property) . '"';
             $label = _("Duration Minute");
             break;
 
@@ -2492,7 +2482,7 @@ abstract class Kronolith_Event
             }
             return  '<label for="' . $this->_formIDEncode($property) . '" class="hidden">' . _("Recurrence End Year") . '</label>' .
                 '<input name="' . $property . '" value="' . $end .
-                '" type="text" onchange="' . $this->js($property) .
+                '" type="text"' .
                 '" id="' . $this->_formIDEncode($property) . '" size="4" maxlength="4" />';
 
         case 'recur_end[month]':
@@ -2506,7 +2496,6 @@ abstract class Kronolith_Event
             for ($i = 1; $i < 13; ++$i) {
                 $options[$i] = strftime('%b', mktime(1, 1, 1, $i, 1));
             }
-            $attributes = ' onchange="' . $this->js($property) . '"';
             $label = _("Recurrence End Month");
             break;
 
@@ -2521,7 +2510,6 @@ abstract class Kronolith_Event
             for ($i = 1; $i < 32; ++$i) {
                 $options[$i] = $i;
             }
-            $attributes = ' onchange="' . $this->js($property) . '"';
             $label = _("Recurrence End Day");
             break;
         }
@@ -2536,34 +2524,6 @@ abstract class Kronolith_Event
             '</select>';
     }
 
-    public function js($property)
-    {
-        switch ($property) {
-        case 'start[month]':
-        case 'start[year]':
-        case 'start[day]':
-        case 'start':
-            return 'KronolithEventForm.updateWday(\'start_wday\'); document.eventform.whole_day.checked = false; KronolithEventForm.updateEndDate();';
-
-        case 'end[month]':
-        case 'end[year]':
-        case 'end[day]':
-        case 'end':
-            return 'KronolithEventForm.updateWday(\'end_wday\'); updateDuration(); document.eventform.end_or_dur[0].checked = true;';
-
-        case 'recur_end[month]':
-        case 'recur_end[year]':
-        case 'recur_end[day]':
-        case 'recur_end':
-            return 'KronolithEventForm.updateWday(\'recur_end_wday\'); document.eventform.recur_end_type[1].checked = true;';
-
-        case 'dur_day':
-        case 'dur_hour':
-        case 'dur_min':
-            return 'document.eventform.whole_day.checked = false; KronolithEventForm.updateEndDate(); document.eventform.end_or_dur[1].checked = true;';
-        }
-    }
-
     /**
      * @param array $params
      *
diff --git a/kronolith/lib/View/EditEvent.php b/kronolith/lib/View/EditEvent.php
index 5a85fbbd1..d3a1e9096 100644
--- a/kronolith/lib/View/EditEvent.php
+++ b/kronolith/lib/View/EditEvent.php
@@ -119,9 +119,14 @@ class Kronolith_View_EditEvent {
         $tags = $tagger->getTags($event->uid, 'event');
         $tags = implode(',', array_values($tags));
 
-        echo '<div id="EditEvent"' . ($active ? '' : ' style="display:none"') . '>';
+        Horde_Core_Ui_JsCalendar::init(array(
+            'full_weekdays' => true
+        ));
+
+        Horde::addScriptFile('edit.js', 'kronolith');
         Horde::addScriptFile('popup.js', 'horde');
-        require KRONOLITH_TEMPLATES . '/edit/javascript.inc';
+
+        echo '<div id="EditEvent"' . ($active ? '' : ' style="display:none"') . '>';
         require KRONOLITH_TEMPLATES . '/edit/edit.inc';
         echo '</div>';
 
diff --git a/kronolith/new.php b/kronolith/new.php
index 2b86c91c8..7c14dce14 100644
--- a/kronolith/new.php
+++ b/kronolith/new.php
@@ -80,11 +80,15 @@ foreach ($all_calendars as $id => $calendar) {
     $calendars[$id] = $calendar;
 }
 
+Horde_Core_Ui_JsCalendar::init(array(
+    'full_weekdays' => true
+));
+
 $title = _("Add a new event");
+Horde::addScriptFile('edit.js', 'kronolith');
 Horde::addScriptFile('popup.js', 'horde');
 require KRONOLITH_TEMPLATES . '/common-header.inc';
 require KRONOLITH_TEMPLATES . '/menu.inc';
-require KRONOLITH_TEMPLATES . '/edit/javascript.inc';
 require KRONOLITH_TEMPLATES . '/edit/edit.inc';
 
 require $registry->get('templates', 'horde') . '/common-footer.inc';
diff --git a/kronolith/search.php b/kronolith/search.php
index 1e71aa630..bbf418c1d 100644
--- a/kronolith/search.php
+++ b/kronolith/search.php
@@ -101,6 +101,11 @@ if ($search_mode == 'basic') {
     }
 }
 
+if ($search_mode != 'basic') {
+    Horde_Core_Ui_JsCalendar::init();
+    Horde::addScriptFile('edit.js', 'kronolith');
+}
+
 $title = _("Search");
 Horde::addScriptFile('tooltips.js', 'horde');
 require KRONOLITH_TEMPLATES . '/common-header.inc';
diff --git a/kronolith/templates/edit/edit.inc b/kronolith/templates/edit/edit.inc
index fbb1124df..cc47d4372 100644
--- a/kronolith/templates/edit/edit.inc
+++ b/kronolith/templates/edit/edit.inc
@@ -1,4 +1,8 @@
-<?php $showCalSelect = (!$GLOBALS['prefs']->isLocked('default_share') && count($calendars) > 1 && empty($GLOBALS['show_resource_calendars'])); ?>
+<?php
+$showCalSelect = (!$GLOBALS['prefs']->isLocked('default_share') && count($calendars) > 1 && empty($GLOBALS['show_resource_calendars']));
+$show_img = Horde::img('plus.png', _("Show"));
+$hide_img = Horde::img('minus.png', _("Hide"), 'style="display:none"');
+?>
 
 <form action="<?php echo ($event->initialized && $event->hasPermission(Horde_Perms::EDIT)) ? 'edit.php' : 'add.php' ?>" method="post" name="eventform" id="eventform">
 <?php Horde_Util::pformInput() ?>
@@ -34,8 +38,8 @@
  <td></td>
  <td colspan="4" class="warning">
   <?php echo _("This is a recurring event. Edit the current event only, this occurrence<br />and all future occurences, all occurences, or save this event as new?") ?><br /><br />
-  <input type="radio" name="edit_recur" value="current" id="edit_current" onclick="KronolithEventForm.setStartDate($F('recur_ex'))" /> <?php echo Horde::label('edit_current', _("Current")) ?>
-  <input type="radio" name="edit_recur" value="future" id="edit_future" onclick="KronolithEventForm.setStartDate($F('recur_ex'))" /> <?php echo Horde::label('edit_future', _("Future")) ?>
+  <input type="radio" name="edit_recur" value="current" id="edit_current" /> <?php echo Horde::label('edit_current', _("Current")) ?>
+  <input type="radio" name="edit_recur" value="future" id="edit_future" /> <?php echo Horde::label('edit_future', _("Future")) ?>
   <input type="radio" name="edit_recur" value="all" id="edit_all" checked="checked" /> <?php echo Horde::label('edit_all', _("All")) ?>
   <input type="radio" name="edit_recur" value="copy" id="edit_copy" /> <?php echo Horde::label('edit_copy', _("Save As New")) ?>
   <input type="hidden" name="recur_ex" id="recur_ex" value="<?php echo Horde_Util::getFormData('datetime') ?>" />
@@ -49,7 +53,7 @@
  <td colspan="4">
   <?php echo implode("\n", $buttons) ?>
   <?php echo $cancelurl->link(array('class' => 'button')) . _("Cancel") . '</a>' ?>
-  <input type="button" name="resetButton" class="button" value="<?php echo _("Reset to Defaults") ?>" onclick="document.eventform.reset(); KronolithEventForm.updateWday('start_wday'); KronolithEventForm.updateWday('end_wday');" />
+  <input type="button" name="resetButton" class="button" value="<?php echo _("Reset to Defaults") ?>" />
  </td>
 </tr>
 
@@ -155,12 +159,14 @@ if ($event->alarm) {
 }
 ?>
 <tr>
- <td colspan="5" class="control toggle" onclick="KronolithEventForm.toggleSection('alarm')">
-  <?php echo Horde::img('tree/blank.png', '', array('id' => 'toggle_alarm')) . ' <strong>' . Horde::label('alarm', _("_Alarm")) ?></strong>
+ <td colspan="5" id="toggle_alarm" class="control toggle">
+  <?php echo $show_img ?>
+  <?php echo $hide_img ?>
+  <strong><?php echo Horde::label('alarm', _("_Alarm")) ?></strong>
   <span class="extra" id="extra_alarm"><?php if ($alarm_set) printf(_("%d %s before the event starts"), $alarm_value, $alarm_unit_title); ?></span>
 </td>
 </tr>
-<tbody id="section_alarm">
+<tbody id="section_alarm" style="display:none">
 <tr>
  <td class="rightAlign" valign="top">
   <strong><?php echo _("Alarm") ?></strong>
@@ -190,8 +196,8 @@ if ($event->alarm) {
   <strong><?php echo _("Notification") ?></strong>
  </td>
  <td valign="top">
-  <input id="nooverwrite" name="alarm_change_method" type="radio" class="checkbox" value="0"<?php if (empty($event->methods)) echo ' checked="checked"' ?> onclick="KronolithEventForm.toggleAlarmMethods()" /><br />
-  <input id="yesoverwrite" name="alarm_change_method" type="radio" class="checkbox" value="1"<?php if (!empty($event->methods)) echo ' checked="checked"' ?> onclick="KronolithEventForm.toggleAlarmMethods()" />
+  <input id="nooverwrite" name="alarm_change_method" type="radio" class="checkbox" value="0"<?php if (empty($event->methods)) echo ' checked="checked"' ?> /><br />
+  <input id="yesoverwrite" name="alarm_change_method" type="radio" class="checkbox" value="1"<?php if (!empty($event->methods)) echo ' checked="checked"' ?> />
  </td>
  <td>&nbsp;</td>
  <td valign="top" colspan="2">
@@ -220,12 +226,14 @@ if ($event->alarm) {
 
 <!-- description -->
 <tr>
- <td colspan="5" class="control toggle" onclick="KronolithEventForm.toggleSection('description')">
-  <?php echo Horde::img('tree/blank.png', '', array('id' => 'toggle_description')) . ' <strong>' . Horde::label('description', _("Descri_ption")) ?></strong>
+ <td colspan="5" id="toggle_description" class="control toggle">
+  <?php echo $show_img ?>
+  <?php echo $hide_img ?>
+  <strong><?php echo Horde::label('description', _("Descri_ption")) ?></strong>
   <span class="extra" id="extra_description"><?php echo htmlspecialchars(substr(str_replace(array("\r", "\n"), '  ', $event->description), 0, 80)) ?></span>
 </td>
 </tr>
-<tr id="section_description">
+<tr id="section_description" style="display:none">
  <td colspan="5">
   <textarea id="description" name="description" rows="4"><?php echo htmlspecialchars($event->description) ?></textarea>
  </td>
@@ -233,12 +241,14 @@ if ($event->alarm) {
 
 <!-- url -->
 <tr>
- <td colspan="5" class="control toggle" onclick="KronolithEventForm.toggleSection('url')">
-  <?php echo Horde::img('tree/blank.png', '', array('id' => 'toggle_url')) . ' <strong>' . Horde::label('url', _("URL")) ?></strong>
+ <td colspan="5" id="toggle_url" class="control toggle">
+  <?php echo $show_img ?>
+  <?php echo $hide_img ?>
+  <strong><?php echo Horde::label('url', _("URL")) ?></strong>
   <span class="extra" id="extra_url"><?php echo htmlspecialchars($event->url) ?></span>
 </td>
 </tr>
-<tr id="section_url">
+<tr id="section_url" style="display:none">
  <td class="rightAlign"><strong><?php echo Horde::label('url', _("URL")) ?></strong></td>
  <td colspan="4">
   <input type="text" name="eventurl" id="url" value="<?php echo htmlspecialchars($event->url) ?>" size="40" maxlength="2048" />
@@ -247,29 +257,33 @@ if ($event->alarm) {
 
 <!-- attendees/resources -->
 <tr>
- <td colspan="5" class="control toggle" onclick="KronolithEventForm.toggleSection('attendees')">
-  <?php echo Horde::img('tree/blank.png', '', array('id' => 'toggle_attendees')) . ' <strong>' . _("Attendees and Resources") ?></strong>
+ <td colspan="5" id="toggle_attendees" class="control toggle">
+  <?php echo $show_img ?>
+  <?php echo $hide_img ?>
+  <strong><?php echo _("Attendees and Resources") ?></strong>
   <span class="extra"><?php echo htmlspecialchars(Kronolith::attendeeList()) ?></span>
  </td>
 </tr>
 
-<tbody id="section_attendees">
+<tbody id="section_attendees" style="display:none">
 <tr>
  <td></td>
  <td colspan="4">
-  <?php echo Horde::applicationUrl('attendees.php')->link(array('class' => 'button', 'target' => '_blank', 'onclick' => 'var date = (\'000\' + $F(\'start_year\')).slice(-4) + (\'0\' + $F(\'start_month\')).slice(-2) + (\'0\' + $F(\'start_day\')).slice(-2) + (\'0\' + $(\'start_hour\').value).slice(-2) + (\'0\' + $(\'start_min\').value).slice(-2) + \'00\';var enddate = (\'000\' + $F(\'end_year\')).slice(-4) + (\'0\' + $F(\'end_month\')).slice(-2) + (\'0\' + $F(\'end_day\')).slice(-2) + (\'0\' + $(\'end_hour\').value).slice(-2) + (\'0\' + $(\'end_min\').value).slice(-2) + \'00\'; this.href += (this.href.indexOf(\'?\') == -1 ? \'?\' : \'&\') + \'date=\' + date + \'&enddate=\' + enddate;Horde.popup({ url: this.href });return false;')) . _("Edit Attendees and Resources") . '</a>' ?>
+  <?php echo Horde::applicationUrl('attendees.php')->link(array('class' => 'button', 'id' => 'attendees_button', 'target' => '_blank')) . _("Edit Attendees and Resources") . '</a>' ?>
  </td>
 </tr>
 </tbody>
 
 <!-- recurrence -->
 <tr>
- <td colspan="5" class="control toggle" onclick="KronolithEventForm.toggleSection('recurrence')">
-  <?php echo Horde::img('tree/blank.png', '', array('id' => 'toggle_recurrence')) . ' <strong>' . _("Recurrence") ?></strong>
+ <td colspan="5" id="toggle_recurrence" class="control toggle">
+  <?php echo $show_img ?>
+  <?php echo $hide_img ?>
+  <strong><?php echo _("Recurrence") ?></strong>
   <span class="extra" id="extra_recurrence"><?php echo $event->getRecurName(); if ($event->recurs()) echo $event->recurrence->hasRecurEnd() ? sprintf(_(" until %s"), $event->recurrence->recurEnd->strftime($GLOBALS['prefs']->getValue('date_format')) . ($this->event->recurrence->recurEnd->hour == 23 && $this->event->recurrence->recurEnd->min == 59 ? '' : ' ' . $this->event->recurrence->recurEnd->format($GLOBALS['prefs']->getValue('twentyFour') ? 'G:i' : 'g:ia'))) : ($event->recurrence->getRecurCount() ? sprintf(_(", %d times"), $event->recurrence->getRecurCount()) : _(" without end")) ?></span>
  </td>
 </tr>
-<tbody id="section_recurrence">
+<tbody id="section_recurrence" style="display:none">
 <tr>
 <?php if (!empty($event->baseid)):?>
  <td>&nbsp;</td>
@@ -280,57 +294,57 @@ if ($event->alarm) {
   <table cellspacing="0" width="100%">
    <tr>
     <td class="nowrap">
-     <input id="recurnone" type="radio" class="checkbox" name="recur" onclick="KronolithEventForm.clearFields(0);" value="<?php echo Horde_Date_Recurrence::RECUR_NONE ?>"<?php if (!$event->recurs()) echo ' checked="checked"' ?> /><label for="recurnone"> <?php echo _("No recurrence") ?></label>
+     <input id="recurnone" type="radio" class="checkbox" name="recur" value="<?php echo Horde_Date_Recurrence::RECUR_NONE ?>"<?php if (!$event->recurs()) echo ' checked="checked"' ?> /><label for="recurnone"> <?php echo _("No recurrence") ?></label>
     </td>
    </tr>
    <tr>
     <td class="nowrap">
-     <input id="recurdaily" type="radio" class="checkbox" name="recur" onclick="KronolithEventForm.setInterval('recur_daily_interval');" value="<?php echo Horde_Date_Recurrence::RECUR_DAILY ?>"<?php if ($event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_DAILY)) echo ' checked="checked"' ?> /><label for="recurdaily"> <?php echo _("Daily: Recurs every") ?>&nbsp;</label>
-     <input type="text" id="recur_daily_interval" name="recur_daily_interval" size="2" onkeypress="KronolithEventForm.setRecur(1);" onchange="KronolithEventForm.setRecur(1);" value="<?php echo $event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_DAILY) ? $event->recurrence->getRecurInterval() : '' ?>" />&nbsp;<?php echo Horde::label('recur_daily_interval', _("day(s)")) ?>
+     <input id="recurdaily" type="radio" class="checkbox" name="recur" value="<?php echo Horde_Date_Recurrence::RECUR_DAILY ?>"<?php if ($event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_DAILY)) echo ' checked="checked"' ?> /><label id="recurdaily_label" for="recurdaily"> <?php echo _("Daily: Recurs every") ?>&nbsp;</label>
+     <input type="text" id="recur_daily_interval" name="recur_daily_interval" size="2" value="<?php echo $event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_DAILY) ? $event->recurrence->getRecurInterval() : '' ?>" />&nbsp;<?php echo Horde::label('recur_daily_interval', _("day(s)")) ?>
     </td>
    </tr>
    <tr>
     <td class="nowrap">
-     <input id="recurweekly" type="radio" class="checkbox" name="recur" onclick="KronolithEventForm.setInterval('recur_weekly_interval');" value="<?php echo Horde_Date_Recurrence::RECUR_WEEKLY ?>"<?php if ($event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_WEEKLY)) echo ' checked="checked"' ?> /><label for="recurweekly"> <?php echo _("Weekly: Recurs every") ?>&nbsp;</label>
-     <input type="text" id="recur_weekly_interval" name="recur_weekly_interval" size="2" onkeypress="KronolithEventForm.setRecur(2);" onchange="KronolithEventForm.setRecur(2);" value="<?php echo $event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_WEEKLY) ? $event->recurrence->getRecurInterval() : '' ?>" />&nbsp;
+     <input id="recurweekly" type="radio" class="checkbox" name="recur" value="<?php echo Horde_Date_Recurrence::RECUR_WEEKLY ?>"<?php if ($event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_WEEKLY)) echo ' checked="checked"' ?> /><label id="recurweekly_label" for="recurweekly"> <?php echo _("Weekly: Recurs every") ?>&nbsp;</label>
+     <input type="text" id="recur_weekly_interval" name="recur_weekly_interval" size="2" value="<?php echo $event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_WEEKLY) ? $event->recurrence->getRecurInterval() : '' ?>" />&nbsp;
      <?php echo Horde::label('recur_weekly_interval', _("week(s) on:")) ?><br />
-     <label for="mo"><?php echo _("Mo") ?></label><input id="mo" type="checkbox" class="checkbox" name="weekly[]" onclick="KronolithEventForm.setInterval('recur_weekly_interval');KronolithEventForm.setRecur(2);" value="<?php echo Horde_Date::MASK_MONDAY ?>"<?php if ($event->recurs() && $event->recurrence->recurOnDay(Horde_Date::MASK_MONDAY)) echo ' checked="checked"' ?> />&nbsp;
-     <label for="tu"><?php echo _("Tu") ?></label><input id="tu" type="checkbox" class="checkbox" name="weekly[]" onclick="KronolithEventForm.setInterval('recur_weekly_interval');KronolithEventForm.setRecur(2);" value="<?php echo Horde_Date::MASK_TUESDAY ?>"<?php if ($event->recurs() && $event->recurrence->recurOnDay(Horde_Date::MASK_TUESDAY)) echo ' checked="checked"' ?> />&nbsp;
-     <label for="we"><?php echo _("We") ?></label><input id="we" type="checkbox" class="checkbox" name="weekly[]" onclick="KronolithEventForm.setInterval('recur_weekly_interval');KronolithEventForm.setRecur(2);" value="<?php echo Horde_Date::MASK_WEDNESDAY ?>"<?php if ($event->recurs() && $event->recurrence->recurOnDay(Horde_Date::MASK_WEDNESDAY)) echo ' checked="checked"' ?> />&nbsp;
-     <label for="th"><?php echo _("Th") ?></label><input id="th" type="checkbox" class="checkbox" name="weekly[]" onclick="KronolithEventForm.setInterval('recur_weekly_interval');KronolithEventForm.setRecur(2);" value="<?php echo Horde_Date::MASK_THURSDAY ?>"<?php if ($event->recurs() && $event->recurrence->recurOnDay(Horde_Date::MASK_THURSDAY)) echo ' checked="checked"' ?> />&nbsp;
-     <label for="fr"><?php echo _("Fr") ?></label><input id="fr" type="checkbox" class="checkbox" name="weekly[]" onclick="KronolithEventForm.setInterval('recur_weekly_interval');KronolithEventForm.setRecur(2);" value="<?php echo Horde_Date::MASK_FRIDAY ?>"<?php if ($event->recurs() && $event->recurrence->recurOnDay(Horde_Date::MASK_FRIDAY)) echo ' checked="checked"' ?> />&nbsp;
-     <label for="sa"><?php echo _("Sa") ?></label><input id="sa" type="checkbox" class="checkbox" name="weekly[]" onclick="KronolithEventForm.setInterval('recur_weekly_interval');KronolithEventForm.setRecur(2);" value="<?php echo Horde_Date::MASK_SATURDAY ?>"<?php if ($event->recurs() && $event->recurrence->recurOnDay(Horde_Date::MASK_SATURDAY)) echo ' checked="checked"' ?> />&nbsp;
-     <label for="su"><?php echo _("Su") ?></label><input id="su" type="checkbox" class="checkbox" name="weekly[]" onclick="KronolithEventForm.setInterval('recur_weekly_interval');KronolithEventForm.setRecur(2);" value="<?php echo Horde_Date::MASK_SUNDAY ?>"<?php if ($event->recurs() && $event->recurrence->recurOnDay(Horde_Date::MASK_SUNDAY)) echo ' checked="checked"' ?> />&nbsp;
+     <label for="mo"><?php echo _("Mo") ?></label><input id="mo" type="checkbox" class="checkbox" name="weekly[]" value="<?php echo Horde_Date::MASK_MONDAY ?>"<?php if ($event->recurs() && $event->recurrence->recurOnDay(Horde_Date::MASK_MONDAY)) echo ' checked="checked"' ?> />&nbsp;
+     <label for="tu"><?php echo _("Tu") ?></label><input id="tu" type="checkbox" class="checkbox" name="weekly[]" value="<?php echo Horde_Date::MASK_TUESDAY ?>"<?php if ($event->recurs() && $event->recurrence->recurOnDay(Horde_Date::MASK_TUESDAY)) echo ' checked="checked"' ?> />&nbsp;
+     <label for="we"><?php echo _("We") ?></label><input id="we" type="checkbox" class="checkbox" name="weekly[]" value="<?php echo Horde_Date::MASK_WEDNESDAY ?>"<?php if ($event->recurs() && $event->recurrence->recurOnDay(Horde_Date::MASK_WEDNESDAY)) echo ' checked="checked"' ?> />&nbsp;
+     <label for="th"><?php echo _("Th") ?></label><input id="th" type="checkbox" class="checkbox" name="weekly[]" value="<?php echo Horde_Date::MASK_THURSDAY ?>"<?php if ($event->recurs() && $event->recurrence->recurOnDay(Horde_Date::MASK_THURSDAY)) echo ' checked="checked"' ?> />&nbsp;
+     <label for="fr"><?php echo _("Fr") ?></label><input id="fr" type="checkbox" class="checkbox" name="weekly[]" value="<?php echo Horde_Date::MASK_FRIDAY ?>"<?php if ($event->recurs() && $event->recurrence->recurOnDay(Horde_Date::MASK_FRIDAY)) echo ' checked="checked"' ?> />&nbsp;
+     <label for="sa"><?php echo _("Sa") ?></label><input id="sa" type="checkbox" class="checkbox" name="weekly[]" value="<?php echo Horde_Date::MASK_SATURDAY ?>"<?php if ($event->recurs() && $event->recurrence->recurOnDay(Horde_Date::MASK_SATURDAY)) echo ' checked="checked"' ?> />&nbsp;
+     <label for="su"><?php echo _("Su") ?></label><input id="su" type="checkbox" class="checkbox" name="weekly[]" value="<?php echo Horde_Date::MASK_SUNDAY ?>"<?php if ($event->recurs() && $event->recurrence->recurOnDay(Horde_Date::MASK_SUNDAY)) echo ' checked="checked"' ?> />&nbsp;
     </td>
    </tr>
    <tr>
     <td class="nowrap">
-     <input id="recurmonthday" type="radio" class="checkbox" name="recur" onclick="KronolithEventForm.setInterval('recur_day_of_month_interval');" value="<?php echo Horde_Date_Recurrence::RECUR_MONTHLY_DATE ?>"<?php if ($event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_MONTHLY_DATE)) echo ' checked="checked"' ?> /><label for="recurmonthday"> <?php echo _("Monthly: Recurs every") ?>&nbsp;</label>
-     <input type="text" id="recur_day_of_month_interval" name="recur_day_of_month_interval" size="2" onkeypress="KronolithEventForm.setRecur(3);" onchange="KronolithEventForm.setRecur(3);" value="<?php echo $event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_MONTHLY_DATE) ? $event->recurrence->getRecurInterval() : '' ?>" />&nbsp;<?php echo Horde::label('recur_day_of_month_interval', _("month(s)") . ' ' . _("on the same date")) ?>
+     <input id="recurmonthday" type="radio" class="checkbox" name="recur" value="<?php echo Horde_Date_Recurrence::RECUR_MONTHLY_DATE ?>"<?php if ($event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_MONTHLY_DATE)) echo ' checked="checked"' ?> /><label id="recurmonthday_label" for="recurmonthday"> <?php echo _("Monthly: Recurs every") ?>&nbsp;</label>
+     <input type="text" id="recur_day_of_month_interval" name="recur_day_of_month_interval" size="2" value="<?php echo $event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_MONTHLY_DATE) ? $event->recurrence->getRecurInterval() : '' ?>" />&nbsp;<?php echo Horde::label('recur_day_of_month_interval', _("month(s)") . ' ' . _("on the same date")) ?>
     </td>
    </tr>
    <tr>
     <td class="nowrap">
-     <input id="recurmonthweek" type="radio" class="checkbox" name="recur" onclick="KronolithEventForm.setInterval('recur_week_of_month_interval');" value="<?php echo Horde_Date_Recurrence::RECUR_MONTHLY_WEEKDAY ?>"<?php if ($event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_MONTHLY_WEEKDAY)) echo ' checked="checked"' ?> /><label for="recurmonthweek"> <?php echo _("Monthly: Recurs every") ?>&nbsp;</label>
-     <input type="text" id="recur_week_of_month_interval" name="recur_week_of_month_interval" size="2" onkeypress="KronolithEventForm.setRecur(4);" onchange="KronolithEventForm.setRecur(4);" value="<?php echo $event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_MONTHLY_WEEKDAY) ? $event->recurrence->getRecurInterval() : '' ?>" />&nbsp;<?php echo Horde::label('recur_week_of_month_interval', _("month(s)") . ' ' . _("on the same weekday")) ?>
+     <input id="recurmonthweek" type="radio" class="checkbox" name="recur" value="<?php echo Horde_Date_Recurrence::RECUR_MONTHLY_WEEKDAY ?>"<?php if ($event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_MONTHLY_WEEKDAY)) echo ' checked="checked"' ?> /><label id="recurmonthweek_label" for="recurmonthweek"> <?php echo _("Monthly: Recurs every") ?>&nbsp;</label>
+     <input type="text" id="recur_week_of_month_interval" name="recur_week_of_month_interval" size="2" value="<?php echo $event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_MONTHLY_WEEKDAY) ? $event->recurrence->getRecurInterval() : '' ?>" />&nbsp;<?php echo Horde::label('recur_week_of_month_interval', _("month(s)") . ' ' . _("on the same weekday")) ?>
     </td>
    </tr>
    <tr>
     <td class="nowrap">
-     <input id="recuryear" type="radio" class="checkbox" name="recur" onclick="KronolithEventForm.setInterval('recur_yearly_interval');" value="<?php echo Horde_Date_Recurrence::RECUR_YEARLY_DATE ?>"<?php if ($event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_YEARLY_DATE)) echo ' checked="checked"' ?> /><label for="recuryear"> <?php echo _("Yearly: Recurs every") ?>&nbsp;</label>
-     <input type="text" id="recur_yearly_interval" name="recur_yearly_interval" size="2" onkeypress="KronolithEventForm.setRecur(5);" onchange="KronolithEventForm.setRecur(5);" value="<?php echo $event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_YEARLY_DATE) ? $event->recurrence->getRecurInterval() : '' ?>" />&nbsp;<?php echo Horde::label('recur_yearly_interval', _("year(s) on the same date")) ?>
+     <input id="recuryear" type="radio" class="checkbox" name="recur" value="<?php echo Horde_Date_Recurrence::RECUR_YEARLY_DATE ?>"<?php if ($event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_YEARLY_DATE)) echo ' checked="checked"' ?> /><label id="recuryear_label" for="recuryear"> <?php echo _("Yearly: Recurs every") ?>&nbsp;</label>
+     <input type="text" id="recur_yearly_interval" name="recur_yearly_interval" size="2" value="<?php echo $event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_YEARLY_DATE) ? $event->recurrence->getRecurInterval() : '' ?>" />&nbsp;<?php echo Horde::label('recur_yearly_interval', _("year(s) on the same date")) ?>
     </td>
    </tr>
    <tr>
     <td class="nowrap">
-     <input id="recuryearday" type="radio" class="checkbox" name="recur" onclick="KronolithEventForm.setInterval('recur_yearly_day_interval');" value="<?php echo Horde_Date_Recurrence::RECUR_YEARLY_DAY ?>"<?php if ($event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_YEARLY_DAY)) echo ' checked="checked"' ?> /><label for="recuryearday"> <?php echo _("Yearly: Recurs every") ?>&nbsp;</label>
-     <input type="text" id="recur_yearly_day_interval" name="recur_yearly_day_interval" size="2" onkeypress="KronolithEventForm.KronolithEventForm.setRecur(6);" onchange="KronolithEventForm.setRecur(6);" value="<?php echo $event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_YEARLY_DAY) ? $event->recurrence->getRecurInterval() : '' ?>" />&nbsp;<?php echo Horde::label('recur_yearly_day_interval', _("year(s) on the same day of the year")) ?>
+     <input id="recuryearday" type="radio" class="checkbox" name="recur" value="<?php echo Horde_Date_Recurrence::RECUR_YEARLY_DAY ?>"<?php if ($event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_YEARLY_DAY)) echo ' checked="checked"' ?> /><label id="recuryearday_label" for="recuryearday"> <?php echo _("Yearly: Recurs every") ?>&nbsp;</label>
+     <input type="text" id="recur_yearly_day_interval" name="recur_yearly_day_interval" size="2" value="<?php echo $event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_YEARLY_DAY) ? $event->recurrence->getRecurInterval() : '' ?>" />&nbsp;<?php echo Horde::label('recur_yearly_day_interval', _("year(s) on the same day of the year")) ?>
     </td>
    </tr>
    <tr>
     <td class="nowrap">
-     <input id="recuryearweekday" type="radio" class="checkbox" name="recur" onclick="KronolithEventForm.setInterval('recur_yearly_weekday_interval');" value="<?php echo Horde_Date_Recurrence::RECUR_YEARLY_WEEKDAY ?>"<?php if ($event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_YEARLY_WEEKDAY)) echo ' checked="checked"' ?> /><label for="recuryearweekday"> <?php echo _("Yearly: Recurs every") ?>&nbsp;</label>
-     <input type="text" id="recur_yearly_weekday_interval" name="recur_yearly_weekday_interval" size="2" onkeypress="KronolithEventForm.setRecur(7);" onchange="KronolithEventForm.setRecur(7);" value="<?php echo $event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_YEARLY_WEEKDAY) ? $event->recurrence->getRecurInterval() : '' ?>" />&nbsp;<?php echo Horde::label('recur_yearly_weekday_interval', _("year(s) on the same weekday and month of the year")) ?>
+     <input id="recuryearweekday" type="radio" class="checkbox" name="recur" value="<?php echo Horde_Date_Recurrence::RECUR_YEARLY_WEEKDAY ?>"<?php if ($event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_YEARLY_WEEKDAY)) echo ' checked="checked"' ?> /><label id="recuryearweekday_label" for="recuryearweekday"> <?php echo _("Yearly: Recurs every") ?>&nbsp;</label>
+     <input type="text" id="recur_yearly_weekday_interval" name="recur_yearly_weekday_interval" size="2" value="<?php echo $event->recurs() && $event->recurrence->hasRecurType(Horde_Date_Recurrence::RECUR_YEARLY_WEEKDAY) ? $event->recurrence->getRecurInterval() : '' ?>" />&nbsp;<?php echo Horde::label('recur_yearly_weekday_interval', _("year(s) on the same weekday and month of the year")) ?>
     </td>
    </tr>
   </table>
@@ -356,14 +370,10 @@ if ($event->alarm) {
   <?php echo $event->html('recur_end[year]') ?> - <?php echo $event->html('recur_end[month]') ?> - <?php echo $event->html('recur_end[day]') ?>
 <?php if ($GLOBALS['browser']->hasFeature('dom')): ?>
   <span id="recur_end_wday"></span>
-  <script type="text/javascript">KronolithEventForm.updateWday('recur_end_wday');</script>
  </td>
  <td>
-<?php
-Horde::addScriptFile('open_calendar.js', 'horde', array('direct' => false));
-echo Horde::url('#')->link(array('title' => _("Select a date"), 'onclick' => 'openCalendar(\'recur_endimg\', \'recur_end\', \'' . addslashes($event->js('recur_end')) . '\'); return false;')) . Horde::img('calendar.png', _("Set recurrence end date"), 'id="recur_endimg"') . '</a>';
-endif;
-?>
+  <?php echo Horde::img('calendar.png', _("Set recurrence end date"), 'id="recur_end_img"') ?>
+<?php endif; ?>
  </td>
 </tr>
 <tr>
@@ -396,12 +406,14 @@ endif;
 
 <!-- tags  -->
 <tr>
-<td colspan="5" class="control toggle" onclick="KronolithEventForm.toggleSection('tags')">
- <?php echo Horde::img('tree/blank.png', '', array('id' => 'toggle_tags')) . ' <strong>' . _("Tags") ?></strong>
+<td colspan="5" id="toggle_tags" class="control toggle">
+  <?php echo $show_img ?>
+  <?php echo $hide_img ?>
+  <strong><?php echo _("Tags") ?></strong>
   <span class="extra" id="extra_tags"><?php echo (!empty($tags) ? htmlspecialchars($tags) : '');?></span>
   </td>
 </tr>
-<tr id="section_tags">
+<tr id="section_tags" style="display:none">
  <td class="rightAlign">
      <strong><?php echo Horde::label('tags', _("Tags"))?></strong>
  </td>
@@ -429,7 +441,7 @@ endif;
  <td colspan="4">
   <?php echo implode("\n", $buttons) ?>
   <?php echo $cancelurl->link(array('class' => 'button')) . _("Cancel") . '</a>' ?>
-  <input type="button" name="resetButton" class="button" value="<?php echo _("Reset to Defaults") ?>" onclick="document.eventform.reset(); KronolithEventForm.updateWday('start_wday'); KronolithEventForm.updateWday('end_wday');" />
+  <input type="button" name="resetButton" class="button" value="<?php echo _("Reset to Defaults") ?>" />
   </td>
  </tr>
 </table>
diff --git a/kronolith/templates/edit/edit_timespan.inc b/kronolith/templates/edit/edit_timespan.inc
index c0d25b13d..a39947ab9 100644
--- a/kronolith/templates/edit/edit_timespan.inc
+++ b/kronolith/templates/edit/edit_timespan.inc
@@ -19,14 +19,10 @@
   <?php echo $event->html('start[day]') ?>
 <?php if ($GLOBALS['browser']->hasFeature('dom')): ?>
   <span id="start_wday"></span>
-  <script type="text/javascript">
-  KronolithEventForm.updateWday('start_wday');
-  </script>
  </td>
  <td>
-<?php Horde::addScriptFile('open_calendar.js', 'horde', array('direct' => false)); ?>
-  <div id="goto" style="display:none"></div>
-  <?php echo Horde::url('#')->link(array('title' => _("Select a date"), 'onclick' => 'openCalendar(\'startimg\', \'start\', \'' . addslashes($event->js('start')) . '\'); return false;')) . Horde::img('calendar.png', _("Set start date"), 'id="startimg"') . '</a>'; endif; ?>
+  <?php echo Horde::img('calendar.png', _("Set start date"), 'id="start_img"') ?>
+<?php endif; ?>
  </td>
 </tr>
 
@@ -46,8 +42,8 @@
           $pm = ' checked="checked"';
       }
   ?>
-  <input id="am" type="radio" class="checkbox" name="am_pm" value="AM"<?php echo $am ?> onclick="$('allday').checked=false;KronolithEventForm.updateEndDate();" /><label for="am" onclick="$('allday').checked=false;KronolithEventForm.updateEndDate();">AM</label>
-  <input id="pm" type="radio" class="checkbox" name="am_pm" value="PM"<?php echo $pm ?> onclick="$('allday').checked=false;KronolithEventForm.updateEndDate();" /><label for="pm" onclick="$('allday').checked=false;KronolithEventForm.updateEndDate();">PM</label>
+  <input id="am" type="radio" class="checkbox" name="am_pm" value="AM"<?php echo $am ?> /><label id="am_label" for="am">AM</label>
+  <input id="pm" type="radio" class="checkbox" name="am_pm" value="PM"<?php echo $pm ?> /><label id="pm_label" for="pm">PM</label>
   <?php } ?>
  </td>
 </tr>
@@ -69,16 +65,10 @@
   <?php echo $event->html('end[day]') ?>
 <?php if ($GLOBALS['browser']->hasFeature('dom')): ?>
   <span id="end_wday"></span>
-  <script type="text/javascript">
-  KronolithEventForm.updateWday('end_wday');
-  </script>
   </td>
   <td rowspan="2" valign="top">
-<?php
-Horde::addScriptFile('open_calendar.js', 'horde', array('direct' => false));
-echo Horde::url('#')->link(array('title' => _("Select a date"), 'onclick' => 'openCalendar(\'endimg\', \'end\', \'' . addslashes($event->js('end')) . '\'); return false;')) . Horde::img('calendar.png', _("Set end date"), array('id' => 'endimg')) . '</a>';
-endif;
-?>
+   <?php echo Horde::img('calendar.png', _("Set end date"), array('id' => 'end_img')) ?>
+<?php endif; ?>
  </td>
 </tr>
 
@@ -101,8 +91,8 @@ endif;
           $pm = ' checked="checked"';
       }
   ?>
-  <input id="eam" type="radio" class="checkbox" name="end_am_pm" value="AM"<?php echo $am ?> onclick="$('end').checked=true;KronolithEventForm.updateDuration()" /><label for="eam" onclick="$('end').checked=true;KronolithEventForm.updateDuration()">AM</label>
-  <input id="epm" type="radio" class="checkbox" name="end_am_pm" value="PM"<?php echo $pm ?> onclick="$('end').checked=true;KronolithEventForm.updateDuration()" /><label for="epm" onclick="$('end').checked=true;KronolithEventForm.updateDuration()">PM</label>
+  <input id="eam" type="radio" class="checkbox" name="end_am_pm" value="AM"<?php echo $am ?> /><label id="eam_label" for="eam">AM</label>
+  <input id="epm" type="radio" class="checkbox" name="end_am_pm" value="PM"<?php echo $pm ?> /><label id="epm_label" for="epm">PM</label>
   <?php } ?>
  </td>
 </tr>
@@ -115,8 +105,8 @@ endif;
  </td>
  <td>&nbsp;</td>
  <td valign="top">
-  <input id="allday" name="whole_day" type="checkbox" class="checkbox" value="1" onclick="KronolithEventForm.setWholeDay(this.value); KronolithEventForm.updateEndDate(); $('duration').checked = true"<?php $dur = $event->getDuration(); if ($dur->wholeDay) echo ' checked="checked"' ?> />
-  <?php echo Horde::label('allday', _("All day")) ?><br />
+  <input id="allday" name="whole_day" type="checkbox" class="checkbox"<?php $dur = $event->getDuration(); if ($dur->wholeDay) echo ' checked="checked"' ?> />
+  <label id="allday_label" for="allday"><?php echo _("All day") ?></label><br />
   <?php printf(_("%s Day(s) %s Hour(s) %s Minutes"), $event->html('dur_day'), $event->html('dur_hour'), $event->html('dur_min')) ?>
 <?php if ($GLOBALS['browser']->hasFeature('dom')): ?>
  </td>
diff --git a/kronolith/templates/edit/javascript.inc b/kronolith/templates/edit/javascript.inc
deleted file mode 100644
index e00af254d..000000000
--- a/kronolith/templates/edit/javascript.inc
+++ /dev/null
@@ -1,288 +0,0 @@
-<script type="text/javascript">
-KronolithEventForm = new Object();
-
-<?php if (!Horde_Util::nonInputVar('issearch')): ?>
-KronolithEventForm.setInterval = function(field)
-{
-    elt = document.eventform[field];
-    if (elt.value == "") {
-        elt.value = 1;
-    }
-
-    if (field == 'recur_daily_interval') KronolithEventForm.clearFields(1);
-    else if (field == 'recur_weekly_interval') KronolithEventForm.clearFields(2);
-    else if (field == 'recur_day_of_month_interval') KronolithEventForm.clearFields(3);
-    else if (field == 'recur_week_of_month_interval') KronolithEventForm.clearFields(4);
-    else if (field == 'recur_yearly_interval') KronolithEventForm.clearFields(5);
-}
-
-KronolithEventForm.setRecur = function(index)
-{
-    document.eventform.recur[index].checked = true;
-    KronolithEventForm.clearFields(index);
-}
-
-KronolithEventForm.clearFields = function(index)
-{
-    var f = document.eventform;
-    if (index != 1) f.recur_daily_interval.value = '';
-    if (index != 2) {
-        f.recur_weekly_interval.value = '';
-        for (var i = 0; i < f.elements.length; i++) {
-            if (f.elements[i].name == 'weekly[]') {
-                f.elements[i].checked = false;
-            }
-        }
-    }
-    if (index != 3) f.recur_day_of_month_interval.value = '';
-    if (index != 4) f.recur_week_of_month_interval.value = '';
-    if (index != 5) f.recur_yearly_interval.value = '';
-}
-
-<?php endif; ?>
-
-KronolithEventForm.setWholeDay = function(wholeDay)
-{
-    if (wholeDay == 1) {
-<?php if ($GLOBALS['prefs']->getValue('twentyFour')): ?>
-        $('start_hour').selectedIndex = 0;
-<?php else: ?>
-        $('start_hour').selectedIndex = 11;
-        $('am').checked = true;
-<?php endif; ?>
-        $('start_min').selectedIndex = 0;
-        $('dur_day').value = 1;
-        $('dur_hour').selectedIndex = 0;
-        $('dur_min').selectedIndex = 0;
-    }
-}
-
-KronolithEventForm.updateWday = function(span)
-{
-<?php if ($GLOBALS['browser']->hasFeature('dom')): ?>
-    wdays = [
-        '<?php echo addslashes(_("Sunday")) ?>',
-        '<?php echo addslashes(_("Monday")) ?>',
-        '<?php echo addslashes(_("Tuesday")) ?>',
-        '<?php echo addslashes(_("Wednesday")) ?>',
-        '<?php echo addslashes(_("Thursday")) ?>',
-        '<?php echo addslashes(_("Friday")) ?>',
-        '<?php echo addslashes(_("Saturday")) ?>'
-    ];
-    if (span == 'start_wday') {
-        spanObj = $('start_wday');
-        day = $('start_day').value;
-        month = $('start_month').value - 1;
-        year = $('start_year').value;
-    } else if (span == 'end_wday') {
-        spanObj = $('end_wday');
-        day = $('end_day').value;
-        month = $('end_month').value - 1;
-        year = $('end_year').value;
-<?php if (!Horde_Util::nonInputVar('issearch')): ?>
-    } else if (span == 'recur_end_wday') {
-        spanObj = $('recur_end_wday');
-        day = $('recur_end_day').value;
-        month = $('recur_end_month').value - 1;
-        year = $('recur_end_year').value;
-<?php endif; ?>
-    }
-    date = new Date(year, month, day)
-    spanObj.innerHTML = '(' + wdays[date.getDay()] + ')';
-<?php endif; ?>
-}
-<?php if (!$GLOBALS['prefs']->getValue('twentyFour')): ?>
-
-// Converts a 12 hour based number to its 24 hour format
-KronolithEventForm.convertTo24Hour = function(in_hour, pm_elementName)
-{
-    if ($F(pm_elementName)) {
-        if (in_hour != 12) {
-            in_hour += 12;
-        }
-    } else if (in_hour == 12) {
-        in_hour = 0;
-    }
-
-    return in_hour;
-}
-<?php endif; ?>
-
-KronolithEventForm.updateDuration = function()
-{
-    var startHour = parseInt($F('start_hour'));
-    var endHour = parseInt($F('end_hour'));
-<?php if (!$GLOBALS['prefs']->getValue('twentyFour')): ?>
-    startHour = KronolithEventForm.convertTo24Hour(startHour, 'pm');
-    endHour = KronolithEventForm.convertTo24Hour(endHour, 'epm');
-<?php endif; ?>
-    var startDate = Date.UTC($F('start_year'),
-                             $F('start_month') - 1,
-                             $F('start_day'),
-                             startHour,
-                             $F('start_min'));
-    var endDate = Date.UTC($F('end_year'),
-                           $F('end_month') - 1,
-                           $F('end_day'),
-                           endHour,
-                           $F('end_min'));
-    var failed = false;
-    if (endDate < startDate) {
-<?php if (!$GLOBALS['prefs']->getValue('twentyFour')): ?>
-        // If the end hour is marked as the (default) AM, and the
-        // start hour is also AM, automatically default the end hour
-        // to PM if the date is otherwise the same - assume that the
-        // user wants a 9am-2pm event (for example), instead of
-        // throwing an error.
-        if ($F('start_year') == $F('end_year') &&
-            $F('start_month') == $F('end_month') &&
-            $F('start_day') == $F('end_day') &&
-            !$F('pm') && !$F('epm')) {
-            // Toggle the end date to PM.
-            $('epm').checked = true;
-
-            // Recalculate end time.
-            var endHour = parseInt($F('end_hour'));
-            endHour = KronolithEventForm.convertTo24Hour(endHour, 'epm');
-            endDate = Date.UTC($F('end_year'),
-                               $F('end_month') - 1,
-                               $F('end_day'),
-                               endHour,
-                               $F('end_min'));
-        } else {
-<?php endif; ?>
-        alert('<?php echo addslashes(_("The end date must be later than the start date.")) ?>');
-        endDate = startDate;
-        failed = true;
-<?php if (!$GLOBALS['prefs']->getValue('twentyFour')): ?>
-        }
-<?php endif; ?>
-    }
-    var duration = (endDate - startDate) / 1000;
-    $('dur_day').value = Math.floor(duration / 86400);
-    duration %= 86400;
-    var durHour = Math.floor(duration / 3600);
-    duration %= 3600;
-    var durMin = Math.floor(duration / 60 / 5);
-    $('dur_hour').selectedIndex = durHour;
-    $('dur_min').selectedIndex = durMin;
-    $('allday').checked = false;
-    if (failed) {
-    	KronolithEventForm.updateEndDate();
-    }
-}
-
-KronolithEventForm.updateEndDate = function()
-{
-    var yearDiff = <?php echo date('Y') - 1 ?>;
-    var startHour = parseInt($F('start_hour'));
-<?php if (!$GLOBALS['prefs']->getValue('twentyFour')): ?>
-    startHour = KronolithEventForm.convertTo24Hour(startHour, 'pm');
-<?php endif; ?>
-    var startDate = new Date($F('start_year'),
-                             $F('start_month') - 1,
-                             $F('start_day'),
-                             startHour,
-                             $F('start_min'));
-    var endDate = new Date();
-    var minutes = $F('dur_day') * 1440;
-    minutes += $F('dur_hour') * 60;
-    minutes += parseInt($F('dur_min'));
-    var msecs = minutes * 60000;
-    endDate.setTime(startDate.getTime() + msecs);
-    var endYear = endDate.getYear();
-    if (endYear < 1900) {
-        endYear += 1900;
-    }
-    $('end_year').value = endYear;
-    $('end_month').selectedIndex = endDate.getMonth();
-    $('end_day').selectedIndex = endDate.getDate() - 1;
-    var endHour = endDate.getHours()
-<?php if (!$GLOBALS['prefs']->getValue('twentyFour')): ?>
-    if (endHour < 12) {
-        if (endHour == 0) {
-            endHour = 12;
-        }
-        $('eam').checked = true;
-    } else {
-        if (endHour > 12) {
-            endHour -= 12;
-        }
-        $('epm').checked = true;
-    }
-    endHour -= 1;
-<?php endif; ?>
-    $('end_hour').selectedIndex = endHour;
-    $('end_min').selectedIndex = endDate.getMinutes() / 5;
-    KronolithEventForm.updateWday('end_wday');
-}
-
-KronolithEventForm.toggleAlarmMethods = function()
-{
-    if ($('nooverwrite').checked) {
-        $('notification_options').hide();
-    } else {
-        $('notification_options').show();
-        $('yesalarm').checked = true;
-    }
-}
-
-KronolithEventForm.setStartDate = function(date)
-{
-    var year = parseInt(date.substr(0, 4));
-    var month = parseInt(date.substr(4, 2));
-    var day = parseInt(date.substr(6, 2));
-
-    $('start_year').value = year;
-    $('start_month').selectedIndex = month - 1;
-    $('start_day').selectedIndex = day - 1;
-    KronolithEventForm.updateWday('start_wday');
-    KronolithEventForm.updateEndDate();
-
-    // Uncheck recurring weekdays.
-    $('mo').checked = false;
-    $('tu').checked = false;
-    $('we').checked = false;
-    $('th').checked = false;
-    $('fr').checked = false;
-    $('sa').checked = false;
-    $('su').checked = false;
-}
-
-<?php if (Horde_Util::getFormData('allday') == 1): ?>
-Event.observe(window, 'load', function() {
-    $('allday').click;
-});
-<?php endif; ?>
-
-KronolithEventForm.toggleSection = function(section)
-{
-    var dir = '<?php echo Horde_Themes::img() ?>';
-    if (!$('section_' + section)) {
-        return;
-    }
-    $('section_' + section).toggle();
-    if ($('section_' + section).visible()) {
-        $('toggle_' + section).src = dir + '/minus.png';
-        $('toggle_' + section).alt = '<?php addslashes(_("Hide")) ?>';
-        if ($('extra_' + section)) {
-            $('extra_' + section).hide();
-        }
-    } else {
-        $('toggle_' + section).src = dir + '/plus.png';
-        $('toggle_' + section).alt = '<?php addslashes(_("Show")) ?>';
-        if ($('extra_' + section)) {
-            $('extra_' + section).show();
-        }
-    }
-}
-Event.observe(window, 'load', function() {
-    KronolithEventForm.toggleSection('alarm');
-    KronolithEventForm.toggleSection('description');
-    KronolithEventForm.toggleSection('url');
-    KronolithEventForm.toggleSection('attendees');
-    KronolithEventForm.toggleSection('recurrence');
-    KronolithEventForm.toggleSection('tags');
-});
-
-</script>
diff --git a/kronolith/templates/javascript_defs.php b/kronolith/templates/javascript_defs.php
index 3d9d4a51e..e5402cbd7 100644
--- a/kronolith/templates/javascript_defs.php
+++ b/kronolith/templates/javascript_defs.php
@@ -7,16 +7,18 @@ $charset = $GLOBALS['registry']->getCharset();
 
 /* Variables used in core javascript files. */
 $var = array(
-    'view_url' => (string)Horde::applicationUrl('view.php'),
-    'pref_api_url' => (string)Horde::getServiceLink('prefsapi', 'kronolith'),
     'calendar_info_url' => (string)Horde::applicationUrl('calendars/info.php', true),
     'page_title' => $GLOBALS['registry']->get('name') . ' :: ',
+    'pref_api_url' => (string)Horde::getServiceLink('prefsapi', 'kronolith'),
+    'twentyFour' => intval($GLOBALS['prefs']->getValue('twentyFour')),
+    'view_url' => (string)Horde::applicationUrl('view.php'),
 );
 
 /* Gettext strings used in core javascript files. */
 $gettext = array_map('addslashes', array(
-    'loading' => _("Loading ..."),
     'close' => _("Close"),
+    'enddate_error' => _("The end date must be later than the start date."),
+    'loading' => _("Loading ..."),
 ));
 
 ?>
diff --git a/kronolith/templates/search/search_advanced.inc b/kronolith/templates/search/search_advanced.inc
index 03c7f439f..a6372a978 100644
--- a/kronolith/templates/search/search_advanced.inc
+++ b/kronolith/templates/search/search_advanced.inc
@@ -1,7 +1,3 @@
-<?php
-$issearch = true;
-require KRONOLITH_TEMPLATES . '/edit/javascript.inc';
-?>
 <form method="post" name="eventform" action="search.php">
 <?php Horde_Util::pformInput() ?>
 <input type="hidden" name="actionID" value="search_calendar" />
diff --git a/kronolith/themes/screen.css b/kronolith/themes/screen.css
index b5f44e377..eebe883e1 100644
--- a/kronolith/themes/screen.css
+++ b/kronolith/themes/screen.css
@@ -85,6 +85,9 @@ table.monthgrid th, table.monthgrid td {
     border: 1px solid #fff760;
     padding: 8px;
 }
+#eventform #start_img, #eventform #end_img, #eventform #recur_end_img {
+    cursor: pointer;
+}
 
 /* Block-specific styles. */
 .block-monthgrid {
-- 
2.11.0