﻿/*********************************************************************************************************************************************
YNPOPUPS.js
Written by Robert Plates
Copyright (c) 2010 Genesis Software Corp.

These are functions that allow a series of popups to be displayed from a web page that are centered or positioned on the
page as per your directions. For the most part this library was tested against the Internet Explorer, Opera, Safari, Firefox and Google Chrome browsers.

What is done. The functions insert a "named" div element to the document as per directions. The style of the div is modified as per the arguments to the functions. 
The default "appearance" elements of the style attribute can be overridden to suit your application. The default "style" is to appear as a 3D box similar to old "windows"
desktop application buttons.

The following functions defined in this source file provide pop-up functionality:

MssgBox: A Pop-up Box with a prompt where the user dismisses the pop-up by clicking an OK button
showNoticeBox: A Pop-up Box with a prompt where the the pop-up is dismissed by a subsequent call to hideNoticeBox
hideNoticeBox: a function that will hide any popups displayed by showNoticeBox.
YNMssg: A Pop-up Box with a prompt where the user dismisses the pop-up by clicking Yes/No buttons **
UserQuestion: A Pop-up Box with a prompt where the user type in the answer to the prompt and dismisses the pop-up by clicking an OK or Cancel button **

** These functions require a "response handler" function to process the user's response. 
The response handler receives a string value as an argument/parameter to the function indicating the user's response. 
For YNMssg: the value will be "Yes" or "No".
For UserQuestion: the value will be "Cancel" when the user clicks the Cancel button. Otherwise the value will be what the user typed into the response input element.

KNOWN ISSUES:
###############  Internet Explorer ###############  
11/4/2010: I had a problem in that the "div" style (which is responsible for the "Attributes" for the surrounding div) was not being honored or
was being ignored in this browser. After much testing I discovered that in the server code there was code writing to the 
page in the form of "Response.Write(...)".

12/20/2010:
in IE8 I noticed that some of the Divs were not being displayed properly. The Absolute positioning was not taking effect.
In Experimenting This had to do with the "Compatibility" mode of the page.  With Compatibility Off there was no problem
But when compatibility was ON there was a problem. In looking up I found an article dealing with forcing the emulator. 
The following is a Part of the article.

Put these meta Tags in the Head. When the Tags are on the html page, the compatibility option does NOT show.
This tag makes these pop ups work
<meta http-equiv="X-UA-Compatible" content="IE=8" />

For complete information This emulation does not work BUT does remove compatibility button
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 


###############  FireFox ###############  
11/19/2010
Does not like certain HTML Formatting codes when embedded in the Mssg for 

###############  Safari ###############  

###############  Google Chrome ###############  
11/19/2010
Does not like certain HTML Formatting codes when embedded in the Mssg for 

###############  Opera ###############  

********************************** Modifications *****************************************************************************************
11-17-2010 Added Code to make a Prompt for collecting values and added statement terminators to some lines missing them.
*********************************************************************************************************************************************/
/********************************************
********************************************/
function YNMssg(ynMssg, result_processor, ynHeight, ynWidth, ynTop, ynLeft, app_style) {
    var xst = document.getElementById("YNMssg");
    if (xst != null)
    {
        alert("YNMssg:Error:Please Response to the Last YNMssg:");
        return;
    }
    var display_style = "font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #0000FF; border-width: 3px; border-style: solid; border-color: #EAEAEA #808080 #808080 #EAEAEA; background-color: #DDDDDD;";
    if (app_style != undefined)
        display_style = app_style;
    if (ynHeight == undefined) ynHeight = 100;
    if (ynWidth == undefined) ynWidth = 300;
    if (ynMssg == undefined) ynMssg = "No Message Defined.";
    var newDiv = document.createElement("div");
    newDiv.id = "YNMssg";
    if (ynLeft == undefined)
    {
        var xpos = (document.body.clientWidth - ynWidth) / 2;
        if (xpos <= 0) xpos = 20;
    }
    else
        xpos = ynLeft;
    if (ynTop == undefined)
    {
        var ypos = (document.body.clientHeight - ynHeight) / 2;
        if (ypos <= 0) ypos = 50;
    }
    else
        ypos = ynTop;
    //START RENDERING
    newDiv.setAttribute("style", "height: " + ynHeight + "px; width: " + ynWidth + "px;"+ display_style + "position: absolute;top: " + ypos + "px;left: " + xpos + "px;");
    var sContent = ""
    sContent = sContent + "<table width=\"100%\" height=\"100%\" cellpadding=\"1\" cellspacing=\"0\">";
    sContent = sContent + "<tr>";
    sContent = sContent + "<td align=\"center\" valign=\"middle\">";
    sContent = sContent + ynMssg;
    sContent = sContent + "</td>";
    sContent = sContent + "</tr>";
    sContent = sContent + "<tr height=\"30\">";
    sContent = sContent + "<td align=\"right\" valign=\"bottom\">";
    sContent = sContent + "<input type=\"button\" value=\"Yes\" style=\"width:50px;\" onclick=\"closeYNMssg(1, " + result_processor + ")\"/><input type=\"button\" value=\"No\" style=\"width:50px;\" onclick=\"closeYNMssg(0, " + result_processor + ")\"/>";
    sContent = sContent + "</td>";
    sContent = sContent + "</tr>";
    sContent = sContent + "</table>";
    newDiv.innerHTML = sContent;
    document.body.insertBefore(newDiv, null);
}

