var g_scrollbarWidth = 17;
var g_today = new Date();

var g_day = g_today.getDate();
var g_month = g_today.getMonth();
var g_year = g_today.getFullYear();
var g_dayCount = 1;


var g_view = 'month';
if(typeof g_calView != 'undefined') {
  g_view = g_calView;
}
var g_displayFrom = new Date();
var g_displayTo = new Date();

var g_weekStart = new Date();
g_weekStart.setDate(g_weekStart.getDate() - g_weekStart.getDay());

var g_daysOfWeek = Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
var g_months = Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");


var g_dayCellHeight = 19;
var g_dayCellWidth = 0;


var g_dayTimes = Array();
var g_dayFullDayEvents = Array();

function daysInMonth(month,year) {
  var dd = new Date(year, month + 1, 0);
  return dd.getDate();
}

function calGetTextWidth(theText) {
  $('#calendarholder').append('<div id="widthtest" style="position: absolute; top: -20px; left: 0; font-size: 10px">' + theText + '</div>');
  var width = $('#widthtest').width();

  $('#widthtest').remove();

  return width;

}

function calCheckTextWidth(theText, maxWidth) {
  var lines = Array();
  var remainingString = theText;
  var count = 0; 
  while(remainingString != "") {
    count++;
    if(count > 10) {
      break;
    }

    var stringWidth = calGetTextWidth(remainingString);
    if(stringWidth > maxWidth) {
      if(remainingString.indexOf(' ') == -1) {
        if(lines.length > 0) {
          remainingString = "&nbsp;&nbsp;" + remainingString;
        }
        lines[lines.length] = remainingString;
        remainingString = "";

        break;
      }

      var stringparts = remainingString.split(' ');
      for(var i = stringparts.length - 1; i > 0; i--) {
        var firstString = "";
        for(var j = 0; j < i; j++) {
          part = stringparts[j];
          if(part != "") {
            firstString += part + " ";
          }
        }
        if(lines.length > 0) {
          firstString = "&nbsp;&nbsp;" + firstString;
        }

        var newWidth = calGetTextWidth(firstString);
        if(newWidth < maxWidth) {
          lines[lines.length] = firstString;
          remainingString = "";
          for(j = i; j < stringparts.length; j++) {
            part = stringparts[j];
            if(part != "") {
              remainingString += part + " ";
            }
          }
          // remainingString = trim(remainingString);
          break;
        }

        if(i <= 1) {
          if(lines.length > 0) {
            remainingString = "&nbsp;&nbsp;" + remainingString;
          }
          lines[lines.length] = remainingString;
          remainingString = "";
        }
      }
    } else {
      if(lines.length > 0) {
        remainingString = "&nbsp;&nbsp;" + remainingString;
      }
      lines[lines.length] = remainingString;
      remainingString = "";
    }
  }
  return lines;
}


var g_termDates = Array();


g_selectedTerm = -1;




function Event(guid, name, description, calendar, colour1, colour2, startDate, endDate, allDay, startTime, endTime, numberOfDays) {
  this.m_guid = guid;
  this.m_name = name;
  this.m_description = description;
  this.m_calendar = calendar;
  this.m_colour1 = colour1;
  this.m_colour2 = colour2;
  this.m_startDate = startDate;
  this.m_endDate = endDate;
  this.m_allDay = allDay;
  this.m_startTime = startTime;
  this.m_endTime = endTime;
  this.m_numberOfDays = numberOfDays;

  this.m_width = 100;
  this.m_position = 1;

  var startArray = this.m_startTime.split(':');
  this.m_startHour = startArray[0];

  this.m_startMinute = startArray[1];

  var endArray = this.m_endTime.split(':');
  this.m_endHour = endArray[0];
  this.m_endMinute = endArray[1];


  this.getStartTime = function() {
    var hour = parseInt(this.m_startHour, 10);
    var minute = this.m_startMinute;

    var timeofday = 'am';
    if(hour > 12) {
      hour -= 12;
      timeofday = 'pm';
    }
    if(hour == 12) {
      timeofday = 'pm';
    }
    var time = hour + ':' + minute + timeofday;
    if(parseInt(minute, 10) == 0) {
      time = hour + timeofday;
    }
    return time;
  }
}

var g_events = Array();
var g_specialDates = Array();
var g_acronyms = Array();

var g_dayEvents = Array();
var g_cellXPosition = Array();
var g_cellYPosition = Array();
var g_calendars = '';

function calGotoDay(year, month, day) 
{
  month++;
  var theday = year + '-' + month + '-' + day;
  $.get("?wtExtension=Calendar&view=day&date=" + theday + '&daycount=1&calendars=' + g_calendars, function(data) { eval(data); displayDayCal('calendarholder'); });
}


function calChangeCalendars() {

  var calendars = '';

  $('.calcontrolcheckbox').each( function() {
    if(this.checked) {
      if(calendars != '') {
        calendars += ',';
      }
      calendars += this.value;
    }
  });

  if(calendars == '') {
    calendars = '-1';
  }

  calSetCalendars(calendars);
  calView(g_view);

}

function calSetCalendars(calendars) {
  g_calendars = calendars;
}

function calView(view)
{
  switch(view) {
    case 'day':

      var month = g_month + 1;
      var day = g_year + '-' + month + '-' + g_day;
      g_dayCount = 1;
      $.get("?wtExtension=Calendar&view=day&date=" + day + '&daycount=1&calendars=' + g_calendars, function(data) { eval(data); displayDayCal('calendarholder'); });
      break;
    case 'week':
      if(g_view == 'month') {
        g_weekStart = new Date(g_year, g_month, 1);
        g_weekStart.setDate(g_weekStart.getDate() - g_weekStart.getDay());
      }

      var month = g_weekStart.getMonth() + 1;
      var weekstart = g_weekStart.getFullYear() + '-' + month + '-' + g_weekStart.getDate();
      g_dayCount = 7;
      $.get("?wtExtension=Calendar&view=day&date=" + weekstart + '&daycount=7&calendars=' + g_calendars, function(data) { eval(data); displayDayCal('calendarholder'); });
      break;
    case 'month':
      if(g_view == 'week') {
        g_year = g_weekStart.getFullYear();
        g_month = g_weekStart.getMonth();
      }
      var month = g_month + 1;
      var monthStart = g_year + '-' + month + '-01';
      $.get("?wtExtension=Calendar&view=month&monthstart=" + monthStart + '&calendars=' + g_calendars, function(data) { eval(data); displayMonthCal('calendarholder'); });
      break;
    case 'term':
      var term = 0;
      for(var i = 0; i < g_termDates.length; i++) {
        if(g_today.getTime() > g_termDates[i]["End"].getTime()) {
          term = i + 1;
        }
      }
      if(term >= g_termDates.length) {
        term = 0;
      }

      calViewTerm(term);
      break;
   
  }
}

