// constants to define the title of the alert and button text.
        var ALERT_TITLE = "Information:";
        var OK_BUTTON_TEXT = "Ok";
        var CANCEL_BUTTON_TEXT = "Cancel";
        var NO_BUTTON_TEXT = "No";
        var OK_BTN_IMAGE = "get btn from css style";
        var CANCEL_BTN_IMAGE = "get btn from css style";
        var _confirm = false;

        // 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);
            }
                /* confirm can be overridden like below,
                        ** we decided to use a better custom confirm function
                                 window.confirm = function(txt, onYes, onNo) {
                                    createCustomConfirm(txt, onYes, onNo);
                                 }
                        */
        }

        /* create a custom alert - it overrides the default browser alert so you can call it by using alert();
            ** txt = HTML that must be displayed
            ** dontShowOk = Optional - hide the Ok button - this is used for when you
            ** simply want to display a message while the page re-loads, but then you have
            ** to call the function like this... createCustomAlert('text...',true) and not like this
            ** alert('text...',true)
            */
        function createCustomAlert(txt, dontShowOk)
        {
            // shortcut reference to the document object
            d = document;

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

            // create the modalContainer div as a child of the BODY element
            mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
            mObj.id = "alertContainer";
             // 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.id = "alertBox";
            // MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
            //if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
            // center the alert box
            alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";

            // 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.appendChild(d.createTextNode(txt));
            //msg = alertObj.appendChild(d.createElement("div"));
            //msg.innerHTML = txt;


            if (dontShowOk == undefined) {
                // ok button
                if (OK_BTN_IMAGE != undefined) {
                        // create an image button
                        okbtn = alertObj.appendChild(d.createElement("div"));
                        okbtn.id = "okBtn1";
                        okbtn.title = OK_BUTTON_TEXT;
                        okbtn.onclick = function() { removeCustomAlert(); return false; }
                } else {
                        // else create an anchor element to use as the confirmation button.
                        okbtn = alertObj.appendChild(d.createElement("a"));
                        okbtn.id = "Btn";
                        okbtn.appendChild(d.createTextNode(OK_BUTTON_TEXT));
                        okbtn.href = "#";
                        okbtn.onclick = function() { removeCustomAlert(); return false; }
                }
            }
        }

        function createCustomProgress(txt, dontShowOk)
        {
            // shortcut reference to the document object
            d = document;

            dontShowOk = true

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

            // create the modalContainer div as a child of the BODY element
            mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
            mObj.id = "alertContainer";
             // 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.id = "alertBox";
            // MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
            //if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
            // center the alert box
            alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";

            // 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("div"));
            msg.innerHTML = txt;

            // progress meter div
            progress = alertObj.appendChild(d.createElement("div"));
            progress.id = "progress";

            if (dontShowOk == undefined) {
                // ok button
                if (OK_BTN_IMAGE != undefined) {
                        // create an image button
                        okbtn = alertObj.appendChild(d.createElement("div"));
                        okbtn.id = "okBtn1";
                        okbtn.title = OK_BUTTON_TEXT;
                        okbtn.onclick = function() { removeCustomAlert(); return false; }
                } else {
                        // else create an anchor element to use as the confirmation button.
                        okbtn = alertObj.appendChild(d.createElement("a"));
                        okbtn.id = "Btn";
                        okbtn.appendChild(d.createTextNode(OK_BUTTON_TEXT));
                        okbtn.href = "#";
                        okbtn.onclick = function() { removeCustomAlert(); return false; }
                }
            }
        }

        /* create a custom confirm
            ** txt = HTML that must be displayed
            ** onYes = js function to run when OK button is clicked
            ** useNo = Optional - use a No button instead of a Cancel button
            ** onNo = Must be set if useNo is set - js function to use when No button is clicked
            */
        function createCustomConfirm(txt, onYes, useNo, onNo)
        {
            // shortcut reference to the document object
            d = document;

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

            // create the modalContainer div as a child of the BODY element
            mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
            mObj.id = "alertContainer";
             // 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.id = "alertBox";
            // MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
            //if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
            // center the alert box
            alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";

            // 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.appendChild(d.createTextNode(txt));

            // ok button
            if (OK_BTN_IMAGE != undefined) {
                    // create an image button
                    okbtn = alertObj.appendChild(d.createElement("div"));
                    okbtn.id = "okBtn";
                    okbtn.title = OK_BUTTON_TEXT;
                    okbtn.onclick = function() { removeCustomAlert(); onYes(); return false; }
            } else {
                    // else create an anchor element to use as the confirmation button.
                    okbtn = alertObj.appendChild(d.createElement("a"));
                    okbtn.id = "Btn";
                    okbtn.appendChild(d.createTextNode(OK_BUTTON_TEXT));
                    okbtn.href = "#";
                    okbtn.onclick = function() { removeCustomAlert(); onYes(); return false; }
            }

            // determine if a cancel or a no button should be displayed
            if (useNo == undefined) {
                    // cancel button - only used for confirm messages
                    if (CANCEL_BTN_IMAGE != undefined) {
                            // create an image button
                            cancelbtn = alertObj.appendChild(d.createElement("div"));
                            cancelbtn.id = "cancelBtn";
                            cancelbtn.title = CANCEL_BUTTON_TEXT;
                            cancelbtn.onclick = function() { removeCustomAlert(); return false; }
                    } else {
                            // else create an anchor element to use as the confirmation button.
                            cancelbtn = alertObj.appendChild(d.createElement("a"));
                            cancelbtn.id = "Btn";
                            cancelbtn.appendChild(d.createTextNode(CANCEL_BUTTON_TEXT));
                            cancelbtn.href = "#";
                            cancelbtn.onclick = function() { removeCustomAlert(); return false; }
                    }
            } else {
                    // no button - used as an alternative for cancel
                    if (NO_BUTTON_TEXT != undefined) {
                            // create an image button
                            nobtn = alertObj.appendChild(d.createElement("div"));
                            nobtn.id = "noBtn";
                            nobtn.title = NO_BUTTON_TEXT;
                            nobtn.onclick = function() { removeCustomAlert(); onNo(); return false; }
                    } else {
                            // else create an anchor element to use as the confirmation button.
                            nobtn = alertObj.appendChild(d.createElement("a"));
                            nobtn.id = "Btn";
                            nobtn.appendChild(d.createTextNode(NO_BUTTON_TEXT));
                            nobtn.href = "#";
                            nobtn.onclick = function() { removeCustomAlert(); onNo(); return false; }
                    }
            }
        }

        // removes the custom alert from the DOM
        function removeCustomAlert()
        {
            document.getElementsByTagName("body")[0].removeChild(document.getElementById("alertContainer"));
        }