// Creates the selectable month buttons for the Events Calendar pages
// It first removes the existing links (created by the Matrix calendar page)
// and replaces them with the date picker and a new link to all of the yearly events.

var EventsCalendar =
{
  init: function()
  {
    var monthsToDisplay = 4;

    // find the existing calendar navigation links created by Matrix
    var calendarNavLinks = Core.getElementsByClass("calendarNavLink");
    
    // find parent of these navigation links
    var oldCalendarNavParagraph = calendarNavLinks[0].parentNode;
    
    // create new wrapper div to contain both the date picker and the link to the year's events
    var newCalendarNavDiv = document.createElement("div");
    oldCalendarNavParagraph.parentNode.insertBefore(newCalendarNavDiv, oldCalendarNavParagraph);
    newCalendarNavDiv.setAttribute("id", "js-calendar-nav");
    
    // create date picker ul and add it to the new wrapper div
    var datePicker = document.createElement("ul");
    datePicker.setAttribute("id", monthsToDisplay);
    newCalendarNavDiv.appendChild(datePicker);
    Core.addClass(datePicker, "date-sorter");
    
    // find what the current month / year being displayed is from the h2 tag (with id calendar-title)
    var calendarTitle = document.getElementById("calendar-title");
    var calendarTitleString = calendarTitle.firstChild.nodeValue;
    
    // find out if the calendarTitleString has a month component or not
    if (calendarTitleString.length == 4)
    {
      var currentYear = calendarTitleString;
      var currentMonth = 0;
    }
    else
    {
      var currentYear = calendarTitleString.substring(calendarTitleString.length - 4, calendarTitleString.length);
      var currentMonthString = calendarTitleString.substring(0, calendarTitleString.length - 5);
      var month = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
      var found = false;
      var currentMonth = 0;
      while (!found && currentMonth < 12)
      {
        if (currentMonthString == month[currentMonth])
        {
          found = true;
        }
        else
        {
          currentMonth++;
        }
      }
    }
    
    // the first month should be one before the current month
    firstMonth = currentMonth - 1;
    firstYear = Number(currentYear);
    if (firstMonth < 0)
    {
      firstMonth += 12;
      firstYear -= 1;
    }
    
    
    // create date picker
    EventsCalendar.createDatePicker(firstMonth, firstYear, monthsToDisplay);
    
    // move the year view link into the new wrapper div
    var yearViewLink = calendarNavLinks[1];
    newCalendarNavDiv.appendChild(yearViewLink);
    
    // change text on the year view link
    yearViewLink.firstChild.nodeValue = "All " + currentYear + " events";
    
    // remove old calendar navigation links
    oldCalendarNavParagraph.parentNode.removeChild(oldCalendarNavParagraph);
    
/*    
    var datePickers = Core.getElementsByClass("date-sorter");
    if (typeof datePickers != "undefined")
    {
      var today = new Date();
      var currentMonth = today.getMonth();
      var currentYear = today.getFullYear();
      
      var monthsToDisplay = datePickers[0].id;
    
      // by default, display the current month as second from the left
      // therefore the first month is the one before the current month
      var prevMonth = currentMonth - 1;
      var prevYear = currentYear;

      if (prevMonth < 0)
      {
        prevMonth += 12;
        prevYear -= 1;
      }
  
      EventsCalendar.createDatePicker(prevMonth, prevYear, monthsToDisplay);
    }
*/
  },

  leftArrowClickHandler: function(event)
  {
    // get date of the left-most month currently showing from the id on the list item
    var datePickers = Core.getElementsByClass("date-sorter");
    var datePicker = datePickers[0];
    var datePickerListItems = datePicker.getElementsByTagName('li');
    var firstDate = datePickerListItems[1].id;
    
    var dashPos = firstDate.search("-");
    var firstMonth = firstDate.substring(0, dashPos);
    var firstYear = firstDate.substring(dashPos + 1);
    
    var monthsToDisplay = datePickers[0].id;
    
    var newFirstMonth = firstMonth - monthsToDisplay;
    var newFirstYear = firstYear;
    if (newFirstMonth < 0)
    {
      newFirstMonth += 12;
      newFirstYear -= 1;
    }
    
    EventsCalendar.createDatePicker(newFirstMonth, newFirstYear, monthsToDisplay);
  },
  
  rightArrowClickHandler: function(event)
  {
    // get date of the right-most month currently showing from the id on the list item
    var datePickers = Core.getElementsByClass("date-sorter");
    var monthsToDisplay = datePickers[0].id;
    
    var datePicker = datePickers[0];
    var datePickerListItems = datePicker.getElementsByTagName('li');
    var lastDate = datePickerListItems[monthsToDisplay].id;
    
    var dashPos = lastDate.search("-");
    var lastMonth = lastDate.substring(0, dashPos);
    var lastYear = lastDate.substring(dashPos + 1);
    
    var newFirstMonth = (+lastMonth) + 1;
    var newFirstYear = (+lastYear);
    if (newFirstMonth > 11)
    {
      newFirstMonth -= 12;
      newFirstYear += 1;
    }
    
    EventsCalendar.createDatePicker(newFirstMonth, newFirstYear, monthsToDisplay);
  },
  
  createDatePicker: function(firstMonth, firstYear, months)
  {
    // find out current month
    var month = new Array(12);
    month[0] = "Jan";
    month[1] = "Feb";
    month[2] = "Mar";
    month[3] = "Apr";
    month[4] = "May";
    month[5] = "Jun";
    month[6] = "Jul";
    month[7] = "Aug";
    month[8] = "Sep";
    month[9] = "Oct";
    month[10] = "Nov";
    month[11] = "Dec";
    
    var today = new Date();
    var currentMonth = today.getMonth();
    var currentYear = today.getFullYear();
    
    var datePickerText = [];
    var datePickerURL = [];
    var datePickerLITagClass = [];
    var datePickerMonth = [];
    var datePickerYear = [];

    var totalMonths = months;
    var loopMonth, loopYear, loopYearString, loopActualMonth;

    // construct strings and URLs for each of the months to display
    for (var i = 0; i < totalMonths; i++)
    {
       loopMonth = firstMonth + i;
       loopYear = firstYear;
       if (loopMonth > 11)
       {
          loopMonth -= 12;
          loopYear += 1;
       }
       datePickerMonth[i] = loopMonth;
       datePickerYear[i] = loopYear;

       loopYearString = loopYear + "";
       loopYearString = loopYearString.substr(2, 2);
       datePickerText[i] = month[loopMonth] + " " + loopYearString;

       loopActualMonth = loopMonth + 1;
       datePickerURL[i] = "/planning__and__funding/events_calendar?SQ_CALENDAR_VIEW=month&SQ_CALENDAR_DATE=" + loopYear + "-" + loopActualMonth + "-01";

       if (i == 0)
       {
          datePickerLITagClass[i] = "left";
       }
       else if (i == totalMonths - 1)
       {
          datePickerLITagClass[i] = "right";
       }
       else
       {
          datePickerLITagClass[i] = "mid";
       }
    }
    
    // create nodes within the date picker
    var listItemNode, anchorNode, anchorText;
    var datePicker = Core.getElementsByClass("date-sorter")[0];
    
    // remove all existing nodes from the datePicker
    while (datePicker.childNodes.length >= 1 )
    {
      datePicker.removeChild(datePicker.firstChild);
    } 

    // create arrows
    // left arrow
   listItemNode = document.createElement("li");
   Core.addClass(listItemNode, "arrow");
    
   anchorNode = document.createElement("a");
   anchorNode.setAttribute("title", "scroll left");

   imageNode = document.createElement("img");
   imageNode.setAttribute("width", "11");
   imageNode.setAttribute("height", "20");
   imageNode.setAttribute("alt", "scroll left");
   imageNode.setAttribute("src", "/_media/images/icons/dates_and_events/arw-left-date-sorter.gif");
   
   anchorNode.appendChild(imageNode);
   listItemNode.appendChild(anchorNode);
   datePicker.appendChild(listItemNode);

    // right arrow
   listItemNode = document.createElement("li");
   Core.addClass(listItemNode, "arrow");
    
   anchorNode = document.createElement("a");
   anchorNode.setAttribute("title", "scroll right");

   imageNode = document.createElement("img");
   imageNode.setAttribute("width", "11");
   imageNode.setAttribute("height", "20");
   imageNode.setAttribute("alt", "scroll right");
   imageNode.setAttribute("src", "/_media/images/icons/dates_and_events/arw-right-date-sorter.gif");
   
   anchorNode.appendChild(imageNode);
   listItemNode.appendChild(anchorNode);
   datePicker.appendChild(listItemNode);

    var arrows = Core.getElementsByClass("arrow");
    var rightArrow = arrows[1];

    // add the list items for each month
    for (var i = 0; i < datePickerText.length; i++) {

       listItemNode = document.createElement("li");
       Core.addClass(listItemNode, datePickerLITagClass[i]);
       listItemNode.setAttribute("id", datePickerMonth[i] + "-" + datePickerYear[i]);
       
       anchorNode = document.createElement("a");
       anchorNode.setAttribute("title", datePickerText[i]);
       anchorNode.setAttribute("href", datePickerURL[i]);
       
       if (datePickerMonth[i] == currentMonth && datePickerYear[i] == currentYear)
       {
          Core.addClass(anchorNode, "current");
       }
       
       spanNode = document.createElement("span");
       spanText = document.createTextNode(datePickerText[i]);
       

       spanNode.appendChild(spanText);
       anchorNode.appendChild(spanNode);
       listItemNode.appendChild(anchorNode);
       datePicker.insertBefore(listItemNode, rightArrow);
    }

   // remove existing event handlers from arrows
    var arrows = Core.getElementsByClass("arrow");
    Core.removeEventListener(arrows[0], "click");
    Core.removeEventListener(arrows[1], "click");

    // add event handlers to arrows
    Core.addEventListener(arrows[0], "click", EventsCalendar.leftArrowClickHandler);
    Core.addEventListener(arrows[1], "click", EventsCalendar.rightArrowClickHandler);
  }
};

Core.start(EventsCalendar);