﻿function drawHelp(clicked) {
    var overlay = document.getElementById(ctrlIWPW + "overlay");
    var framed = document.getElementById(ctrlIWPW + "framed");
    var bodycopy = document.getElementById("bodycopy");
    var centerBox = document.getElementById(ctrlIWPW + "centerBox");
    var innerBox = document.getElementById(ctrlIWPW + "innerBox");

    centerBox.style["width"] = "293px";
    centerBox.style["margin"] = "auto";
    centerBox.style["cssFloat"] = "none";
    centerBox.style["styleFloat"] = "none";

    innerBox.innerHTML = "<img src=\"images/popup_top.gif\" alt=\"\" style=\"height: 2px; width: 293px; \"/>\
                          <div style=\"float: left; width: 283px; padding: 5px; background-image: url(images/popup_mid.gif);\">\
                              <img src=\"images/popup_close.gif\" alt=\"\" style=\"float: right; height: 9px; width: 9px;\" />\
                              <div style=\"float: left; width: 253px; padding-left: 15px;\">\
                                <div class=\"red_hl\">title</div><P> some really long text some really long \
                                text some really long text some really long text some really \
                                long text some really long text some really long text some really \
                                long text some really long text</P>\
                              </div>\
                          </div>\
                          <img src=\"images/popup_bot.gif\" alt=\"\" style=\"height: 13px; width: 293px;\"/>";
    innerBox.style["width"] = "293px";
    innerBox.style["padding"] = "0 0px";
    innerBox.style["margin"] = "auto";
    innerBox.style["styleFloat"] = "left"; //for ie only sets float
    innerBox.style["cssFloat"] = "left"; //all other browsers set float
    innerBox.style["border"] = 0;

    overlay.style["display"] = "block";
    framed.style["display"] = "block";

    framed.style.height = centerBox.offsetHeight + "px";
    framed.style.width = centerBox.offsetWidth + "px";
    framed.style.top = GetTop(centerBox) + "px";
    framed.style.left = GetLeft(centerBox) + "px";

    overlay.style["width"] = (centerBox.offsetWidth) + "px"; //-2 border
    overlay.style["height"] = (centerBox.offsetHeight) + "px"; //-1 border
    
    overlay.style.left = (GetLeft(clicked) - centerBox.offsetWidth + 30) + "px";
    overlay.style.top = (GetTop(clicked) - innerBox.offsetHeight) + "px";

}