--- loncom/interface/lonhtmlcommon.pm	2012/03/26 02:47:46	1.305
+++ loncom/interface/lonhtmlcommon.pm	2012/03/26 10:24:08	1.306
@@ -1,7 +1,7 @@
 # The LearningOnline Network with CAPA
 # a pile of common html routines
 #
-# $Id: lonhtmlcommon.pm,v 1.305 2012/03/26 02:47:46 www Exp $
+# $Id: lonhtmlcommon.pm,v 1.306 2012/03/26 10:24:08 foxr Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -1309,21 +1309,30 @@ sub htmlareaselectactive {
                 $.fn.jPicker.defaults.images.clientPath="/adm/jpicker/images/";
                 $(".colorchooser").jPicker();
 
-                // Only define the countdown if a dueDate variable is defined:
-
-               if (typeof(dueDate) != "undefined") {
-                  $("#duedatecountdown").countdown({until: dueDate, compact: true, 
-                                                  layout: "<b>'.&mt("Due in: {dn} {dl} {hnn}{sep}{mnn}{sep}{snn}").'</b>",
-                                                  onTick: function (periods) {
-                         if($.countdown.periodsToSeconds(periods) < 60) {
-                             $(this).css("color", "red");   //Highlight last minute.
-                         }
-                      }
-                  });
-               }
 
 	});
 ';
+    # Code to put a due date countdown in 'duedatecountdown' span.
+    # This is currently located in the breadcrumb headers.
+    # note that the dueDateLayout is internatinoalized below.
+    # Here document is used to support the substitution into the javascript below.
+    # ..which unfortunately necessitates escaping the $'s in the javascript.
+
+    my $dueDateLayout = '<b>' .  &mt('Due in: {dn} {dl} {hnn}{sep}{mnn}{sep}{snn}') . '</b>';
+    $output .= <<JAVASCRIPT;
+\$(document).ready(function() {
+   if (typeof(dueDate) != "undefined") {
+      \$("#duedatecountdown").countdown({until: dueDate, compact: true, 
+         layout: "$dueDateLayout",
+         onTick: function (periods) {
+            if(\$.countdown.periodsToSeconds(periods) < 60) {
+               \$(this).css("color", "red");   //Highlight last minute.
+            }
+         }
+      });
+   }
+});
+JAVASCRIPT
     if ($dragmath_prefix ne '') {
         $output .= '