//These functions REQUIRE the jQuery library in order to work.
//Syntax is as follows:
//
//Create an overlay:
//createOverlay([parent container CSS selector],[name], [boolean for hiding the cancel link]);
//BOTH arguments are optional. CSS selectors look like #something or .something. The name argument can be any string and should be unique
//if you do not enter anything in, it will generate a basic loading overlay that covers the entire main area. Otherwise, it fills whatever container you put it in.
//
//Destroy an overlay
//destroyOverlay([name]);
//Enter a name of a specific overlay to destroy. Otherwise, it destroys all overlays on the page.
//


function createOverlay(parentContainer, name, hideCancel) {
    
    if (typeof hideCancel != 'boolean') {
        hideCancel = true; //Hide the cancel link by default.
    }
    if (typeof parentContainer != 'string') {
        parentContainer = ".main";
    }
    if (typeof name != 'string') {
        name = ("overlay" + $(".loading_overlay").length);
    }
    
    //Make parentcontainer pointer so that hopefully this can run faster
    $.ParentContainer = $(parentContainer);
    
    //Create all the elements for the loading overlay
    if ($.ParentContainer.length == 1 && $("." + name).length < 1) {
        //this only works if there is only one parent container and the name is unique
       
        $.ParentContainer.append("<iframe class=\"loading_overlay_iframe " + name + "\" id=\"loadIframe" + name + "\"></iframe>");
        $.ParentContainer.append("<div class=\"loading_overlay " + name + "\" id=\"loadOverlay" + name + "\"></div>");
                
        //Set widths and heights of everything
        var parentHeight = $.ParentContainer.innerHeight();
        var parentWidth = $.ParentContainer.innerWidth();
        $.loadOverlays = $('#loadOverlay' + name + ",#loadIframe" + name);
        $.loadOverlays.height(parentHeight);
        $.loadOverlays.width(parentWidth);

        //Set position of everything
        $.loadOverlays.offset($.ParentContainer.offset());
        
       //Check to make sure parent container is tall enough to have the loading icon in it
        if ($.ParentContainer.height() > 200) {
            if (!hideCancel) {
                var cancel_link = "<p class='overlay_cancel_link'><a class='' href='#'>Cancel</a></p>";
            } else {
                var cancel_link = "";
            }
            $.ParentContainer.append("<div class=\"loading_icon_wrapper " + name + "\" id=\"loadIcon" + name + "\"><div class=\"loading_icon shadow standout\"><h3>Loading</h3><p class='loading_spinner'></p>" + cancel_link + "</div></div>"); 
             
             //store this to a variable to make is simpler
            $.loadIcon = $('#loadIcon' + name);
            
            //make cancel link work;
            $('.overlay_cancel_link a').click(function() {
                cancelOverlay(name);
                
            });
            
            if (parentContainer != ".main" && parentContainer != "body") {
                //if the container isn't effectively the entire page


                $.loadIcon.css('position', 'absolute');
                $.loadIcon.css('width', 'auto');


                if ($.ParentContainer.css('position') == 'relative' || $.ParentContainer.css('position') == 'absolute')
                    var loadIconOffset = { left: 0, top: 0 };
                else
                    var loadIconOffset = $.ParentContainer.offset();

                loadIconOffset.left += (Math.floor(($.ParentContainer.width() - $.loadIcon.innerWidth()) / 2));
                if ($.ParentContainer.height() < 800) {

                    //if the container is small, put loading icon smack dab in the middle
                    loadIconOffset.top += (Math.floor((parentHeight - $.loadIcon.innerHeight()) / 2));

                } else {
                    //if it's tall, put the loading icon in the center of the window and leave it there
                    loadIconOffset.top += (Math.floor(($(window).innerHeight() - $.loadIcon.innerHeight()) / 2) + $(window).scrollTop());


                }
                $.loadIcon.css({ top: loadIconOffset.top, left: loadIconOffset.left });
            } else {
                //center the loading icon on the screen
                $.loadIcon.css("top", ((Math.floor($(window).height() - $.loadIcon.height()) / 2) + "px"));
            }
        }
    }
    //in IE only, this will destroy all overlays if the stop button is hit, allowing for users to try their submission again.
 //   document.onstop = destroyOverlay;
}
function destroyOverlay(name) {
    if (typeof (name) != 'string' || $('.' + name).length < 1) {
        //if the argument is invalid or there aren't any matching elements, remove all overlays
        $('.loading_overlay, .loading_icon_wrapper, .loading_overlay_iframe').remove();
    } else {
        //otherwise, remove matching elements
        $('.' + name).remove();
    }
}
function cancelOverlay(name) {
    if (typeof (name) == 'string') {
        destroyOverlay(name);
    } else {
        destroyOverlay();
    }
    if (typeof (window.stop) == "function") {
        window.stop();
    }
    else {
        document.execCommand("Stop");
    }

}