var CurrentMonth = new Date().getMonth() + 1;
var CurrentYear = new Date().getFullYear();
var CatID = 0;
var Recursive = false;
var ShowHover = false;
var DayLink = "#";

// Bind navigation links
$(document).ready(function() {
    $(".prev-button").click(function() {
        PreviousMonth();
        return false;
    });
    $(".next-button").click(function() {
        NextMonth();
        return false;
    });
    $(".today-button").click(function() {
        Today();
        return false;
    });
});

// Initialise variables
function Init(InitialCatID, IsRecursive, ShowHoverBox, DayLinkURL) {
    CatID = InitialCatID;
    Recursive = IsRecursive;
    ShowHover = ShowHoverBox;
    DayLink = DayLinkURL;
}

// Call Calendar AJAX service
function GetEvents() {
    if (CatID > 0) {
        //$(".calendarLoading").fadeIn();
        $.ajax({
            type: 'POST',
            url: '/WebServices/Calendar.asmx/GetMonthEvents',
            data: "{ CatID: " + CatID + ", Month: " + CurrentMonth + ", Year: " + CurrentYear + ", Recursive: " + Recursive + " }",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                DrawEvents(data);
            }
        });
    }
}

// Skip to the next month
function NextMonth() {
    if (CurrentMonth == 12) {
        CurrentMonth = 1;
        CurrentYear++;
    }
    else {
        CurrentMonth++;
    }

    GetEvents();
}

// Skip to the previous month
function PreviousMonth() {
    if (CurrentMonth == 1) {
        CurrentMonth = 12;
        CurrentYear--;
    }
    else {
        CurrentMonth--;
    }

    GetEvents();
}

// Skip to today
function Today() {
    CurrentMonth = new Date().getMonth() + 1;
    CurrentYear = new Date().getFullYear();

    GetEvents();
}

// Parse the AJAX response and output the data as HTML
function DrawEvents(data) {
    $("#CalendarEvents").html("");
    $(".calendarEntry a[rel!='']").removeClass("eventSelected");
	var DateArray = new Array();
    for (var x in data.d) {
        var DivHTML = '<div class="calendarEntry hidden" rel="' + data.d[x].Date + '">';
        DivHTML += '<div class="calendarContent">';
        DivHTML += '<span style="color: rgb(35, 31, 32); font-family: arial; font-size: 11px; line-height: 17px; ">' + data.d[x].Summary + '</span>';
        DivHTML += '</div>';
        DivHTML += '<div class="readMore">';
        DivHTML += '<a class="moreinfogrey" href="' + data.d[x].URL + '">+ more</a>';
        DivHTML += '</div>';
        DivHTML += '</div>';
        DivHTML += '</div>';
        $("#CalendarEvents").html($("#CalendarEvents").html() + DivHTML);
		DateArray.push(data.d[x].Date);
    }
    DrawCalendar();
    for (var x=0; x< DateArray.length; x++) {
		$(".calendarLoading").text(DateArray[x]);
        $("a[rel='" + DateArray[x] + "']").addClass("hasEvent");
        if (DayLink != "#") {
            $("a[rel='" + data.d[x].Date + "']").attr("href", DayLink + "?date=" + encodeURIComponent(data.d[x].Date));
        }
    }
    //$(".calendarLoading").fadeOut();
}

// Draw the calendar table for the current month
function DrawCalendar() {
    // Get the first day of the week
    var theFirst = new Date(CurrentYear, CurrentMonth - 1, 1);
    var FirstDay = theFirst.getDay();

    // Get the last day in the month
    var theLast = new Date(CurrentYear, CurrentMonth, 0);
    var LastDay = theLast.getDate();

    // Set the current day
    var CurrentDay = 1;
    
    // Get the current month name
    var MonthNames = ['January','February','March','April','May','June','July',
'August', 'September', 'October', 'November', 'December'];
    var CurrentMonthName = MonthNames[theFirst.getMonth()];

    // Build the table HTML
    var TableHTML = '<table><thead><tr><th>S</th><th>M</th><th>Tu</th><th>W</th><th>Th</th><th>F</th><th>S</th></thead><tbody>';
    for (var Row = 0; Row < 6; Row++) {
        TableHTML += "<tr>";
        for (var Col = 0; Col < 7; Col++) {
            if (Row == 0 && Col < FirstDay) {
                TableHTML += "<td>&nbsp;</td>";
            }
            else if (CurrentDay > LastDay) {
                TableHTML += "<td>&nbsp;</td>";
            }
            else {
                var RelDate = new Date(CurrentYear, CurrentMonth - 1, CurrentDay + 1);
                TableHTML += "<td><a href='javascript:return false;' rel='" + CurrentDay + " " + CurrentMonthName + " " + CurrentYear + "' class='calendarDay'>" + CurrentDay + "</a></td>";
                CurrentDay++;
            }
        }
        TableHTML += "</tr>";
    }
    TableHTML += "</tbody></table>";
    
    // Add the elements to the DOM
    $(".calendar").html(TableHTML);
    $(".calendarTitle").html(CurrentMonthName + " " + CurrentYear);

    if (ShowHover) {
        // Re-bind event hover
        $('a.calendarDay').hover(
	    function() {
	        $('.calendarEntry[rel^="' + $(this).attr('rel') + '"]').css('display', 'inline');
	        $('.calendarEntry[rel^="' + $(this).attr('rel') + '"]').css('top', $(this).offset().top - $('.calendarEntry[rel*="' + $(this).attr('rel') + '"]').height());
	        $('.calendarEntry[rel^="' + $(this).attr('rel') + '"]').css('left', $(this).offset().left);
	    },
	    function() { $('.calendarEntry[rel^="' + $(this).attr('rel') + '"]').css('display', 'none'); }
	 );

        // Rebind calendarEntry hover
        $('.calendarEntry').hover(function() {
            $(this).css('display', 'inline');
        },
    function() {
        $(this).css('display', 'none');
    });
    }
}