$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "events.xml",
        dataType: "xml",
        success: function(xml) {
            
            var today = new Date(); 
            todaysYear = today.getFullYear();
            todaysMonth = today.getMonth();
        
            var month_name = new Array(12);
            month_name[0]="January";
            month_name[1]="February";
            month_name[2]="March";
            month_name[3]="April";
            month_name[4]="May";
            month_name[5]="June";
            month_name[6]="July";
            month_name[7]="August";
            month_name[8]="September";
            month_name[9]="October";
            month_name[10]="November";
            month_name[11]="December"; 
            
            function calendar(year, month, offSet) { 
                if (month+offSet > 11) {
                    var year = year+offSet;
                    var month = 0;
                } else if (month+offSet < 0) {
                    var year = year+offSet;
                    var month = 11;     
                } else {
                    var month = month+offSet;
                }
                
                var htmlString;
                var d = new Date(year, month);
                d.year = d.getFullYear();
                d.month = d.getMonth();  
                d.dayOffset = d.getDay();   
                      
                function daysInMonth(year, month) {return 32 - new Date(year, month, 32).getDate();}
                htmlString = '<span id="month" class="'+d.month+'">'+month_name[d.month]+'</span> <span id="year">'+d.year+'</span><table><tr><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr><tr>';
                var i;
                var x = 1;
               
                for (y=0; y<d.dayOffset; y++) {
                    htmlString += '<td></td>';
                    x++;
                }    
                
                for (i=1; i<=daysInMonth(year, month); i++) {
                    var monthAdjusted = month+1;
                    var eventNode = $(xml).find('Event[Year="'+year+'"][Month="'+monthAdjusted+'"][Day="'+i+'"]');
                        
                    if (eventNode.find('Type').text() == "Meet") {
                        htmlString += '<td class="Meet" onclick="showEvent($(this));return false;">'+i+'</td>';
                        x++;
                    } else if (eventNode.find('Type').text() != "Meet" && eventNode.find('Type').text() != "") {
                        htmlString += '<td class="Practice" onclick="showEvent($(this));return false;">'+i+'</td>';
                        x++;
                    } else {
                        htmlString += '<td>'+i+'</td>';
                        x++;
                    }
                    
                    if (x == 8 && i < daysInMonth(year, month)) {
                        htmlString += '</tr><tr>';
                        x=1;
                    }
                }
                htmlString += '</tr></table><div id="events"><p class="details">Click highlighted date for details.</p></div>';
                return htmlString;
            }
            
            function events(year, month) {
                
                var monthAdjusted = month+1;
                $(xml).find('Event[Year="'+year+'"][Month="'+monthAdjusted+'"]').each(function(){
                    var eventType = $(this).find("Type").text();

                    if (eventType == "Meet") {
                        var eventID = 'e_'+$(this).attr("Day");
                        var eventLoc = $(this).find("Location").text();
                        var eventName = $(this).find("Name").text();
                        var eventReg = $(this).find("Registration_Time").text();
                        var eventStart = $(this).find("Start_Time").text();
                        var eventLink = $(this).find("Link").text();
                        var eventDiv = '<div class="events" id="'+eventID+'"><p class="event_type">'+eventType+'</p><p>'+eventName+'</p><p>'+eventLoc+'</p><p>Registration: '+eventReg+'</p><p>Start: '+eventStart+'</p><a href="'+eventLink+'">Go to Meet Schedule page</a></div>';
                        $("#calendar #events").append(eventDiv);
                    } 

                    if (eventType != "Meet" && eventType != "") {
                        var eventID = 'e_'+$(this).attr("Day");
                        var eventLoc = $(this).find("Location").text();
                        var eventStart = $(this).find("Start_Time").text();
                        var eventDiv = '<div class="events" id="'+eventID+'"><p><strong>'+eventType+'</strong></p><p>'+eventLoc+'</p><p>Start: '+eventStart+'</p></div>';
                        $("#calendar #events").append(eventDiv);
                    }   

                });  
                                    
            }
                            
            function boldCurrentDay() {
                var currentMonth = eval($('#month').attr('class'));
                var currentYear = eval($('#year').text());
                if (currentYear == todaysYear && currentMonth == todaysMonth) {
                    $('#calendar td').filter( function (index){
                        return $(this).text() == today.getDate();
                    }).addClass('currentday');
                    //$('#calendar td:contains("'+today.getDate()+'")').addClass('currentday');
                }
            }
            

            $('#calendar').html(calendar(todaysYear, todaysMonth, 0));
            boldCurrentDay();
            var newMonth = eval($('#month').attr('class'));
            var newYear = eval($('#year').text());
            events(newYear, newMonth);
            $('.events').hide();
            
            $('#prev').click(function() {
                var currentMonth = eval($('#month').attr('class'));
                var currentYear = eval($('#year').text());
                $('#calendar').html(calendar(currentYear, currentMonth, -1)); 
                boldCurrentDay();
                var newMonth = eval($('#month').attr('class'));
                var newYear = eval($('#year').text());
                events(newYear, newMonth);
                $('.events').hide();
            })
            
            $('#next').click(function() {
                var currentMonth = eval($('#month').attr('class'));
                var currentYear = eval($('#year').text());
                $('#calendar').html(calendar(currentYear, currentMonth, 1));
                boldCurrentDay();
                var newMonth = eval($('#month').attr('class'));
                var newYear = eval($('#year').text());
                events(newYear, newMonth);
                $('.events').hide();
            })                          
            
        }
    });
                
});

function showEvent(el) {
    $('.details').hide(); 
    $('.events').hide(); 
    var showDiv = 'e_'+el.text();
    $('#'+showDiv).show();
    $('#calendar td').removeClass('highlight');  
    $(el).addClass('highlight'); 
};