//------------------------------------------------------------
// $Id: cameras.js 1531 2007-05-22 23:18:30Z samuel_igc $
// Supports cameras functionality (cameras.jsp etc.)
//------------------------------------------------------------

//------------------------------------------------------------
// Support for Cameras page, and drawing its contents
//------------------------------------------------------------

// Add a new row to corridors nav (LH side)
// Format: <li><a href="#a2">I-880 Corridor</a></li>
function drawCorridorNavRow(data, href) {
    //alert("drawCorridorNavRow data = " + data);
    var elA, elLI, length, textNode, dest;
    elA = document.createElement("a");
    dest = document.getElementById("corridorUL");

    length = (dest.childNodes == null) ? 0 : dest.childNodes.length;
    //alert("The list currently has " + length + " rows");
    // For generating href here, dest must contain 1 comment ONLY!
    //href = "#a" + length;  // auto-generate href here

    elA.href = href;
    elLI = document.createElement("li");
    textNode = document.createTextNode(data);
    elA.appendChild(textNode);
    elLI.appendChild(elA);
    dest.appendChild(elLI);
}


// Add a corridor heading row to the body table (cam list).
function drawCorridorBodyHeading(data, id) {
    var elTR = document.createElement("tr"); // the new row
    
    var elTD1 = document.createElement("td");
    var elH2 = document.createElement("h2");
    elH2.setAttribute("id", id);
    elH2.appendChild(document.createTextNode(data));
    elTD1.appendChild(elH2);
    elTR.appendChild(elTD1);

    /* disable heading: Camera Favorites List
    var elTD2 = document.createElement("td");
    elTD2.colspan = 4;
    elTD2.setAttribute("class", "flushCenter");
    elTD2.className="flushCenter";
    elTD2.appendChild(document.createTextNode("Camera Favorites List"));
    */
    
    /* disable next to corridor name: Clear All
    var elA2 = document.createElement("a");
    elA2.href = "#"; // TODO: make something real
    elA2.className = "right";
    elA2.setAttribute("onclick", "clearAllRequest(); return false;");
    elA2.appendChild(document.createTextNode("Clear All"));
    elTD2.appendChild(elA2); 
    */

    // Need blank filler TDs so that the border-bottom gets drawn
    var elTD = document.createElement("td"); // filler
    elTD.appendChild(document.createTextNode(" "));
    elTR.appendChild(elTD);
    
    elTD = document.createElement("td"); // filler
    elTD.appendChild(document.createTextNode(" "));
    elTR.appendChild(elTD);
    
    elTD = document.createElement("td"); // filler
    elTD.appendChild(document.createTextNode(" "));
    elTR.appendChild(elTD);
    
    elTD = document.createElement("td"); // filler
    elTD.appendChild(document.createTextNode(" "));
    elTR.appendChild(elTD);
    
    var tbl = document.getElementById("locationList");
    tbl.getElementsByTagName("TBODY")[0].appendChild(elTR);
}


// Add a camera group's name on the RH list.
// (Returns the TR element so we can add cams below it.)
function drawCameraGroupRow(descrip) {
    var elTR = document.createElement("tr");
    var elTD = document.createElement("td");
    elTD.appendChild(document.createTextNode(descrip));
    elTR.appendChild(elTD);

    var tbl = document.getElementById("locationList");
    tbl.getElementsByTagName("TBODY")[0].appendChild(elTR);
    return elTR;
}


// Helper for drawCorridorsAndCams
// Pulls out a cam for the given direction.
// Returns index into array or -1 if not found.
function extractDirectionalCamera(array, direction) {
    for (var i = 0; i < array.length; i++) {
        if (array[i].getAttribute("direction") == direction)
            return i;
    }
    return -1;
}