function calViewTerm(term)
{

  g_selectedTerm = term;
  var startYear = g_termDates[term]["Start"].getFullYear();
  var startMonth = g_termDates[term]["Start"].getMonth();
  var startDay = g_termDates[term]["Start"].getDate();

  var endYear = g_termDates[term]["End"].getFullYear();
  var endMonth = g_termDates[term]["End"].getMonth();
  var endDay = g_termDates[term]["End"].getDate();

  calViewDateRange(startYear, startMonth, startDay, endYear, endMonth, endDay, 'term');

}


function calViewDateRange(startYear, startMonth, startDay, endYear, endMonth, endDay, view) 
{

  var startDate = new Date(startYear, startMonth, startDay);
  var endDate = new Date(endYear, endMonth, endDay);

  var daycount = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24);
  var realStartMonth = parseInt(startMonth) + 1;
  var realEndMonth = parseInt(endMonth) + 1;

  $.get("?wtExtension=Calendar&view=daterange&startday=" + startDay + "&startmonth=" + realStartMonth + "&startyear=" + startYear + "&endday=" + endDay + "&endmonth=" + realEndMonth + "&endyear=" + endYear + "&daycount=" + daycount + "&calendars=" + g_calendars, function(data) { eval(data); displayDateRangeCal('calendarholder', startYear, startMonth, startDay, endYear, endMonth, endDay, view ); });
}


function calGetFullDayEvents(cellWidth)
{
  var maxPosition = 0;

  for(var i = 0; i < g_events.length; i++) {

    if(g_events[i].m_numberOfDays > 0 || g_events[i].m_allDay) {
      var eventlabel =  g_events[i].m_name;

      var eventDate = g_events[i].m_startDate;
      var position = 0;
      for(var d = 0; d <= g_events[i].m_numberOfDays; d++) {
        var cellid = eventDate.getFullYear() + '-' + eventDate.getMonth() + '-' + eventDate.getDate();
        if(g_dayFullDayEvents[cellid]) {
          if(g_dayFullDayEvents[cellid].length > position) {
            position = g_dayFullDayEvents[cellid].length;
          }
        }
        eventDate = new Date(eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate() + 1);
      }     

      var barWidth = 0;
      eventDate = g_events[i].m_startDate;
      for(var d = 0; d <= g_events[i].m_numberOfDays; d++) {
        var cellid = eventDate.getFullYear() + '-' + eventDate.getMonth() + '-' + eventDate.getDate();
        var dow = eventDate.getDay();

//        var cellWidth = $('#' + cellid + 'heading').width();
        barWidth += cellWidth;

        if(g_dayFullDayEvents[cellid]) {
          while(g_dayFullDayEvents[cellid].length < position) {
            g_dayFullDayEvents[cellid][g_dayFullDayEvents[cellid].length] = -1;//null;
          }
          g_dayFullDayEvents[cellid][g_dayFullDayEvents[cellid].length] = i;

          if(dow == 6 || d == g_events[i].m_numberOfDays) {
            var lines = calCheckTextWidth(eventlabel, barWidth);
            var barHeight = lines.length;
            for(var h = 1; h < barHeight; h++) {
              g_dayFullDayEvents[cellid][g_dayFullDayEvents[cellid].length] = -1;
            }
            barWidth = 0;
          }

          if(g_dayFullDayEvents[cellid].length > maxPosition) {
            maxPosition = g_dayFullDayEvents[cellid].length;
          }
        }
        eventDate = new Date(eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate() + 1);
      }
    }
  }

  return maxPosition;


}

function calDisplayDayEvents()
{
  // need to find the width of events
  for(var i = 0; i < g_events.length; i++) {
    if( (!g_events[i].m_allDay) && g_events[i].m_numberOfDays == 0) {
      var cellid = g_events[i].m_startDate.getFullYear() + '-' + g_events[i].m_startDate.getMonth() + '-' + g_events[i].m_startDate.getDate();
      if(g_dayTimes[cellid]) {
        var fromindex = g_events[i].m_startHour * 2;
        if(g_events[i].m_startMinute >= 30) {
          fromindex++;
        }
        var toindex = g_events[i].m_endHour * 2;
        if(g_events[i].m_endMinute >= 30) {
          toindex++;
        }

        if(fromindex == toindex) {
          toindex += 2;
        }
      
        for(var j = fromindex; j <= toindex; j++) {
          g_dayTimes[cellid][j][g_dayTimes[cellid][j].length] = i;        
        }
      }
    }
  }
  for(var i = 0; i < g_events.length; i++) {
    if( (!g_events[i].m_allDay) && g_events[i].m_numberOfDays == 0) {

      var cellid = g_events[i].m_startDate.getFullYear() + '-' + g_events[i].m_startDate.getMonth() + '-' + g_events[i].m_startDate.getDate();
      if(g_dayTimes[cellid]) {
        var fromindex = g_events[i].m_startHour * 2;
        if(g_events[i].m_startMinute >= 30) {
          fromindex++;
        }
        var toindex = g_events[i].m_endHour * 2;
        if(g_events[i].m_endMinute >= 30) {
          toindex++;
        }        

        if(fromindex == toindex) {
          toindex += 2;
        }
     
        var maxEvents = 1;
        var position = 0;
        for(var j = fromindex; j <= toindex; j++) {
          if(g_dayTimes[cellid][j].length > maxEvents) {
            maxEvents = g_dayTimes[cellid][j].length;
            for(var k = 0; k < g_dayTimes[cellid][j].length; k++) {
              if(g_dayTimes[cellid][j][k] == i && k > position) {
                position = k;
              }
            }
          }
        }
      }    
      g_events[i].m_width = Math.floor(100 / maxEvents);
      g_events[i].m_position = position;

    }
  }

  var html = '';
  for(var i = 0; i < g_events.length; i++) {
    if( (!g_events[i].m_allDay) && g_events[i].m_numberOfDays == 0) {
      var cellid = g_events[i].m_startDate.getFullYear() + '-' + g_events[i].m_startDate.getMonth() + '-' + g_events[i].m_startDate.getDate();
      var eventelement = document.getElementById(cellid + 'events');
      if(eventelement) {
        var cellwidth = eventelement.offsetWidth;
        if(g_dayTimes[cellid]) {
          var fromposition = g_events[i].m_startHour * 2;
          fromposition += g_events[i].m_startMinute / 30;
/*
        if(g_events[i].m_startMinute >= 30) {
          fromposition++;
        }
  */      
          var toposition = g_events[i].m_endHour * 2;
          if(g_events[i].m_endMinute >= 30) {
            toposition++;
          }
          if(fromposition == toposition) {
            toposition += 2;
          }

          var left = Math.floor(g_events[i].m_position * g_events[i].m_width * cellwidth / 100);
  
          var top = Math.floor(fromposition * 20);//g_dayCellHeight;

          var height = (toposition - fromposition) * 20;//g_dayCellHeight;


          if(height < 40) {
            height = 40;
          }
          var width = g_events[i].m_width;
          html = '<div class="caleventblock" onclick="calShowEvent(' + i + ')" style="z-index: 1; background-color: ' + g_events[i].m_colour1 + '; border: 1px solid ' + g_events[i].m_colour2 + ';left: ' + left + 'px; top: ' + top + 'px; height: ' + height + 'px; width: ' + width + '%">';
          html += '<h2 style="background-color: ' + g_events[i].m_colour2 + '">';
          html += g_events[i].getStartTime();
          html += '</h2>';
          html += g_events[i].m_name;
          html += '</div>';
          eventelement.innerHTML += html;
        }
        
      }
    }
  }

  html = '';
  var day = new Date(g_year, g_month, g_day);

  var cellwidths = Array();
  for(var i = 0; i < g_dayCount; i++) {
    var cellid = day.getFullYear() + '-' + day.getMonth() + '-' + day.getDate();
    eventsElement = document.getElementById(cellid + 'column');
    cellwidths[i] = eventsElement.offsetWidth - 1;
 
//    if(navigator.appName == 'Netscape') {
      cellwidths[i] += 1;

//    } 
    day = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1);

  }

  day = new Date(g_year, g_month, g_day);
  var prevcellid = '';
  for(var i = 0; i < g_dayCount; i++) {
    var cellid = day.getFullYear() + '-' + day.getMonth() + '-' + day.getDate();

    var eventsElement = document.getElementById(cellid + 'events');
    g_dayCellWidth = eventsElement.clientWidth;

    for(var j = 0; j < g_dayFullDayEvents[cellid].length; j++) {
      if(g_dayFullDayEvents[cellid][j] != -1) {
        var index = g_dayFullDayEvents[cellid][j];
        var theevent = g_events[index];
        var continuesprevcell = false;
        if(prevcellid != '') {
          if(g_dayFullDayEvents[prevcellid].length > j && g_dayFullDayEvents[prevcellid][j] == index) {
            continuesprevcell = true;
          }
        }   
        
        if(!continuesprevcell) {
          
          var width = 0;//g_dayCellWidth - 2;
          for(var k = i; k < g_dayCount; k++) {
            var testday = new Date(g_year, g_month, g_day + k);
            var testcellid = testday.getFullYear() + '-' + testday.getMonth() + '-' + testday.getDate();
            if(g_dayFullDayEvents[testcellid].length > j && g_dayFullDayEvents[testcellid][j] == index) {
              width += cellwidths[k];//g_dayCellWidth;
            }
          }
       //   width -= 3;
          width--;
          var height = g_dayCellHeight - 3;
          var left = 0;//i * (g_dayCellWidth);
          for(var k = 0; k < i; k++) {
            left += cellwidths[k];
          }
     
     //     left++;
          var top = j * g_dayCellHeight;

          var bgColour = 'orange';
     /*    
          html += '<div class="caleventbar" onclick="calShowEvent(' + index + ')" style="cursor: default; width: ' + width + 'px; top: ' + top + 'px; left: ' + left + 'px; color: white; background-color: ' + theevent.m_colour1 + '">&nbsp;';
          html += theevent.m_name;
          html += '</div>';
*/
          var barHeight = 18;
          var barPosition = top;
          var lines = calCheckTextWidth(theevent.m_name, width);
          for(var k = 0; k < lines.length; k++) {
            html += '<div class="caleventbar" onclick="calShowEvent(' + index + ')" style="cursor: default; width: ' + width + 'px; top: ' + barPosition + 'px; left: ' + left + 'px; color: white; background-color: ' + theevent.m_colour1 + '; height: ' + barHeight + 'px">&nbsp;';
            html += lines[k];
            html += '</div>';
            barHeight = 19;
            if(k == 0) {
              barPosition -= 1;
            }
            barPosition += 19;

          }
        }
      }
    }
    prevcellid = cellid;
    day = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1);
  }

  var fulldayeventsElement = document.getElementById('fulldayevents');
  if(fulldayeventsElement) {
    fulldayeventsElement.innerHTML = html;
  }
}

