--- loncom/interface/lonmenu.pm	2015/03/03 16:53:59	1.431.2.1
+++ loncom/interface/lonmenu.pm	2015/04/14 21:35:52	1.431.2.2
@@ -1,7 +1,7 @@
 # The LearningOnline Network with CAPA
 # Routines to control the menu
 #
-# $Id: lonmenu.pm,v 1.431.2.1 2015/03/03 16:53:59 musolffc Exp $
+# $Id: lonmenu.pm,v 1.431.2.2 2015/04/14 21:35:52 musolffc Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -1533,13 +1533,46 @@ function toggleCountdown() {
     return;
 }
 
-function zeroTimer() {
-    if (confirm('Are you sure?')) {
-        document.getElementsByName('done')[0].value = 'true';
-        document.getElementsByName('doneButton')[0].submit();
-    }
+END
 }
 
+# This creates a "done button" for timed events.  The confirmation box is a jQuerey
+# dialog widget.  Clicking OK will set (done = 'true') which is checked in 
+# lonhomework.pm.
+sub done_button_js {
+    return <<END;
+
+<form method="post" name="doneButton">
+    <input type="hidden" name="done" value=""/>
+    <button id="done-confirm-opener" type="button">Done</button>
+</form> 
+
+<div id="done-confirm" title="WARNING!">
+    <p></span>You are trying to end this timed event early.  Confirming that you are done will cause the time to expire and prevent you from changing any answers in the current folder.  Click "OK" if you are completely finished.  Click "Cancel" to continue working.</p>
+</div>
+
+<script>
+\$( "#done-confirm" ).dialog({ autoOpen: false });
+\$( "#done-confirm-opener" ).click(function() {
+    \$( "#done-confirm" ).dialog( "open" );
+    \$( "#done-confirm" ).dialog({
+      resizable: false,
+      height:320,
+      modal: true,
+      buttons: {
+        "OK": function() {
+            \$( this ).dialog( "close" );
+            \$( '[name="done"]' )[0].value = 'true';
+            \$( '[name="doneButton"]' )[0].submit();
+        },
+        Cancel: function() {
+          \$( this ).dialog( "close" );
+        }
+      }    
+    })
+});
+</script>
+
 END
 }
 
@@ -2218,11 +2251,14 @@ sub countdown_timer {
         if (($duedate && $duedate > time) ||
             (!$duedate && $hastimeleft) ||
             ($slot_name ne '' && $slothastime)) {
-            my ($collapse,$expand,$alttxt,$title,$currdisp);
+            my ($collapse,$expand,$alttxt,$title,$currdisp,$donebutton);
             if ((@interval > 1 && $hastimeleft) ||
                 ($type eq 'Task' && $slothastime)) {
                 $currdisp = 'inline';
                 $collapse = '&#9658;&nbsp;';
+                $donebutton = &done_button_js();
+
+
             } else {
                 $currdisp = 'none';
                 $expand = '&#9668;&nbsp;';
@@ -2232,6 +2268,7 @@ sub countdown_timer {
                 $title = $alttxt.'&nbsp;';
             }
             my $desc = &mt('Countdown to due date/time');
+
             return <<END;
 
 <a href="javascript:toggleCountdown();" class="LC_menubuttons_link">
@@ -2242,10 +2279,7 @@ $collapse
 <a href="javascript:toggleCountdown();" class="LC_menubuttons_link">
 <span id="ddcountexpand" class="LC_menubuttons_inline_text" >$expand</span>
 <img src="/res/adm/pages/timer.png" title="$desc" class="LC_icon" alt="$alttxt" /><span class="LC_menubuttons_inline_text">$title</span></a>
-<form method="post" name="doneButton">
-<input type="hidden" name="done" value=""/>
-<button type="button" onclick="zeroTimer()">Done</button>
-</form>    
+$donebutton
 END
         }
     }