var maanden = Array("Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December");
var dagen = Array("Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag", "Zondag");
var CALENDARS = Array();
Calendar = function(obj_id, callback)
{
  if (typeof(obj_id) != "string")
  {
    var obj = obj_id;
    if (obj.id == "") obj_id = obj.id = "calendar_container_" + CALENDARS.length;
    else obj_id = obj.id;
  } else var obj = document.getElementById(obj_id);
  
  this.callback = callback;
  var self = this;
  this.table;
  this.input;
  var selected_date_epoch = arguments.length > 2 ? arguments[2] : null;
  if (selected_date_epoch)
  {
    var selected_date = new Date();
      selected_date.setTime(selected_date_epoch);
      selected_date.setHours(0);selected_date.setMinutes(0);selected_date.setSeconds(0);
  } else var selected_date = null;
  
  this.selected_date = selected_date;
  
  function getView(self, obj, date_show, offset, selected_date, obj_id)
  {
    date_show.setHours(0);date_show.setMinutes(0);date_show.setSeconds(0);
    var output = "";
    var now = new Date();
    var month_str = maanden[date_show.getMonth()];
    var year = date_show.getFullYear();
    output += "<table class='calendar' cellspacing='0px'>";
    output += "<tr class='header'>";
    output += "<th style='width:40px;'><span style='width:25px;' id='cal_btn_prev_" + obj_id + "' class='small'>&laquo;</span></th>";
    output += "<td onmousedown='dragStart(event, this.parentNode.parentNode.parentNode.parentNode);'>" + month_str + " - " + year + "</td>";
    output += "<th style='width:40px;'><span style='width:25px;' id='cal_btn_next_" + obj_id + "' class='small'>&raquo;</span></th>";
    output += "</tr>";
    output += "<tr>";
    output += "<td colspan='3' class='body'>";
    output += "<table>";
    output += "<tr>";
    output += "<th>W<sub style='font-family:arial narrow; color:gray; margin-left:-2px;'>eek</sub></th>";
    output += "<th>Zo</th>";
    output += "<th>Ma</th>";
    output += "<th>Di</th>";
    output += "<th>Wo</th>";
    output += "<th>Do</th>";
    output += "<th>Vr</th>";
    output += "<th>Za</th>";
    output += "</tr>";
    output += "<tr>";
    output += "</tr>";
    // CALENDER
    var start_dow = date_show.getDay();
    var days_in_month_date = date_show; 
      days_in_month_date.setMonth(days_in_month_date.getMonth() + 1);
      days_in_month_date.setDate(0);
    var days_in_month = days_in_month_date.getDate();
    date_show.setDate(1);
    var week_nr = date_show.getWeekNr();
    output += "<tr><td>" + week_nr + "</td>";
    for(x = 0; x < start_dow; x++)
      output += "<td></td>";
    var sd, c;
    var loop_date = new Date();
    loop_date.setDate(1);
    loop_date.setMonth(date_show.getMonth());
    loop_date.setFullYear(date_show.getFullYear());
    loop_date.setHours(0);loop_date.setMinutes(0);loop_date.setSeconds(0);
    for(x = 1; x <= days_in_month; x++)
    {
      loop_date.setDate(x);
      sd = loop_date.getDate() + "-" + loop_date.getMonth() + "-" + loop_date.getFullYear();
      
      c = now.getDate() + "_" + now.getMonth() + "_" + now.getFullYear() 
            ==
          x + "_" + date_show.getMonth() + "_" + date_show.getFullYear() ? "calendar_now" : "";
      
      c += selected_date && selected_date.getDate() + "_" + selected_date.getMonth() + "_" + selected_date.getFullYear() 
            ==
          x + "_" + date_show.getMonth() + "_" + date_show.getFullYear() ? " calendar_day_selected" : "";
      
      c = c != "" ? " class='" + c + "'" : "";
      
      output += "<td" + c + " simple_date='" + sd + "' date='" + Math.round(loop_date.getTime()/1000) + "' onclick='calendar_click_day(this, \"" + obj_id + "\"); return false;'><a href='#'>" + x + "</a></td>";
      if ((start_dow + x) % 7 == 0) output += "</tr><tr><td>" + (++week_nr) + "</td>";
    }
    
    output += "</table>";
    output += "</td>";
    output += "</tr>";
    output += "</tr>";
    output += "</table>";
    obj.innerHTML = output;
    
    $("span#cal_btn_prev_" + obj_id).bind("click", function(e)
    {
      var c = new Calendar(obj_id, callback, self.selected_date, offset - 1);
      c.input = self.input;
    });
    $("span#cal_btn_next_" + obj_id).bind("click", function(e)
    {
      var c = new Calendar(obj_id, callback, self.selected_date, offset + 1);
      c.input = self.input;
    });
    self.table = obj.childNodes[0].rows[1].cells[0].childNodes[0];
  }
  if (!obj) return false;
  
  var now = new Date();
  var date_show = new Date();
  
  var offset = arguments.length > 3 ? arguments[3] : (selected_date ? selected_date.getMonth() - now.getMonth() + ( (selected_date.getFullYear() - now.getFullYear()) * 12) : 0);
  date_show.setDate(1);
  date_show.setMonth(now.getMonth() + offset);
  var output = "";
  
  var output = getView(self, obj, date_show, offset, selected_date, obj_id);
  CALENDARS[obj_id] = this;
}
function calendar_deselect_previous(c)
{
  if (c.selected_date) 
  {
    var obj;
    var sd = c.selected_date.getDate() + "-" + c.selected_date.getMonth() + "-" + c.selected_date.getFullYear();
    var els = c.table.getElementsByTagName("TD");
    for(x = 0; x < els.length; x++)
    {
      obj = els[x];
      if (obj.getAttribute("simple_date") == sd)
        obj.className = obj.className.replace(/ calendar_day_selected/, "");
    }
  }
}
function calendar_click_day(obj, obj_id)
{
  var c = CALENDARS[obj_id];
  calendar_deselect_previous(c);
  var date = obj.getAttribute("date");
  var d = new Date();
  d.setTime(date*1000);
  d.setHours(0);d.setMinutes(0);d.setSeconds(0);
  c.selected_date = d;
  obj.className += " calendar_day_selected";
  if (c.callback) c.callback(c, d.getTime());
}
var prev_calendar_container = null;
function open_calendar(e)
{
  if (prev_calendar_container) close_calendar();
  var img = get_target(e);
  var input = img.input;
  if (input.disabled) return;
  var div = document.createElement("DIV");
  div.style.display = "none";
  div.className = "calendar_container";
  prev_calendar_container = div;
  //img.parentNode.appendChild(div);
  $("body").append(div);
  
  var left = $(img).offset().left + $(img).width() + 2;
  var vps = get_viewport_size();
  if (left + $(div).width() > vps[0] - 20) left = vps[0] - 20 - $(div).width(); 
  var top = $(img).offset().top + 20;
  if (top + 250 > vps[1]) top = (vps[1] - 250) + get_scroll_top();
  $(div).css("top", top + "px").css("left", left + "px");
  var c = new Calendar(div, click_day, extract_date(input.getAttribute("short_date")));
  c.input = input;
  $(div).fadeIn(300, _open_calendar);
}
function _open_calendar()
{
  if (document.addEventListener)
    document.addEventListener("click", calendar_document_click, false);
  else if (document.attachEvent)
    document.attachEvent("onclick", calendar_document_click);
}
function close_calendar()
{
  if (!prev_calendar_container) return false;
  
  $(prev_calendar_container).fadeOut(200, function(){
  $(this).remove();
  //prev_calendar_container.parentNode.removeChild(prev_calendar_container);
  //prev_calendar_container = null;
  if (document.removeEventListener)
    document.removeEventListener("click", calendar_document_click, false);
  else if (document.detachEvent)
    document.detachEvent("onclick", calendar_document_click);
  });
}
function calendar_document_click(e)
{
  var obj = get_target(e);
  
  while (obj.parentNode && obj.className.indexOf("calendar") < 0)
  {
    obj = obj.parentNode;
    //alert(obj.className.indexOf("calendar") < 0);
  }
  if (!obj || !obj.className || obj.className.indexOf("calendar") < 0) close_calendar();
}
function click_day(c, date)
{
  setTimeout(function(){close_calendar();}, 375);
  var d = new Date();
  d.setTime(date);
  c.input.value = mk_short_date(d);
  input_date_blur({target:c.input});
}
function get_viewport_size()
{
  var viewportwidth;
  var viewportheight;
  if (typeof window.innerWidth != 'undefined')
  {
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
  } else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
  {
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
  }
  return Array(Math.round(viewportwidth), Math.round(viewportheight));
}