// Add one <camera> to the cam list table
function drawOneCam(elTR, camXml, directionLabel) {
    var camId = camXml.getAttribute("id");

    var elTD = document.createElement("td");
    var elInput = document.createElement("input");
    elInput.type  = "checkbox";
    elInput.id = "check" + camId;
    // This works for FF but not IE:
    // elInput.setAttribute("onclick", "handleCheckbox(\"" + camId + "\");");
    elTD.appendChild(elInput);

    var elA = document.createElement("a");
    elA.href = "#";
    elA.setAttribute("onClick", "drawCameraPopup(" + camId + ");return false;");
    elA.href = "javascript:drawCameraPopup(" + camId + ");";
    elA.appendChild(document.createTextNode(directionLabel));
    var foo = "drawCameraPopup(" + camId + ");return false;";
    elA.onClick = foo;
    elA.setAttribute("oncontextmenu", "fuckme2();");
    elTD.appendChild(elA);
    
    elTR.appendChild(elTD);
    // needed to get onclick to work w/ IE:
    document.getElementById("check"+camId).onclick = function() { 
        clickedCheckbox(this); }
}


// Add camera placeholder to the cam list table 
// (use instead of drawOneCam when no cam this direction)
function drawFakeCam(elTR) {
    var elTD = document.createElement("td");
    elTD.appendChild(document.createTextNode(" "));
    elTR.appendChild(elTD);
}


// Main function to put corridor and cam data on the screen
// corridorXml = <corridorList><corridor id="1" name="foo">...</corridorList>
function drawCorridorsAndCams(corridorXml) {
    corridorElementArray = corridorXml.getElementsByTagName("corridor");
    var i;
    for (i = 0; i < corridorElementArray.length; i++) {
        corrXml = corridorElementArray[i];

        cameraGroupArray = corrXml.getElementsByTagName("cameraGroup");
        if (cameraGroupArray.length > 0) {
            // Add to corridor nav on LH side
            drawCorridorNavRow(corrXml.getAttribute("name") + " Corridor", 
                                            "#a"+(i+1) );
            // Add to cam list, main body
            drawCorridorBodyHeading(corrXml.getAttribute("name") + " Corridor", "a"+(i+1));
    
            // Get the camera groups for this corridor
            for (var j = 0; j < cameraGroupArray.length; j++) {
                oneGroupXml = cameraGroupArray[j];
                // group's description is in first cam's "location" attrib
                camArray = oneGroupXml.getElementsByTagName("camera");
                if (camArray.length > 0) {
                    var s = camArray[0].getAttribute("location");
                    var elTR = drawCameraGroupRow(s);
                
                    northcam = extractDirectionalCamera(camArray, "N");
                    if (northcam > -1)
                        drawOneCam(elTR, camArray[northcam], "North");
                    else
                        drawFakeCam(elTR);
    
                    southcam = extractDirectionalCamera(camArray, "S");
                    if (southcam > -1) 
                        drawOneCam(elTR, camArray[southcam], "South");
                    else
                        drawFakeCam(elTR);
    
                    eastcam = extractDirectionalCamera(camArray, "E");
                    if (eastcam > -1) 
                        drawOneCam(elTR, camArray[eastcam], "East");
                    else
                        drawFakeCam(elTR);
    
                    westcam = extractDirectionalCamera(camArray, "W");
                    if (westcam > -1) 
                        drawOneCam(elTR, camArray[westcam], "West");
                    else
                        drawFakeCam(elTR);
                }
            }
        }   
            
    }
    setAjaxStatusMsg("");
}


// Fetch list of corridors (and cams!)
// Builds the corridor list on LH side and cams on RH side
function ajaxGetCorridorsAndCams(callback) {    
    var ajaxComponent = new Object();
    setAjaxStatusMsg("LOADING CORRIDORS");

    ajaxComponent.ajaxUpdate = function(request) {  
        //alert("getCorridors.ajaxUpdate sent us " + request.responseText );
        callback(request.responseXML);
    };

    ajaxComponent.handleError = function(request) { 
        alert("Ajax error loading corridors");
        setAjaxStatusMsg("ERROR LOADING CORRIDORS");
//        alert("Ajax error: " + " status " + request.status + ", " + request.statusText ) ; 
    };

    this.ajaxRequest = null;
    ajaxRequest = new 
        AjaxHelper(ajaxComponent, "/accma/cameraFave?action=corridors");
    ajaxRequest.sendRequest();
}


// Callback with the cameraGroup+camera list
function ajaxGetCorridorsAndCamsCallback(xml) {
    // paint the data
    drawCorridorsAndCams(xml);

    // now fill in the checkboxes
    ajaxGetUserCams(drawUserCamChecks);
}