function calCloseEventInfo() 
{
  var eventInfoElement = document.getElementById('eventinfo');
  eventInfoElement.style.display = 'none';
}

function calEventInfoLoaded(data)
{
  var eventInfoElement = document.getElementById('eventinfo');
  eventInfoElement.innerHTML = data;
}

function calShowEvent(index) 
{
  var calendarElement = document.getElementById('calendartable');
  var width = calendarElement.clientWidth;
  var height = calendarElement.clientHeight;

  var elementWidth = width - 80;
  var elementHeight = height - 80;
  var eventInfoElement = document.getElementById('eventinfo');
  eventInfoElement.innerHTML = '';//<a href="javascript: calCloseEventInfo()">Close</a>';
  eventInfoElement.style.top = '50px';
  eventInfoElement.style.left = '40px';
  eventInfoElement.style.width = elementWidth + 'px';
  eventInfoElement.style.height = elementHeight + 'px';
  eventInfoElement.backgroundColor = 'white';
  eventInfoElement.style.display = '';
 

  var startMonth = g_events[index].m_startDate.getMonth() + 1;
  var startDate = g_events[index].m_startDate.getFullYear() + '-' + startMonth + '-' + g_events[index].m_startDate.getDate();


  $.get("?wtExtension=Calendar&view=eventdetails&guid=" + g_events[index].m_guid + "&startDate=" + startDate + "&startTime=" + g_events[index].m_startTime + "&endTime=" + g_events[index].m_endTime + '&calendars=' + g_calendars, calEventInfoLoaded);
}