function closeYNMssg(yn_response, result_processor) {
    var el = document.getElementById("YNMssg");
    document.body.removeChild(el);
    result_processor(yn_response==1?"Yes":"No");
}

/********************************************
********************************************/
function MssgBox(ynMssg, ynHeight, ynWidth, ynTop, ynLeft, app_style) {
    var xst = document.getElementById("YNMssg");
    if (xst != null)
    {
        alert("MssgBox:Error:Please Response to the Last MssgBox:");
        return;
    }
    var display_style = "font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #0000FF; border-width: 3px; border-style: solid; border-color: #EAEAEA #808080 #808080 #EAEAEA; background-color: #DDDDDD;";
    if (app_style != undefined)
        display_style = app_style;
    if (ynHeight == undefined) ynHeight = 100;
    if (ynWidth == undefined) ynWidth = 300;
    if (ynMssg == undefined) ynMssg = "No Message Defined.";
    var newDiv = document.createElement("div");
    newDiv.id = "MssgBox";
    if (ynLeft == undefined)
    {
        var xpos = (document.body.clientWidth - ynWidth) / 2;
        if (xpos <= 0) xpos = 20;
    }
    else
        xpos = ynLeft;

    if (ynTop == undefined)
    {
        var ypos = (document.body.clientHeight - ynHeight) / 2;
        if (ypos <= 0) ypos = 50;
    }
    else
        ypos = ynTop;

    newDiv.setAttribute("style", "height: " + ynHeight + "px; width: " + ynWidth + "px;"+ display_style + "position: absolute;top: " + ypos + "px;left: " + xpos + "px;");
    var sContent = ""
    sContent = sContent + "<table width=\"100%\" height=\"100%\" cellpadding=\"1\" cellspacing=\"0\">";
    sContent = sContent + "<tr>";
    sContent = sContent + "<td align=\"center\" valign=\"middle\">";
    sContent = sContent + ynMssg;
    sContent = sContent + "</td>";
    sContent = sContent + "</tr>";
    sContent = sContent + "<tr height=\"30\">";
    sContent = sContent + "<td align=\"right\" valign=\"bottom\">";
    sContent = sContent + "<input type=\"button\" value=\"Ok\" style=\"width:50px;\" onclick=\"closeMssgBox()\"/>";
    sContent = sContent + "</td>";
    sContent = sContent + "</tr>";
    sContent = sContent + "</table>";
    newDiv.innerHTML = sContent;
    document.body.insertBefore(newDiv, null);
}


function closeMssgBox() {
    var el = document.getElementById("MssgBox");
    document.body.removeChild(el);
}

/********************************************
********************************************/
function showNoticeBox(ynMssg, ynHeight, ynWidth, ynTop, ynLeft, app_style) {
    var display_style = "font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #0000FF; border-width: 3px; border-style: solid; border-color: #EAEAEA #808080 #808080 #EAEAEA; background-color: #DDDDDD;";
    if (app_style != undefined)
        display_style = app_style;
    if (ynHeight == undefined) ynHeight = 100;
    if (ynWidth == undefined) ynWidth = 300;
    if (ynMssg == undefined) ynMssg = "No Message Defined.";
    var newDiv = document.createElement("div");
    newDiv.id = "NoticeBox";
    if (ynLeft == undefined)
    {
        var xpos = (document.body.clientWidth - ynWidth) / 2;
        if (xpos <= 0) xpos = 20;
    }
    else
        xpos = ynLeft;

    if (ynTop == undefined)
    {
        var ypos = (document.body.clientHeight - ynHeight) / 2;
        if (ypos <= 0) ypos = 50;
    }
    else
        ypos = ynTop;

    newDiv.setAttribute("style", "height: " + ynHeight + "px; width: " + ynWidth + "px;" + display_style + "position: absolute;top: " + ypos + "px;left: " + xpos + "px;");
    var sContent = ""
    sContent = sContent + "<table width=\"100%\" height=\"100%\" cellpadding=\"1\" cellspacing=\"0\">";
    sContent = sContent + "<tr>";
    sContent = sContent + "<td align=\"center\" valign=\"middle\">";
    sContent = sContent + ynMssg;
    sContent = sContent + "</td>";
    sContent = sContent + "</tr>";
    sContent = sContent + "</table>";
    newDiv.innerHTML = sContent;
    document.body.insertBefore(newDiv, null);
}

