//GET CURRENT DATE
var now = new Date();
//SET THE VALUES FROM THE SELECTMONTH AND SELECTYEAR
document.frm_Calendar.selectMonth.value = String(now.getMonth() +1);
document.frm_Calendar.selectYear.value = String(now.getFullYear());
//DISPLAY THE CALENDAR FOT THE DEFAULT DATES
displayCalendarPerMonthAndYear()

//DISPLAY CALENDAR PER MONTH AND YEAR FUNCTION
function displayCalendarPerMonthAndYear()
{
    //DECLARE THE HTML FOR THE CALENDAR
    var calendarHTML = String('');
    //GET THE CURRENT MONTH FROM THE SELECT MONTH OBJECT
    var currentMonth = Number(document.frm_Calendar.selectMonth.value);    
    //GET THE CURRENT YEAR FROM THE SELECT YEAR OBJECT
    var currentYear = Number(document.frm_Calendar.selectYear.value)
    //SET TODAY'S DATE BASE IN THE OPTIONS SELECTED
    var today = new Date(currentMonth + "/1/" + currentYear);
    //GET THE CURRENT DAY
    var currentDay = Number(today.getDay());
    //GET THE CURRENT DATE
    var currentDate = Number(today.getDate());
    //GET THE TOTAL DAYS OF THE MONTH
    var totalDays = Number(daysInMonth(currentMonth,currentYear));
    //FIND THE CORRESPONDING DAY POSITION OF THE FIRST DAY OF THE MONTH
    while (currentDate > 7)
    {
        currentDate = currentDate - 7;
    }

    while (currentDate > 1)
    {
        currentDate = currentDate - 1;
        if (currentDay ==0)
            currentDay = 7;
        currentDay = currentDay - 1    
    }
    //BUILD THE HTML
    calendarHTML += '<table border="1" cellpadding="1" cellspacing="0" width="490">';
    calendarHTML += '<tr>';
    calendarHTML += '<td colspan="7" align="center" style="color:white;background-color:navy;font-Family:Verdana; font-size:14px;">' + getTextMonth(String(currentMonth)) +'</td>';
    calendarHTML += '</tr>';
    calendarHTML += '<tr  style="color:black;background-color:lightgrey;font-Family:Verdana; font-size:10px;font-weight:bold">';
    calendarHTML += '<td width="70">SUNDAY</td><td width="70">MONDAY</td><td width="70">TUESDAY</td><td width="70">WEDNESDAY</td><td width="70">THURSDAY</td><td width="70">FRIDAY</td><td width="70">SATURDAY</td>';
    calendarHTML += '</tr>';
    //WHILE THE CURRENT DAY <= TOTAL DAYS + 7        
    while (currentDate <= totalDays +7)
    {
        calendarHTML += '<tr style="font-size:12px;">';
        for (var i = 0; i< 7; i++)
        {
            
            if (i == currentDay  && currentDate < totalDays)
            {
                var currentEventDate = String(currentMonth + '/' + currentDate + '/' + currentYear);
                calendarHTML += '<td valign="top"><a href="javascript:showEvents(\'' + currentEventDate  + '\')" class="alpha"> ' + currentDate +'</a><span style="font-size:10px">' + getDateEventName(currentEventDate) +'</span></td>';        
            }
            else if (i <currentDay)
            {
                var dayDifference = Number(currentDay - i);
                var dateToDisplay = Number(currentDate - dayDifference);
                var currentEventDate = String(currentMonth  + '/' + dateToDisplay + '/' + currentYear);
                if (dateToDisplay> 0 &&  dateToDisplay <=totalDays)         
                    calendarHTML += '<td valign="top"><a href="javascript:showEvents(\'' + currentEventDate + '\')" class="alpha">' + dateToDisplay +'</a><span style="font-size:10px">' + getDateEventName(currentEventDate) +'</span></td>';        
                else
                    calendarHTML += '<td></td>';                
            }
            else
            {
                var dayDifference = Number(i - currentDay);        
                var dateToDisplay = Number(currentDate + dayDifference);
                var currentEventDate = String(currentMonth  + '/' + dateToDisplay + '/' + currentYear);
                if (dateToDisplay <= totalDays)
                    calendarHTML += '<td valign="top"><a href="javascript:showEvents(\'' + currentEventDate + '\')" class="alpha">' + dateToDisplay +'</a><span style="font-size:10px">' + getDateEventName(currentEventDate) +'</span></td>';        
                else
                    calendarHTML += '<td></td>';                                
            }
            
        }
        calendarHTML += '</tr>';
        currentDate = currentDate +7;
    }    
    calendarHTML += '</table>';    
    document.getElementById("calendar").innerHTML = calendarHTML;
     document.getElementById("events").innerHTML ='';
    
}