function calDisplayMonthEvents() 
{

  // first need to do events that span over couple/multiple days
 
  for(var i = 0; i < g_events.length; i++) {
    if(g_events[i].m_numberOfDays > 0) {
      var eventDate = g_events[i].m_startDate;
      var eventlabel = g_events[i].m_name;
      if(!g_events[i].m_allDay) {
        var time = g_events[i].getStartTime();
        var eventlabel = time + '&nbsp;' + g_events[i].m_name;
      }


      var position = 0;
      for(var d = 0; d <= g_events[i].m_numberOfDays; d++) {
        var cellid = eventDate.getFullYear() + '-' + eventDate.getMonth() + '-' + eventDate.getDate();
        var cellWidth = $('#' + cellid).width();
        if(g_dayEvents[cellid]) {
          if(g_dayEvents[cellid].length > position) {
            position = g_dayEvents[cellid].length;
          }
        }
        eventDate = new Date(eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate() + 1);
      }


      var barWidth = 0 
      eventDate = g_events[i].m_startDate;
      for(var d = 0; d <= g_events[i].m_numberOfDays; d++) {
        var cellid = eventDate.getFullYear() + '-' + eventDate.getMonth() + '-' + eventDate.getDate();
        var dow = eventDate.getDay();

        var cellWidth = $('#' + cellid).width();
        barWidth += cellWidth;

        if(g_dayEvents[cellid]) {
          while(g_dayEvents[cellid].length != position) {
            g_dayEvents[cellid][g_dayEvents[cellid].length] = -1;//null;
          }
          g_dayEvents[cellid][g_dayEvents[cellid].length] = i;//g_events[i];

          if(dow == 6 || d == g_events[i].m_numberOfDays) {          
            var lines = calCheckTextWidth(eventlabel, barWidth);
            var barHeight = lines.length;
            for(var h = 1; h < barHeight; h++) {
              g_dayEvents[cellid][g_dayEvents[cellid].length] = -1;
            }
            barWidth = 0;
          }
        }      
        eventDate = new Date(eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate() + 1);
      }



    }
  }



  // next do all day events
  for(var i = 0; i < g_events.length; i++) {
    if(g_events[i].m_numberOfDays == 0 && g_events[i].m_allDay) {
      var cellid = g_events[i].m_startDate.getFullYear() + '-' + g_events[i].m_startDate.getMonth() + '-' + g_events[i].m_startDate.getDate();
      if(g_dayEvents[cellid]) {
        g_dayEvents[cellid][g_dayEvents[cellid].length] = i;//g_events[i];
      }
    }
  }

  // do remaining events
  for(var i = 0; i < g_events.length; i++) {
    if(g_events[i].m_numberOfDays == 0 && !g_events[i].m_allDay) {
      var cellid = g_events[i].m_startDate.getFullYear() + '-' + g_events[i].m_startDate.getMonth() + '-' + g_events[i].m_startDate.getDate();
      if(g_dayEvents[cellid]) {
        g_dayEvents[cellid][g_dayEvents[cellid].length] = i;//g_events[i];
      }
    }
  }

  for(var cellid in g_dayEvents) {
    var cellElement = document.getElementById(cellid);
    var cellWidth = $('#' + cellid).width();
    var dateParts = cellid.split('-');
    var year = dateParts[0];
    var month = dateParts[1];
    var day = dateParts[2];
    var calendarDay = new Date(year, month, day);
    var html = '';

    var actualmonth = parseInt(month) + 1;
    var specialDate = false;
    for(var k = 0; k < g_specialDates.length; k++) {
      if(g_specialDates[k].m_startDate.getTime() == calendarDay.getTime()) {
        specialDate = true;
        html += '<h3 style="background-color:#' + g_specialDates[k].m_colour2 + '">';
        html += '<span style="float: left; color: white; overflow: hidden; height: 16px; width: 100px">&nbsp;' + g_specialDates[k].m_name + '</span>';
      }
    }
    if(!specialDate) { 
      html += '<h3>';
    }



    html += '<a href="javascript: calGotoDay(' + year + ',' + month + ',' + day + ')">' + day + '/' + actualmonth + '</a>&nbsp;';
    html += '</h3>';
    var position = 19;
    if(g_dayEvents[cellid].length > 0) {
      for(var i = 0; i < g_dayEvents[cellid].length; i++) {
        //position += 19;//(i + 1) * 19;
        if(g_dayEvents[cellid][i] == -1) {
          // placeholder for multiple day events
          html += '<div class="caleventbar" style="left: 0px; top: ' + position + 'px; width: 100%">&nbsp;</div>';
          position += 19;
        } else {
          var index = g_dayEvents[cellid][i];
          var theevent = g_events[index];
          if(theevent.m_numberOfDays == 0) {
            if(theevent.m_allDay) {
              // all day event
              var eventStyle = 'left: 0px; top: ' + position + 'px; color: ' + theevent.m_colour1 + '; width: 100%';
                            eventStyle = 'left: 0px; top: ' + position + 'px; color: white; background-color: ' + theevent.m_colour1 + '; width: 100%';
              
              var lines = calCheckTextWidth(theevent.m_name, cellWidth);
              for(var k = 0; k < lines.length; k++) {

            
                var eventStyle = 'left: 0px; top: ' + position + 'px; color: ' + theevent.m_colour1 + '; width: 100%';
                                  if(k == 0) {
                    eventStyle = 'left: 0px; top: ' + position + 'px; color: white; background-color: ' + theevent.m_colour1 + '; width: 100%';
                  } else {
                    var eventTop = position - 1;
                    eventStyle = 'left: 0px; height: 19px; top: ' + eventTop + 'px; color: white; background-color: ' + theevent.m_colour1 + '; width: 100%';
                  }
                
                html += '<div onclick="calShowEvent(' + index + ')" class="caleventbar" style="' + eventStyle + '">&nbsp;' + lines[k] + '</div>';
                position += 19;
              }
            } else {
              // event with a start time
              var time = theevent.getStartTime();

                            var eventlabel = time + '&nbsp;' + theevent.m_name;
              

              var lines = calCheckTextWidth(eventlabel, cellWidth);
              for(var k = 0; k < lines.length; k++) { /* lines.length */

                var eventStyle = 'left: 0px; top: ' + position + 'px; color: ' + theevent.m_colour1 + '; width: 100%';

                
                html += '<div onclick="calShowEvent(' + index + ')" class="caleventbar" style="' + eventStyle + '">&nbsp;' + lines[k] + '</div>';
                position += 19;
              }

            }
          } else {
            html += '<div class="caleventbar" style="left: 0px; top: ' + position + 'px; width: 100%">&nbsp;' + theevent.m_name + '</div>';
            position += 19;
          }
        }
      }
    }

    if(position == 19) {
      position += 19;
    } else {
//      position -= 19;
    }
    var cellHeight = position;
/*
    if(cellHeight < 152) {
      cellHeight = 152;
    }
*/

    if(cellHeight < 80) {
      cellHeight = 80;
    }
    $('#' + cellid + 'cell').height(cellHeight);
    cellElement.innerHTML = html;
  }


  var monthDaysContainer = document.getElementById('monthDaysContainer');

  html = '';
  var row = 0;
  var column = 0;
  var prevcellid = '';
  var xpos = 0;
  var ypos = 0;
  for(var cellid in g_dayEvents) {
    if(column == 7) {
      prevcellid = '';
      row++;
      column = 0;
      xpos = 0;
    }
    if(g_dayEvents[cellid].length > 0) {
      for(var i = 0; i < g_dayEvents[cellid].length; i++) {
        var index = g_dayEvents[cellid][i];
        if(index != -1) {
          var theevent = g_events[index];
          if(theevent.m_numberOfDays > 0) {
            var dateParts = cellid.split('-');
            var year = dateParts[0];
            var month = dateParts[1];
            var day = dateParts[2];

            var continuesfromprevday = false;
            if(prevcellid != '') {
              if(g_dayEvents[prevcellid].length > i && g_dayEvents[prevcellid][i] == index) {
                continuesfromprevday = true;
              }
            }
            var width = 0;
            if(!continuesfromprevday) {
              for(var j = 0; j < 7 - column; j++) {
                var testday = day * 1 + j * 1;
                var testdate = new Date(year, month, testday);
                var testcellid = testdate.getFullYear() + '-' + testdate.getMonth() + '-' + testdate.getDate();

                if(g_dayEvents[testcellid].length > i && g_dayEvents[testcellid][i] == index) {
                  var eventcell = document.getElementById(testcellid);
                  width += eventcell.offsetWidth + 1;//clientWidth + 1;
//                  width++;
                } else {
                  break;
                }
              }

              var top = ypos + 40 + (i + 1) * 19 ;
              var left = xpos;
              top++;
              left++;

              var width = width - 1;
              var height = 18;
              var eventlabel = theevent.m_name;
              if(!theevent.m_allDay) {
                var time = theevent.getStartTime();
                var eventlabel = time + '&nbsp;' + theevent.m_name;                
              }
              // multiple day events

              var barPosition = top;
if($('#calendarcontrols').length > 0) {

  barPosition += $('#calendarcontrols').outerHeight() - 20;
}


              var lines = calCheckTextWidth(eventlabel, width);
              for(var k = 0; k < lines.length; k++) {

                html += '<div onclick="calShowEvent(' + index + ')" class="caleventbar" style="z-index: 1; top: ' + barPosition + 'px; left: ' + left + 'px; width: ' + width + 'px; height: ' + height + 'px; background-color: ' + theevent.m_colour1 + '; color: white;">&nbsp;' + lines[k] + '</div>';

                // set up the position of the next bar
                height = 19;
                if(k == 0) {
                  barPosition -= 1;
                }
                barPosition += 19;
              }

            }

          }
        }
      }
    }
    column++;
    eventcell = document.getElementById(cellid + 'cell');
    if(eventcell) {
      //xpos += eventcell.clientWidth  + 2;

      xpos += eventcell.offsetWidth;
      if(column == 7) {
        ypos += eventcell.offsetHeight;//clientHeight + 2;
      }
    }
    prevcellid = cellid;
  }
  if(monthDaysContainer) {
  monthDaysContainer.innerHTML = html;
  }

}

