﻿function SetupHelpBoxes() {

    /*
    For use add next script on the page:

    <script type="text/javascript">
        $(document).ready(function () {
            SetupHelpBoxes();
        });
    </script>

    Temlate for help: 

    XautoSubscribeHelpX - name for reference to help.

    HelpLink:

    <a href="#" id="autoSubscribeHelpLink" class="serviceLink helpLink" helpBox="XautoSubscribeHelpX"><small>?</small></a>

    Help content:

    <div class="helpBox" id="XautoSubscribeHelpX" >
    <div class="helpTitle">
    <small class="modalClose">x</small>
    <small class="modalTitle"><%= L.s("Auto subscribe option")%></small>
    <div class="clear"></div>
    </div>
    <div class="helpContent small">
    <%= L.s("This option will apply subscription for all Your DOWN and UP alerts. You can perform this manually by visiting \"Subscribe\" page") %>
    </div>
    </div>

    */
    var allBoxes = $(".helpBox");

    $(".modalClose").click(function () { allBoxes.hide(); });

    $(".helpLink").click(function (event) {
        event.preventDefault();

        var link = $(this);
        var helpBox = $("#" + $(this).attr("helpBox"));
        allBoxes.not(helpBox).hide();
        //alert(link.width());
        helpBox
                        .css("left", (link.position().left + link.width() + 5) + "px")
                        .css("top", link.position().top + "px");
        helpBox.toggle();
    });
}

/* Setup gray inline help in input text booxes */

function helpOnFocus() {
    if (this.value == $(this).attr("helpText"))
    { this.value = ""; this.style.color = "black"; }
}

function helpOnBlur() {
    if (this.value == "")
    { this.value = $(this).attr("helpText"); this.style.color = "gray"; }
}
function setNewHelp(item_id, text) {
    var item = $(item_id);
    if (item.val() == item.attr("helpText")) {
        item.val(text); item.attr("helpText", text);
    }
}

function setItemHelp(item_id, text) {

    var item = $(item_id);
    var tmpVal = item.val();
    item.val(text);
    item.attr("helpText", text);
    item.focus(helpOnFocus);
    item.blur(helpOnBlur);
    if (tmpVal != "") item.val(tmpVal);
    else item.css('color', "gray");
}

