function createRequestObject() {
    var tmpXmlHttpObject;
    
    //depending on what the browser supports, use the right way to create the XMLHttpRequest object
    if (window.XMLHttpRequest) { 
        // Mozilla, Safari would use this method ...
        tmpXmlHttpObject = new XMLHttpRequest();
	
    } else if (window.ActiveXObject) { 
        // IE would use this method ...
        tmpXmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    return tmpXmlHttpObject;
}

//call the above function to create the XMLHttpRequest object
var http = createRequestObject();

//change small calendar
function changeCalendar(month, year) {
    displayLoader();

    //hide the large calendar
    //document.getElementById("fullCalendar").style.display = 'none';

    //make a connection to the server ... specifying that you intend to make a GET request
    //to the server. Specifiy the page name and the URL parameters to send
    http.open('post', './ajax/calendar.jsp', true);
    
    //assign a handler for the response
    http.onreadystatechange = changeCalendarResponse;
    
    var params = 'month=' + month
                + '&year=' + year;
    
    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");
    
    //actually send the request to the server
    http.send(params);
}

function changeCalendarResponse() {
    //check if the response has been received from the server
    if(http.readyState == 4){
	
        //read and assign the response from the server
        var response = http.responseText;
		
        //do additional parsing of the response, if needed
        
	//in this case simply assign the response to the contents of the <div> on the page. 
        document.getElementById("calendarDisplay").innerHTML = response;
	
        //If the server returned an error message like a 404 error, that message would be shown within the div tag!!. 
        //So it may be worth doing some basic error before setting the contents of the <div>

        undisplayLoader();
    }
}

//show date's event details
function showDateEvents(date) {
    displayLoader();

    //show the actual calendar
    //document.getElementById("fullCalendar").style.display = 'none';

    //make a connection to the server ... specifying that you intend to make a GET request
    //to the server. Specifiy the page name and the URL parameters to send
    http.open('post', './ajax/eventdetails.jsp', true);

    //assign a handler for the response
    http.onreadystatechange = showDateEventsResponse;

    var params = 'date=' + date;

    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");

    //actually send the request to the server
    http.send(params);
}

function showDateEventsResponse() {
    //check if the response has been received from the server
    if(http.readyState == 4){

        //read and assign the response from the server
        var response = http.responseText;

        //do additional parsing of the response, if needed

	//in this case simply assign the response to the contents of the <div> on the page.
        document.getElementById("calendarEventsDisplay").innerHTML = response;

        //If the server returned an error message like a 404 error, that message would be shown within the div tag!!.
        //So it may be worth doing some basic error before setting the contents of the <div>

        undisplayLoader();
    }
}

//show the full calendar
function showFullCalendar(month, year) {
    displayLoader();

    //make a connection to the server ... specifying that you intend to make a GET request
    //to the server. Specifiy the page name and the URL parameters to send
    http.open('post', './ajax/fullcalendar.jsp', true);
    
    //assign a handler for the response
    http.onreadystatechange = showFullCalendarResponse;
    
    var params = 'month=' + month
                + '&year=' + year;
    
    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");
    
    //actually send the request to the server
    http.send(params);
}

function showFullCalendarResponse() {
    //check if the response has been received from the server
    if(http.readyState == 4){
        //read and assign the response from the server
        var response = http.responseText;

        //do additional parsing of the response, if needed

	//in this case simply assign the response to the contents of the <div> on the page.
        document.getElementById("fullCalendar").innerHTML = response;
        
        //If the server returned an error message like a 404 error, that message would be shown within the div tag!!.
        //So it may be worth doing some basic error before setting the contents of the <div>

        //move focus to full calendar
        document.getElementById("loader").focus();
        //document.location.href = '#upcomingEvents';


        undisplayLoader();
    }
}

//hide and unhide ajax animated gif
function displayLoader() {
    document.getElementById('loader').style.visibility = 'visible';
}

function undisplayLoader() {
    document.getElementById('loader').style.visibility = 'hidden';
}