function calPrev()
{
  switch(g_view) {
    case 'day':
    case 'week':
      var prevDate = new Date(g_year, g_month, g_day - g_dayCount);
      var month = prevDate.getMonth() + 1;
      var day = prevDate.getFullYear() + '-' + month + '-' + prevDate.getDate();
      $.get("?wtExtension=Calendar&view=day&date=" + day + '&daycount=' + g_dayCount + '&calendars=' + g_calendars, function(data) { eval(data); displayDayCal('calendarholder'); });
      break;
    case 'month':
      var startDate = new Date(g_year, g_month - 1, 1);
      var month = startDate.getMonth() + 1;
      var monthStart = startDate.getFullYear() + '-' + month + '-01';
      $.get("?wtExtension=Calendar&view=month&monthstart=" + monthStart + '&calendars=' + g_calendars, function(data) { eval(data); displayMonthCal('calendarholder'); });
      break;
  }
}

function calNext()
{
  switch(g_view) {
    case 'day':
    case 'week':
      var prevDate = new Date(g_year, g_month, g_day + g_dayCount);
      var month = prevDate.getMonth() + 1;
      var day = prevDate.getFullYear() + '-' + month + '-' + prevDate.getDate();
      $.get("?wtExtension=Calendar&view=day&date=" + day + '&daycount=' + g_dayCount + '&calendars=' + g_calendars, function(data) { eval(data); displayDayCal('calendarholder'); });
      break;
    case 'month':
      var startDate = new Date(g_year, g_month + 1, 1);
      var month = startDate.getMonth() + 1;
      var monthStart = startDate.getFullYear() + '-' + month + '-01';
      $.get("?wtExtension=Calendar&view=month&monthstart=" + monthStart + '&calendars=' + g_calendars, function(data) {  eval(data); displayMonthCal('calendarholder'); });
      break;
  }
}

function getControlsHTML() 
{
  html = '';
  html += '<table width="100%" cellpadding="0" cellspacing="0">';

  html += '<tr>';
  html += '<td class="calNextPrev">';
  switch(g_view) {
    case 'day':
      html += '<a href="javascript: calPrev()" class="calPrev">&lt;&lt;</a>&nbsp;&nbsp;';
      html += '<a href="javascript: calNext()" class="calPrev">&gt;&gt;</a>&nbsp;&nbsp;';
      var day = new Date(g_year, g_month, g_day);
      html += '<strong>';
      html += day.getDate() + ' ' + g_months[day.getMonth()] + ' ' + day.getFullYear();
      if(g_dayCount > 1) {
        day = new Date(g_year, g_month, g_day + g_dayCount - 1);
        html += " - " + day.getDate() + ' ' + g_months[day.getMonth()] + ' ' + day.getFullYear();
      }
      html += '</strong>';
      break;
    case 'week':
      html += '<a href="javascript: calPrev()" class="calPrev">&lt;&lt;</a>&nbsp;&nbsp;';
      html += '<a href="javascript: calNext()" class="calNext">&gt;&gt;</a>&nbsp;&nbsp;';
      var weekEnd = new Date(g_weekStart.getFullYear(), g_weekStart.getMonth(), g_weekStart.getDate() + 6);
      html += g_weekStart.getDate() + ' ' + g_months[g_weekStart.getMonth()] + ' ' + g_weekStart.getFullYear()  + ' - ';
      html += weekEnd.getDate() + ' ' + g_months[weekEnd.getMonth()] + ' ' + weekEnd.getFullYear();
      break;
    case 'month':
      html += '<a href="javascript: calPrev()" class="calPrev">&lt;&lt;</a>&nbsp;&nbsp;';
      html += '<a href="javascript: calNext()" class="calNext">&gt;&gt;</a>&nbsp;&nbsp;';
      html += '<strong>';
      html += g_months[g_month] + ' ' + g_year;
      html += '</strong>';
      break;
    case 'term':

      html += '<table cellpadding="0" cellspacing="0">';
      html += '<tr>';
            html += '<td>';
      html += '2019:';
      html += '</td>';
            for(var i = 0; i < g_termDates.length; i++) {
        html += '<td>';
        if(g_selectedTerm == i) {
          html += g_termDates[i].Name;
        } else {
          html += '<a href="javascript: calViewTerm(' + i + ')">' + g_termDates[i].Name + '</a>';
        }
        html += '</td>';
 
        if(i != g_termDates.length - 1) {
          html += '<td>';
          html += '&nbsp;|&nbsp;';
          html += '</td>';
        }

      }
      
/*
      html += '<td>';
      if(g_selectedTerm == 0) {
        html += 'Term&nbsp;1';
      } else {
        html += '<a href="javascript: calViewTerm(0)">Term&nbsp;1</a>';
      }
      html += '</td>';
      html += '<td>';
      html += '&nbsp;|&nbsp;';
      html += '</td>';

      html += '<td>';
      if(g_selectedTerm == 1) {
        html += 'Term&nbsp;2';
      } else {
        html += '<a href="javascript: calViewTerm(1)">Term&nbsp;2</a>';
      }
      html += '</td>';
      html += '<td>';
      html += '&nbsp;|&nbsp;';
      html += '</td>';
      
      html += '<td>';
      if(g_selectedTerm == 2) {
        html += 'Term&nbsp;3';
      } else {
        html += '<a href="javascript: calViewTerm(2)">Term&nbsp;3</a>';
      }
      html += '</td>';
      html += '<td>';
      html += '&nbsp;|&nbsp;';
      html += '</td>';
 
      html += '<td>';
      if(g_selectedTerm == 3) {
        html += 'Term&nbsp;4';
      } else {
        html += '<a href="javascript: calViewTerm(3)">Term&nbsp;4</a>';
      }
      html += '</td>';
*/
      html += '</tr>';
      html += '</table>';
    
      break;
  }
//  html += '&nbsp;&nbsp;<a href="javascript: calNext()">&gt;&gt;</a>'; 

  
  html += '</td>';
  html += '<td align="right" class="calDayMonthYear">';
    if(g_view == 'day' && g_dayCount == 1) {
    html += '<strong>Day</strong>&nbsp;&nbsp;';
  } else {
    html += '<a href="javascript: calView(\'day\')" class="calDay">Day</a>&nbsp;&nbsp;';
  }
  
    if(g_view == 'day' && g_dayCount == 7) {
    html += '<strong>Week</strong>&nbsp;&nbsp;';
  } else {
    html += '<a href="javascript: calView(\'week\')" class="calWeek">Week</a>&nbsp;&nbsp;';
  }
  
  if(g_view == 'month') {
    html += '<strong>Month</strong>';
  } else {
    html += '<a href="javascript: calView(\'month\')" class="calMonth">Month</a>';
  }



  html += '</td>';
  html += '</tr>';
  html += '</table>';
  return html;

}

