// create a global variable for use in XMLHttpRequest functions
var xhr;

/*  the getContent function requires:
    selected_id - to be used for database queries
    target - the AJAX page being called
    elementId - the id of the element into which the AJAX content will be written */
function getContent(selected_id, target, elementId) {
    // call the function that checks for XMLHttpRequest compatibility
    xhr=GetXmlHttpObject();
    // if xhr ends up being null, that means the browser can't handle XMLHttpRequests
    if (xhr==null) {
        alert ("Your browser configuration does not support HTTP Requests (AJAX)");
        return;
    }
    // if xhr was anything but null, that means the browser is good to go and the function continues
    
    tempClose(elementId);
    
    // set the url variable to be the target, plus any _GET variables
    // a random number is appended to prevent caching complications
    var url="_ajax/"+target;
    url=url+"?selected_id="+selected_id;
    url=url+"&sid="+Math.random();

    // call the function that processes the XMLHttpRequest
    processXhr(elementId,url)
}

// check to see if the browser supports XMLHttpRequests, and if so then create a new one
function GetXmlHttpObject() {
    var xhr=null;
    // Try to make a new XMLHttpRequest
    try {
        // This should work for Firefox, Opera 8.0+, Safari, Chrome
        xhr=new XMLHttpRequest();
    }
    // if that fails, catch the error and try something else
    catch (e) {
        // Either this should work for Internet Explorer...
        try {
            xhr=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            // or this should
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    // at this point, xhr is either still equal to null, or it is now a shiny new XMLHttpRequest object!
    return xhr;
}

/*  the processXhr function requires:
    url - the AJAX page being called
    elementId - the id of the element into which the AJAX content will be written */
function processXhr(elementId,url) {
    // creat an XMLHttpRequest object
    xhr=GetXmlHttpObject();
    // any time the state of the XMLHttpRequest changes, it calls the specified function
    xhr.onreadystatechange=stateChanged;
    // open the request
    xhr.open("GET",url,true);
    // send the request to the server
    xhr.send(null);

    function stateChanged() {
            // check that the readyState is 0, 1, 2, or 3
            if (xhr.readyState==0 || xhr.readyState==1 || xhr.readyState==2 || xhr.readyState==3) {
            // create a variable for the loading element
            var divLoading = document.getElementById(elementId+'_loading');
                divLoading.innerHTML="<img src='_images/ajax-loader.gif' alt='loading' />";
            }
        // check that the readyState is 4 OR complete, both of which mean the XMLHttpRequest is complete
        if (xhr.readyState==4 || xhr.readyState=="complete") {
            // check that the status is 200, which means the page is valid. This is in distinction to a 404 error or the like
            if (xhr.status==200) {
                // create a variable for the selected elementId
                var div = document.getElementById(elementId);
                // set the elementID's innerHTML to the XMLHttpRequest response
                div.innerHTML=xhr.responseText;
                
                // select all script tags that came through in the XMLHttpRequest response
                var allScripts=div.getElementsByTagName("script");
                // loop through all the scripts and run (evaluate) them
                for(var i=0;i<allScripts.length;i++) {  
                    eval(allScripts[i].text);  
                }
            }
            else {
                // if the status wasn't 200, throw up an error message
                alert("There was a problem with the request " + xhr.status);
            }
        }
    }
}

function tempAlert() {
    alert('huh...');
}

// close the specified ID by replacing all of its contents with a loading div
// the loading div is used to hold the animated loading gif in AJAX calls
function tempClose(elementId) {
    $('#' + elementId).html('<div id=\"' + elementId + '_loading\"></div>'); 
}