/**
 * pii-details.js
 * Public Interruption Information - Show Location Details - JavaScript
 */

/**
 * ID attribute value for the location details <div>.
 */
var DETAILS_DIV_ID = "pii_locationDetails";

/**
 * Width of the location details <div> element, in pixels.
 */
var DETAILS_DIV_WIDTH = 300;

/**
 * ID attribute value for the child <div> containing the link to close the
 * location details <div>.
 */
var CLOSE_LINK_DIV_ID = "pii_closeLocationDetails";

/**
 * ID attribute for the <a> that actually holds the close button.
 */
var CLOSE_LINK_INNER_DIV_ID = "pii_closeLocationDetailsInner";

/**
 * ID attribute value for the child <div> containing the actual content within
 * the location details <div>.
 */
var CONTENT_DIV_ID = "pii_locationDetailsContent";

/**
 * ID attribute value for the parent of the location details <div>, used to 
 * correctly parent the details <div>.
 */
var DETAILS_DIV_PARENT_ID = "mainContent";

/**
 * Display a popup with the given details for a single location.
 * 
 * @param e MouseEvent object.
 * @param name Name of the location.
 * @param faults Fault object.
 * @param etr Estimated Time of Restoration.
 */
function showLocationDetails(e, name, displayName, faults, etr) {
    if (!e || typeof(e) === "undefined") {
        e = window.event;
    }

    // Get a reference to the details <div>; create one if necessary.
    var detailsDiv = document.getElementById(DETAILS_DIV_ID);
    if (detailsDiv == null || typeof(detailsDiv) === "undefined") {
        detailsDiv = document.createElement("div");
        detailsDiv.setAttribute("id", DETAILS_DIV_ID);
        document.getElementById(DETAILS_DIV_PARENT_ID).appendChild(detailsDiv);
    }

    // Remove all old content from the <div>.
    while (detailsDiv.childNodes[0]) {
        detailsDiv.removeChild(detailsDiv.childNodes[0]);
    }

    // Create the close link.
    var closeLinkDiv = document.createElement("div");
    closeLinkDiv.setAttribute("id", CLOSE_LINK_DIV_ID);
    var closeLink = document.createElement("a");
    closeLink.setAttribute("href", "#");
    closeLink.setAttribute("alt", "Close this details box");
    closeLink.onclick = hideLocationDetails;
    closeLink.appendChild(document.createTextNode("X"));
    closeLinkInner = document.createElement("div");
    closeLinkInner.setAttribute("id", CLOSE_LINK_INNER_DIV_ID);
    closeLinkInner.appendChild(closeLink);
    closeLinkDiv.appendChild(closeLinkInner);
    closeLinkDiv.appendChild(document.createTextNode("Details"));

    // Create the child content nodes.
    var contentDiv = document.createElement("div");
    contentDiv.setAttribute("id", CONTENT_DIV_ID);

    // Location name.
    var namePara = document.createElement("p");
    var nameStrong = document.createElement("strong");
    nameStrong.appendChild(document.createTextNode(displayName));
    namePara.appendChild(nameStrong);
    contentDiv.appendChild(namePara);

    // Number of customers affected.
//    var faultsPara = document.createElement("p");
//    faultsPara.appendChild(document.createTextNode(faults));
//    contentDiv.appendChild(faultsPara);

    // Estimated Time of Restoration.
    var etrPara = document.createElement("p");
    etrPara.appendChild(document.createTextNode(etr));
    contentDiv.appendChild(etrPara);

    // Map recentering button (for all but currently selected location).
    var recentreURL = document.location.href.replace(
        /^(.*?location=).*?(&.*)$/, 
        "$1" + escape(name) + "$2");
    if (recentreURL != document.location.href) {
        var recentreButton = document.createElement("input");
        recentreButton.setAttribute("type", "button");
        recentreButton.setAttribute("name", "recentre");
        recentreButton.setAttribute("value", "Recentre on " + name);
        createRecentreOnclick(recentreButton, recentreURL);
        recentreButton.setAttribute("title", "Click to recentre the map on " + name + ".");
        var recentreLinkPara = document.createElement("p");
        recentreLinkPara.appendChild(recentreButton);
        contentDiv.appendChild(recentreLinkPara);
    }

    // Display it.
    detailsDiv.appendChild(closeLinkDiv);
    detailsDiv.appendChild(contentDiv);

    // Put the <div> in the correct location.
    var left = e.clientX + getScrollX() - (DETAILS_DIV_WIDTH / 2);
    var top = e.clientY + getScrollY();
    detailsDiv.style.position = "absolute";
    if ((left + DETAILS_DIV_WIDTH) > document.body.scrollWidth) {
        detailsDiv.style.right = "8px";
    } else {
        detailsDiv.style.left = "" + left + "px";
    }
    detailsDiv.style.top = "" + top + "px";
    detailsDiv.style.width = "" + DETAILS_DIV_WIDTH + "px";

    return false;
}

/**
 * If {@link #showLocationDetails(e, name, faults, etr)} has been previously
 * called, hide the <div> that it displays.
 */
function hideLocationDetails() {
    var detailsDiv = document.getElementById(DETAILS_DIV_ID);
    var parentDiv = document.getElementById(DETAILS_DIV_PARENT_ID);
    if (detailsDiv != null && typeof(detailsDiv) !== "undefined" 
        && parentDiv != null && typeof(parentDiv) !== "undefined") {
        parentDiv.removeChild(detailsDiv);
    }

    return false;
}

/**
 * Function to create the recentre onclick event handler function, while also
 * avoiding accidental closures.
 *
 * @see [http://jibbering.com/faq/faq_notes/closures.html]
 *
 * @param obj Object to add the onclick event handler to.
 * @param url URL that the browser will load when the onclick event is handled.
 */
function createRecentreOnclick(obj, url) {
    obj.onclick = function() {
        document.location = url;
        return false;
    }
    obj = null;
}

/**
 * Cross-browser function to retrieve the horizontal scroll position.
 * 
 * @return Horizontal scroll position, in pixels.
 */
function getScrollX() {
    var scrollX = 0;
    if( document.documentElement && document.documentElement.scrollLeft ) {
        scrollX = document.documentElement.scrollLeft;
    } else if( document.body && document.body.scrollLeft ) {
        scrollX = document.body.scrollLeft;
    } else if( window.pageXOffset ) {
        scrollX = window.pageXOffset;
    } else if( window.scrollX ) {
        scrollX = window.scrollX;
    }
    return scrollX;
}

/**
 * Cross-browser function to retrieve the vertical scroll position.
 * 
 * @return Vertical scroll position, in pixels.
 */
function getScrollY() {
    var scrollY = 0;
    if( document.documentElement && document.documentElement.scrollTop ) {
        scrollY = document.documentElement.scrollTop;
    } else if( document.body && document.body.scrollTop ) {
        scrollY = document.body.scrollTop;
    } else if( window.pageYOffset ) {
        scrollY = window.pageYOffset;
    } else if( window.scrollY ) {
        scrollY = window.scrollY;
    }
    return scrollY;
}