The first part of creating a seamless window system is to build what will be your generic alert box. From this box, you can create all other boxes with whatever content you need inside them. You can use the following simple structure to build such boxes:

<div id="popupContainer">
    <div id="popupHandle">
        <div id="closeThis">
            <img id="closeThisImage" src="close.png" alt="Close Window"
                title="Close Window" />
        </div>
        <div id="handleText">Handle Text</div>
    </div>
    <div id="popupContentWrapper">
        <form id="popupForm" action="" method="post">
            <div id="popupContent">
                This is the Pop-up Content!
            </div>
            <div id="popupButtons">
                <input id="btnOk" type="button" value="OK" />
            </div>
        </form>
    </div>
</div>

The box we are building here closely resembles boxes people are used to seeing in a windowed environment. As you’ll recall from the theme of the preceding chapter, the CSS rules that are used to style this box will closely resemble those that are in the rest of the application. For example:

#popupContainer {
    background-color: #226;
    border-color: #000;
    border-style: solid;
    border-width: 1px;
    color: #fff;
    margin: 0;
    padding: 0;
    width: 460px;
}

#popupHandle {
    background-color: transparent;
    color: #fff;
    padding: 3px 3px 1px 0;
}

#closeThisImage {
    border: none;
    float: right;
    padding: 0;
}

#handleText {
    background-color: transparent;
    color: fff;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    padding-left: 6px;
}

#popupContentWrapper {
    background-color: #ddf;
    border-color: #000;
    border-style: solid;
    border-width: 1px;
    color: #000;
    margin: 1px;
}

#popupContent {
    font-family: Tahoma, serif;
    font-size: 1em;
    height: 200px;
    overflow: hidden;
    padding: 15px;
    text-align: left;
}

#popupButtons {
    padding: 10px 0;
    text-align: center;
}

#popupButtons input[type="button"] {
    padding: 2px 20px;
}

This CSS will give us a pop-up box that looks something like Figure 10-4.

Figure 10-4. A generic pop-up box seamlessly integrated into the application

The structure of the pop-up box will allow flexibility when it comes to how the pop-up window will look. This is exactly what we want—something that is easy to integrate and flexible enough in structural design to fit almost any application’s CSS rules.

Of course, having such a pop-up box is completely useless unless it functions like a normal alert window. What is primarily lacking in our window is the ability to drag it around the application, close it, and have it accept a user-supplied value. We will leave accepting a value for a little later, as that will involve some Ajax scripting. One thing we cannot forget is that most pop-up windows steal focus from an application until they are closed. We can accomplish that with just a little JavaScript.

Because keeping focus on the pop up and closing the pop up are closely related, we will focus on both of them at the same time. The easiest part is closing the pop-up window. Consider the following XHTML code:

<div id="popupContainer">
    <div id="popupHandle">
        <div id="closeThis" onclick="closePopUp( );">
            <img id="closeThisImage" src="close.png" alt="Close Window"
                title="Close Window" />
        </div>

As you can see, an onclick event is added to our closing X image that will hide our pop-up box until it is needed again. The first thing we need for our new integrated pop-up window is a way to open it. The openPopUp( ) function shows a predetermined <div> element called popupContainer and sets the focus of the page to the pop-up window’s OK button:

/**
 * This function, openPopUp, "opens" up our custom pop-up window and sets the
 * focus of the page to the pop-up window's /OK/ button.
 */
function openPopUp( ) {
    /*
     * This function is using the Prototype Element.show( ) method instead of just
     * simply doing this:
     *     $('popupContainer').style.display = 'block'; - because we will be using
     *         Prototype (actually script.aculo.us) in a little bit to make the
     *         pop-up window movable anyway.
     */
    Element.show('popupContainer'),
    $('btnOk').focus( );
}

The closePopUp( ) function is pretty simple to implement, because all it needs to do is hide the pop-up window:

/**
 * This function, closePopUp, "closes" down our custom pop-up window.
 */
function closePopUp( ) {
    /*
     * This function is using the Prototype Element.hide( ) method instead of just
     * simply doing this:
     *     $('popupContainer').style.display = 'none'; - because we will be using
     *         Prototype (actually script.aculo.us) in a little bit to make the
     *         pop-up window movable anyway.
     */
    Element.hide('popupContainer'),
}