function displayDateRangeCal(parentID, startYear, startMonth, startDay, endYear, endMonth, endDay, view)
{

  g_dayEvents = Array();
  g_view = 'custom';
  if(typeof(view) != 'undefined') {
    g_view = view;
  }

  g_cellXPosition = Array();
  g_cellYPosition = Array();

  g_displayFrom = new Date(startYear, startMonth, startDay);
  g_displayTo = new Date(endYear, endMonth, endDay);


  var displayFromDow = g_displayFrom.getDay();

  var displayFromMilliseconds = g_displayFrom.getTime();
  displayFromMilliseconds -= displayFromDow * 1000 * 60 * 60 * 24;
  g_displayFrom = new Date(displayFromMilliseconds);

  var displayToDow = g_displayTo.getDay();
  var displayToMilliseconds = g_displayTo.getTime();
  displayToMilliseconds += (6 - displayToDow) * 1000 * 60 * 60 * 24;
  g_displayTo = new Date(displayToMilliseconds);

  var totalDays = (displayToMilliseconds - displayFromMilliseconds) / (1000 * 60 * 60 * 24);
  calendarDay = g_displayFrom;
  
  var rows = totalDays / 7;
  var rowHeight = Math.floor(100 / rows);


  var parentElement = document.getElementById(parentID);
  if(!parentElement) {
    return;
  }
  var width = parentElement.clientWidth;
  var height = parentElement.clientHeight;

  var controlsHeight = 20;
  var headingHeight = 20;
  var monthDaysHeight = height - headingHeight - controlsHeight;

  if(monthDaysHeight < 100) {
    monthDaysHeight = 100;
  }

  var html = '';
  html = '<div style="position: relative" id="calendardiv">';

  html += '<div id="monthDaysContainer"></div>'
  html += '<table style="width: 100%;" cellpadding="0" cellspacing="0" id="calendartable">';
  html += '<tr style="height: ' + controlsHeight + 'px">';
  html += '<td id="calendarcontrols">';
  html += getControlsHTML();
  html += '</td>';
  html += '</tr>';
  html += '<tr style="height: ' + headingHeight + 'px">';
  html += '<td id="dayHeadings">';
  html += 'days';
  html += '</td>';
  html += '</tr>';
console.log('month days height = ' + monthDaysHeight);
  html += '<tr style="height: ' + monthDaysHeight + 'px">';
  html += '<td id="monthDaysCell">';
  html += '<div id="monthDays" style="position: relative">';
  html += 'month days';
  html += '</div>';
  html += '</td>';
  html += '</tr>';
  html += '</table>';
  html += '<div id="eventinfo" style="z-index: 1; background-color: white; border: 1px solid black; top: 0; left: 0; position: absolute; display: none; padding: 10px"></div>';
  html += '</div>';
  parentElement.innerHTML = html;

  var headingElement = document.getElementById('dayHeadings');
  html = '<table style="width: 100%" cellpadding="0" cellspacing="0">';
  html += '<tr style="height: ' + rowHeight + '%">';
  for(var i = 0; i < 7; i++) {
    html += '<th valign="top" width="14%">';
    html += g_daysOfWeek[i];
    html += '</th>';
  }
  html += '</tr>';
  html += '</table>';
  headingElement.innerHTML = html;


  var monthDaysElement = document.getElementById('monthDays');
  html = '';
//  html = '<div id="monthDaysContainer"></div>';

  if(navigator.vendor != 'Apple Computer, Inc.') {
    html += '<table class="calmonthdays" style="width: 100%; height: ' + monthDaysHeight + 'px;" cellpadding="0" cellspacing="0">';
  } else {
    html += '<table class="calmonthdays" style="width: 100%; height: ' + monthDaysHeight + 'px;" cellpadding="0" cellspacing="0">';
  }

  var cellid = "";
  for(var j = 0; j < rows; j++) {
    html += '<tr id="calrow' + j + '">';
    for(var i = 0; i < 7; i++) {
      cellid = calendarDay.getFullYear() + '-' + calendarDay.getMonth() + '-' + calendarDay.getDate();
      var cellstyle = 'class="calmonthday"';
      if(i == 0 || i == 6) {
        cellstyle = 'class="calnonmonthday"';
      }

      for(var k = 0; k < g_specialDates.length; k++) {
        if(g_specialDates[k].m_startDate.getTime() == calendarDay.getTime()) {
          cellstyle=' style="background-color: #' + g_specialDates[k].m_colour1 + '"';
        } 
      }

/*
      if(calendarDay.getMonth() == nextMonth || calendarDay.getMonth() == prevMonth) {
        cellstyle = 'class="calnonmonthday"';
      }
*/
      html += '<td ' + cellstyle + ' width="14%" valign="top" id="' + cellid + 'cell">';
      g_cellXPosition[cellid] = i;
      g_cellYPosition[cellid] = j;
      g_dayEvents[cellid] = Array();
      html += '<div style="width: 100%; height: 100%; position: relative" id="' + cellid + '">';
      html += '<h3><a href="javascript: calGotoDay(' + calendarDay.getFullYear() + ',' + calendarDay.getMonth() + ',' + calendarDay.getDate() + ')">' + calendarDay.getDate() + '</a>&nbsp;</h3>';
//      html += '<div class="calmonthevent" style="position: absolute; left: 0; top: 30px; width: 100%">Event</div>';
      html += '</div>';
      html += '</td>';
      calendarDay = new Date(calendarDay.getFullYear(), calendarDay.getMonth(), calendarDay.getDate() + 1);
    }
    html += '</tr>';
  }
  html += '</table>';

  var acronymHtml = '';
  for(var acronym in g_acronyms) {
    if (g_acronyms.hasOwnProperty(acronym)) {
      if(acronymHtml != '') {
        acronymHtml += '&nbsp;&nbsp;&nbsp;&nbsp;';
      }
      acronymHtml += '<strong style="color: ' + g_acronyms[acronym].colour1  + '">'  + acronym + '</strong>' + ' - ' + g_acronyms[acronym].meaning;
    }
  }

  if(acronymHtml != '') {
    html += '<span class="calendaracronyms">' + acronymHtml + '</span>';  
  }
  monthDaysElement.innerHTML = html;


  calDisplayMonthEvents();
}



