function popUp(URL) {
    day = new Date();
    id = day.getTime();
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=450,height=300,left = 735,top = 450');");
}

var color_ids = "";
function doAjax(act, exercise, elem) {
    var type_error = "";
    var span_id = "";
    color_ids = "";
    if (elem) {
        if (typeof(elem) == "object") {
            span_id = elem.id;
            span_id = span_id.replace("span_","");
        } else {
            type_error = elem;
        }
    }
    
    var pagina = "http://www.vanverslagtotrapport.nl/__find_error.php";
    var xmlHttpReq = false;
  
    if (window.XMLHttpRequest) { 
    // If IE7, Mozilla, Safari, etc: Use native object 
        var xmlHttpReq = new XMLHttpRequest() 
    } else if (window.ActiveXObject) { 
    // ...otherwise, use the ActiveX control for IE5.x and IE6 
        var xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlHttpReq.open('POST', pagina, true);
    xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlHttpReq.onreadystatechange = function() {

        if (xmlHttpReq.readyState == 1) {
            document.getElementById('indicator').style.display="inline";
        }

        if (xmlHttpReq.readyState == 4) {
            document.getElementById('indicator').style.display="none";
            ret = xmlHttpReq.responseText;
            if (exercise == 1) {

                // ###############################
                // alle acties voor oefening 1
                // de gebruiker klikt elke keer rechts 
                // op de soort fout
                // ###############################

                if (act == "start" || act == "next") { // id's van de fouten in response 
                    divider = ret.split("||");
                    div1 = divider[0];
                    div2 = divider[1];
                    div3 = divider[2];
                    if (div2 != "end") { // oefening wordt gestart of volgende fout oppakken
                        if (act == "next") { // oude id's blauw maken + onMouseOver zetten
                            old_ids = div1.split(","); 
                            for (i=0;i<old_ids.length;i++) {
                                changeColors('span_'+old_ids[i], '#89aaff', '#000000');
                                doAddEvent('span_'+old_ids[i], div3);
                            }
                        } else { // dan wordt de boel gestart
                            div2 = div1;
                        }
                        if (div2 != "") { // er is een volgende fout of de oefening wordt gestart
                            span_ids = div2.split(",");
                            for (i=0;i<span_ids.length;i++) {
                                if (act == "start") {
                                    changeColors('span_'+span_ids[i], '#FF0000', '#FFFFFF');
                                } else {
                                    changeColors('span_'+span_ids[i], '#FFFFFF', '#000000');
                                }
                            }
                            color_ids = span_ids;
                        }
                    } else { // oefening is klaar
                        old_ids = div1.split(","); 
                        for (i=0;i<old_ids.length;i++) {
                            changeColors('span_'+old_ids[i], '#89aaff', '#000000'); 
                            doAddEvent('span_'+old_ids[i], div3);
                        }
                        showMelding("Je hebt de oefening afgerond!");
                    }
                } else if (act == "type_error") { // er is op een fout geklikt
                    divider = ret.split("||");
                    div1 = divider[0];
                    div2 = divider[1];
                    if (div1 != "end") {
                        if (div1 == "false") { // onjuiste poging
                            showMelding(div2);
                        } else if (div1 == "stop") { // 3 pogingen ondernomen
                            showMelding(div2);
                            doAjax("next", exercise);
                        } else if (div1 == "true") { // juiste keuze
                            showMelding(div2);
                            doAjax("next", exercise);
                        }   
                    } else if (div1 == "end") { // oefening is klaar     
                        showMelding("Je hebt de oefening afgerond!"); 
                    }  
                }
            } else if (exercise == 2) {
            
                // ###############################
                // alle acties voor oefening 2
                // de gebruiker klikt eerst op een fout
                // en selecteert daarna de soort fout
                // ###############################

                if (act == "start") { // oefening 2 wordt gestart, aantal fouten tellen
                    document.getElementById('aanwezige_fouten').innerHTML = ret;
                } else if (act == "error") { // er is op een woord geklikt, controleren of dit een fout is
                    divider = ret.split("||");
                    div1 = divider[0]; // resultaat
                    div2 = divider[1]; // nieuwe id's
                    div3 = divider[2]; // oude id's
                    if (div3) {
                        old_ids = div3.split(",");
                        for (i=0;i<old_ids.length;i++) {
                            if (document.getElementById('span_'+old_ids[i]).style.backgroundColor == 'rgb(255, 0, 0)' || document.getElementById('span_'+old_ids[i]).style.backgroundColor == '#ff0000') {
                                changeColors('span_'+old_ids[i], 'transparent', '#000000');
                            }
                        }
                    }
                    if (div1 == "true") { // woord is (deel van) een fout
                        span_ids = div2.split(",");
                        for (i=0;i<span_ids.length;i++) {
                            changeColors('span_'+span_ids[i], '#FF0000', '#FFFFFF');
                        }
                    /*} else if (div1 == "same") { // zelfde woord geklikt alert('test');*/
                    } else if (div1 == "end") {
                        showMelding("Je hebt de oefening afgerond!");
                    } else if (div1 == "false") {
                        showMelding("Hier staat geen fout!");
                    }
                } else if (act == "next") { // de fout is goed geraden, zet de onclick
                    divider = ret.split("||");
                    div1 = divider[0]; // oude id's
                    div2 = divider[1]; // melding
                    div3 = divider[2]; // aantal gevonden  
                    old_ids = div1.split(",");
                    for (i=0;i<old_ids.length;i++) {
                        changeColors('span_'+old_ids[i], '#89aaff', '#000000');
                        doAddEvent('span_'+old_ids[i], div2);
                    }
                    document.getElementById('gevonden_fouten').innerHTML = div3;
                    document.getElementById('gevonden_percentage').innerHTML = Math.round(((100/parseInt(document.getElementById('aanwezige_fouten').innerHTML)) * parseInt(div3))*100)/100;
                } else if (act == "type_error") { // er is op een fout geklikt
                    divider = ret.split("||");
                    div1 = divider[0]; // resultaat
                    div2 = divider[1]; // melding
                    if (div1 != "end") {
                        if (div1 == "false") { // onjuiste poging
                            showMelding(div2);
                        } else if (div1 == "stop") { // 3 pogingen ondernomen
                            showMelding(div2);
                            doAjax("next", exercise);
                        } else if (div1 == "true") { // juiste keuze
                            showMelding(div2);
                            doAjax("next", exercise);
                        } else if (div1 == "word") { // nog geen woord geklikt
                            showMelding(div2);
                        }
                    } else if (div1 == "end") { // oefening is klaar     
                        if (div2) { // laatste fout gevonden
                            showMelding(div2);
                            doAjax("next", exercise);
                        } else {
                            showMelding("Je hebt de oefening afgerond!"); 
                        }
                    }
                } else if (act == "show_rest") {
                    if (ret >= 60) { // rest van fouten laten zien
                        doAjax("find_rest", exercise); 
                    } else {
                        showMelding("Je hebt nog geen 60% van de fouten gevonden!");
                    }
                } else if (act == "find_rest") {
                    divider = ret.split("||");
                    div1 = divider[0]; // nieuwe id's
                    div2 = divider[1]; // melding
                    if (div1 != "") {
                        span_ids = div1.split(",");
                        for (i=0;i<span_ids.length;i++) {
                            changeColors('span_'+span_ids[i], '#FFCC00', '#000000');
                        }
                        showMelding(div2);
                    } else {
                        showMelding("Je hebt de oefening afgerond!"); 
                    }
                }
            }
        }
    }           
    xmlHttpReq.send('exercise='+exercise+'&act='+act+'&id='+span_id+'&error='+type_error);
}

function showMelding(melding) {    
    alert(melding);  
}

function doAddEvent(span_id, melding) {
    try {
        document.getElementById(span_id).addEventListener('click', function () { showMelding(melding); }, false);
    } catch(e) {
        if(document.attachEvent) {
            document.getElementById(span_id).attachEvent('onclick', function () { showMelding(melding); });
        } else {
            document.getElementById(span_id).onclick = function () { showMelding(melding); };
        }
    }
} 

// constants to define the title of the alert and button text.
var ALERT_TITLE = "Van verslag tot rapport: melding!";
var ALERT_BUTTON_TEXT = "OK";

// over-ride the alert method only if this a newer browser.
// Older browser will see standard alerts
if(document.getElementById) {
    window.alert = function(txt) {
        createCustomAlert(txt);
    }
}

function createCustomAlert(txt) {
    // shortcut reference to the document object
    d = document;

    // if the modalContainer object already exists in the DOM, bail out.
    if(d.getElementById("modalContainer")) return;

    // create the modalContainer div as a child of the BODY element
    mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
    mObj.id = "modalContainer";
     // make sure its as tall as it needs to be to overlay all the content on the page
    mObj.style.height = document.documentElement.scrollHeight + "px";

    // create the DIV that will be the alert 
    alertObj = mObj.appendChild(d.createElement("div"));
    alertObj.style.visibility = 'hidden';
    alertObj.id = "alertBox";
    
    // MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
    var viewport = getViewport();
    var extra_y = parseInt(viewport.y);
    var yc = document.documentElement.scrollTop;
    if (extra_y > 0) {
        yc = yc + extra_y - 102;
    }
    if(d.all && !window.opera) alertObj.style.top = yc + "px";
    // center the alert box
    alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
    alertObj.style.visibility = 'visible'; 

    // create an H1 element as the title bar
    h1 = alertObj.appendChild(d.createElement("h1"));
    h1.appendChild(d.createTextNode(ALERT_TITLE));

    // create a paragraph element to contain the txt argument
    msg = alertObj.appendChild(d.createElement("p"));
    msg.id = "html_div";
    //msg.appendChild(d.createTextNode(txt));
    document.getElementById('html_div').innerHTML = txt;

    // create an anchor element to use as the confirmation button.
    btn = alertObj.appendChild(d.createElement("a"));
    btn.id = "closeBtn";
    btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
    btn.href = "#";
    // set up the onclick event to remove the alert when the anchor is clicked
    btn.onclick = function() { removeCustomAlert();return false; }

    
}

// removes the custom alert from the DOM
function removeCustomAlert() {
    document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
    if (color_ids) {
        for (i=0;i<color_ids.length;i++) {
            changeColors('span_'+color_ids[i], '#FF0000', '#FFFFFF');
        }
    }
}


function changeColors(span_id, bgcolor, textcolor) {
    document.getElementById(span_id).style.backgroundColor=bgcolor;
    document.getElementById(span_id).style.color=textcolor;
}

function getViewport()
{
    var viewport = {x:0,y:0,width:0,height:0};

    if (typeof window.scrollX != 'undefined')
    {
        viewport.x = window.pageXOffset;
        viewport.y = window.pageYOffset;
        viewport.width = window.innerWidth;
        viewport.height = window.innerHeight;
        return viewport;
    }
    else
    {
        if (document.documentElement &&
        (typeof document.documentElement.scrollLeft != 'undefined') &&
        (document.documentElement.scrollLeft != 0))
        {
            viewport.x = document.documentElement.scrollLeft;
            viewport.y = document.documentElement.scrollTop;
            viewport.width = document.documentElement.clientWidth;
            viewport.height = document.documentElement.clientHeight;
            return viewport;
        }
        else
        {
            if (document.body &&
            (typeof document.body.scrollLeft != 'undefined'))
            {
                viewport.x = document.body.scrollLeft;
                viewport.y = document.body.scrollTop;

                if (document.compatMode == "CSS1Compat")
                {
                    viewport.width = document.body.parentNode.clientWidth;
                    viewport.height = document.body.parentNode.clientHeight;
                }
                else
                {
                    viewport.width = document.body.clientWidth;
                    viewport.height = document.body.clientHeight;
                }

                return viewport;
            }
        }
    }

    return null;
}