Keeping focus on the pop-up window is a little more involved. We will need an event that will check to see whether the user tries to change focus from the pop up; when the focus changes, we want the focus to go right back to the pop-up window. We use the focusOnPopUP( ) function to handle this by monitoring the user’s mouse clicks and determining whether the click was on the opened pop-up window or somewhere else on the page. We then must set the focus of the page to the correct element. Example 10-1 accomplishes this.

/**
 * This function, focusOnPopUp, traps all mouse clicks on the page, and when our
 *custom pop-up window is "open", it determines if the click was on the pop-up
 * window or elsewhere on the page.  When the mouse click is not on the pop-up
 * window, the event is stopped and the focus is returned to the pop-up window.
 * Otherwise, the focus goes where it was intended and the event carries on as
 * usual.
 *
 * @param {Event} e The event that has fired in the browser.
 */
function focusOnPopUp(e) {
    /*
     * This is the cross-browser way of getting the target of the event in
     * question.
     */
    var el = ((e.target) ? e.target : e.srcElement);

    /* Is our pop-up window currently active? */
    if (Element.visible('popupContainer')) {
        /* Is the event target our pop-up window? */
        if (el.id != 'popupContainer') {
            var childNode = false;

            /*
             * Walk the DOM and find out if this element is a child of the
             * /popupContainer/
             */
            for (var child = el.parentNode; child.tagName != 'BODY';
                    child = child.parentNode)
                /* Is the target element a childNode of the pop-up container? */
                if (child.id == 'popupContainer') {
                    childNode = true;
                    break;
                }
            /* Is the event part of our pop-up window? */
            if (!childNode) {
                Event.stop(e);
                $('btnOk').focus( );
            /* Give the event target focus, since it is part of the pop-up window */
            } else
                el.focus( );
        }
    /* Give the event target focus, since the pop-up window is not active */
    } else
        el.focus( );
}

KEY_BACKSPACE             8                   Code for the Backspace key.
KEY_TAB                   9                   Code for the Tab key.
KEY_RETURN                13                  Code for the Return key.
KEY_ESC                   27                  Code for the Escape key.
KEY_LEFT                  37                  Code for the Left Arrow key.
KEY_UP                    38                  Code for the Up Arrow key.
KEY_RIGHT                 39                  Code for the Right Arrow key.
KEY_DOWN                  40                  Code for the Down Arrow key.
KEY_DELETE                46                  Code for the Delete key.

Then we need to set an event listener for which this function will act:

Event.observe(document, 'click', focusOnPopUp, true);

We listen for onclick events at the document level because we need to parse through every click that occurs on the page and decide where the event happened. Unfortunately for us, the World Wide Web Consortium (W3C) Document Object Model (DOM) Recommendation does not have onfocus and onblur events associated with <div> elements. Therefore, we are forced to listen to clicks as they occur.

Because our event listener is at the document level, every click will pass through it. You also may have noticed that the last parameter passed to the Event.observe( ) method was set to true instead of the false that we normally pass to it. We do this so that we don’t have to worry about other events bubbling up after this event fires if events need to be stopped. The first thing our function checks for is whether the pop-up window is even visible to the user; if the pop up does not technically “exist” to the user, there is no need to go any further. Once this check is made, the function must determine whether focus is still somewhere in the pop-up window or elsewhere so that focus is placed on the correct element. We accomplish this by walking the DOM backward until we hit either our popupContainer element or the <body> element.

Now our pop-up window is beginning to function like users would expect it to. The functionality that our pop up still lacks, however, is the ability to drag the box anywhere in the application. It’s easiest to do this using one of the JavaScript libraries.

script.aculo.us is a very easy JavaScript library to use when you need dragging functionality. The following JavaScript, executed once the page is loaded, is all you need to make an element draggable in the browser:

new Draggable('popupContainer', {
    handle: 'popupHandle',
    zindex: 99999,
    starteffect: false,
    endeffect: false
})

You can pass several options in the object parameter, as shown in Table 10-1.

Executing the following JavaScript function once the page has loaded will successfully enable our pop-up window to be draggable within the application.

Until Internet Explorer 7 wipes out use of any earlier version of IE, the rendering bug in Figure 10-5 will remain a problem. Fortunately, a simple hack can resolve it.

The simplest way to stop this rendering issue is to make it go away. When our pop-up window is activated, all instances of elements with rendering issues need to be hidden on the page. This way, nothing that the navigation window is dragged over will be rendered incorrectly.

Figure 10-5. An Internet Explorer rendering bug