//SHOW EVENTS FUNCTION
function showEvents(eventDate)
{
    //DECLARE THE EVENT HTML OBJECT
    var eventsHTML = String('');
    //GET THE DATE
    var eDate = new Date(eventDate);
    //IF THERE ANY EVENTS FLAG
    var anyEvents = false;
    eventsHTML += '<br/><table border="0" width="490">';
    eventsHTML += '<tr>';
    eventsHTML += '<td style="color:white;background-color:navy;font-Family:Verdana; font-size:14px;">Events for '+ eDate.toDateString();
    eventsHTML += '</td>';
    
    var toPrintArray = new Array();
    //SEARCH FOR THE EVENTS FOR THE SPECIFIC DATE INSIDE THE ARRAY
    for (var x in calendarArray)
    {        
        if (String(eDate) == String(calendarArray[x].eventDate))        
        {
            toPrintArray[toPrintArray.length] = new Object();
            toPrintArray[toPrintArray.length-1] = calendarArray[x];
            //SET THE FLAG TO TRUE, THERE IS AT LEAST ONE EVENT FOR THAT DATE
            anyEvents = true;
        }            
    }
    toPrintArray.sort(sortByDate);
    for (var x in toPrintArray)
    {
            //BUILD THE HTML OF EVENTS            
            eventsHTML += '<tr>';
            eventsHTML += '<td><span style="font-size:12px;font-weight:bold;">' + toPrintArray[x].eventTime  + ' '  + toPrintArray[x].eventName  + '</span></td>';
            eventsHTML += '</tr>'
            eventsHTML += '<tr>';
            eventsHTML += '<td><span style="font-size:12px;">' + toPrintArray[x].eventDescription  + '</span></td>';
            eventsHTML += '</tr>'
            eventsHTML += '<tr>';
            eventsHTML += '<td><span style="font-size:12px;">To register for this class click <a href="javascript:openRegistrationPage();">here</a></span><br/><br/></td>';
            eventsHTML += '</tr>'
            
            
    }       
    //IF THERE IS NO EVENTS FOR THE SPECIFIC DATE
    if (anyEvents == false)
    {
        eventsHTML += '<tr>';
        eventsHTML += '<td><span style="font-size:12px;">No Events Scheduled</span></td>';
        eventsHTML += '</tr>';
    }
    eventsHTML += '</tr>';
    eventsHTML += '</table>';
    document.getElementById("events").innerHTML = eventsHTML;
}

//GET DATE EVENT NAME BY DATE
function getDateEventName(eventDate)
{
    var eDate = new Date(eventDate);
    
    var toReturnEventName = String('');    
    var toPrintArray = new Array();
    for (var x in calendarArray)
    {        
        if (String(eDate) == String(calendarArray[x].eventDate))                    
        {
            toPrintArray[toPrintArray.length] = new Object();
            toPrintArray[toPrintArray.length-1] = calendarArray[x];
        }
            
    }          
    toPrintArray.sort(sortByDate);
    for (var x in toPrintArray)
    {
        toReturnEventName += '<br/><br/>&bull;'+ String(toPrintArray[x].eventName);                    
    }    
    
    
    
    //RETURN THE EVENTS NAMES FOR THE DATE OR EMPTY STRING IF THERE IS NO EVENT
    return toReturnEventName;        
}


//FUNCTION DAYS IN MONTH CALCULATE THE AMOUNT OF DAYS PER MONTH AND YEAR
function daysInMonth(month,year) 
{
    var totalDaysInMonth = new Date(year, month, 0);
    return totalDaysInMonth.getDate();
} 

//GET THE TEXT OF THE GIVEN NUMBER MONTH
function getTextMonth(monthNumber)
{
    var text = "January";
    switch(monthNumber)
    {
        case "1":
        text="January";
        break;
        case "2":
        text="February ";
        break;
        case "3":
        text="March";
        break;
        case "4":
        text="April";
        break;
        case "5":
        text="May";
        break;
        case "6":
        text="June";
        break;
        case "7":
        text="July";
        break;
        case "8":
        text="August";
        break;
        case "9":
        text="September";
        break;
        case "10":
        text="October";
        break;
        case "11":
        text="November";
        break;
        case "12":
        text="December";
        break;                
    }
    return text;
}

function openRegistrationPage()
{
 //SET HEIGHT AND WIDTH
 var NewWinHeight=400;
 var NewWinWidth=1000;

    //PLACE THE WINDOW

    var leftVal =  (screen.width / 2) - (NewWinWidth / 2);
    var topVal = ( screen.height / 2)  - (NewWinHeight / 2);        window.open("registration.html","Registration","toolbar=no,location=no, directories=no, status=no, resizable=yes,  menubarr=no, width="+ NewWinWidth + ", height= "+ NewWinHeight + ", top=" + topVal + ", left=" + leftVal);	
}