/// <reference path="~/Scripts/EduDesk.js"/>
/// <reference path="~/Scripts/jquery-1.4.1-vsdoc.js" />






edu = window.edu || {};

edu.Overlay = new function() {

    //    // Taken from Lightbox js
    //    this.getWindowSize = function() {
    //        var windowWidth, windowHeight;
    //        if (self.innerHeight) {	// all except Explorer
    //            windowWidth = self.innerWidth;
    //            windowHeight = self.innerHeight;
    //        } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
    //            windowWidth = document.documentElement.clientWidth;
    //            windowHeight = document.documentElement.clientHeight;
    //        } else if (document.body) { // other Explorers
    //            windowWidth = document.body.clientWidth;
    //            windowHeight = document.body.clientHeight;
    //        }
    //        return [windowWidth, windowHeight];
    //    }

    var objOverlay, objHolder, currentNode;
    var pageSize = [0, 0];

    this.CurrentThemedID = null;

    this.Enabled = false;
    ///<param name="Enabled" type="string">Dummy not visible.</param>
    ///<field name="Enabled" type="String">member variable comment</field>

    this.Show = function(node, color, opacity) {
        /// <summary> Displays a DOMElement as overlay. </summary>
        /// <param name="node" type="DOMElement">DOMElement to display as overlay. Uses the style.width & style.height as the size.</param>
        /// <param name="color" type="String">The color to display for the background</param>
        /// <param name="opacity" type="Number">The opacity to use, between 0-1</param>
        if (this.Enabled) this.Hide();
        if (!objOverlay) {
            objOverlay = $("<div></div>").attr('id', 'overlay')
                .css({ position: 'fixed', top: 0, 'z-index': 200, width: '100%' }).get(0);

            objHolder = $("<div></div>").hide().get(0);
            objOverlay.appendChild(objHolder);
        }

        $(objOverlay).css({ 'background-color': color || '#000', 'opacity': opacity || 0.5 });

        currentNode = node;
        if ($('#aspnetForm').length > 0) {
            $('#aspnetForm').get(0).appendChild(objOverlay);
            $('#aspnetForm').get(0).appendChild(node);
        }
        else {
            $('body').get(0).appendChild(objOverlay);
            $('body').get(0).appendChild(node);
        }

        objOverlay.style.display = 'block';
        this.Enabled = true;


        pageSize = [$(window).width(), $(window).height()];
        objOverlay.style.height = (pageSize[1] + 'px');



        node.style.display = "block";
        
        node.style.zIndex = "201";
        node.style.position = "fixed";

        
        var width = !isNaN(parseInt(node.style.width)) ? parseInt(node.style.width) : 300;
        var height = !isNaN(parseInt(node.style.height)) ? parseInt(node.style.height) : 300;
        node.style.top = ((pageSize[1] / 2) - (height / 2)) + "px";
        node.style.left = ((pageSize[0] / 2) - (width / 2)) + "px";
        var self = this;
        var resizeCheck = function() {
        var size = [$(window).width(), $(window).height()];
        if (pageSize[1] != size[1]) {
        pageSize = size;
        objOverlay.style.height = (pageSize[1] + 'px');
        node.style.top = ((pageSize[1] / 2) - (height / 2)) + "px";
        node.style.left = ((pageSize[0] / 2) - (width / 2)) + "px";
        }
        if (self.Enabled) {
        setTimeout(resizeCheck, 500);
        }
        };
        resizeCheck();
        
    };

    this.Hide = function() {
        /// <summary> Hide's the current displayed overlay. If no overlay is displayed, does nothing </summary>
        if (this.Enabled) {
            this.Enabled = false;
            currentNode.style.display = "none";
            objOverlay.style.display = "none";
            objHolder.appendChild(currentNode);
            this.CurrentThemedID = null;

            $('#overlay_bg').dialog("close");
        }
    };


    this.ShowWait = function(str) {
        /// <summary> Displays a loading message with white background</summary>
        /// <param type="string" name="str" mayBeNull="true">The text to display</summary>
        var wait = $("#overlayWait");
        if (wait.length == 0) {
            wait = $('<div></div>').css({ display: 'none', width: 400, height: 66, color: "#000", "font-size": "25px", "text-align": "center" })
                    .attr('id', 'overlayWait')
                    .appendTo("body");
        }

        wait.html('<img src="/Images/ajax-loader.gif"><br />' + (str || "Please Wait"));
        edu.Overlay.Show(wait.get(0), '#FFF');
    };

    function ensureTheme(func, args) {
        if ($("#eduOverlay").length == 0) {
            var css_href = "";
            if ($("#ctl00_MainStyle").attr('href') == "/Theme/EduDesk2.css") {
                css_href = "/Controls/OverlaySkin/Benchmark.css";
            }
            else if ($("#ctl00_MainStyle").attr('href') == "/Theme/TestWizard.css") {
                css_href = "/Controls/OverlaySkin/TestWizard.css";
            }
            else if ($("#ctl00_MainStyle").attr('href') == "/Theme/ClickerSchool.css") {
                css_href = "/Controls/OverlaySkin/ClickerSchool.css";
            }
            else {
                css_href = "/Controls/OverlaySkin/Wizard.css";
            }

            edu.Overlay.ShowWait();

            $("head").append("<link>");
            css = $("head").children(":last");
            css.attr({
                rel: "stylesheet",
                type: "text/css",
                href: css_href
            });

            $('<div></div>').appendTo('body').load("/Controls/OverlaySkin/", function() { func.apply(edu.Overlay, args); })
            return false;
        }
    }

    this.ShowThemed = function(id, title) {
        /// <summary> Displays an themed overlay window. </summary>
        /// <param type="string" name="id">The ID of the div</param>
        if (ensureTheme(this.ShowThemed, [id]) === false)
            return;

        var mainDOM = $("#" + id);
        var newContent = this.GetContent(id);
        var newIcon = this.GetIcon(id);

        var mainDOMWidth = parseInt(mainDOM.css("width"));
        var mainDOMHeight = parseInt(mainDOM.css("height"));

        $("#eduOverlay").css({ width: mainDOMWidth, height: mainDOMHeight });

        var content = $("#eduOverlay_content");
        content.children().each(function() { $(this).hide(); });
        content.css("height", mainDOMHeight - 70);
        newContent.show().appendTo(content);

        var icon = $("#eduOverlay_icons");
        icon.children().each(function() { $(this).hide(); });
        newIcon.hide().appendTo(icon);

        edu.Overlay.Show($("#eduOverlay").get(0));
        edu.Overlay.CurrentThemedID = id;


        //set buttons
        function handleClick(i) {
            return function() {
                $(newIcon.children()[i]).click();
                var href = $(newIcon.children()[i]).attr('href');
                if (href != null) {
                    if (href.trim().length > 0) {
                        window.location.href = href;
                    }
                }
            }
        }

        var buttons = new Array();
        for (i = 0; i < newIcon.children().length; i++) {
            var button = $(newIcon.children()[i]);
            if (button.css("display") != "none") {
                var newButton =
                {
                    text: button.html().trim(),
                    click: handleClick(i)
                }
                buttons.push(newButton);
            }
        }


        //set title
        var newTitle = title || $('#eduOverlay_content h1').last().html();
        newTitle = newTitle != null ? newTitle.trim() : "";
        $('#eduOverlay_content h1').hide();

        //add jquery ui dialog wrapper
        var parent = $('#overlay_bg').parent();
        var dlg = $('#overlay_bg').dialog(
        {
            draggable: true,
            resizable: true,
            close: function(event, ui) {
                edu.Overlay.Hide();
            },
            buttons: buttons,
            title: newTitle || "",
            closeOnEscape: false,
            open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
        });
        dlg.parent().appendTo($("#eduOverlay"));

        //set original size and position
        $("#overlay_bg").dialog("option", "width", mainDOMWidth + 100);
        $("#overlay_bg").dialog("option", "height", mainDOMHeight + 45);
        $('#overlay_bg').dialog('option', 'position', 'center');

    };


    this.Alert = function(txt, onOk, width, height, okTxt) {
        /// <summary> Shows an alert message with an OK button. </summary>
        /// <param type="String" name="txt">The text to display</param>
        /// <param type="Function" optional="true" name="onOk">Function to execute once OK is pressed and window is hidden</param>
        /// <param type="Number" optional="true" name="width">Width of the window in pixels</param>
        /// <param type="Number" optional="true" name="height">Height of the window in pixels</param>
        /// <param type="String" name="okTxt" optional="true">The text to use as the 'yes' button</param>


        if (ensureTheme(this.Alert, arguments) === false)
            return;

        $("#eduOverlayAlert").css({ width: width || "550px", height: height || "200px" });
        $("#eduOverlayAlert_content").html(txt);
        $("#eduOverlayAlertOk").html(okTxt || "Ok");
        $("#eduOverlayAlertOk").unbind().click(function() { edu.Overlay.Hide(); if (onOk) onOk(); });
        edu.Overlay.ShowThemed("eduOverlayAlert", "Alert");
    };

    this.Confirm = function(txt, onClick, width, height, yes, no) {
        /// <summary> Shows an confirmation message with a yes and no button. </summary>
        /// <param type="String" name="txt">The text to display</param>
        /// <param type="Function" name="onClick" optional="false">Function to execute once a button is pressed, the first argument in the function is a boolean with the result</param>
        /// <param type="Number" optional="true" name="width">Width of the window in pixels</param>
        /// <param type="Number" optional="true" name="height">Height of the window in pixels</param>
        /// <param type="String" name="yes" optional="true">The text to use as the 'yes' button</param>
        /// <param type="String" name="no" optional="true">The text to use as the 'no' button</param>

        if (ensureTheme(this.Confirm, arguments) === false)
            return;

        $("#eduOverlayConfirm").css({ width: width || "550px", height: height || "200px" });
        $("#eduOverlayConfirm_content").html(txt);
        $("#eduOverlayConfirmYes").text(yes || "Yes").unbind().click(function() { edu.Overlay.Hide(); onClick(true); });
        $("#eduOverlayConfirmNo").text(no || "No").unbind().click(function() { edu.Overlay.Hide(); onClick(false); });
        edu.Overlay.ShowThemed("eduOverlayConfirm", "Confirm");
    };

    this.GetContent = function(id) {
        /// <summary> Returns the jquery object of the Content of a themed overlay </summary>
        /// <param type="String" name="id">The id of the overlay themed div </param>
        /// <returns type="jQuery" />
        var item = $("#" + id + "_content");
        if (item.length == 0) {
            item = $("#" + id).children(":nth-child(1)");
            item.attr("id", id + "_content");
        }
        return item;
    };

    this.GetIcon = function(id) {
        /// <summary> Returns the jquery object of the Icon of a themed overlay </summary>
        /// <param type="String" name="id">The id of the overlay themed div </param>
        /// <returns type="jQuery" />
        var item = $("#" + id + "_icon");
        if (item.length == 0) {
            item = $("#" + id).children(":nth-child(2)");
            item.attr("id", id + "_icon");
        }
        return item;
    };
};