//define initial/collapsed width and hight
var boxWidth = 100;
var boxHeight = 50;

/**
 * debug function is based on the debug function example in the book
 * "Javascript - det definitive guide 4th edition". This example is slightly modyfied.
 * @param string msg  - the debug output msg.
 * @param return      - void
 **/
function debug(msg) {

    //if the box doesn't exists create it.
    if(!debug.box) {

        //notice that the debug.box variable is not declared using var keyword. The scope is global.
        debug.box = document.createElement("div");

        //in order to please internet explorer we uses the style interface instead.
        debug.box.style.position        = "absolute";
        debug.box.style.top             = "5px";
        debug.box.style.left            = "5px";
        debug.box.style.width           = boxWidth + "px";
        debug.box.style.height          = boxHeight + "px";
        debug.box.style.backgroundColor = "#ffffff";
        debug.box.style.overflow        = "hidden";
        debug.box.style.zIndex          = "100";
        debug.box.style.paddingTop      = "20px";
        debug.box.style.border          = "solid 2px #ff0000";
        debug.box.style.fontFamily      = "sans-serif";
        debug.box.style.fontSize        = "12px";

        //add the box as a child of the body element.
        document.body.appendChild(debug.box);

        //add a new div with an event attached. - expands or implodes the debugwindow.
        debug.box.innerHTML = "<div onclick=\"if(this.parentNode.style.height == '50px') expandBox(this.parentNode); else implodeBox(this.parentNode);\" style=\"position:absolute;top:1px;left:1px;color:#ff0000;cursor:pointer;\">Debug</div>";

    }//if(!debug.box)

    //add the debug message.
    var p = document.createElement("p");
        p.appendChild(document.createTextNode(msg));
    debug.box.insertBefore(p,debug.box.getElementsByTagName("p").item(0));

}//debug(msg)

function expandBox(o) {
    o.style.width = "300px";
    o.style.height = "300px";
    o.style.overflow = "auto";
}

function implodeBox(o) {
    o.style.width = boxWidth + "px";
    o.style.height = boxHeight + "px";
    o.style.overflow = "hidden";
}


function getURLParam(strParamName){
    var strReturn = "";
    var strHref = window.location.href;
    if ( strHref.indexOf("?") > -1 ){
        var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
        var aQueryString = strQueryString.split("&");
        for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
            if (aQueryString[iParam].indexOf(strParamName + "=") > -1 ){
             var aParam = aQueryString[iParam].split("=");
             strReturn = aParam[1];
             break;
            }
        }
    }
    return strReturn;
}