// Countdown script  v1.1
// documentation: http://www.dithered.com/javascript/countdown/index.html
// license: http://creativecommons.org/licenses/by/1.0/
// code by Chris Nott (chris[at]dithered[dot]com)

/*
Modified/Customized/Enhanced by Popeye Theophilus Barrnumb (c) 2004
(Popeye[att]P-t-B[dott]com) I did it myself and it works! Yay!

Added optional leading zero suppression for days, hours and minutes
with a "blank image" for better viewing.

This "system" uses object oriented programming techniques
where "Countdown" becomes a new object with the following
Properties and Methods as defined in the code below.

   Properties:
      .name
      .updateFrequency
      .images
      .endDate
      .format
      .zeroSuppress  (NEW/Added)
      .lastValues    (NEW/Added)
      .allowRollover (NEW/Added)

   Methods:
      .setImages
      .setEndDate
      .start
      .update
*/


function Countdown (p_name, p_updateFrequency, p_zeroSuppress, p_allowRollover)
{
   this.name = p_name;
   this.updateFrequency = p_updateFrequency;
   this.images = null;
   this.endDate = new Date();
   this.format = (document.getElementById && document.getElementById (this.name)) ?
      document.getElementById (this.name).innerHTML : "";

   if (p_zeroSuppress)
      this.zeroSuppress = ":";   // ASCII character succeeding nine (9) -- blank image (#10)

   else
      this.zeroSuppress = "0";   // no zero suppression

   this.lastValues = "ddddhhmms";   // for speed changing only changed values

   this.allowRollover = p_allowRollover != true ? false : true    // rollover for countup flag
}


Countdown.prototype.setImages =
   function (p_num0, p_num1, p_num2, p_num3, p_num4,
      p_num5, p_num6, p_num7, p_num8, p_num9, p_blank)
{
   this.images = new Array (p_num0, p_num1, p_num2, p_num3, p_num4,
      p_num5, p_num6, p_num7, p_num8, p_num9, p_blank);
   preloadImages (p_num0, p_num1, p_num2, p_num3, p_num4,
      p_num5, p_num6, p_num7, p_num8, p_num9, p_blank);
};


Countdown.prototype.setEndDate =
   function (p_year, p_month, p_day, p_hour, p_minute, p_second, p_milliseconds)
{
   this.endDate = new Date (p_year, p_month - 1, p_day, ( (p_hour) ? p_hour : 0),
      ( (p_minute) ? p_minute : 0), ( (p_second) ? p_second : 0),
         ( (p_milliseconds) ? p_milliseconds : 0));
};


Countdown.prototype.start = function()
{
   this.update();
   setInterval (this.name + ".update()", (this.updateFrequency ? this.updateFrequency : 1000) );
};


