$(document).ready(function() {
    var currentDate = new Date();
    NewMonth(1, currentDate.getMonth(), currentDate.getFullYear());

    var events = new Array();
    var eventList = new Array();

    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";

    var eventsHTMLArray = new Array();


    /*-----------------------------------------------------
    *	Object event(date, text, id)
    *-----------------------------------------------------
    *	Object representing event
    *	
    *	Properties: 
    *		date (integer), text (string), id (integer)
    */
    function event(date, text, id) {
        this.date = date;
        this.text = text;
        this.id = id;
    }



    /*-----------------------------------------------------
    *	GenerateMonthHTML(day, month, year)
    *-----------------------------------------------------
    *	Uses Global arrays events and eventList to create HTML for 
    *	next month to be displayed (previous or following). The id of each
    *	event date is the index of that event in eventList (added security).
    *	
    *	Accepts values for month to be generated: 
    *		day (integer), month (integer), year (integer)
    */
    function GenerateMonthHTML(day, month, year) {
        var nextDate = new Date();
        nextDate.setDate(day);
        nextDate.setMonth(month);
        nextDate.setYear(year);
        var count = 0;
        var firstDay = nextDate.getDay();

        var HTML = "<ul class='title'>";
        HTML = HTML + "<li class='arrow prev'><<</li>";
        HTML = HTML + "<li class='month'>" + months[nextDate.getMonth()] + " " + nextDate.getFullYear() + "</li>";
        HTML = HTML + "<li class='arrow next'>>></li>";
        HTML = HTML + "</ul>";
        HTML = HTML + "<ul class='week'><li>su</li><li>m</li><li>tu</li><li>w</li><li>th</li><li>f</li><li>sa</li></ul>";
        events.reverse();
        var eventDay = events.pop();

        if (firstDay != 0) {
            HTML = HTML + "<ul class='week'>";
            for (i = 0; i < 7; i++) {
                if (i < firstDay) {
                    HTML = HTML + "<li class='day'></li>";
                } else {

                    if (eventDay == nextDate.getDate()) {
                        HTML = HTML + "<li class='day event' id='" + count + "'>" + nextDate.getDate() + "</li>";
                        eventDay = events.pop();

                        count = count + 1;
                    } else {
                        HTML = HTML + "<li class='day'>" + nextDate.getDate() + "</li>";
                    }

                    nextDate.setDate(nextDate.getDate() + 1);
                }
            }
            var HTML = HTML + "</ul>";
        }
        while (month == nextDate.getMonth()) {
            HTML = HTML + "<ul class='week'>";
            for (i = 0; i < 7; i++) {
                if (month == nextDate.getMonth()) {

                    if (eventDay == nextDate.getDate()) {
                        HTML = HTML + "<li class='day event' id='" + count + "'>" + nextDate.getDate() + "</li>";
                        eventDay = events.pop();
                        count = count + 1;
                    } else {
                        HTML = HTML + "<li class='day'>" + nextDate.getDate() + "</li>";
                    }
                } else {
                    HTML = HTML + "<li class='day'></li>";
                }


                nextDate.setDate(nextDate.getDate() + 1);
            }
            var HTML = HTML + "</ul>";
        }


        $('#cal').html(HTML);
    }


    /*-----------------------------------------------------
    *	NewMonth(day, month, year)
    *-----------------------------------------------------
    *	Parses an XML file and populates two global arrays events and eventList
    *	events is used to create the calendar, and eventList is used to generate the pop up
    *	
    *	Accepts values for month to be generated: 
    *		day (integer), month (integer), year (integer)
    */
    function NewMonth(date, month, year) {
        $.ajax({
            url: "/Calendar.asmx/GetDates",
            type: "POST",
            data: "Month=" + (Number(month) + 1) + "&Year=" + year,
            dataType: "xml",
            success: function(xml) {
                eventList = new Array();
                eventsHTMLArray = new Array();
                $(xml).find('event').each(function() {
                    var link = '<a href="eventdetails.aspx?q=' + $(this).find('id').text() + '">' + $(this).find('text').text() + '</a>';

                    if (events.length > 0) {
                        var tempEventDate = events[events.length - 1];
                        if (tempEventDate == $(this).find('date').text()) {
                            var lastText = eventsHTMLArray.pop();
                            eventsHTMLArray.push(lastText + '<br>' + link);
                            //eventList.push(new event($(this).attr('date'), tempEvent.text + '<br>' + link, $(this).attr('id')));
                        } else {
                            events.push($(this).find('date').text());
                            eventsHTMLArray.push(link);
                            //eventList.push(new event($(this).attr('date'), $(this).attr('text'), $(this).attr('id')));
                        }
                    } else {
                        events.push($(this).find('date').text());
                        eventsHTMLArray.push(link);
                        //eventList.push(new event($(this).attr('date'), $(this).attr('text'), $(this).attr('id')));
                    }


                });

                GenerateMonthHTML(date, month, year);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                //            alert(textStatus);
            }
        });
    }



    /*-----------------------------------------------------
    *	jQuery live event for calendar day clicked
    *-----------------------------------------------------
    *	Hides the summary and if the day clicked has class "event", 
    *	pulls id from clicked element and uses it to get that events
    *	data from eventList. Also computes position of pop up.
    *	
    *	
    */
    $('.day').live("click", function(e) {
        e.preventDefault();
        $('#summary').fadeOut();
        $('.day').removeClass('click');
        if ($(this).hasClass('event')) {
            $('#summary').remove();

            $(this).addClass('click');
            var ppos = $('#cal').offset();
            var pos = $(this).offset();

            $('#cal').append('<div id="summary"><div id="summary-text"></div></div>');
            $('#summary').hide();
            $('#summary').css({ top: pos.top - ppos.top + 20, left: pos.left - ppos.left - 80 });

            //var txt = '<p>' + eventList[$(this).attr('id')].text + '</p>';
            //var link = '<a href="eventdetails.aspx?q=' + eventList[$(this).attr('id')].id + '">click for more info</a>';
            $('#summary-text').html(eventsHTMLArray[$(this).attr('id')] + '<div id="summary-close"></div>');
            //alert(eventsHTMLArray[$(this).attr('id')]);
            $('#summary').fadeIn();
        }

    });



    /*-----------------------------------------------------
    *	jQuery live event for calendar next arrow clicked
    *-----------------------------------------------------
    *	sets currentdate and calls NewMonth 
    *	
    *	
    */
    $('.arrow.next ').live("click", function() {
        currentDate.setMonth(currentDate.getMonth() + 1);
        NewMonth(1, currentDate.getMonth(), currentDate.getFullYear());
    });


    /*-----------------------------------------------------
    *	jQuery live event for calendar prev arrow clicked
    *-----------------------------------------------------
    *	sets currentdate and calls NewMonth 
    *	
    *	
    */
    $('.arrow.prev ').live("click", function() {
        currentDate.setMonth(currentDate.getMonth() - 1);
        NewMonth(1, currentDate.getMonth(), currentDate.getFullYear());
    });


    /*-----------------------------------------------------
    *	jQuery live event for summary close button clicked
    *-----------------------------------------------------
    *	Hides summary
    *	
    *	
    */
    $('#summary #summary-text #summary-close ').live("click", function() {
        $('#summary').fadeOut();
    });
});