text: //Javasript name: My Date Time Picker
  //Date created: 16-Nov-2003 23:19
  //Creator: TengYong Ng
  //Website: http://www.rainforestnet.com
  //Copyright (c) 2003 TengYong Ng
  //FileName: DateTimePicker_css.js
  //Version: 2.2.4
  // Note: Permission given to use and modify this script in ANY kind of applications if
  //       header lines are left unchanged.
  //Permission is granted to redistribute and modify this javascript under a FreeBSD License.
  //New Css style version added by Yvan Lavoie (Québec, Canada) 29-Jan-2009
  //Formatted for JSLint compatibility by Labsmedia.com (30-Dec-2010)
  
  
  //Global variables
  
  var winCal;
  var dtToday;
  var Cal;
  var MonthName;
  var WeekDayName1;
  var WeekDayName2;
  var exDateTime;//Existing Date and Time
  var selDate;//selected date. version 1.7
  var calSpanID = "calBorder"; // span ID
  var domStyle = null; // span DOM object with style
  var cnLeft = "0";//left coordinate of calendar span
  var cnTop = "0";//top coordinate of calendar span
  var xpos = 0; // mouse x position
  var ypos = 0; // mouse y position
  var calHeight = 0; // calendar height
  var CalWidth = 208;// calendar width
  var CellWidth = 30;// width of day cell.
  var TimeMode = 24;// TimeMode value. 12 or 24
  var StartYear = 1940; //First Year in drop down year selection
  var EndYear = 5; // The last year of pickable date. if current year is 2011, the last year that still picker will be 2016 (2011+5)
  var CalPosOffsetX = -1; //X position offset relative to calendar icon, can be negative value
  var CalPosOffsetY = 0; //Y position offset relative to calendar icon, can be negative value
  
  //Configurable parameters start
  var SpanBorderColor = "#000000";//span border color
  var SpanBgColor = "#FFFFFF"; //span background color
  var MonthYearColor = "#cc0033"; //Font Color of Month and Year in Calendar header.
  var WeekHeadColor = "#18861B"; //var WeekHeadColor="#18861B";//Background Color in Week header.
  var SundayColor = "#C0F64F"; //var SundayColor="#C0F64F";//Background color of Sunday.
  var SaturdayColor = "#C0F64F"; //Background color of Saturday.
  var WeekDayColor = "#FFEDA6"; //Background color of weekdays.
  var FontColor = "blue"; //color of font in Calendar day cell.
  var TodayColor = "#ffbd35"; //var TodayColor="#FFFF33";//Background color of today.
  var SelDateColor = "#8DD53C"; //var SelDateColor = "#8DD53C";//Backgrond color of selected date in textbox.
  var YrSelColor = "#cc0033"; //color of font of Year selector.
  var MthSelColor = "#cc0033"; //color of font of Month selector if "MonthSelector" is "arrow".
  var HoverColor = "#E0FF38"; //color when mouse move over.
  var DisableColor = "#999966"; //color of disabled cell.
  var CalBgColor = "#ffffff"; //Background color of Calendar window.
  
  var WeekChar = 2;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.
  var DateSeparator = "-";//Date Separator, you can change it to "-" if you want.
  var ShowLongMonth = true;//Show long month name in Calendar header. example: "January".
  var ShowMonthYear = true;//Show Month and Year in Calendar header.
  var ThemeBg = "";//Background image of Calendar window.
  var PrecedeZero = true;//Preceding zero [true|false]
  var MondayFirstDay = true;//true:Use Monday as first day; false:Sunday as first day. [true|false]  //added in version 1.7
  var UseImageFiles = true;//Use image files with "arrows" and "close" button
  var imageFilesPath = CI.base_url+"calendar/";
  //Configurable parameters end
  //alert(imageFilesPath);
  //use the Month and Weekday in your preferred language.
  var MonthName = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var WeekDayName1 = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  var WeekDayName2 = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
  
  
  //end Configurable parameters
  
  //end Global variable
  
  
  // Calendar prototype
  function Calendar(pDate, pCtrl)
  {
  	//Properties
  	this.Date = pDate.getDate();//selected date
  	this.Month = pDate.getMonth();//selected month number
  	this.Year = pDate.getFullYear();//selected year in 4 digits
  	this.Hours = pDate.getHours();
  
  	if (pDate.getMinutes() < 10)
  	{
  		this.Minutes = "0" + pDate.getMinutes();
  	}
  	else
  	{
  		this.Minutes = pDate.getMinutes();
  	}
  
  	if (pDate.getSeconds() < 10)
  	{
  		this.Seconds = "0" + pDate.getSeconds();
  	}
  	else
  	{
  		this.Seconds = pDate.getSeconds();
  	}
  	this.MyWindow = winCal;
  	this.Ctrl = pCtrl;
  	this.Format = "ddMMyyyy";
  	this.Separator = DateSeparator;
  	this.ShowTime = false;
  	this.Scroller = "DROPDOWN";
  	if (pDate.getHours() < 12)
  	{
  		this.AMorPM = "AM";
  	}
  	else
  	{
  		this.AMorPM = "PM";
  	}
  	this.ShowSeconds = false;
  	this.EnableDateMode = ""
  }
  
  Calendar.prototype.GetMonthIndex = function (shortMonthName)
  {
  	for (var i = 0; i < 12; i += 1)
  	{
  		if (MonthName[i].substring(0, 3).toUpperCase() === shortMonthName.toUpperCase())
  		{
  			return i;
  		}
  	}
  };
  
  Calendar.prototype.IncYear = function () {
      if (Cal.Year <= dtToday.getFullYear()+EndYear)
  	    Cal.Year += 1;
  };
  
  Calendar.prototype.DecYear = function () {
      if (Cal.Year > StartYear)
  	    Cal.Year -= 1;
  };
  
  Calendar.prototype.IncMonth = function() {
      if (Cal.Year <= dtToday.getFullYear() + EndYear) {
          Cal.Month += 1;
          if (Cal.Month >= 12) {
              Cal.Month = 0;
              Cal.IncYear();
          }
      }
  };
  
  Calendar.prototype.DecMonth = function() {
      if (Cal.Year >= StartYear) {
          Cal.Month -= 1;
          if (Cal.Month < 0) {
              Cal.Month = 11;
              Cal.DecYear();
          }
      }
  };
  
  Calendar.prototype.SwitchMth = function (intMth)
  {
  	Cal.Month = parseInt(intMth, 10);
  };
  
  Calendar.prototype.SwitchYear = function (intYear)
  {
  	Cal.Year = parseInt(intYear, 10);
  };
  
  Calendar.prototype.SetHour = function(intHour) {
      var MaxHour,
  	MinHour,
  	HourExp = new RegExp("^\\d\\d"),
  	SingleDigit = new RegExp("^\\d{1}$");
  
      if (TimeMode === 24) {
          MaxHour = 23;
          MinHour = 0;
      }
      else if (TimeMode === 12) {
          MaxHour = 12;
          MinHour = 1;
      }
      else {
          alert("TimeMode can only be 12 or 24");
      }
  
      if ((HourExp.test(intHour) || SingleDigit.test(intHour)) && (parseInt(intHour, 10) > MaxHour)) {
          intHour = MinHour;
      }
  
      else if ((HourExp.test(intHour) || SingleDigit.test(intHour)) && (parseInt(intHour, 10) < MinHour)) {
          intHour = MaxHour;
      }
  
      intHour = parseInt(intHour, 10);
      if (SingleDigit.test(intHour)) {
          intHour = "0" + intHour;
      }
  
      if (HourExp.test(intHour) && (parseInt(intHour, 10) <= MaxHour) && (parseInt(intHour, 10) >= MinHour)) {
          if ((TimeMode === 12) && (Cal.AMorPM === "PM")) {
              if (parseInt(intHour, 10) === 12) {
                  Cal.Hours = 12;
              }
              else {
                  Cal.Hours = parseInt(intHour, 10) + 12;
              }
          }
  
          else if ((TimeMode === 12) && (Cal.AMorPM === "AM")) {
              if (intHour === 12) {
                  intHour -= 12;
              }
  
              Cal.Hours = parseInt(intHour, 10);
          }
  
          else if (TimeMode === 24) {
              Cal.Hours = parseInt(intHour, 10);
          }
      }
  
  };
  
  Calendar.prototype.SetMinute = function (intMin)
  {
  	var MaxMin = 59,
  	MinMin = 0,
  
  	SingleDigit = new RegExp("\\d"),
  	SingleDigit2 = new RegExp("^\\d{1}$"),
  	MinExp = new RegExp("^\\d{2}$"),
  
  	strMin = 0;
  
  	if ((MinExp.test(intMin) || SingleDigit.test(intMin)) && (parseInt(intMin, 10) > MaxMin))
  	{
  		intMin = MinMin;
  	}
  
  	else if ((MinExp.test(intMin) || SingleDigit.test(intMin)) && (parseInt(intMin, 10) < MinMin))
  	{
  		intMin = MaxMin;
  	}
  
  	strMin = intMin + "";
  	if (SingleDigit2.test(intMin))
  	{
  		strMin = "0" + strMin;
  	}
  
  	if ((MinExp.test(intMin) || SingleDigit.test(intMin)) && (parseInt(intMin, 10) <= 59) && (parseInt(intMin, 10) >= 0))
  	{
  		Cal.Minutes = strMin;
  	}
  };
  
  Calendar.prototype.SetSecond = function (intSec)
  {
  	var MaxSec = 59,
  	MinSec = 0,
  
  	SingleDigit = new RegExp("\\d"),
  	SingleDigit2 = new RegExp("^\\d{1}$"),
  	SecExp = new RegExp("^\\d{2}$"),
  
  	strSec = 0;
  
  	if ((SecExp.test(intSec) || SingleDigit.test(intSec)) && (parseInt(intSec, 10) > MaxSec))
  	{
  		intSec = MinSec;
  	}
  
  	else if ((SecExp.test(intSec) || SingleDigit.test(intSec)) && (parseInt(intSec, 10) < MinSec))
  	{
  		intSec = MaxSec;
  	}
  
  	strSec = intSec + "";
  	if (SingleDigit2.test(intSec))
  	{
  		strSec = "0" + strSec;
  	}
  
  	if ((SecExp.test(intSec) || SingleDigit.test(intSec)) && (parseInt(intSec, 10) <= 59) && (parseInt(intSec, 10) >= 0))
  	{
  		Cal.Seconds = strSec;
  	}
  
  };
  
  Calendar.prototype.SetAmPm = function (pvalue)
  {
  	this.AMorPM = pvalue;
  	if (pvalue === "PM")
  	{
  		this.Hours = parseInt(this.Hours, 10) + 12;
  		if (this.Hours === 24)
  		{
  			this.Hours = 12;
  		}
  	}
  
  	else if (pvalue === "AM")
  	{
  		this.Hours -= 12;
  	}
  };
  
  Calendar.prototype.getShowHour = function() {
      var finalHour;
  
      if (TimeMode === 12) {
          if (parseInt(this.Hours, 10) === 0) {
              this.AMorPM = "AM";
              finalHour = parseInt(this.Hours, 10) + 12;
          }
  
          else if (parseInt(this.Hours, 10) === 12) {
              this.AMorPM = "PM";
              finalHour = 12;
          }
  
          else if (this.Hours > 12) {
              this.AMorPM = "PM";
              if ((this.Hours - 12) < 10) {
                  finalHour = "0" + ((parseInt(this.Hours, 10)) - 12);
              }
              else {
                  finalHour = parseInt(this.Hours, 10) - 12;
              }
          }
          else {
              this.AMorPM = "AM";
              if (this.Hours < 10) {
                  finalHour = "0" + parseInt(this.Hours, 10);
              }
              else {
                  finalHour = this.Hours;
              }
          }
      }
  
      else if (TimeMode === 24) {
          if (this.Hours < 10) {
              finalHour = "0" + parseInt(this.Hours, 10);
          }
          else {
              finalHour = this.Hours;
          }
      }
  
      return finalHour;
  };
  
  Calendar.prototype.getShowAMorPM = function ()
  {
  	return this.AMorPM;
  };
  
  Calendar.prototype.GetMonthName = function (IsLong)
  {
  	var Month = MonthName[this.Month];
  	if (IsLong)
  	{
  		return Month;
  	}
  	else
  	{
  		return Month.substr(0, 3);
  	}
  };
  
  Calendar.prototype.GetMonDays = function() { //Get number of days in a month
  
      var DaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      if (Cal.IsLeapYear()) {
          DaysInMonth[1] = 29;
      }
  
      return DaysInMonth[this.Month];
  };
  
  Calendar.prototype.IsLeapYear = function ()
  {
  	if ((this.Year % 4) === 0)
  	{
  		if ((this.Year % 100 === 0) && (this.Year % 400) !== 0)
  		{
  			return false;
  		}
  		else
  		{
  			return true;
  		}
  	}
  	else
  	{
  		return false;
  	}
  };
  
  Calendar.prototype.FormatDate = function (pDate)
  {
  	var MonthDigit = this.Month + 1;
  	if (PrecedeZero === true)
  	{
  		if ((pDate < 10) && String(pDate).length===1) //length checking added in version 2.2
  		{		
  			pDate = "0" + pDate;
  		}
  		if (MonthDigit < 10)
  		{
  			MonthDigit = "0" + MonthDigit;
  		}
  	}
  
  	switch (this.Format.toUpperCase())
  	{
  		case "DDMMYYYY":
  		return (pDate + DateSeparator + MonthDigit + DateSeparator + this.Year);
  		case "DDMMMYYYY":
  		return (pDate + DateSeparator + this.GetMonthName(false) + DateSeparator + this.Year);
  		case "MMDDYYYY":
  		return (MonthDigit + DateSeparator + pDate + DateSeparator + this.Year);
  		case "MMMDDYYYY":
  		return (this.GetMonthName(false) + DateSeparator + pDate + DateSeparator + this.Year);
  		case "YYYYMMDD":
  		return (this.Year + DateSeparator + MonthDigit + DateSeparator + pDate);
  		case "YYMMDD":
  		return (String(this.Year).substring(2, 4) + DateSeparator + MonthDigit + DateSeparator + pDate);
  		case "YYMMMDD":
  		return (String(this.Year).substring(2, 4) + DateSeparator + this.GetMonthName(false) + DateSeparator + pDate);
  		case "YYYYMMMDD":
  		return (this.Year + DateSeparator + this.GetMonthName(false) + DateSeparator + pDate);
  		default:
  		return (pDate + DateSeparator + (this.Month + 1) + DateSeparator + this.Year);
  	}
  };
  
  // end Calendar prototype
  
  function GenCell(pValue, pHighLight, pColor, pClickable)
  { //Generate table cell with value
  	var PValue,
  	PCellStr,
  	PClickable,
  	vTimeStr;
  
  	if (!pValue)
  	{
  		PValue = "";
  	}
  	else
  	{
  		PValue = pValue;
  	}
  
  	if (pColor === undefined)
  	    pColor = CalBgColor;
  	
  	if (pClickable !== undefined){
  		PClickable = pClickable;
  	}
  	else{
  		PClickable = true;
  	}
  
  	if (Cal.ShowTime)
  	{
  		vTimeStr = ' ' + Cal.Hours + ':' + Cal.Minutes;
  		if (Cal.ShowSeconds)
  		{
  			vTimeStr += ':' + Cal.Seconds;
  		}
  		if (TimeMode === 12)
  		{
  			vTimeStr += ' ' + Cal.AMorPM;
  		}
  	}
  
  	else
  	{
  		vTimeStr = "";
  	}
  
  	if (PValue !== "")
  	{
  		if (PClickable === true) {
  		    if (Cal.ShowTime === true)
  		    { PCellStr = "<td id='c" + PValue + "' class='calTD' style='text-align:center;cursor:pointer;background-color:"+pColor+"' onmousedown='selectDate(this," + PValue + ");'>" + PValue + "</td>"; }
  		    else { PCellStr = "<td class='calTD' style='text-align:center;cursor:pointer;background-color:" + pColor + "' onmouseover='changeBorder(this, 0);' onmouseout=\"changeBorder(this, 1, '" + pColor + "');\" onClick=\"javascript:callback('" + Cal.Ctrl + "','" + Cal.FormatDate(PValue) + "');\">" + PValue + "</td>"; }
  		}
  		else
  		{ PCellStr = "<td style='text-align:center;background-color:"+pColor+"' class='calTD'>"+PValue+"</td>"; }
  	}
  	else
  	{ PCellStr = "<td style='text-align:center;background-color:"+pColor+"' class='calTD'>&nbsp;</td>"; }
  
  	return PCellStr;
  }
  
  function RenderCssCal(bNewCal)
  {
  	if (typeof bNewCal === "undefined" || bNewCal !== true)
  	{
  		bNewCal = false;
  	}
  	var vCalHeader,
  	vCalData,
  	vCalTime = "",
  	vCalClosing = "",
  	winCalData = "",
  	CalDate,
  
  	i,
  	j,
  
  	SelectStr,
  	vDayCount = 0,
  	vFirstDay,
  
  	WeekDayName = [],//Added version 1.7
  	strCell,
  
  	showHour,
  	ShowArrows = false,
  	HourCellWidth = "35px", //cell width with seconds.
  
  	SelectAm,
  	SelectPm,
  
  	funcCalback,
  
  	headID,
  	e,
  	cssStr,
  	style,
  	cssText,
  	span;
  
  	calHeight = 0; // reset the window height on refresh
  
  	// Set the default cursor for the calendar
  
  	winCalData = "<span style='cursor:auto;'>";
  	vCalHeader = "<table style='background-color:"+CalBgColor+";width:200px;padding:0;margin:5px auto 5px auto'><tbody>";
  
  	//Table for Month & Year Selector
  
  	vCalHeader += "<tr><td colspan='7'><table border='0' width='200px' cellpadding='0' cellspacing='0'><tr>";
  	//******************Month and Year selector in dropdown list************************
  
  	if (Cal.Scroller === "DROPDOWN")
  	{
  	    vCalHeader += "<td align='center'><select name='MonthSelector' onChange='javascript:Cal.SwitchMth(this.selectedIndex);RenderCssCal();'>";
  		for (i = 0; i < 12; i += 1)
  		{
  			if (i === Cal.Month)
  			{
  				SelectStr = "Selected";
  			}
  			else
  			{
  				SelectStr = "";
  			}
  			vCalHeader += "<option " + SelectStr + " value=" + i + ">" + MonthName[i] + "</option>";
  		}
  
  		vCalHeader += "</select></td>";
  		//Year selector
  
  		vCalHeader += "<td align='center'><select name='YearSelector' size='1' onChange='javascript:Cal.SwitchYear(this.value);RenderCssCal();'>";
  		for (i = StartYear; i <= (dtToday.getFullYear() + EndYear); i += 1)
  		{
  			if (i === Cal.Year)
  			{
  				SelectStr = 'selected="selected"';
  			}
  			else
  			{
  				SelectStr = '';
  			}
  			vCalHeader += "<option " + SelectStr + " value=" + i + ">" + i + "</option>\n";
  		}
  		vCalHeader += "</select></td>\n";
  		calHeight += 30;
  	}
  
  	//******************End Month and Year selector in dropdown list*********************
  
  	//******************Month and Year selector in arrow*********************************
  
  	else if (Cal.Scroller === "ARROW")
  	{
  		if (UseImageFiles)
  		{//http://localhost/klean/calendar/
  			vCalHeader += "<td><img onmousedown='javascript:Cal.DecYear();RenderCssCal();' src='"+imageFilesPath+"cal_fastreverse.gif' width='13px' height='9' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'></td>\n";//Year scroller (decrease 1 year)
  			vCalHeader += "<td><img onmousedown='javascript:Cal.DecMonth();RenderCssCal();' src='" + imageFilesPath + "cal_reverse.gif' width='13px' height='9' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'></td>\n"; //Month scroller (decrease 1 month)
  			vCalHeader += "<td width='70%' class='calR' style='color:"+YrSelColor+"'>"+ Cal.GetMonthName(ShowLongMonth) + " " + Cal.Year + "</td>"; //Month and Year
  			vCalHeader += "<td><img onmousedown='javascript:Cal.IncMonth();RenderCssCal();' src='" + imageFilesPath + "cal_forward.gif' width='13px' height='9' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'></td>\n"; //Month scroller (increase 1 month)
  			vCalHeader += "<td><img onmousedown='javascript:Cal.IncYear();RenderCssCal();' src='" + imageFilesPath + "cal_fastforward.gif' width='13px' height='9' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'></td>\n"; //Year scroller (increase 1 year)
  			calHeight += 22;
  		}
  		else
  		{
  			vCalHeader += "<td><span id='dec_year' title='reverse year' onmousedown='javascript:Cal.DecYear();RenderCssCal();' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white; color:" + YrSelColor + "'>-</span></td>";//Year scroller (decrease 1 year)
  			vCalHeader += "<td><span id='dec_month' title='reverse month' onmousedown='javascript:Cal.DecMonth();RenderCssCal();' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'>&lt;</span></td>\n";//Month scroller (decrease 1 month)
  			vCalHeader += "<td width='70%' class='calR' style='color:" + YrSelColor + "'>" + Cal.GetMonthName(ShowLongMonth) + " " + Cal.Year + "</td>\n"; //Month and Year
  			vCalHeader += "<td><span id='inc_month' title='forward month' onmousedown='javascript:Cal.IncMonth();RenderCssCal();' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'>&gt;</span></td>\n";//Month scroller (increase 1 month)
  			vCalHeader += "<td><span id='inc_year' title='forward year' onmousedown='javascript:Cal.IncYear();RenderCssCal();'  onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white; color:" + YrSelColor + "'>+</span></td>\n";//Year scroller (increase 1 year)
  			calHeight += 22;
  		}
  	}
  
  	vCalHeader += "</tr></table></td></tr>";
  
  	//******************End Month and Year selector in arrow******************************
  
  	//Calendar header shows Month and Year
  	if (ShowMonthYear && Cal.Scroller === "DROPDOWN")
  	{
  	    vCalHeader += "<tr><td colspan='7' class='calR' style='color:" + MonthYearColor + "'>" + Cal.GetMonthName(ShowLongMonth) + " " + Cal.Year + "</td></tr>";
  		calHeight += 19;
  	}
  
  	//Week day header
  
  	vCalHeader += "<tr><td colspan=\"7\"><table style='border-spacing:1px;border-collapse:separate;'><tr>";
  	if (MondayFirstDay === true)
  	{
  		WeekDayName = WeekDayName2;
  	}
  	else
  	{
  		WeekDayName = WeekDayName1;
  	}
  	for (i = 0; i < 7; i += 1)
  	{
  	    vCalHeader += "<td style='background-color:"+WeekHeadColor+";width:"+CellWidth+"px;color:#FFFFFF' class='calTD'>" + WeekDayName[i].substr(0, WeekChar) + "</td>";
  	}
  
  	calHeight += 19;
  	vCalHeader += "</tr>";
  	//Calendar detail
  	CalDate = new Date(Cal.Year, Cal.Month);
  	CalDate.setDate(1);
  
  	vFirstDay = CalDate.getDay();
  
  	//Added version 1.7
  	if (MondayFirstDay === true)
  	{
  		vFirstDay -= 1;
  		if (vFirstDay === -1)
  		{
  			vFirstDay = 6;
  		}
  	}
  
  	//Added version 1.7
  	vCalData = "<tr>";
  	calHeight += 19;
  	for (i = 0; i < vFirstDay; i += 1)
  	{
  		vCalData = vCalData + GenCell();
  		vDayCount = vDayCount + 1;
  	}
  
  	//Added version 1.7
  	for (j = 1; j <= Cal.GetMonDays(); j += 1)
  	{
  		if ((vDayCount % 7 === 0) && (j > 1))
  		{
  			vCalData = vCalData + "<tr>";
  		}
  
  		vDayCount = vDayCount + 1;
  		//added version 2.1.2
  		if (Cal.EnableDateMode === "future" && ((j < dtToday.getDate()) && (Cal.Month === dtToday.getMonth()) && (Cal.Year === dtToday.getFullYear()) || (Cal.Month < dtToday.getMonth()) && (Cal.Year === dtToday.getFullYear()) || (Cal.Year < dtToday.getFullYear())))
  		{
  			strCell = GenCell(j, false, DisableColor, false); //Before today's date is not clickable
          }
          else if (Cal.EnableDateMode === "past" && ((j >= dtToday.getDate()) && (Cal.Month === dtToday.getMonth()) && (Cal.Year === dtToday.getFullYear()) || (Cal.Month > dtToday.getMonth()) && (Cal.Year === dtToday.getFullYear()) || (Cal.Year > dtToday.getFullYear()))) {
              strCell = GenCell(j, false, DisableColor, false); //After today's date is not clickable
          }
  		//if End Year + Current Year = Cal.Year. Disable.
  		else if (Cal.Year > (dtToday.getFullYear()+EndYear))
  		{
  		    strCell = GenCell(j, false, DisableColor, false); 
  		}
  		else if ((j === dtToday.getDate()) && (Cal.Month === dtToday.getMonth()) && (Cal.Year === dtToday.getFullYear()))
  		{
  			strCell = GenCell(j, true, TodayColor);//Highlight today's date
  		}
  		else
  		{
  			if ((j === selDate.getDate()) && (Cal.Month === selDate.getMonth()) && (Cal.Year === selDate.getFullYear())){
  			     //modified version 1.7
  				strCell = GenCell(j, true, SelDateColor);
              }
  			else
  			{
  				if (MondayFirstDay === true)
  				{
  					if (vDayCount % 7 === 0)
  					{
  						strCell = GenCell(j, false, SundayColor);
  					}
  					else if ((vDayCount + 1) % 7 === 0)
  					{
  						strCell = GenCell(j, false, SaturdayColor);
  					}
  					else
  					{
  						strCell = GenCell(j, null, WeekDayColor);
  					}
  				}
  				else
  				{
  					if (vDayCount % 7 === 0)
  					{
  						strCell = GenCell(j, false, SaturdayColor);
  					}
  					else if ((vDayCount + 6) % 7 === 0)
  					{
  						strCell = GenCell(j, false, SundayColor);
  					}
  					else
  					{
  						strCell = GenCell(j, null, WeekDayColor);
  					}
  				}
  			}
  		}
  
  		vCalData = vCalData + strCell;
  
  		if ((vDayCount % 7 === 0) && (j < Cal.GetMonDays()))
  		{
  			vCalData = vCalData + "</tr>";
  			calHeight += 19;
  		}
  	}
  
  	// finish the table proper
  
  	if (vDayCount % 7 !== 0)
  	{
  		while (vDayCount % 7 !== 0)
  		{
  			vCalData = vCalData + GenCell();
  			vDayCount = vDayCount + 1;
  		}
  	}
  
  	vCalData = vCalData + "</table></td></tr>";
  
  
  	//Time picker
  	if (Cal.ShowTime === true)
  	{
  		showHour = Cal.getShowHour();
  
  		if (Cal.ShowSeconds === false && TimeMode === 24)
  		{
  			ShowArrows = true;
  			HourCellWidth = "10px";
  		}
  
  		vCalTime = "<tr><td colspan='7' style=\"text-align:center;\"><table border='0' width='199px' cellpadding='0' cellspacing='0'><tbody><tr><td height='5px' width='" + HourCellWidth + "'>&nbsp;</td>";
  
  		if (ShowArrows && UseImageFiles) //this is where the up and down arrow control the hour.
  		{
  		    vCalTime += "<td style='vertical-align:middle;'><table cellspacing='0' cellpadding='0' style='line-height:0pt;width:100%;'><tr><td style='text-align:center;'><img onclick='nextStep(\"Hour\", \"plus\");' onmousedown='startSpin(\"Hour\", \"plus\");' onmouseup='stopSpin();' src='" + imageFilesPath + "cal_plus.gif' width='13px' height='9px' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'></td></tr><tr><td style='text-align:center;'><img onclick='nextStep(\"Hour\", \"minus\");' onmousedown='startSpin(\"Hour\", \"minus\");' onmouseup='stopSpin();' src='" + imageFilesPath + "cal_minus.gif' width='13px' height='9px' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'></td></tr></table></td>\n";
  		}
  
  		vCalTime += "<td width='22px'><input type='text' name='hour' maxlength=2 size=1 style=\"WIDTH:22px\" value=" + showHour + " onkeyup=\"javascript:Cal.SetHour(this.value)\">";
  		vCalTime += "</td><td style='font-weight:bold;text-align:center;'>:</td><td width='22px'>";
  		vCalTime += "<input type='text' name='minute' maxlength=2 size=1 style=\"WIDTH: 22px\" value=" + Cal.Minutes + " onkeyup=\"javascript:Cal.SetMinute(this.value)\">";
  
  		if (Cal.ShowSeconds)
  		{
  		    vCalTime += "</td><td style='font-weight:bold;'>:</td><td width='22px'>";
  			vCalTime += "<input type='text' name='second' maxlength=2 size=1 style=\"WIDTH: 22px\" value=" + Cal.Seconds + " onkeyup=\"javascript:Cal.SetSecond(parseInt(this.value,10))\">";
  		}
  
  		if (TimeMode === 12)
  		{
  			SelectAm = (Cal.AMorPM === "AM") ? "Selected" : "";
  			SelectPm = (Cal.AMorPM === "PM") ? "Selected" : "";
  
  			vCalTime += "</td><td>";
  			vCalTime += "<select name=\"ampm\" onChange=\"javascript:Cal.SetAmPm(this.options[this.selectedIndex].value);\">\n";
  			vCalTime += "<option " + SelectAm + " value=\"AM\">AM</option>";
  			vCalTime += "<option " + SelectPm + " value=\"PM\">PM<option>";
  			vCalTime += "</select>";
  		}
  
  		if (ShowArrows && UseImageFiles) //this is where the up and down arrow to change the "Minute".
  		{
  		    vCalTime += "</td>\n<td style='vertical-align:middle;'><table cellspacing='0' cellpadding='0' style='line-height:0pt;width:100%'><tr><td style='text-align:center;'><img onclick='nextStep(\"Minute\", \"plus\");' onmousedown='startSpin(\"Minute\", \"plus\");' onmouseup='stopSpin();' src='" + imageFilesPath + "cal_plus.gif' width='13px' height='9px' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'></td></tr><tr><td style='text-align:center;'><img onmousedown='startSpin(\"Minute\", \"minus\");' onmouseup='stopSpin();' onclick='nextStep(\"Minute\",\"minus\");' src='" + imageFilesPath + "cal_minus.gif' width='13px' height='9px' onmouseover='changeBorder(this, 0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'></td></tr></table>";
  		}
  
  		vCalTime += "</td>\n<td align='right' valign='bottom' width='" + HourCellWidth + "px'></td></tr>";
  		vCalTime += "<tr><td colspan='8' style=\"text-align:center;\"><input style='width:60px;font-size:12px;' onClick='javascript:closewin(\"" + Cal.Ctrl + "\");'  type=\"button\" value=\"OK\">&nbsp;<input style='width:60px;font-size:12px;' onClick='javascript: winCal.style.visibility = \"hidden\"' type=\"button\" value=\"Cancel\"></td></tr>";
  	}
  	else //if not to show time.
  	{
  	    vCalTime += "\n<tr>\n<td colspan='7' style=\"text-align:right;\">";
  	    //close button
  	    if (UseImageFiles) {
  	        vCalClosing += "<img onmousedown='javascript:closewin(\"" + Cal.Ctrl + "\"); stopSpin();' src='"+imageFilesPath+"cal_close.gif' width='16px' height='14px' onmouseover='changeBorder(this,0)' onmouseout='changeBorder(this, 1)' style='border:1px solid white'></td>";
  	    }
  	    else {
  	        vCalClosing += "<span id='close_cal' title='close'onmousedown='javascript:closewin(\"" + Cal.Ctrl + "\");stopSpin();' onmouseover='changeBorder(this, 0)'onmouseout='changeBorder(this, 1)' style='border:1px solid white; font-family: Arial;font-size: 10pt;'>x</span></td>";
  	    }
  	    vCalClosing += "</tr>";
  	}
  	vCalClosing += "</tbody></table></td></tr>";
  	calHeight += 31;
  	vCalClosing += "</tbody></table>\n</span>";
  
  	//end time picker
  	funcCalback = "function callback(id, datum) {";
  	funcCalback += " var CalId = document.getElementById(id);if (datum=== 'undefined') { var d = new Date(); datum = d.getDate() + '/' +(d.getMonth()+1) + '/' + d.getFullYear(); } window.calDatum=datum;CalId.value=datum;";
  	funcCalback += " if(Cal.ShowTime){";
  	funcCalback += " CalId.value+=' '+Cal.getShowHour()+':'+Cal.Minutes;";
  	funcCalback += " if (Cal.ShowSeconds)  CalId.value+=':'+Cal.Seconds;";
  	funcCalback += " if (TimeMode === 12)  CalId.value+=''+Cal.getShowAMorPM();";
  	funcCalback += "}if(CalId.onchange!=undefined) CalId.onchange();CalId.focus();winCal.style.visibility='hidden';}";
  
  
  	// determines if there is enough space to open the cal above the position where it is called
  	if (ypos > calHeight)
  	{
  		ypos = ypos - calHeight;
  	}
  
  	if (!winCal)
  	{
  		headID = document.getElementsByTagName("head")[0];
  
  		// add javascript function to the span cal
  		e = document.createElement("script");
  		e.type = "text/javascript";
  		e.language = "javascript";
  		e.text = funcCalback;
  		headID.appendChild(e);
  		// add stylesheet to the span cal
  
  		cssStr = ".calTD {font-family: verdana; font-size: 12px; text-align: center; border:0; }\n";
  		cssStr += ".calR {font-family: verdana; font-size: 12px; text-align: center; font-weight: bold;}";
  
  		style = document.createElement("style");
  		style.type = "text/css";
  		style.rel = "stylesheet";
  		if (style.styleSheet)
  		{ // IE
  			style.styleSheet.cssText = cssStr;
  		}
  
  		else
  		{ // w3c
  			cssText = document.createTextNode(cssStr);
  			style.appendChild(cssText);
  		}
  
  		headID.appendChild(style);
  		// create the outer frame that allows the cal. to be moved
  		span = document.createElement("span");
  		span.id = calSpanID;
  		span.style.position = "absolute";
  		span.style.left = (xpos + CalPosOffsetX) + 'px';
  		span.style.top = (ypos - CalPosOffsetY) + 'px';
  		span.style.width = CalWidth + 'px';
  		span.style.border = "solid 1pt " + SpanBorderColor;
  		span.style.padding = "0";
  		span.style.cursor = "move";
  		span.style.backgroundColor = SpanBgColor;
  		span.style.zIndex = 100;
  		document.body.appendChild(span);
  		winCal = document.getElementById(calSpanID);
  	}
  
  	else
  	{
  		winCal.style.visibility = "visible";
  		winCal.style.Height = calHeight;
  
  		// set the position for a new calendar only
  		if (bNewCal === true)
  		{
  			winCal.style.left = (xpos + CalPosOffsetX) + 'px';
  			winCal.style.top = (ypos - CalPosOffsetY) + 'px';
  		}
  	}
  
  	winCal.innerHTML = winCalData + vCalHeader + vCalData + vCalTime + vCalClosing;
  	return true;
  }
  
  
  function NewCssCal(pCtrl, pFormat, pScroller, pShowTime, pTimeMode, pShowSeconds, pEnableDateMode)
  {
  	// get current date and time
  
  	dtToday = new Date();
  	Cal = new Calendar(dtToday);
  
  	if (pShowTime !== undefined)
  	{
  	    if (pShowTime) {
  	        Cal.ShowTime = true;
  	    }
  	    else {
  	        Cal.ShowTime = false;
  	    }
  
  		if (pTimeMode)
  		{
  			pTimeMode = parseInt(pTimeMode, 10);
  		}
  		if (pTimeMode === 12 || pTimeMode === 24)
  		{
  			TimeMode = pTimeMode;
  		}
  		else
  		{
  			TimeMode = 24;
  		}
  
  		if (pShowSeconds !== undefined)
  		{
  			if (pShowSeconds)
  			{
  				Cal.ShowSeconds = true;
  			}
  			else
  			{
  				Cal.ShowSeconds = false;
  			}
  		}
  		else
  		{
  			Cal.ShowSeconds = false;
  		}
  
  	}
  
  	if (pCtrl !== undefined)
  	{
  		Cal.Ctrl = pCtrl;
  	}
  
  	if (pFormat!== undefined && pFormat !=="")
  	{
  		Cal.Format = pFormat.toUpperCase();
  	}
  	else
  	{
  		Cal.Format = "MMDDYYYY";
  	}
  
  	if (pScroller!== undefined && pScroller!=="")
  	{
  		if (pScroller.toUpperCase() === "ARROW")
  		{
  			Cal.Scroller = "ARROW";
  		}
  		else
  		{
  			Cal.Scroller = "DROPDOWN";
  		}
      }
  
      if (pEnableDateMode !== undefined && (pEnableDateMode === "future" || pEnableDateMode === "past")) {
          Cal.EnableDateMode= pEnableDateMode;
      }
  
  	exDateTime = document.getElementById(pCtrl).value; //Existing Date Time value in textbox.
  
  	if (exDateTime)
  	{ //Parse existing Date String
  		var Sp1 = exDateTime.indexOf(DateSeparator, 0),//Index of Date Separator 1
  		Sp2 = exDateTime.indexOf(DateSeparator, parseInt(Sp1, 10) + 1),//Index of Date Separator 2
  		tSp1,//Index of Time Separator 1
  		tSp2,//Index of Time Separator 2
  		strMonth,
  		strDate,
  		strYear,
  		intMonth,
  		YearPattern,
  		strHour,
  		strMinute,
  		strSecond,
  		winHeight,
  		offset = parseInt(Cal.Format.toUpperCase().lastIndexOf("M"), 10) - parseInt(Cal.Format.toUpperCase().indexOf("M"), 10) - 1,
  		strAMPM = "";
  		//parse month
  
  		if (Cal.Format.toUpperCase() === "DDMMYYYY" || Cal.Format.toUpperCase() === "DDMMMYYYY")
  		{
  			if (DateSeparator === "")
  			{
  				strMonth = exDateTime.substring(2, 4 + offset);
  				strDate = exDateTime.substring(0, 2);
  				strYear = exDateTime.substring(4 + offset, 8 + offset);
  			}
  			else
  			{
  				if (exDateTime.indexOf("D*") !== -1)
  				{   //DTG
  					strMonth = exDateTime.substring(8, 11);
  					strDate  = exDateTime.substring(0, 2);
  					strYear  = "20" + exDateTime.substring(11, 13);  //Hack, nur für Jahreszahlen ab 2000
  				}
  				else
  				{
  					strMonth = exDateTime.substring(Sp1 + 1, Sp2);
  					strDate = exDateTime.substring(0, Sp1);
  					strYear = exDateTime.substring(Sp2 + 1, Sp2 + 5);
  				}
  			}
  		}
  
  		else if (Cal.Format.toUpperCase() === "MMDDYYYY" || Cal.Format.toUpperCase() === "MMMDDYYYY"){
  			if (DateSeparator === ""){
  				strMonth = exDateTime.substring(0, 2 + offset);
  				strDate = exDateTime.substring(2 + offset, 4 + offset);
  				strYear = exDateTime.substring(4 + offset, 8 + offset);
  			}
  			else{
  				strMonth = exDateTime.substring(0, Sp1);
  				strDate = exDateTime.substring(Sp1 + 1, Sp2);
  				strYear = exDateTime.substring(Sp2 + 1, Sp2 + 5);
  			}
  		}
  
  		else if (Cal.Format.toUpperCase() === "YYYYMMDD" || Cal.Format.toUpperCase() === "YYYYMMMDD")
  		{
  			if (DateSeparator === ""){
  				strMonth = exDateTime.substring(4, 6 + offset);
  				strDate = exDateTime.substring(6 + offset, 8 + offset);
  				strYear = exDateTime.substring(0, 4);
  			}
  			else{
  				strMonth = exDateTime.substring(Sp1 + 1, Sp2);
  				strDate = exDateTime.substring(Sp2 + 1, Sp2 + 3);
  				strYear = exDateTime.substring(0, Sp1);
  			}
  		}
  
  		else if (Cal.Format.toUpperCase() === "YYMMDD" || Cal.Format.toUpperCase() === "YYMMMDD")
  		{
  			if (DateSeparator === "")
  			{
  				strMonth = exDateTime.substring(2, 4 + offset);
  				strDate = exDateTime.substring(4 + offset, 6 + offset);
  				strYear = exDateTime.substring(0, 2);
  			}
  			else
  			{
  				strMonth = exDateTime.substring(Sp1 + 1, Sp2);
  				strDate = exDateTime.substring(Sp2 + 1, Sp2 + 3);
  				strYear = exDateTime.substring(0, Sp1);
  			}
  		}
  
  		if (isNaN(strMonth)){
  			intMonth = Cal.GetMonthIndex(strMonth);
  		}
  		else{
  			intMonth = parseInt(strMonth, 10) - 1;
  		}
  		if ((parseInt(intMonth, 10) >= 0) && (parseInt(intMonth, 10) < 12))	{
  			Cal.Month = intMonth;
  		}
  		//end parse month
  
  		//parse year
  		YearPattern = /^\d{4}$/;
  		if (YearPattern.test(strYear)) {
  		    if ((parseInt(strYear, 10)>=StartYear) && (parseInt(strYear, 10)<= (dtToday.getFullYear()+EndYear)))
  		        Cal.Year = parseInt(strYear, 10);
  		}
  		//end parse year
  		
  		//parse Date
  		if ((parseInt(strDate, 10) <= Cal.GetMonDays()) && (parseInt(strDate, 10) >= 1)) {
  			Cal.Date = strDate;
  		}
  		//end parse Date
  
  		//parse time
  
  		if (Cal.ShowTime === true)
  		{
  			//parse AM or PM
  			if (TimeMode === 12)
  			{
  				strAMPM = exDateTime.substring(exDateTime.length - 2, exDateTime.length);
  				Cal.AMorPM = strAMPM;
  			}
  
  			tSp1 = exDateTime.indexOf(":", 0);
  			tSp2 = exDateTime.indexOf(":", (parseInt(tSp1, 10) + 1));
  			if (tSp1 > 0)
  			{
  				strHour = exDateTime.substring(tSp1, tSp1 - 2);
  				Cal.SetHour(strHour);
  
  				strMinute = exDateTime.substring(tSp1 + 1, tSp1 + 3);
  				Cal.SetMinute(strMinute);
  
  				strSecond = exDateTime.substring(tSp2 + 1, tSp2 + 3);
  				Cal.SetSecond(strSecond);
  
  			}
  			else if (exDateTime.indexOf("D*") !== -1)
  			{   //DTG
  				strHour = exDateTime.substring(2, 4);
  				Cal.SetHour(strHour);
  				strMinute = exDateTime.substring(4, 6);
  				Cal.SetMinute(strMinute);
  
  			}
  		}
  
  	}
  	selDate = new Date(Cal.Year, Cal.Month, Cal.Date);//version 1.7
  	RenderCssCal(true);
  }
  
  function closewin(id) {
      if (Cal.ShowTime === true) {
          var MaxYear = dtToday.getFullYear() + EndYear;
          var beforeToday =
                      (Cal.Date < dtToday.getDate()) &&
                      (Cal.Month === dtToday.getMonth()) &&
                      (Cal.Year === dtToday.getFullYear())
                      ||
                      (Cal.Month < dtToday.getMonth()) &&
                      (Cal.Year === dtToday.getFullYear())
                      ||
                      (Cal.Year < dtToday.getFullYear());
  
          if ((Cal.Year <= MaxYear) && (Cal.Year >= StartYear) && (Cal.Month === selDate.getMonth()) && (Cal.Year === selDate.getFullYear())) {
              if (Cal.EnableDateMode === "future") {
                  if (beforeToday === false) {
                      callback(id, Cal.FormatDate(Cal.Date));
                  }
              }
              else
                  callback(id, Cal.FormatDate(Cal.Date));
          }
      }
      
  	var CalId = document.getElementById(id);
  	CalId.focus();
  	winCal.style.visibility = 'hidden';
  }
  
  function changeBorder(element, col, oldBgColor)
  {
  	if (col === 0)
  	{
  		element.style.background = HoverColor;
  		element.style.borderColor = "black";
  		element.style.cursor = "pointer";
  	}
  
  	else
  	{
  		if (oldBgColor)
  		{
  			element.style.background = oldBgColor;
  		}
  		else
  		{
  			element.style.background = "white";
  		}
  		element.style.borderColor = "white";
  		element.style.cursor = "auto";
  	}
  }
  
  function selectDate(element, date) {
      Cal.Date = date;
      selDate = new Date(Cal.Year, Cal.Month, Cal.Date);
      element.style.background = SelDateColor;
      RenderCssCal();
  }
  
  function pickIt(evt)
  {
  	var objectID,
  	dom,
  	de,
  	b;
  	// accesses the element that generates the event and retrieves its ID
  	if (document.addEventListener)
  	{ // w3c
  		objectID = evt.target.id;
  		if (objectID.indexOf(calSpanID) !== -1)
  		{
  			dom = document.getElementById(objectID);
  			cnLeft = evt.pageX;
  			cnTop = evt.pageY;
  
  			if (dom.offsetLeft)
  			{
  				cnLeft = (cnLeft - dom.offsetLeft);
  				cnTop = (cnTop - dom.offsetTop);
  			}
  		}
  
  		// get mouse position on click
  		xpos = (evt.pageX);
  		ypos = (evt.pageY);
  	}
  
  	else
  	{ // IE
  		objectID = event.srcElement.id;
  		cnLeft = event.offsetX;
  		cnTop = (event.offsetY);
  
  		// get mouse position on click
  		de = document.documentElement;
  		b = document.body;
  
  		xpos = event.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
  		ypos = event.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
  	}
  
  	// verify if this is a valid element to pick
  	if (objectID.indexOf(calSpanID) !== -1)
  	{
  		domStyle = document.getElementById(objectID).style;
  	}
  
  	if (domStyle)
  	{
  		domStyle.zIndex = 100;
  		return false;
  	}
  
  	else
  	{
  		domStyle = null;
  		return;
  	}
  }
  
  
  
  function dragIt(evt)
  {
  	if (domStyle)
  	{
  		if (document.addEventListener)
  		{ //for IE
  			domStyle.left = (event.clientX - cnLeft + document.body.scrollLeft) + 'px';
  			domStyle.top = (event.clientY - cnTop + document.body.scrollTop) + 'px';
  		}
  		else
  		{  //Firefox
  			domStyle.left = (evt.clientX - cnLeft + document.body.scrollLeft) + 'px';
  			domStyle.top = (evt.clientY - cnTop + document.body.scrollTop) + 'px';
  		}
  	}
  }
  
  // performs a single increment or decrement
  function nextStep(whatSpinner, direction)
  {
  	if (whatSpinner === "Hour")
  	{
  		if (direction === "plus")
  		{
  			Cal.SetHour(Cal.Hours + 1);
  			RenderCssCal();
  		}
  		else if (direction === "minus")
  		{
  			Cal.SetHour(Cal.Hours - 1);
  			RenderCssCal();
  		}
  	}
  	else if (whatSpinner === "Minute")
  	{
  		if (direction === "plus")
  		{
  			Cal.SetMinute(parseInt(Cal.Minutes, 10) + 1);
  			RenderCssCal();
  		}
  		else if (direction === "minus")
  		{
  			Cal.SetMinute(parseInt(Cal.Minutes, 10) - 1);
  			RenderCssCal();
  		}
  	}
  
  }
  
  // starts the time spinner
  function startSpin(whatSpinner, direction)
  {
  	document.thisLoop = setInterval(function ()
  	{
  		nextStep(whatSpinner, direction);
  	}, 125); //125 ms
  }
  
  //stops the time spinner
  function stopSpin()
  {
  	clearInterval(document.thisLoop);
  }
  
  function dropIt()
  {
  	stopSpin();
  
  	if (domStyle)
  	{
  		domStyle = null;
  	}
  }
  
  // Default events configuration
  
  document.onmousedown = pickIt;
  document.onmousemove = dragIt;
  document.onmouseup = dropIt;
  