Here is some simple code you can use to toggle the visibility of windowed elements:

/**
 * This function, hideElements, hides all of the windowed elements (<select>,
 * <object>) in the document from the user so that there is no problem with z-index
 * order on the page while the pop up is "open".
*/
function hideElements( ) {
    /* Get a list of all of the /select/ elements */
    var selects = document.getElementsByTagName('select'),

    /* Loop through the elements and hide all of them */
    for (var i = selects.length; i > 0; i--)
        selects[(i - 1)].style.visibility = 'hidden';

    /* Get a list of all of the /object/ elements */
    var objects = document.getElementsbyTagName('object'),

    /* Loop through the elements and hide all of them */
    for (var i = objects.length; i > 0; i--)
        objects[(i - 1)].style.visibility = 'hidden';
}

/*
 * This function, showElements, shows all of the windowed elements (<select>,
 * <object>) in the document to the user again once the pop-up window is "closed".
 */
function showElements( ) {
    /* Get a list of all of the /select/ elements */
    var selects = document.getElementsByTagName('select'),

    /* Loop through the elements and show all of them */
    for (var i = selects.length; i > 0; i--)
        selects[(i - 1)].style.visibility = 'visible';

/* Get a list of all of the /object/ elements */
    var objects = document.getElementsbyTagName('object'),

    /* Loop through the elements and show all of them */
    for (var i = objects.length; i > 0; i--)
        objects[(i - 1)].style.visibility = 'visible';
}

This is an ugly hack, I admit, but until Internet Explorer 7 replaces Internet Explorer 6 as the dominant browser, all developers will have to live with it. With the addition of this code, our pop-up window should now render and behave like the client’s windows and boxes do. Internet Explorer is the only browser that has these rendering issues; therefore, a simple browser check will take care of when the necessary code needs to be called, as there is no reason to add more burden to a browser that already renders elements correctly.

You can place in the innerHTML property of the window’s <div> element any content that the application needs to add to a navigation window. For example:

$('popupContainer').innerHTML = 'This is the new content to be displayed in
the navigation window.';

This makes it easy for a developer to insert content that has been passed from the server using an Ajax request.

Whether the developer wants to use the responseText property or the responseXML property of the Ajax response is a matter of choice. I already showed you how to import XML using the custom _importNode( ) method from Example 9-3 in Chapter 9. An even easier method is to put the responseText from the Ajax response into the innerHTML of the navigation window.

$('popupContainer').innerHTML = $('popupContainer').
innerHTML;

Information boxes are the easiest boxes to implement, because all they require is some text and a button to close the window. The standard case for the information box is the alert—whether that alert is to allow the user to see when an error has occurred, or just to get the user’s attention before moving on with the application. Figure 10-6 shows a common example of an information box.

Figure 10-6. One example of an information box

We need a way to pass to our information window the data (text or otherwise) that should be passed to the user. Example 10-2 shows what such a function looks like.

/**
 * This function, fillPopUp, takes the data that is passed to it in the /p_data/
 * parameter and sets it equal to the innerHTML of the pop up's content container,
 * and the data that is passed in the /p_header/ parameter and sets it equal to the
 * innerHTML of the pop up's handle text.  It then "opens" the pop-up window.
 *
 * @param {String} p_data The string containing the data to set to the pop-up
 *     element's /innerHTML/.
 * @param {String} p_header The string containing the pop-up element's "header".
 */
function fillPopUp(p_data, p_header) {
    if (p_header)
        $('handleText').innerHTML = p_header;
    else
        $('handleText').innerHTML = 'Alert window';
    $('popupContent').innerHTML = p_data;
    /*
     * This is for Internet Explorer in case the p_data passed in contained event
     * attributes, just to make sure that they fire correctly for the user.
     */
    $('popupContent').innerHTML = $('popupContent').innerHTML;
    /* "Open" up the pop-up window for the user to see. */
    showPopUp( );
}

It’s more important for an application’s custom navigation window to fully replace the functionality of the browser’s prompts and confirmation pop-up boxes. Just as with the default browser’s boxes, the user’s response can quickly be passed to the server with an Ajax call as normal functionality resumes in the application.

All alerts, prompts, confirms, and so on that are presented to the user require the user to interact with the window in some way. In most cases, this interaction is in the form of selecting one button from possible choices, with that choice being used by the application. Figure 10-7 shows an example of this kind of navigation window.

Figure 10-7. A typical confirmation window

