var months = new Array(12);
months[0] = "January"; 
months[1] = "February"; 
months[2] = "March"; 
months[3] = "April"; 
months[4] = "May"; 
months[5] = "June"; 
months[6] = "July"; 
months[7] = "August"; 
months[8] = "September"; 
months[9] = "October"; 
months[10] = "November"; 
months[11] = "December"; 


function Calendar(calID, selectFunction) {

  $(document).ready(function() {  
    var d = new Date();
    var d2 = new Date();
  
    
    var generateCalendar = function() {
      $("#" + calID).append("<table></table>");

      var table = $("#" + calID).find("table");
      
      $(table).append("<tr><td class='no_right_border left_arrow'></td><td class='no_side_borders' colspan='5'></td><td class='no_left_border right_arrow'></td></tr>");
        
      $(table).append("<tr><td class='no_right_border left_arrow'></td><td class='no_side_borders' colspan='5'></td><td class='no_left_border right_arrow'></td></tr>");
      
      $(table).append("<tr><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr>");

      for(var i = 0; i < 6; i++) {
        $(table).append("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
      }
    }
    
    
    var updateCalendar = function() {
    
      d2.setFullYear(d.getFullYear());
      d2.setMonth(d.getMonth());
      d2.setDate(1);
      
      var date = 1;        
      var t = $("#" + calID).find("table");
      var tc = $(t).find("td");
      
      $(tc[1]).html(d.getFullYear());
      $(tc[4]).html(months[d.getMonth()]);
      
      $(tc[0]).bind('click', -1, browseYear);
      $(tc[2]).bind('click',  1, browseYear);
      
      $(tc[3]).bind('click', -1, browseMonth);
      $(tc[5]).bind('click',  1, browseMonth);
  
      var offset = 13;
      var firstDay = offset + parseInt(d2.getDay());
      var currentMonth = d2.getMonth();        
      
      for (var i = offset; i < offset + 42; i++) {
        
        if(i >= firstDay && d2.getMonth() == currentMonth) {
          $(tc[i]).html(date);
          
          if(date == d.getDate()) {
            $(tc[i]).unbind('mouseover', hover);
            $(tc[i]).unbind('mouseout', hover);            
            $(tc[i]).addClass("active_date");            
          }
          else {
            $(tc[i]).removeClass("active_date");            
            $(tc[i]).bind('mouseover', hover);
            $(tc[i]).bind('mouseout', hover);
            $(tc[i]).bind('click', date, setDate);
          }
          
          d2.setDate(++date);          
        }
        else {
          $(tc[i]).html("");          
          $(tc[i]).unbind('mouseover', hover);
          $(tc[i]).unbind('mouseout', hover);
          $(tc[i]).unbind('click', setDate);
        }
      }
    }
    
    
    var hover = function(e) {
      $(e.target).toggleClass("active_date");
    }
    
  
    var browseYear = function(e) {
      d.setFullYear(d.getFullYear() + e.data);
      updateCalendar();
      selectFunction(calID, d.getDate(), d.getMonth(), d.getFullYear());
    }
  
  
    var browseMonth = function(e) {  
      d.setMonth(d.getMonth() + e.data);         
      updateCalendar();
      selectFunction(calID, d.getDate(), d.getMonth(), d.getFullYear());      
    }
  
  
    var setDate = function(e) {        
      d.setDate(e.data);
      updateCalendar();
      selectFunction(calID, d.getDate(), d.getMonth(), d.getFullYear());      
      toggleCalendar();
    }
    
    
    var toggleCalendar = function() {
      $($("#" + calID).find("table")).toggle();
    }
  
    
    var hideCalendar = function(event) {
      var calendarClicked = false;
      var parents = $(event.target).parents();
      for(var i = 0; i < parents.length; i++) {
        if(parents[i].id == calID) {
          calendarClicked = true;
          break;        
        }
      }
      
      if(!calendarClicked) {
        $($("#" + calID).find("table")).hide();
      }
    }
    

    generateCalendar();
    updateCalendar();
    $($("#" + calID).find(".toggle_button")).bind('click', toggleCalendar);
    $('body').bind('click', hideCalendar);            
  });
}