Countdown.prototype.update =
   function()
{
   // calculate the time until countdown end date
   var now = new Date();
   var difference = this.endDate - now;

   // decompose difference into days, hours, minutes and seconds parts
   var days    = parseInt (difference / 86400000) + "";
   var hours   = parseInt ((difference % 86400000) / 3600000) + "";
   var minutes = parseInt ((difference % 3600000) / 60000) + "";
   var seconds = parseInt ((difference % 60000) / 1000) + "";
   var milliseconds = parseInt (difference % 1000) + "";

   // negative values should be set to 0

   if (isNaN (days) || (days.charAt (0) == "-" && this.allowRollover == false))
      days = "0";
   if (isNaN (hours) || (hours.charAt (0) == "-" && this.allowRollover == false))
      hours = "0";
   if (isNaN (minutes) || (minutes.charAt (0) == "-" && this.allowRollover == false))
      minutes = "0";
   if (isNaN (seconds) || (seconds.charAt (0) == "-" && this.allowRollover == false))
      seconds = "0";

   if (days.charAt (0) == "-")
      days = days.substr (1);
   if (hours.charAt (0) == "-")
      hours = hours.substr (1);
   if (minutes.charAt (0) == "-")
      minutes = minutes.substr (1);
   if (seconds.charAt (0) == "-")
      seconds = seconds.substr (1);

      // display changes differently for images and text countdowns
   if (this.images != null) {
      // OLD single digit values should have a "0" prepended to them
      // depending on zeroSuppression property, either a zero or a "blank" is prepended

      while (days.length < 4)
         days = this.zeroSuppress + days;

      if (hours.length == 1)
         hours = this.zeroSuppress + hours;

      if (minutes.length == 1)
         minutes = this.zeroSuppress + minutes;

      if (seconds.length == 1)
         seconds = "0" + seconds;   // always zero padded left

      var lastdays = this.lastValues.substr (0, 4);
      var lasthours = this.lastValues.substr (4, 2);
      var lastminutes = this.lastValues.substr (6, 2);
      var lastsecten = this.lastValues.substr (8, 1);

      this.lastValues = days + hours + minutes + seconds.charCodeAt (0);
         // don't worry about ones seconds and milliseconds (update display every 10 seconds)

      // update images (modified for speed)

      if (days != lastdays) {
         if (document.images[this.name + "_d1000"])
            document.images[this.name + "_d1000"].src =
               this.images[(days.charCodeAt (0) - 48)];

         if (document.images[this.name + "_d100"])
            document.images[this.name + "_d100"].src =
               this.images[(days.charCodeAt (1) - 48)];

         if (document.images[this.name + "_d10"])
            document.images[this.name + "_d10"].src =
               this.images[(days.charCodeAt (2) - 48)];

         if (document.images[this.name + "_d1"])
            document.images[this.name + "_d1"].src =
               this.images[(days.charCodeAt (3) - 48)];
      }

      if (hours != lasthours) {
         if (document.images[this.name + "_h10"])
            document.images[this.name + "_h10"].src =
               this.images[(hours.charCodeAt (0) - 48)];

         if (document.images[this.name + "_h1"])
            document.images[this.name + "_h1"].src =
               this.images[(hours.charCodeAt (1) - 48)];
      }

      if (minutes != lastminutes) {
         if (document.images[this.name + "_m10"])
            document.images[this.name + "_m10"].src =
               this.images[(minutes.charCodeAt (0) - 48)];

         if (document.images[this.name + "_m1"])
            document.images[this.name + "_m1"].src =
               this.images[(minutes.charCodeAt (1) - 48)];
      }

      if (document.images[this.name + "_s10"]  &&  seconds.charCodeAt (0) != lastsecten)
         document.images[this.name + "_s10"].src =
            this.images[(seconds.charCodeAt (0) - 48)];

      if (document.images[this.name + "_s1"])
         document.images[this.name + "_s1"].src =
            this.images[(seconds.charCodeAt (1) - 48)];  // always do ones digit

      if (document.images[this.name + "_ms1"]) {      // if the ones is there, check all (speed)
         if (isNaN (milliseconds) || milliseconds.charAt (0) == "-")
            milliseconds = "0";     // only mess with milliseconds if needed

         if (milliseconds.length == 1)
            milliseconds = "00" + milliseconds;    // always zero padded left

         else if (milliseconds.length == 2)
            milliseconds = "0" + milliseconds;     // always zero padded left

         if (document.images[this.name + "_ms100"])
            document.images[this.name + "_ms100"].src =
               this.images[(milliseconds.charCodeAt (0) - 48)];

         if (document.images[this.name + "_ms10"])
            document.images[this.name + "_ms10"].src =
               this.images[(milliseconds.charCodeAt (1) - 48)];

         if (document.images[this.name + "_ms1"])
            document.images[this.name + "_ms1"].src =
               this.images[(milliseconds.charCodeAt (2) - 48)];
      }

   } else if (this.format != "") {
      if (document.getElementById && document.getElementById (this.name)) {
         if (isNaN (milliseconds) || milliseconds.charAt (0) == "-")
            milliseconds = "0";     // only mess with milliseconds if needed

         if (milliseconds.length == 1)
            milliseconds = "00" + milliseconds;    // always zero padded left

         else if (milliseconds.length == 2)
            milliseconds = "0" + milliseconds;     // always zero padded left

         var html = this.format;
         html = html.replace (/~d~/, days);
         html = html.replace (/~h~/, hours);
         html = html.replace (/~m~/, minutes);
         html = html.replace (/~s~/, seconds);
         html = html.replace (/~ms~/, milliseconds);

         document.getElementById (this.name).innerHTML = html;
      }
   }
};