function displayMonthCal(parentID)
{

  g_dayEvents = Array();
  g_view = 'month';
  var month = g_month;
  var year = g_year;
  var firstMonthDay = new Date(year, month, 1);
  var firstMonthDayDow = firstMonthDay.getDay();
  var monthDays = daysInMonth(month, year);

  g_cellXPosition = Array();
  g_cellYPosition = Array();

  var nextMonth = month + 1;
  var nextMonthYear = g_year;
  if(nextMonth > 12) {
    nextMonthYear++;
    nextMonth = 1;
  }


  var prevMonth = month - 1;
  var prevMonthYear = g_year;
  if(prevMonth < 0) {
    prevMonthYear--;
    prevMonth = 11;
  }
  var prevMonthDays = daysInMonth(prevMonth, prevMonthYear);
  var prevMonthFromDay = prevMonthDays - firstMonthDayDow + 1;
  var calendarDay = new Date(prevMonthYear, prevMonth, prevMonthFromDay);

  var prevAndThisMonthDayCount = firstMonthDayDow + monthDays;
  var nextMonthDays = ((Math.floor( prevAndThisMonthDayCount / 7 ) + 1) * 7 - prevAndThisMonthDayCount) % 7;

  var totalDays = firstMonthDayDow + monthDays + nextMonthDays;
  var rows = totalDays / 7;
  var rowHeight = Math.floor(100 / rows);


  var parentElement = document.getElementById(parentID);
  if(!parentElement) {
    return;
  }
  var width = parentElement.clientWidth;
  var height = parentElement.clientHeight;

  if(height < 100) {
    height = 100;
  }
  var controlsHeight = 20;
  var headingHeight = 20;
  var monthDaysHeight = height - headingHeight - controlsHeight;

  if(monthDaysHeight < 100) {
    monthDaysHeight = 100;
  }

  var html = '';
  html = '<div style="position: relative" id="calendardiv">';

  html += '<div id="monthDaysContainer"></div>'
  html += '<table style="width: 100%;" cellpadding="0" cellspacing="0" id="calendartable">';
  html += '<tr style="height: ' + controlsHeight + 'px">';
  html += '<td id="calendarcontrols">';
  html += getControlsHTML(); 
  html += '</td>';
  html += '</tr>';
  html += '<tr style="height: ' + headingHeight + 'px">';
  html += '<td id="dayHeadings">';
  html += 'days';
  html += '</td>';
  html += '</tr>';
console.log('month days height = ' + monthDaysHeight);
  html += '<tr style="height: ' + monthDaysHeight + 'px">';
  html += '<td id="monthDaysCell">';
  html += '<div id="monthDays" style="position: relative">';
  html += 'month days';
  html += '</div>';
  html += '</td>';
  html += '</tr>';
  html += '</table>';
  html += '<div id="eventinfo" style="z-index: 1; background-color: white; border: 1px solid black; top: 0; left: 0; position: absolute; display: none; padding: 10px"></div>';
  html += '</div>';
  parentElement.innerHTML = html;

  var headingElement = document.getElementById('dayHeadings');
  html = '<table style="width: 100%" cellpadding="0" cellspacing="0">';
  html += '<tr style="height: ' + rowHeight + '%">';
  for(var i = 0; i < 7; i++) {
    html += '<th valign="top" width="14%">';
    html += g_daysOfWeek[i];
    html += '</th>';
  }
  html += '</tr>';
  html += '</table>';
  headingElement.innerHTML = html;


  var monthDaysElement = document.getElementById('monthDays');
  html = '';
//  html = '<div id="monthDaysContainer"></div>';

  if(navigator.vendor != 'Apple Computer, Inc.') {
    html += '<table class="calmonthdays" style="width: 100%; height: ' + monthDaysHeight + 'px;" cellpadding="0" cellspacing="0">';
  } else {
    html += '<table class="calmonthdays" style="width: 100%; height: ' + monthDaysHeight + 'px;" cellpadding="0" cellspacing="0">';
  }

  var cellid = "";
  for(var j = 0; j < rows; j++) {
    html += '<tr>';
    for(var i = 0; i < 7; i++) {
      cellid = calendarDay.getFullYear() + '-' + calendarDay.getMonth() + '-' + calendarDay.getDate();
      var cellstyle = 'class="calmonthday"';
      if(calendarDay.getMonth() == nextMonth || calendarDay.getMonth() == prevMonth) {
        cellstyle = 'class="calnonmonthday"';
      }

      for(var k = 0; k < g_specialDates.length; k++) {
        if(g_specialDates[k].m_startDate.getTime() == calendarDay.getTime()) {
          cellstyle=' style="background-color: #' + g_specialDates[k].m_colour1 + '"';
        }
      }

      html += '<td ' + cellstyle + ' width="14%" valign="top" id="' + cellid + 'cell">';
      g_cellXPosition[cellid] = i;
      g_cellYPosition[cellid] = j;
      g_dayEvents[cellid] = Array();
      html += '<div style="width: 100%; height: 100%; position: relative" id="' + cellid + '">';
      html += '<h3><a href="javascript: calGotoDay(' + calendarDay.getFullYear() + ',' + calendarDay.getMonth() + ',' + calendarDay.getDate() + ')">' + calendarDay.getDate() + '</a>&nbsp;</h3>';
//      html += '<div class="calmonthevent" style="position: absolute; left: 0; top: 30px; width: 100%">Event</div>';
      html += '</div>';
      html += '</td>';
      calendarDay = new Date(calendarDay.getFullYear(), calendarDay.getMonth(), calendarDay.getDate() + 1);
    }
    html += '</tr>';
  }
  html += '</table>';

  var acronymHtml = '';
  for(var acronym in g_acronyms) {
    if (g_acronyms.hasOwnProperty(acronym)) {
      if(acronymHtml != '') {
        acronymHtml += '&nbsp;&nbsp;&nbsp;&nbsp;';
      }
      acronymHtml += '<strong style="color: ' + g_acronyms[acronym].colour1  + '">' + acronym + '</strong>' + ' - ' + g_acronyms[acronym].meaning;
    }
  }

  if(acronymHtml != '') {
    html += '<span class="calendaracronyms">' + acronymHtml + '</span>';
  }


  monthDaysElement.innerHTML = html;


  calDisplayMonthEvents();
}

function displayDayCal(parentID)
{
  g_view = 'day';
  var parentElement = document.getElementById(parentID);

  g_dayFullDayEvents = Array();

  var day = new Date(g_year, g_month, g_day);
  for(var i = 0; i < g_dayCount; i++) {
    var cellid = day.getFullYear() + '-' + day.getMonth() + '-' + day.getDate();
    g_dayFullDayEvents[cellid] = Array();
    day = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1);
  }

  var width = parentElement.clientWidth;
  var height = parentElement.clientHeight;
  var timeWidth = 40;
  var dayWidth = (width - 30) / g_dayCount;

  var fullDayRows = calGetFullDayEvents(dayWidth);
  var fullDayEventsHeight = fullDayRows * g_dayCellHeight;