function hideNoticeBox() {
    var h_wrk = true;
    while (h_wrk == true)
    {
        var el = document.getElementById("NoticeBox");
        if (el != undefined || el != null)
            document.body.removeChild(el);
        else
            h_wrk = false;
    }
}


/********************************************
Sample
UserQuestion("<b>"+sMssg, "handle_result", 75, 250, 100, undefined, my_display_style, "font-family:Arial,tahoma,veranda;font-size:11px;text-transform:uppercase;");

the "handle_result" is the  name of the fucntion that will be called.
********************************************/
function UserQuestion(uvMssg, uv_result_processor, uvHeight, uvWidth, uvTop, uvLeft, app_style, input_font_style) {
    var xst = document.getElementById("GSUserPrompt");
    if (xst != null)
    {
        alert("GSUserPrompt:Error:Please Response to the Last YNMssg:");
        return;
    }
    var display_style = "font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #0000FF; border-width: 3px; border-style: solid; border-color: #EAEAEA #808080 #808080 #EAEAEA; background-color: #DDDDDD;";
    var input_style = "font-family:Arial,tahoma,veranda;font-size:11px;";
    if (app_style != undefined)
        display_style = app_style;
    if (input_font_style != undefined)
        input_style = input_font_style;
    if (uvHeight == undefined) uvHeight = 100;
    if (uvWidth == undefined) uvWidth = 300;
    if (uvMssg == undefined) uvMssg = "No Message Defined.";
    var newDiv = document.createElement("div");
    newDiv.id = "UVMssg";
    if (uvLeft == undefined)
    {
        var xpos = (document.body.clientWidth - uvWidth) / 2;
        if (xpos <= 0) xpos = 20;
    }
    else
        xpos = uvLeft;
    if (uvTop == undefined)
    {
        var ypos = (document.body.clientHeight - uvHeight) / 2;
        if (ypos <= 0) ypos = 50;
    }
    else
        ypos = uvTop;
    //START RENDERING
    if (input_style.indexOf("width:") == -1)
        input_style = input_style + "width:" + parseInt(uvWidth * .9, 10) + "px;";
    newDiv.setAttribute("style", "height: " + uvHeight + "px; width: " + uvWidth + "px;" + display_style + "position: absolute;top: " + ypos + "px;left: " + xpos + "px;");
    var sContent = ""
    sContent = sContent + "<table width=\"100%\" height=\"100%\" cellpadding=\"1\" cellspacing=\"0\">";
    sContent = sContent + "<tr><td align=\"center\" valign=\"bottom\">";
    sContent = sContent + uvMssg;
    sContent = sContent + "</td></tr>";
    sContent = sContent + "<tr><td align=\"center\" valign=\"top\">";
    sContent = sContent + "<input type=\"text\" style=\"" + input_style + "\" id=\"PromptPopupResultInputElementName\" />";
    sContent = sContent + "</td></tr>";
    sContent = sContent + "<tr height=\"30\">";
    sContent = sContent + "<td align=\"right\" valign=\"bottom\">";
    sContent = sContent + "<input type=\"button\" value=\"Ok\" style=\"width:70px;\" onclick=\"closeUVMssg(1, " + uv_result_processor + ")\"/><input type=\"button\" value=\"Cancel\" style=\"width:70px;\" onclick=\"closeUVMssg(0, " + uv_result_processor + ")\"/>";
    sContent = sContent + "</td>";
    sContent = sContent + "</tr>";
    sContent = sContent + "</table>";
    newDiv.innerHTML = sContent;
    document.body.insertBefore(newDiv, null);
    document.getElementById("PromptPopupResultInputElementName").focus();
}

function closeUVMssg(uv_response, uv_result_handler) {
    var el = document.getElementById("UVMssg");
    var user_input_value = document.getElementById("PromptPopupResultInputElementName").value;
    document.body.removeChild(el);
    if (uv_response == 1)
        uv_result_handler(user_input_value);
    else
        uv_result_handler("Cancel");
}