// Image preloader (called from .setImages method)
function preloadImages()
{
   if (document.images) {
      for (var ii = 0; ii < preloadImages.arguments.length; ii++) {

         (new Image()).src = preloadImages.arguments[ii];

      }
   }
}

/*

Updated Installation and Usage:

Image-based Countdown Instructions

1. Create 11 images, one for each digit from 0 to 9 and one
as a "blank". All images must be the same width and height.

2. Code your page as you would like it to appear with
placeholder images where the digits of the countdown should
appear. Use one of the digit images as the placeholder image
- the blank is the best choice. You can use between 1 and 4
digits to display the number of days. Make sure there are
enough digits to accurately show the number of days between
now and the day you are counting down to.

3. Add a name attribute to all the countdown digits. The
name value for all the digits should start with the same
letters like "myCountdown" - this is the name that will
identify this countdown timer. This is followed by an "_" and
then a "d", "h", "m", "s", or "ms" to indicate whether the
digit is part of the days, hours, minutes, seconds, or
milliseconds portion of the countdown respectively.

Finally, add a number to indicate what "place" the digit
represents. The hours, minutes, and seconds portions all
have two places - the first place is the tens digit while
the second is the ones digit. The milliseconds can have up
to 3 places - hundreds, tens, and ones. The days can have up
to 4 digits - thousands, hundreds, tens, and ones. Use
"1000" to indicate a thousands digit, a "100" for a hundreds
digit, a "10" for a tens digit, and a "1" for a ones digit.
So the first digit of the hours portion would have a name
value of "myCountdown_h10" (assuming the name of the whole
countdown is "myCountdown"). Any of these digits can be left
out if you like. See the example for more help.

4. After the last digit, add the following code:

   <script type="text/javascript" src="countdown.js">
   <script type="text/javascript">
   //<![CDATA[
   var myCountdown = new Countdown ("myCountdown", 43, true, false);
   myCountdown.setImages ("0.gif", "1.gif", "2.gif", "3.gif", "4.gif",
      "5.gif", "6.gif", "7.gif", "8.gif", "9.gif", "blank.gif");
   myCountdown.setEndDate (2008, 4, 1, 9, 1, 0, 0);
   myCountdown.start();
   //]]>
   </script>

If the countdown.js file is in a different directory than
the html document, be sure to include the relative path to
the Javascript file in the src attribute value of the first
<script> tag.

5. In the first line in the second script, you are telling
the script what name you are giving to your countdown and
how often it will update in milliseconds. The word after the
var and the first word in quotes in the parentheses should
be the same and should be the same as the name you used in
step 3. Use this same word to start lines two to four (the
bit before the period in each line). The number after the
comma in the parentheses is the update frequency in
milliseconds. Avoid numbers smaller than about 30 so that
the countdown doesn't slow your visitor's computer down. If
you leave this number out (and leave the comma out too), the
countdown will update once a second.

6. In the second line in the second script, change the image
names to point at those that you created (remember to use
the correct path to the image if it isn't in the same
directory as the page). The order of the image names should
be the same as that suggested here - 0 to 9 sequentially
with the blank image as the last. Also, all image names must
be quoted and separated by commas as they appear here.

7. The date that you what to count down to goes between the
paratheses in the third line of the second script. Type the
number of the year, the month, and the day separated by
commas. You may also add an hour, minute, second, and
millisecond to this date but they are optional. In the above
example, the date and time being counted down to is 9:01 on
April, 1, 2008. Since the last two digits were 0, they could
have been left out.

8. The last line in the script starts the countdown.

9. New functionality allows counting up rollover.

*/