/*
  var width = parentElement.clientWidth;
  var height = parentElement.clientHeight;
  var timeWidth = 40;
  var dayWidth = (width - 30) / g_dayCount;
*/
  var scrollbarWidth = 17;

  var controlsHeight = 20;
  var weekdayheight = g_dayCellHeight + fullDayEventsHeight;
  var weekdayholderheight = height - weekdayheight - controlsHeight;

  
  var html = '<div style="position: relative" id="calendardiv">';
  html += '<table style="width: 100%" cellpadding="0" cellspacing="0" id="calendartable">';
  html += '<tr style="height: ' + controlsHeight + 'px">';
  html += '<td id="calendarcontrols">';
  html += getControlsHTML();
  html += '</td>';
  html += '</tr>';
  html += '<tr style="height: ' + weekdayheight + 'px">';
  html += '<td id="weekdays">weekdays&nbsp;</td>';
  html += '</tr>';
/*
  html += '<tr style="height: 5px; background-color: orange">';
  html += '<td></td>';
  html += '</tr>';
*/
  html += '<tr style="height: ' + weekdayholderheight + 'px">';
  html += '<td><div id="weekdayholder" style="position: relative; height: ' + weekdayholderheight + 'px">weekdayholder&nbsp;</div></td>';
  html += '</table>';
  html += '<div id="eventinfo" style="z-index: 1; background-color: white; border: 1px solid black; top: 0; left: 0; position: absolute; display: none; padding: 10px"></div>';
  html += '</div>';
  parentElement.innerHTML = html;


  var weekdaysElement = document.getElementById("weekdays");
  var width = weekdaysElement.clientWidth;
  var weekdaysWidth = width;
  timeWidth = 40;

  var day = new Date(g_year, g_month, g_day);
  html = '';
  html = '<table class="weekdayheadings" cellpadding="0" cellspacing="0" style="height: ' + weekdayheight + 'px">';
  html += '<tr style="height: ' + g_dayCellHeight + 'px">';
  html += '<td style="width: ' + timeWidth + 'px">&nbsp;</td>';
  for(var i = 0; i < g_dayCount; i++) {
    var cellid = day.getFullYear() + '-' + day.getMonth() + '-' + day.getDate();
    month = day.getMonth() + 1;    
    html += '<th id="' + cellid + 'heading"><a href="javascript: calGotoDay(' + day.getFullYear() + ',' + day.getMonth() + ',' + day.getDate() + ')">'  + g_daysOfWeek[day.getDay()] + ' ' + day.getDate() + '/' + month + '</a></th>';
    day = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1);
  }
  html += '<td id="scrollbarpadding" style="width: ' + g_scrollbarWidth + 'px">&nbsp;</td>';
  html += '</tr>';

  if(fullDayEventsHeight != 0) {
    html += '<tr style="height: ' + fullDayEventsHeight + 'px">';
    html += '<td style="width: ' + timeWidth + 'px; text-align: right; background-color: white; font-size: 10px">All Day&nbsp;</td>';
    html += '<td colspan="' + g_dayCount + '" style="background-color: #eee;">';
    html += '<div id="fulldayevents" style="position: relative">&nbsp;</div>';
    html += '&nbsp;</td>';

    html += '<td id="scrollbarpadding" style="width: ' + g_scrollbarWidth + 'px">&nbsp;</td>';
    html += '</tr>';
  }


  html += '</table>';
  weekdaysElement.innerHTML = html;
  var weekdayholderElement = document.getElementById("weekdayholder");
  var width = weekdayholderElement.clientWidth;
  var height = weekdayholderElement.clientHeight;
  var scrollbarWidth = weekdaysWidth - width;

  g_scrollbarWidth = weekdaysWidth - width;

  timeWidth = 40;
  dayWidth = (width - 30) / g_dayCount;
  g_dayCellWidth = dayWidth;
  html = '';
  html = '<table class="weekdaytimes" style="height: 960px" cellpadding="0" cellspacing="0">';
  html += '<tr>';

  html += '<td style="text-align: right; height: 960px; width: ' + timeWidth + 'px">';
  html += '<div style="width: 100%; height: 100%; position: relative">';

  for(var j = 0; j < 24; j++) {
    var position = j * 40;

    if(j < 12) {
      time = j;
      if(time == 0) {
        time = 12;
      }
      time += 'am';
    } else {
      time = j - 12;
      if(time == 0) {
        time = 12;
      }
      time += 'pm';
    }


    html += '<div style="width: 100%; height: 40px; border-bottom: 1px solid #ccc; left: 0; position: absolute; top: ' + position + 'px">' + time + '&nbsp;</div>';
  }

  html += '</div>';
  html += '</td>';

  g_dayTimes = Array();
  var day = new Date(g_year, g_month, g_day);
  for(var i = 0; i < g_dayCount; i++) {
    month = day.getMonth() + 1;
    var cellid = day.getFullYear() + '-' + day.getMonth() + '-' + day.getDate();
    g_dayTimes[cellid] = Array();
    
    html += '<td style="height: 960px" id="' + cellid + 'column">';
    html += '<div style="width: 100%; height: 100%; position: relative" id="' + cellid + '">';
    html += '<div style="width: 100%;" id="' + cellid + 'events"></div>';
    for(var j = 0; j < 48; j++) {
      g_dayTimes[cellid][j] = Array();
      var position = j * 20;
      if(j % 2) {
        html += '<div style="width: 100%; height: 20px; border-bottom: 1px solid #ccc; position: absolute; left: 0; top: ' + position + 'px">&nbsp;</div>';
      } else {
        html += '<div style="width: 100%; height: 20px; border-bottom: 1px dotted #ccc; position: absolute; left: 0; top: ' + position + 'px">&nbsp;</div>';
      }
    }
    html += '</div>';
    html += '</td>';
    day = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1);
  }
  if(navigator.appName == 'Microsoft Internet Explorer') {
    html += '<td style="height: 960px; width: ' + scrollbarWidth + 'px">&nbsp;</td>';
  }

  html += '</tr>';

  html += '</table>';
  weekdayholderElement.innerHTML = html;
  
  weekdayholderElement.scrollTop = 8 * 40;

  var scrollbarPaddingElement = document.getElementById('scrollbarpadding');

  if(navigator.appName == 'Netscape' && navigator.vendor != 'Apple Computer, Inc.') {
    g_scrollbarWidth -= 1;
  }

  scrollbarPaddingElement.style.width = g_scrollbarWidth + 'px';

  calDisplayDayEvents();
}

$(window).resize(function() {
  switch(g_view) {
    case 'day':
      displayDayCal('calendarholder');
      break;
    case 'week':
      displayDalCal('calendarholder');
      break;
    case 'month':
      displayMonthCal('calendarholder');
      break;
    case 'term':
      displayDateRangeCal('calendarholder', g_displayFrom.getFullYear(), g_displayFrom.getMonth(), g_displayFrom.getDate(), g_displayTo.getFullYear(), g_displayTo.getMonth(), g_displayTo.getDate(), 'term');
      break;
  }
});