The confirmation box in Figure 10-7 expects the user to click either the OK button or the Cancel button at the bottom of the window. Example 10-3 shows how you could implement this box to accept the user’s click and pass it on to an Ajax request to the server.

/**
 * This function, onConfirmOkay, is the handler for an onclick event on the OK
 * button of a confirmation window.  It makes an XMLHttpRequest, passing to the
 * server some predetermined data, reporting back to the user if there is a
 * failure; otherwise, it provides some other functionality.
 *
 * @return Returns false, so the form is not actually submitted.
 * @type Boolean
 */
function onConfirmOkay( ) {
    /*
     * Make sure that the confirmation data that we wish to send to the server is
     * actually there.
     */
    if (!$F('confirmedData'))
        $('confirmedData').value = '001 - Bad confirmation received from user.';
    new Ajax.Request('saveConfirm.php', {
        method: 'post',
        parameters: 'data=' + $F('confirmData'),
        onSuccess: function(xhrResponse) {
            /* Do something here */
        },
        onFailure: function(xhrResponse) {
            /* Send the error message to the user */
            fillPopUp('There was an internal error with the application: <br />' +
                xhrResponse.statusText);
        }
    });
    /* "Close" the confirmation window after the Ajax request has gone out */
    closeConfirm( );
    return (false);
}

/**
 * This function, onConfirmCancel, is the handler for an /onclick/ event on the
 * Cancel button of a confirmation window.  It closes the confirmation window after
 * clearing out whatever input was to be confirmed.
 *
 * @return Returns false, so the form is not actually submitted.
 * @type Boolean
 */
function onConfirmCancel( ) {
    /* Clear out the input box being confirmed */
    $('confirmedData').value = '';
    /* "Close" the confirmation window so the user can do something else */
    closeConfirm( );
    return (false);
}

/* Open up a confirmation window */
var confirmationQuestion = 'Are you sure you want to leave this page before you ' +
    'have completed all of your answers to this test?';
fillConfirmation(confirmationQuestion, 'Are you sure you want to leave?'),

/**
 * This function, fillConfirmation, takes the data that is passed to it in the
 * /p_data/ parameter and sets it equal to the /innerHTML/ of the confirmation
 * window's content container, and the data that is passed in the /p_header/
 * parameter and sets it equal to the /innerHTML/ of the confirmation window's
 * handle text.  It then "opens" the confirmation window.
 *
 * @param {String} p_data The string containing the data to set to the pop-up
 *     element's /innerHTML/.
 * @param {String} p_header The string containing the pop-up element's "header".
 */
function fillConfirmation(p_data, p_header) {
    if (p_header)
        $('handleConfirmText').innerHTML = p_header;
    else
        $('handleConfirmText').innerHTML = 'Alert window';
    $('confirmContent').innerHTML = p_data;
    /*
     * This is for Internet Explorer in case the p_data passed in contained event
     * attributes, just to make sure that they fire correctly for the user.
     */
    $('confirmContent').innerHTML = $('confirmContent').innerHTML;
    /* "Open" up the confirmation window for the user to see. */
    showConfirm( );
}

The only difference from our first information window is that we need two buttons, and they must be wired to events, like this:

<div id="popupButtons">
    <input id="btnConfirmOk" type="button" value="OK"
        onclick="return onConfirmOk( );" />&nbsp;&nbsp;&nbsp;
    <input id="btnConfirmCancel" type="button" value="Cancel"
        onclick="return onConfirmCancel( );" />
</div>

The prompt window shown in Figure 10-8 leads the way to even more important navigation windows that can be created. Example 10-4 shows the code for a working prompt window.

Figure 10-8. A typical prompt window

/**
 * This is the global prompt variable that can be accessed by the application at
 * any time.
 */
var promptInputData = '';

/**
 * This function, onPromptOkay, is the handler for an onclick event on the OK
 * button of a prompt window.  It sets a variable that is accessible to the rest of
 * the application.
 *
 * @return Returns false, so the form is not actually submitted.
 * @type Boolean
 */
function onPromptOkay( ) {
    /* Make sure that the prompt data that we wish to set is actually there */
    if (!$F('promptData')) {
        promptInputData = '';
        /* Set up a new event for the information window */
        try {
            Event.observe($('btnOk'), 'click', firstPrompt( ), false);
        } catch (ex) {}
        fillPrompt('You did not fill anything in the input field.',
            'There was a problem'),
    } else {
        /* Set our global variable to the user's input */
        promptInputData = $F('promptData'),
        /* Clean up after ourselves for the next use */
        $('promptData').value = '';
    }
    /* "Close" the prompt window after the Ajax request has gone out */
    closePrompt( );
    return (false);
}