// This fills in the checkboxes to match the list of userCams.
// Called as a result of ajax txn.
// Param xml format: <getCameraFavesXml userId="23" list="1,2,3" />
function drawUserCamChecks(xml) {
    var el = xml.getElementsByTagName("getCameraFavesXml")[0];
    var list = el.getAttribute("list");  // comma-sep list
    var listArray = list.split(",");
    var obj;
    
    // Clear all the checkboxes on page
    var inputElements = document.getElementsByTagName("input");
    for (var i = 0; i < inputElements.length; i++) {
        if (inputElements[i].type == "checkbox") {
            inputElements[i].checked = false;
        }
    }
         
    // Set the checkboxes, by id, in the list
    for (var i = 0; i < listArray.length; i++) {
        //alert("Setting checkbox " + listArray[i]);
        var j = listArray[i] - 0;
        obj = document.getElementById("check" + (listArray[i]-0))
        if (obj != null) {
            obj.checked = true;
        }
    }
}


// Send request to servlet to add or remove a favorite camera
var ajaxAddRemoveCam = function(id, action) {
    var ajaxComponent = new Object();
    ajaxComponent.ajaxUpdate = function(request) {
            setAjaxStatusMsg("");
        };

    ajaxComponent.handleError = function(request) {
            setAjaxStatusMsg("");
            alert("Ajax error during ajaxAddRemoveCam");
        };

    var ajaxRequest = null;
    if ("add" == action) {
        ajaxRequest = new AjaxHelper(ajaxComponent, '/accma/cameraFave?action=addCam&camId=' + id);
    } else if ("delete" == action) {
        ajaxRequest = new AjaxHelper(ajaxComponent, '/accma/cameraFave?action=deleteCam&camId=' + id);
    } else if ("deleteAll" == action) {
        // Send special value -2 == delete all
        ajaxRequest = new AjaxHelper(ajaxComponent, '/accma/cameraFave?action=deleteCam&camId=-2');
    } else {
        alert("Invalid request in ajaxAddRemoveCam");
        return;
    }
    
    setAjaxStatusMsg("SENDING");
    ajaxRequest.sendRequest();
}


// Handle check/uncheck of one of the camera checkboxes
var clickedCheckbox = function(el) {
    var id = el.getAttribute("id").substring(5);  // "checkNN"
    var stat = el.checked;
    
    // TODO: indicate the element is in transit
    // (then in callback clean it up)
    if (stat) {
        ajaxAddRemoveCam(id, "add");
    } else {
        ajaxAddRemoveCam(id, "delete");
    }
    
}

// Handle "clear all" click
// TODO: make this per-corridor?  (and re-enable clear-all next to corr hdg)
var clickedClearAll = function() {
    var elements = document.getElementsByTagName("input");
    for (var i=0; i<elements.length; i++) {
        elements[i].checked = false;
    }
    ajaxAddRemoveCam(null, "deleteAll");
}


//------------------------------------------------------------
// Support for MyCameras button
//------------------------------------------------------------

// Handle "MyCameras" click
function clickedMyCameras() {
    ajaxGetUserCams(myCamerasUserCamsCallback);
}

// Continuation of clickedMyCameras
function myCamerasUserCamsCallback(xml) 
{
    var el = xml.getElementsByTagName("getCameraFavesXml")[0];
    var camList = el.getAttribute("list");  // comma-sep list
    if (camList != null && camList.length > 0) {
        
        // compute window size needed to hold all the cams
        var listArray = camList.split(/, */);
        var sizeX = 40 + parseInt(listArray.length/2 + 0.9) * 400;
       
        var sizeY = 390;  // one cam high
        if (listArray.length > 1) {
            sizeY = 780; // two cams high
        }
        
        // create the mycameras envelope window
        window.open("mycampopup.jsp?" + camList, 
                    "_blank", 
                    "width=" + sizeX + ",height=" + sizeY + 
                    ",scrollbars=1,toolbar=0,titlebar=1,directories=0," +
                    "menubar=0,resizable=1,status=0");

    } else {
        alert("You don't have any cameras marked.");
    }
}