﻿/* custom calendar js */

jQuery("head").append(
"<link rel=\"stylesheet\" type=\"text/css\" href=\"/cal_static/cal.css\">"
);

jQuery(document).ready(function(){

    var monthName = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
    var monthOffset = 3;

    var now = new Date();
    var month = now.getMonth();
    var monthArray = new Array();

    var noverflow = 0
    for (var i=0; i < (monthOffset*2+1); i++) {
       var m = (month-3+i)%12;
       if (m >= 0) {
          var overflow = Math.floor((month-3+i)/12);
          monthArray.splice(i,0,
            new Date(
              now.getFullYear()+overflow,
              m, 1)
            );
       } else {
          var overflow = Math.floor((month-3+i)/12 ) * - 1;
          var m = (overflow*12+(-3+month+i))%12;
          monthArray.splice(i,0,
            new Date(
              now.getFullYear()-overflow,
              m, 1)
            );
       }
    };

    var container = jQuery('#calContainer');

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

      var m = monthArray[i];
      var id = (m.getMonth()+1)+"_"+m.getFullYear();

      var div = jQuery("<div class=\"monthContainer\" />")
      div.attr("id",id);
     
      var monthHeader = jQuery("<div/>").html(
          monthName[m.getMonth()]+" "+m.getFullYear()+" "
          ).appendTo(div);
      monthHeader.attr("class", "monthHeader");
      /*monthHeader.attr("onclick","fadeFunction(this);");*/
      /*var fadeLink = jQuery("<span class=\"fadeLink\" />").appendTo(monthHeader);*/


      var fadeLink = jQuery("<a onclick=\"linkFade(this);\" class=\"fadeLink\" />").appendTo(monthHeader);
      fadeLink.html("[ausblenden]");

      var events = jQuery("<div/>").appendTo(div);
      events.attr("class", "eventList");

      if (m.getFullYear() < now.getFullYear() ||
          m.getMonth() < now.getMonth() && m.getFullYear() <= now.getFullYear()) {
        events.attr("style", "display: none;");
        fadeLink.html("[einblenden]");
      }

      container.append(div);
      loadEvents(div);

    }

});

function fullYear(year) {
    var monthName = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
    var container = jQuery('#calContainer');
    container.html("");

    for (var i=0; i < monthName.length; i++) {
      var m = new Date(year, i, 1);

      var id = (m.getMonth()+1)+"_"+m.getFullYear();

      var div = jQuery("<div class=\"monthContainer\" />")
      div.attr("id",id);
     
      var monthHeader = jQuery("<div/>").html(
          monthName[m.getMonth()]+" "+m.getFullYear()+" "
          ).appendTo(div);
      monthHeader.attr("class", "monthHeader");
      /*monthHeader.attr("onclick","fadeFunction(this);");*/

      var fadeLink = jQuery("<a onclick=\"linkFade(this);\" class=\"fadeLink\" />").appendTo(monthHeader);
      fadeLink.html("[einblenden]");

      var events = jQuery("<div/>").appendTo(div);
      events.attr("class", "eventList");
      events.attr("style", "display: none;");

      container.append(div);
      loadEvents(div);
    }


}

function linkFade(elem) {
	var pElem = elem.parentNode;
	fadeFunction(pElem);
}

function fadeFunction(elem) {
  var tables = jQuery(elem).parents('.monthContainer').children('.eventList');
  tables.toggle('slow');

  var fadeLink = jQuery(elem).children('.fadeLink');
  if ( fadeLink.html() == "[einblenden]" ) {
    fadeLink.html("[ausblenden]")
  } else {
    fadeLink.html("[einblenden]")
  }
}

function loadEvents(element) {
  var id = jQuery(element).attr('id').split("_");
  var url = "http://" + window.location.hostname + "/cal/json_list?m="+id[0]+"&y="+id[1];

  function displayEvents (data) {
    if ( data.events.length == 0 ) {
      var eventList = jQuery(element).children('.eventList');
      eventList.html("<p>keine Termine eingetragen</p>");
    } else {
    jQuery.each(data.events,
        function(i,item) {
          var eventList = jQuery(element).children('.eventList');
          var table = jQuery("<table class=\"eventTable\" />").appendTo(eventList);

          var head = jQuery("<tr/>").appendTo(table);;
          head.append( jQuery("<th class=\"thDate\" />").html(item.date) );
          head.append( jQuery("<th class=\"thTitle\" />").html(item.title) );

          var cont = jQuery("<tr/>").appendTo(table);
          cont.append ( jQuery("<td colspan=\"2\" />").html(item.content) );

          var tail = jQuery("<tr/>").appendTo(table);
          tail.append( jQuery("<td colspan=\"2\" />").html(item.time) );
        })
    }
        
  }

  jQuery.getJSON(
      url,
      function (data) {
        displayEvents(data);
      }
      );

}

