source: Dev/trunk/js/sequencerScripts.js @ 171

/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
var timeDiff  =  {
    setStartTime:function (){
        d = new Date();
        time  = d.getTime();
    },

    getDiff:function (){
        d = new Date();
        return (d.getTime()-time);
    }
}





function IsItemSelected(check, target) {
    if (check.value) {
        target.disabled = false;
    }
    else {
        target.disabled = true;
    }
}

function IsCheckEnabled(check, target) {
    if (check.checked) {
        target.disabled = false;
        this.removeClass(target, "dis");
        
    }
    else {
        target.disabled = true;
        this.addClass(target, "dis");
    }
}

function removeNL(s){ 
    return s.replace(/[\n\r\t]/g,""); 
}

function SubmitToolbox(type) {
    var c = "objectToCreate="+type;
    var u = "createObject.php";
    var a = true;
    var pipeline = document.getElementById("pipelineStringField");
    var pipelineType = document.getElementById("pipelineTypeField");
    var pipelineUpdated = document.getElementById("pipelineUpdatedField");
    document.getElementById("numSteps").value++;
    
    newAjaxRequest(c, u, function(result){
        var resultUid = removeNL(result.responseText);
        //resultUid.replace("\n","").replace("\r","");
        
        pipeline.value += resultUid+",";
        pipelineType.value += type+",";
        pipelineUpdated.value += "0,";
        updateSequencer();
    }, a);
}

// Class manipulation

function hasClass(ele,cls) {
    if (ele.className)
        return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
 
function addClass(ele,cls) {
    if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
 
function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
    }
}

//new scripts!
//start here!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

function selectStep(uid) {
    /*
    
    var nodes = document.getElementById("seqContentWrapper").childNodes;
    for (var i = 0; i < nodes.length; i++) {     //loop through childNodes. Skip first node (whitespace)
        if (hasClass(nodes[i], "displayStep")) {    //check if current childNode is a displayStep, not divider or text.
            if (nodes[i].id == uid) {
                if (hasClass(nodes[i], "selected")) {
                    removeClass(nodes[i], "selected");
                }
                else {
                    addClass(nodes[i], "selected");
                }                
            }
            else {
                removeClass(nodes[i], "selected");
            }
        }
    }
    */
    // Hier is een snellere manier voor!
    var element = document.getElementById(uid);
    var prevElement = document.getElementById(document.getElementById("selectedStepField").value);
    
    if (!element || !hasClass(element, "displayStep")) {
        return;
    }
    // misschien nog checks inbouwen of het echt wel een element is?
    var selectedStepField = document.getElementById("selectedStepField");
    if (!hasClass(element, "selected")) {
        if (prevElement) {
            removeClass(prevElement, "selected");
        }
        addClass(element, "selected");
        selectedStepField.value = uid;
        
        var pl = stringToArray(document.getElementById("pipelineStringField").value, ",");
        var plType = stringToArray(document.getElementById("pipelineTypeField").value, ",");
        var type = plType[pl.indexOf(uid)];
        ajaxInfoRequest(uid, document.getElementById("infoPanelContent"), type);
        
        
    }
    else {
        deselectStep(uid);
    }
    
    
// Update selected step field with uid of currently selected step.
    
    
}

function deleteStep() {
    // delete an object from the session.
    // note: does not actually remove the object from the database, only takes it out of the pipeline array.
        
    var pl = stringToArray(document.getElementById("pipelineStringField").value, ",");
    var plType = stringToArray(document.getElementById("pipelineTypeField").value, ",");
    var plUpdated = stringToArray(document.getElementById("pipelineUpdatedField").value, ",");
    var selectedStep = document.getElementById("selectedStepField").value;
    
    // if no step has been selected, exit the function
    if (selectedStep == undefined || selectedStep == "") {
        return;
    }
    
    // find the array index of the specified object uid, then remove it from all three arrays.
    var index = pl.indexOf(selectedStep);
    if (index >= 0 && index < pl.length) {
        pl.splice(index, 1);
        plType.splice(index, 1);
        plUpdated.splice(index, 1);
        // set the updated status of all objects from *index* and forward to "0" (out of date)
        // this way they will be refreshed the next time updateSequencer(); is called, adn the visual display will match the new pipeline.
        for (var i = index-1; i < plUpdated.length; i++) {
            if (i >= 0 ) {
                plUpdated[i] = "0";
            }
        }
    }
    
    document.getElementById("pipelineStringField").value = arrayToString(pl, ",");
    document.getElementById("pipelineTypeField").value = arrayToString(plType, ",");
    document.getElementById("pipelineUpdatedField").value = arrayToString(plUpdated, ",");
    deselectStep(selectedStep);     // Make sure the info panel is up to date as well. (Not showing anything, as it should be...)
    document.getElementById("numSteps").value--;
    
    updateSequencer(false);
    
    
    
}