/**
 * This function, onPromptCancel, is the handler for an /onclick/ event on the
 * Cancel button of a prompt window.  It closes the prompt window after clearing
 * out whatever input was prompted for.
 *
 * @return Returns false, so the form is not actually submitted.
 * @type Boolean
 */
function onPromptCancel( ) {
    /* Clear out the input box being prompted for */
    $('promptData').value = '';
    promptInputData = '';
    /* "Close" the pop-up window so the user can do something else */
    closePopUp( );
    return (false);
}

/**
 * This function, firstPrompt, is the handler for the page load, and for re-
 * prompting the user if there is an issue with any previous prompt.  It calls the
 * prompt window.
 */
function firstPrompt( ) {
    fillPrompt('What should we call you?', 'Name, please...'),
}

/**
 * This function, fillPrompt, takes the data that is passed to it in the /p_data/
 * parameter and sets it equal to the /innerHTML/ of the prompt window's content
 * container, and the data that is passed in the /p_header/ parameter and sets it
 * equal to the /innerHTML/ of the prompt window's handle text.  It then "opens"
 * the prompt window.
 *
 * @param {String} p_data The string containing the data to set to the pop-up
 *     element's /innerHTML/.
 * @param {String} p_header The string containing the pop-up element's "header".
 */
function fillPrompt(p_data, p_header) {
    if (p_header)
        $('handlePromptText').innerHTML = p_header;
    else
        $('handlePromptText').innerHTML = 'Alert window';
    $('promptContent').innerHTML = p_data;
    /*
     * This is for Internet Explorer in case the p_data passed in contained event
     * attributes, just to make sure that they fire correctly for the user.
     */
    $('promptContent').innerHTML = $('promptContent').innerHTML;
    /* "Open" up the prompt window for the user to see. */
    showPrompt( );
}

Again, prompts would require only a small change from confirmation windows in that the attribute events would fire off different functions, like so:

<div id="popupButtons">
    <input id="btnPromptOk" type="button" value="OK"
        onclick="return onPromptOk( );" />&nbsp;&nbsp;&nbsp;
    <input id="btnPromptCancel" type="button" value="Cancel"
        onclick="return onPromptCancel( );" />

    </div>

The other windows I alluded to contain larger forms that can be passed directly to the server from the navigation window. At the same time, the application can also use this information without having to wait for the server to send back a response. Example 10-5 shows how this can work.

/**
 * This function, onPromptOkay, is the handler for the /onclick/ event of the OK
 * button of our advanced form pop-up window.  It checks to make sure that all of
 * the required fields are filled out by the user, then makes an XMLHttpRequest to
 * send the information to the server to be saved while it lets the application go
 * on with its normal functions.  The XMLHttpRequest response is parsed only if an
 * error occured in the transaction.
 *
 * @return Returns false, so the form is not actually submitted.
 * @type Boolean
 */
 function onPromptOkay( ) {
    /* Are the required fields in the pop-up set? */
    if (!$F('lastName') || !F('city') || $F('zipCode') || $F('email')) {
        fillPrompt('You did not fill in all of the required input fields.',
            'Fill in all required fields'),
        $('btnOk').focus( );
    } else {
        /* Create the parameter string for the form */
        var params = 'last=' + $F('lastName') +
            (($F('firstName')) ? '&first=' + $F('firstName') : '') +
            (($F('address')) ? '&address=' + $F('address') : '') +
            '&city=' + $F('city') +
            (($F('state')) ? '&state=' + $F('state') : '') +
            '&zip=' + $F('zipCode') +
            (($F('phone')) ? '&phone=' + $F('phone') : '') +
            '&email=' + $F('email'),

        new Ajax.Request('saveConfirm.php', {
            method: 'post',
            parameters: params,
            onFailure: function(xhrResponse) {
                /* Send the error message to the user */
                fillPopup('There was an internal error with the application: <br />'
                    + xhrResponse.statusText);
            }
        });
    }
    /* "Close" the prompt window after the Ajax request has gone out */
    closePrompt( );
    return (false);
}

Figure 10-9 shows how this would look.

Figure 10-9. A larger form in the navigation window