﻿/*
 * jQuery Event Calendar Plugin
 * Version 1.0
 * Created by: Thu Trinh - Fusion
 * Dependencies:    
 * - Helium.Core.HttpHandlers.EventAjaxHandler: 
 *   The url to this handler must be passed in via the 'ajaxRequestUrl' option. 
 *   This handler must return JSON representing all the dates and related events for the specified month.
 *   jQuery 1.4+       
 */
 
 (function($) {

     var options = {
         todayDate: null, //yyyy-M-d
         startYear: 0,
         startMonth: 0,
         minYear: 0,
         maxYear: 0,
         listUrl: null,
         detailUrl: null,
         ajaxRequestUrl: null
     }

     $.fn.eventCalendar = function(opts) {
         this.each(function() {
             if (opts) {
                 $.extend(options, opts);
             }

             var container = $(this);
             if (options.startYear != 0
                && options.startMonth != 0
                && options.todayDate != null
                && options.todayDate.length != 0
                && options.minYear != 0
                && options.maxYear != 0
                && options.ajaxRequestUrl != null
                && options.ajaxRequestUrl.length != 0) {
                 init(container);
             }
         })
     }

     function init(container) {
         //create Calendar
         var calendar = $("<div class='event-calendar'></div>");
         calendar.data("curYear", options.startYear);
         calendar.data("curMonth", options.startMonth);

         calendar.append("<h2>Events<span></span></h2>");
         calendar.append("<a href=\""+options.listUrl+"\" class='view-all'><span></span></a>")
         //Create Year selector
         var ul = $("<ul class=\"year-selector\"></ul>");
         for (var y = options.minYear; y <= options.maxYear; y++) {
             ul.append($("<li/>", {
                 year: y,
                 text: y,
                 click: function() {
                     var year = parseInt($(this).attr("year"), 10);
                     var startDate = year + "-" + calendar.data("curMonth") + "-1";
                     DrawDates(calendar, startDate);
                 }
             }));
         }
         calendar.append(ul);

         //Create Month selector
         /*ul = $("<ul class=\"month-selector\"><li>JAN</li><li>FEB</li><li>MAR</li><li>APR</li><li>MAY</li><li>JUN</li><li>JUL</li><li>AUG</li><li>SEP</li><li>OCT</li><li>NOV</li><li>DEC</li></ul>");        
         ul.find("li").each(function (i){
         $(this).bind("click", function(){
         var month = i + 1;
         var startDate = calendar.data("curYear") + "-" + month + "-1";
         DrawDates(calendar, startDate);
         });
         });
         calendar.append(ul);
         */

         //Create Month pager
         var curMonth = calendar.data("curMonth");
         ul = $("<ul class='month-pager'/>");
         ul.append($("<li>", {
             "text": "previous",
             "class": "prev",
             "click": function() {
                 var curMonth = calendar.data("curMonth");
                 var curYear = calendar.data("curYear");

                 if (curMonth == 1 && curYear > options.minYear) {
                     curMonth = 13;
                     curYear--;
                 }

                 if (curMonth > 1) {
                     curMonth--;
                     var startDate = curYear + "-" + curMonth + "-1";
                     DrawDates(calendar, startDate);
                 }
             }
         }));

         ul.append($("<li/>", {
             "text": GetMonthName(curMonth),
             "class": "month"
         }));

         ul.append($("<li/>", {
             "text": "next",
             "class": "next",
             "click": function() {
                 var curMonth = calendar.data("curMonth");
                 var curYear = calendar.data("curYear");

                 if (curMonth == 12 && curYear < options.maxYear) {
                     curMonth = 0;
                     curYear++;
                 }

                 if (curMonth < 12) {
                     curMonth++;
                     var startDate = curYear + "-" + curMonth + "-1";
                     DrawDates(calendar, startDate);
                 }
             }
         }));
         calendar.append(ul);

         //Create Table of Dates
         calendar.append("<table class='weeks'><thead><tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr></thead><tbody></tbody></table>");

         container.prepend(calendar);
         DrawDates(calendar, options.startYear + "-" + options.startMonth + "-1");

         $("table.weeks td:has(.events-tooltip)").live("mouseover", function() {
             $(this).find(".events-tooltip").show();
         });

         $("table.weeks td:has(.events-tooltip)").live("mouseout", function() {
             $(this).find(".events-tooltip").hide();
         });
     }

     function DrawDates(calendar, calStartDate) {
         var dateParts = calStartDate.split('-');
         var curMonth = parseInt(dateParts[1], 10);
         var curYear = parseInt(dateParts[0], 10);
         var today = options.todayDate;

         calendar.data("curMonth", curMonth);
         calendar.data("curYear", curYear);

         $.getJSON(options.ajaxRequestUrl, { startDate: calStartDate }, function(data) {
             if (data != null) {
                 //Update month pager
                 calendar.find(".month-pager .month").text(GetMonthName(curMonth));
                 var prevElm = calendar.find(".month-pager .prev").removeClass("inactive");
                 var nextElm = calendar.find(".month-pager .next").removeClass("inactive");
                 if (curMonth == 1 && curYear == options.minYear) {
                     prevElm.addClass("inactive");
                 }
                 else if (curMonth == 12 && curYear == options.maxYear) {
                     nextElm.addClass("inactive");
                 }

                 //update month selector
                 calendar.find(".month-selector li.current").removeClass("current");
                 calendar.find(".month-selector li:eq(" + (curMonth - 1) + ")").addClass("current");

                 //update year selector
                 calendar.find(".year-selector li.current").removeClass("current");
                 calendar.find(".year-selector li[year=" + curYear + "]").addClass("current");


                 //Draw dates
                 var cont = calendar.find("table.weeks tbody");
                 cont.empty();

                 //Loop through weeks
                 //data.each(function(i, week){concole.log(i,week)});

                 for (var i = 0; i < data.length; i++) {
                     //Create Week
                     var tr = $("<tr/>");
                     var days = data[i].days;
                     //Loop through weeks
                     for (var j = 0; j < days.length; j++) {
                         var day = days[j];
                         var listURL = options.listUrl + "&y=" + day.year + "&m=" + day.month + "&d=" + day.day;
                         var td = $("<td/>", { text: day.day });

                         //add Day
                         if (day.events != null && day.events.length != 0 && options.listUrl != null && options.listUrl.length != 0) {
                             td.wrapInner("<a class='event-link' href='" + listURL + "'/>");
                         }

                         //mark days out side viewing month
                         if (curMonth != day.month)
                             td.addClass("out-month");

                         //mark todays date
                         if (today == day.year + "-" + day.month + "-" + day.day)
                             td.addClass("today");

                         //Add events
                         if (day.events != null && day.events.length != 0) {
                             var eventCont = $("<div/>", { "class": "events-tooltip" });
                             var eventPos = $("<div/>", { "class": "tooltip-position" });
                             var eventList = $("<ul/>");
                             
                             eventCont.append(GetDateElm(day.day, day.month, day.year));
                             
                             for (var e = 0; e < day.events.length && e < 5; e++) {
                                 var evt = day.events[e];
                                 var accessClass = "type-public";
                                 if(evt.access == "members")
                                 {
                                    accessClass = "type-member";
                                 }
                                 else if (evt.access == "private")
                                 {
                                    accessClass = "type-my";
                                 }
                                 
                                 var li = $("<li class='"+accessClass+"' id='" + evt.id + "'><span class='time'>" + evt.time + "</span><strong class='title'>" + evt.title + "</strong></li>");

                                 if (options.detailUrl != null && options.detailUrl.length != 0) {
                                     li.wrapInner("<a href='" + options.detailUrl + "&id=" + evt.id + "'/>");
                                 }

                                 eventList.append(li);
                                 td.addClass(evt.access);
                             }
                             eventCont.append(eventList);

                             //add view more link
                             if (day.events.length > 5 && options.listUrl != null && options.listUrl.length != 0) {
                                 eventCont.append("<p><a href='" + listURL + "'>view all...</a></p>");
                             }
                             eventPos.append(eventCont);
                             td.append(eventPos);
                         }

                         tr.append(td);
                     }

                     cont.append(tr);
                 }
             }
         });
     }

     function GetMonthName(curMonth) {
         switch (curMonth) {
             case 1: return "JANUARY";
             case 2: return "FEBRUARY";
             case 3: return "MARCH";
             case 4: return "APRIL";
             case 5: return "MAY";
             case 6: return "JUNE";
             case 7: return "JULY";
             case 8: return "AUGUST";
             case 9: return "SEPTEMBER";
             case 10: return "OCTOBER";
             case 11: return "NOVEMBER";
             case 12: return "DECEMBER";
             default: return null;
         }
     }

     function GetShortMonthName(curMonth) {
         switch (curMonth) {
             case 1: return "JAN";
             case 2: return "FEB";
             case 3: return "MAR";
             case 4: return "APR";
             case 5: return "MAY";
             case 6: return "JUN";
             case 7: return "JUL";
             case 8: return "AUG";
             case 9: return "SEP";
             case 10: return "OCT";
             case 11: return "NOV";
             case 12: return "DEC";
             default: return null;
         }
     }
     
     function GetDateElm(day, month, year)
     {
        //Create Todays date
        var todaysDateElm = todaysDateElm = $("<div class='date-today'>" + day + " " + GetShortMonthName(month) + " " + year + "</div>");
        return todaysDateElm;
     }
     
 })(jQuery);