/// <reference path="~/js/prototype-min.js" />

// Requires prototype

// Creates a popup window that can be shown and will hide itself when the user 
// clicks outside it. Requires an exiting HTML element. This doesn't create a 
// new window or any other objects.
var Popup = Class.create({

    // Takes the id or a reference to an HTML element and uses it as the basis for the popup
    initialize: function(elementId) {
        this.container = $(elementId);
        this.background = new Element("div");
        this.background.setStyle({
            backgroundColor: "black",
            position: "absolute",
            top: "0px",
            left: "0px",
            width: "100%",

            // Setting the height to 100% only covers the visible part of the 
            // document. The form spans the entire document and its height 
            // equals the height of the entire document.
            height: $(document.getElementsByTagName("form")[0]).getHeight() + "px"
        });

        this.background.setOpacity(0.5);

        // The are arbitrary but should be higher than the z-index of any other
        // element on the page.
        this.container.style.zIndex = 10;
        this.background.style.zIndex = 9;

        this.isVisible = false;
        this.ignoreClosingClick = false;
    },

    // Displays the popup. The menu hides automatically when the user clicks outside
    show: function(e) {
        // Because the container may be anywhere in the document heirarchy, we
        // remove it and put it at the very beginning of the form, outside of
        // everything else. This ensures that the background layer covers
        // everything below it.

        this.container.show();

        this.container.remove();
        $(document.getElementsByTagName("form")[0]).insert({ top: this.container });
        this.container.insert({ after: this.background });

        // Fix the events of the links since moving things around seems to break
        // event handlers.
        var links = this.container.select("a");
        links.each(function(link) {
            // Check for "javascript:" links
            if (link.href.indexOf("javascript:") >= 0) {
                // Grab the part of href after "javascript:"
                var command = link.href.substring(link.href.indexOf("javascript:") + "javascript:".length);
                // Add a click handler to the link that evaluates the command
                link.observe("click", function(event) { eval(command); event.stop(); });
                // And change the href so we don't add the handler the next time
                // the popup is shown.
                link.href = "#";
            }
        });

        var viewport = $(document).viewport;
        var offsets = viewport.getScrollOffsets();
        var width = viewport.getWidth();

        // Center the popup horiztonally and put it slightly below the top of
        // the window.
        this.container.style.left = ((width - this.container.getWidth()) / 2) + "px";
        this.container.style.top = (offsets.top + 100) + "px";

        this.container.show();
        this.isVisible = true;

        // Hide the menu if any part of the document is clicked...
        setTimeout(function() {
            // This sets a delay before the document starts listening for mouse clicks. This is mainly to keep windows from disappearing right after showing.
            if (this.isVisible)
                $(document).observe("click", this.carefulHide.bindAsEventListener(this))
        } .bind(this), 1000);

        // Except if there is a click inside the menu. We stop the event from propagating to the document.
        this.container.observe("click", function(e) {
            if (e.findElement().tagName != "INPUT")
                Event.stop(e);
        });

        // And we need to stop *this* click event from making it to the document or it will immediately hide the menu after showing it.
        Event.stop(e);
    },

    // Manually hides the popup
    hide: function() {
        this.container.hide();
        this.background.remove();
        this.isVisible = false;
        $(document).stopObserving("click");
    },

    carefulHide: function(e) {
        // Check to see if a click on an input element triggered this event.
        if (e.findElement().tagName != "INPUT")
            this.hide();
    }
});