function deselectStep(uid) {
    var field = document.getElementById("selectedStepField");
    field.value = "";
    var element = document.getElementById(uid);
    removeClass(element, "selected");
    document.getElementById("infoPanelContent").innerHTML = "";
}
                                                                            
function newAjaxRequest(c, u, cb, async) {
    
    var xml;
    var content = c;    //an array of strings, in "key=value"  format.
    // assign a compatible request format
    if (window.XMLHttpRequest) {    //Not IE5, IE6
        xml = new XMLHttpRequest();
    }
    else {                          //IE5, IE6
        xml = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // subscribe the callback function to a response event
    xml.onreadystatechange = function() {
        xml.responseText = "Processing...";
        if (xml.readyState == 4 && xml.status == 200) {
            cb(xml);
        }
    };
    // initialize XMLRequest
    xml.open("POST", u, async);
    xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    var contentString = "";
    //iterate through parameters passed in variable c
    if (typeof(content)=='object'&&(input instanceof Array)) {    // parameters were passed as an array of key=value strings
        for (var i = 0; i < content.length; i++) {
            contentString += content[i];
            if (i != (content.length - 1)) {
                contentString += "&";
            }
        }
    }
    else { // single parameter or string already formatted by calling function
        contentString = content;
    }
    // finally send the formatted request
    xml.send(contentString);
}


/*
 * ajaxStepRequest gets  the markup for displaying a step in the sequencer from returnStep.php
 * Using ajax principle allows for editing of pipeline without constantly refreshing the page.
 */

function ajaxStepRequest(UIDS, types) {
    var c = "uids="+UIDS;
    if (types != "") {
        c += "&types="+types;
    }
    var u = "returnStep.php";
    newAjaxRequest(c, u, function(result) {
        document.getElementById("seqContentWrapper").innerHTML = result.responseText;
    }, true);
}

function ajaxInfoRequest(uid, el, type) {
    var c = "uid="+uid;
    c += "&type="+type;
    var u = "getInfo.php";
    newAjaxRequest(c, u, function(result) {
        el.innerHTML = result.responseText;
    }, true);
}

function drawSteps2() {
    var content = document.getElementById("seqContentWrapper");
    var pipeline = document.getElementById("pipelineStringField").value;
    var pipelineTypes = document.getElementById("pipelineTypeField").value;
    var numSteps = document.getElementById("numSteps").value;
    if (numSteps > 0) {
        pipeline = pipeline.replace(/,/g , ",divider,");    //regex search for commas, global (repeat), to represent them with visual dividers.
        pipelineTypes = pipelineTypes.replace(/,/g, ",divider,");
        ajaxStepRequest(pipeline, pipelineTypes);
    }
}


function updateSequencer(firstLoad) {
    // Load hidden field values
    
    var plString = document.getElementById("pipelineStringField").value;
    var plTypeString = document.getElementById("pipelineTypeField").value;
    var plUpdatedString = document.getElementById("pipelineUpdatedField").value;
    var count = document.getElementById("numSteps").value;
    
    if (count < 1) {
        document.getElementById("seqContentWrapper").innerHTML = "";
        return;
    }
    // If this is on page-load time
    if (firstLoad == true) {
        var seqContent = document.getElementById("seqContentWrapper");
        seqContent.innerHTML = "";
        requestString = plString.slice(0, -1);
        requestString = requestString.replace(/,/g, ",divider,");
        newAjaxRequest("uids="+requestString, "returnStep.php", function(result) {
            seqContent.innerHTML = result.responseText;
        }, true);
        
        plUpdatedString = "";
        for (var i = 0; i < plString.split(",").length-1; i++) {
            plUpdatedString += "1,";
        }
        
        document.getElementById("pipelineUpdatedField").value = plUpdatedString;
    }
    else {      // if not
        var pl = stringToArray(plString, ",");    
        var plType = stringToArray(plTypeString, ",");    
        var plUpdated = stringToArray(plUpdatedString, ",");
    
        var count = pl.length;
    
        document.getElementById("numSteps").value = count;
        var seqContent = document.getElementById("seqContentWrapper");
        // hier zit een fout. Als er een deleted step nog in de pipeline staat haalt hij de eerste valid step weg ipv een text node.
        // twee mogelijkheden: 
        // 1: check of het text node is.
        // 2: modulo check of het een even aantal steps is. Als alles klopt kan er onmogelijk een even aantal childNodes zijn.
        if (seqContent.childNodes.length % 2 == 0 && seqContent.childNodes.length > 0) {
            seqContent.removeChild(seqContent.childNodes[0]);
            
        }
        
        
        for (var i = 0; i < pl.length; i++) {   // loop through pipeline contents
            if (plUpdated[i] == "0") {   // if the element is not up to date
                // first remove the step representation from the sequencer
                //timeDiff.setStartTime();
                
            
                // IMPROVISE !!!!!!!!!!
                var elementByIndex = seqContent.childNodes[2*i];    // works with moved steps
                var elementById = document.getElementById(pl[i]);   // works with ???, not moved steps though... Keeping this in here for future bugfixing. This value is not currently used.
                var element = elementByIndex;
            
            
                // END IMPROVISE !!!!!!!!!!!!
                if (element == null) {
                    element = document.createElement("div");
                    element.name = "placeholder";
                    seqContent.appendChild(element);
                }
                if (element.nextSibling) {
                    var nextElement = element.nextSibling;
                }
                else {
                    var nextElement = document.createElement("div");
                    nextElement.name = "placeholderNext";
                    seqContent.appendChild(nextElement);
                }
            
                // now request a new step representation and insert it after previousElement
                var holderDiv = document.createElement("div");
                var requestString = "uids="+pl[i];
            
                if (plType[i]) {
                    requestString += "&types="+plType[i];
                }
                // globally declare newDiv so it can be passed to the updateDividers function
                var newDiv;
            
                newAjaxRequest(requestString, "returnStep.php", function(result) {
                    holderDiv.innerHTML = result.responseText;
                    newDiv = holderDiv.childNodes[1];            
                    seqContent.replaceChild(newDiv, element);
                    if (nextElement.name == "placeholderNext") {
                        seqContent.removeChild(nextElement);
                    }
                    plUpdated[i] = "1";
                }, false);
            
                       
                // ALTERNATIVE METHOD TO REPLACECHILD!!!
                //seqContent.removeChild(element);
                //seqContent.insertBefore(newDiv, nextElement);
            
                // Now check if dividers are necessary.
            
                //alert("INSERT CODE FOR UPDATEDIVIDERS HERE!");
                //alert(timeDiff.getDiff());
                
                // If seqContent contains any further entries when the last pipeline uid has been drawn, these are to be removed.
                // This happens after the user performs a "delete step" operation and there is now one fewer step in the array than in seqContent.
                // All steps other than the first and the last are auto-adjusted due to "out of date" flag.
                if (i >= pl.length - 1) {
                    
                    // This is a really complicated way of saying "Delete the next two elements if they exist"
                    while ((nextElement = newDiv.nextSibling) != undefined) {
                        seqContent.removeChild(nextElement);
                    }
                    
                }
                // Do the same check for the first step in the pipeline. 
                // Is there no more elegant solution for this? For instance, check if a step should be in the pipeline in the first place, else delete it and it's following divider
                
                
                updateDividers(newDiv);
            }
        }
    
        // afterwards, convert the arrays back to strings and set to appropriate fields
        var newUpdatedString = arrayToString(plUpdated, ",");
        document.getElementById("pipelineUpdatedField").value = newUpdatedString;
    }
}






function updateDividers (element) {
    var seqContent = document.getElementById("seqContentWrapper");
    
    if (element.nextSibling){
        var nextElement = element.nextSibling;
    }
    if (element.previousSibling) {
        var previousElement = element.previousSibling;
    }
    
    if (nextElement){
        if (!hasClass(nextElement, "divider")) {
            var holderDiv = document.createElement("div");
            newAjaxRequest("uids=divider&types=divider", "returnStep.php", function(result) {
                holderDiv.innerHTML = result.responseText;
                var newDivider = holderDiv.childNodes[1];
                seqContent.insertBefore(newDivider, nextElement);
            }, false);
        }
    }
    
    if (previousElement){
        if (!hasClass(previousElement, "divider")) {
            var holderDiv = document.createElement("div");
            newAjaxRequest("uids=divider&types=divider", "returnStep.php", function(result) {
                holderDiv.innerHTML = result.responseText;
                var newDivider = holderDiv.childNodes[1];
                seqContent.insertBefore(newDivider, element);
            }, false);
        }
    }
    
}






function savePipeline (confirmSave) {
    if (confirmSave==true) {
        var answer = confirm("Save changes to pipeline?");
    }
    else {
        var answer = true;
    }
    
    
    if (answer) {
        var pipeline = document.getElementById("pipelineStringField").value;
        pipeline = pipeline.slice(0, pipeline.length - 1);
        var types = document.getElementById("pipelineTypeField").value;
        types = types.slice(0, types.length - 1);
        var session = document.getElementById("sessionField").value;
        var requestString = "uids="+pipeline+"&types="+types+"&sessionUid="+session;
        console.log(requestString);
        
        
        var success;
        newAjaxRequest(requestString, "savesession.php", function(result){
            success = result.responseText;
        }, false);
        console.log(success);
    }
}

function t_setOutOfDate() {
    // if a step is currently selected
    var uid = document.getElementById("selectedStepField").value;
    if (uid == "") {
        alert("No step selected!");
        return;
    }
    
    // convert to arrays for looping
    var plString = document.getElementById("pipelineStringField").value;
    var plTypeString = document.getElementById("pipelineTypeField").value;
    var plUpdatedString = document.getElementById("pipelineUpdatedField").value;
    
    
    var pl = stringToArray(plString, ",");    
    var plType = stringToArray(plTypeString, ",");    
    var plUpdated = stringToArray(plUpdatedString, ",");    
    
    // set the targeted element's tag for "Needs updating"
    plUpdated[pl.indexOf(uid)] = "0";
    
    // then rewrite the content strings and set them to the appropriate fields
    var newUpdatedString = arrayToString(plUpdated, ",");
    document.getElementById("pipelineUpdatedField").value = newUpdatedString;
}

function stringToArray(s, c) {
    var a = s.split(c);
    for (var i = 0; i < a.length; i++) {    // remove empty items
        if (a[i] == "") {
            a.splice(i, 1);
            i--;
        }
    }
    return a;
}

function arrayToString(a, c) {
    var s = "";
    for (var i = 0; i < a.length; i++) {
        if (a[i] != "") {
            s += a[i]+c;
        }
    }
    return s;
}


function editStep() {
    // eerst saven, dan de object type zoeken in de typelist, dan redirecten naar de goede pagina
    savePipeline(false);
    
    var pipeline = document.getElementById("pipelineStringField").value;
    var pipelineTypes = document.getElementById("pipelineTypeField").value;
    var selectedStep = document.getElementById("selectedStepField").value;
    pipeline = stringToArray(pipeline, ",");
    pipelineTypes = stringToArray(pipelineTypes, ",");
    var stepType = pipelineTypes[pipeline.indexOf(selectedStep)];
    
    var postForm = document.createElement("form");
    postForm.action = stepType.toLowerCase()+"Editor.php";      //redirect to "type"editor.php
    postForm.method = "POST";
    var objectUid = document.createElement("input");
    objectUid.type = "hidden";
    objectUid.value = selectedStep;
    postForm.appendChild(objectUid);
    postForm.submit();
}



function moveStep (direction) {
    // misschien maar eens een loadhiddenfields functie maken voor deze meuk?
    
    var selectedStep = document.getElementById("selectedStepField").value;
    
    if (selectedStep != undefined && selectedStep != "") {
        var pipeline = stringToArray(document.getElementById("pipelineStringField").value, ",");
        var pipelineTypes = stringToArray(document.getElementById("pipelineTypeField").value, ",");
        var updated = stringToArray(document.getElementById("pipelineUpdatedField").value, ",");
    }
    else {
        alert("No step selected! Unable to move");
        return;
    }
    
    var id = pipeline.indexOf(selectedStep);
    if ((id == 0 && direction == -1) || (id == pipeline.length-1 && direction == 1)){
        alert("Cannot move out of bounds!");
        return;
    }
    var tempString = pipeline[id], tempType = pipelineTypes[id];
    
    pipeline[id] = pipeline[id+direction];
    pipelineTypes[id] = pipelineTypes[id+direction];
    pipeline[id+direction] = tempString;
    pipelineTypes[id+direction] = tempType;
    updated[id] = "0";
    updated[id+direction] = "0";
    
    pipeline = arrayToString(pipeline, ",");
    pipelineTypes = arrayToString(pipelineTypes, ",");
    updated = arrayToString(updated, ",");
    
    document.getElementById("pipelineStringField").value = pipeline;
    document.getElementById("pipelineTypeField").value = pipelineTypes;
    document.getElementById("pipelineUpdatedField").value = updated;
    updateSequencer();
    
    // Then reselect the previously selected step
    addClass(document.getElementById(selectedStep), "selected");
}