var cloudsprout = {
    hasIncludes: false,
    getServer: function () {
        if (EasyFlow.WebApplications.Frontend.RenderMarkup == undefined) {
            return EasyFlow.WebApplications.Frontend.Admin.LoginForm;
        }
        else {
            return EasyFlow.WebApplications.Frontend.RenderMarkup;
        }
    },
    showBreadCrumbs: function (str) {
        Event.observe(window, 'load', function () { cloudsprout.doRenderBreadCrumbs(str) });
    },
    doRenderBreadCrumbs: function (str) {
        var element = document.createElement("span");
        element.id = 'csBreadCrumbs';
        element.innerHTML = str;

        document.body.insert({ top: element });
    },
    includeScript: function (url) {
        var head = document.getElementsByTagName("head")[0];

        var element = document.createElement("script");
        element.src = url.replace('~/', tildeReplacement);
        element.type = "text/javascript";

        head.appendChild(element);
    },
    includeStyleSheet: function (url) {
        var head = document.getElementsByTagName("head")[0];

        var element = document.createElement("link");

        element.href = url.replace('~/', tildeReplacement);
        element.rel = "stylesheet";
        element.type = "text/css";

        head.appendChild(element);
    },
    ensureIncludes: function () {
        if (!this.hasIncludes) {
            cloudsprout.includeStyleSheet("~/Client/Styles/cloudsprout.css");

            cloudsprout.includeStyleSheet("~/3rdParty/ext-2.2/resources/css/ext-all.css");
            cloudsprout.includeStyleSheet("~/3rdParty/ext-2.2/resources/css/xtheme-gray.css");
            cloudsprout.includeStyleSheet("~/Admin/Client/Styles/Main2.css");

            this.hasIncludes = true;
        }
    },
    loginDialog: {
        stringsDA: {
            loginCaption: 'Log ind med e-mail og adgangskode',
            loginButton: 'Log ind',
            loggingin: 'Logger ind...',
            invalidLogin: 'Forkert email/adgangskode',
            forgotPasswordCaption: 'Skriv din e-mail adresse og få tilsendt din adgangskode',
            forgotPassword: 'Glemt kodeord?',
            backtologin: 'Tilbage til log ind!',
            sendPassword: 'Send',
            passwordSent: 'Adgangskoden er sent til din email',
            emailNotFound: 'Ukendt email adresse'
        },
        stringsEN: {
            loginCaption: 'Login using e-mail and password',
            loginButton: 'Login',
            loggingin: 'Logging in...',
            invalidLogin: 'Wrong email/password',
            forgotPasswordCaption: 'Write email and get sent your password',
            forgotPassword: 'Forgot password?',
            backtologin: 'Back to login',
            sendPassword: 'Send',
            passwordSent: 'Password sent to your email',
            emailNotFound: 'Uknown email address'
        },
        getStrings: function () {
            switch (this.uiCulture) {
                case "da-DK":
                    return this.stringsDA;
                case "en-GB":
                    return this.stringsEN;
                default:
                    return this.stringsEN;
            }
        },
        elementId: 'login_overlay_cloudsprout',
        buttonId: 'button_cloudsprout',
        isInForgotPasswordMode: false,
        loginCaptionElementId: 'logincaption_cloudsprout',
        passwordDivElementId: 'passworddiv_cloudsprout',
        usernameElementId: 'username',
        passwordElementId: 'password',
        messageElementId: 'message_cloudsprout',
        closeElementId: 'close_cloudsprout',
        toogleModeElementId: 'toogleMode_cloudsprout',
        visible: false,
        hasBuild: function () {
            return ($(this.elementId) != null);
        },
        build: function () {
            cloudsprout.ensureIncludes();

            this.uiCulture = currentUiCulture;

            var element = document.createElement("div");
            element.id = this.elementId;
            element.style.height = this.getDocumentHeight() + 'px';

            var template = new Template('<div><div id="#{closeElementId}" class="close"><a href="javascript:cloudsprout.loginDialog.hide();">&nbsp;</a></div><br><br><span id="#{loginCaptionElementId}" class="caption"></span><div class="login"><div class="textbox"><input id="#{usernameElementId}" type="text" /></div> <div id="#{passwordDivElementId}" class="textbox"><input id="#{passwordElementId}" type="password" /></div> <a id="#{buttonId}" href="javascript:cloudsprout.loginDialog.buttonClicked();">asd</a></div><div class="sendPassword"><a id="#{toogleModeElementId}" href="#" onclick="cloudsprout.loginDialog.toogleMode(); return false;">sdfsdfsdf</a></div><div class="message" id="#{messageElementId}"></div></div>');

            element.innerHTML = template.evaluate({ usernameElementId: this.usernameElementId, passwordElementId: this.passwordElementId, messageElementId: this.messageElementId, loginCaptionElementId: this.loginCaptionElementId, loginButton: this.getStrings().loginButton, forgotPassword: this.getStrings().forgotPassword, toogleModeElementId: this.toogleModeElementId, buttonId: this.buttonId, passwordDivElementId: this.passwordDivElementId, closeElementId: this.closeElementId });

            element.hide();

            document.body.insert({ top: element });

            this.render();

            Event.observe($(this.usernameElementId), 'focus', function () { cloudsprout.loginDialog.inTextField = true; });
            Event.observe($(this.usernameElementId), 'blur', function () { cloudsprout.loginDialog.inTextField = false; });

            Event.observe($(this.passwordElementId), 'focus', function () { cloudsprout.loginDialog.inTextField = true; });
            Event.observe($(this.passwordElementId), 'blur', function () { cloudsprout.loginDialog.inTextField = false; });
        },
        setModeAsLogin: function () {
            this.isInForgotPasswordMode = false;

            this.render();
        },
        setModeAsForgotPassword: function () {
            this.isInForgotPasswordMode = true;

            this.render();
        },
        toogleMode: function () {
            this.isInForgotPasswordMode = !this.isInForgotPasswordMode;

            this.render();
        },
        render: function () {
            $(this.messageElementId).innerHTML = '';

            if (this.isInForgotPasswordMode) {
                // Forgot password

                $(this.passwordDivElementId).hide();
                $(this.loginCaptionElementId).innerHTML = this.getStrings().forgotPasswordCaption + this.getCultureSelectionMarkup();
                $(this.buttonId).innerHTML = this.getStrings().sendPassword;
                $(this.toogleModeElementId).innerHTML = this.getStrings().backtologin;
            }
            else {
                // Login
                $(this.passwordDivElementId).show();
                $(this.loginCaptionElementId).innerHTML = this.getStrings().loginCaption + this.getCultureSelectionMarkup();
                $(this.buttonId).innerHTML = this.getStrings().loginButton;
                $(this.toogleModeElementId).innerHTML = this.getStrings().forgotPassword;
            }

        },
        changeUiCulture: function (culture) {
            this.uiCulture = culture;

            this.render();
        },
        getCultureSelectionMarkup: function () {
            var result = '&nbsp;&nbsp;&nbsp;';

            for (var i = 0; i < uiCultures.length; i++) {
                var culture = uiCultures[i];

                result += '<a class="flag_' + culture + '" href="#" onclick="cloudsprout.loginDialog.changeUiCulture(\'' + culture + '\');">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>';
            }

            result += ''

            return result;
        },
        callback: function (result) {

        },
        ensure: function () {
            if (!this.hasBuild()) {
                this.build();
            }
        },
        show: function () {
            this.ensure();

            $(this.elementId).show();
            $(this.elementId).scrollIntoView(true);

            $(this.usernameElementId).focus();

            this.visible = true;
        },
        hide: function () {
            if (this.hasBuild()) {
                $(this.elementId).hide();
            }

            this.visible = false;
        },
        toogle: function () {
            if (!this.visible) {
                this.show();
            }
            else {
                this.hide();
            }
        },
        buttonClicked: function () {
            if (this.isInForgotPasswordMode) {
                this.sendPassword();
            }
            else {
                this.login();
            }
        },
        login: function () {
            $(this.messageElementId).innerHTML = '';
            cloudsprout.getServer().Login($(this.usernameElementId).value, $(this.passwordElementId).value, current_content_path_cloudsprout, current_root_content_node_cloudsprout, current_language_cloudsprout, tildeReplacement, this.uiCulture, this.loginCallback.bind(this));
        },
        loginCallback: function (result) {
            if (result.value != 'false') {
                $(this.messageElementId).innerHTML = '<span class="correct">' + this.getStrings().loggingin + '</span>';

                window.location = result.value;
            }
            else {
                $(this.messageElementId).innerHTML = '<span class="error">' + this.getStrings().invalidLogin + '</span>';
            }
        },
        sendPassword: function () {
            $(this.messageElementId).innerHTML = '';
            cloudsprout.getServer().SendMailWithPassword($(this.usernameElementId).value, this.uiCulture, this.sendPasswordCallback.bind(this));
        },
        sendPasswordCallback: function (result) {
            if (result.value) {
                $(this.messageElementId).innerHTML = '<span class="correct">' + this.getStrings().passwordSent + '</span>';
            }
            else {
                $(this.messageElementId).innerHTML = '<span class="error">' + this.getStrings().emailNotFound + '</span>';
            }
        },
        getDocumentHeight: function () {
            var db = document.body;
            var dde = document.documentElement;

            return Math.max(db.scrollHeight, dde.scrollHeight, db.offsetHeight, dde.offsetHeight, db.clientHeight, dde.clientHeight);
        }
    },
    addEditDot: function (id, tooltip, command, offsetX, offsetY) {
        Event.observe(window, 'load', function () { cloudsprout.doAddEditDot(id, tooltip, command, offsetX, offsetY) });
    },
    doAddEditDot: function (id, tooltip, command, offsetX, offsetY) {
        var element = $(id);

        if (element != null) {
            var cumulativeOffset = Element.cumulativeOffset(element);

            var menuElement = document.createElement("div");

            menuElement.id = 'csEditDot_' + id;
            menuElement.style.position = 'absolute';
            menuElement.style.left = Math.max(cumulativeOffset.left - offsetX, 0) + 'px';
            menuElement.style.top = Math.max(cumulativeOffset.top - offsetY, 0) + 'px';

            menuElement.className = 'csEditDot';

            menuElement.onmouseover = function () { cloudsprout.doHighlightElement(element); }
            menuElement.onmouseout = function () { cloudsprout.doDownlightElement(element); }

            menuElement.innerHTML = '<a href="#" title="' + tooltip + '" onclick="window.parent.' + command + '">&nbsp;</a>';

            document.body.insert({ top: menuElement });

            Event.observe(window, 'resize', function () { cloudsprout.repositionEditDot(id, offsetX, offsetY); });
        }
    },
    repositionEditDot: function (id, offsetX, offsetY) {
        var element = $(id);

        var cumulativeOffset = Element.cumulativeOffset(element);

        var dotElement = $('csEditDot_' + id);

        dotElement.style.left = Math.max(cumulativeOffset.left - offsetX, 0) + 'px';
        dotElement.style.top = Math.max(cumulativeOffset.top - offsetY, 0) + 'px';
    },
    highlightElement: null,
    ensureHighlightElement: function () {
        if (this.highlightElement == null) {
            var element = document.createElement("div");

            element.id = 'csHighlightElement';
            element.style.position = 'absolute';

            this.highlightElement = element;

            document.body.insert({ top: element });
        }
    },
    doHighlightElement: function (element) {
        this.ensureHighlightElement();

        var cumulativeOffset = Element.cumulativeOffset(element);

        this.highlightElement.style.display = 'block';
        this.highlightElement.style.left = cumulativeOffset.left + 'px';
        this.highlightElement.style.top = cumulativeOffset.top + 'px';
        this.highlightElement.style.width = Math.max(3, element.offsetWidth) + 'px';
        this.highlightElement.style.height = Math.max(3, element.offsetHeight) + 'px';
    },
    doDownlightElement: function (element) {
        this.highlightElement.style.display = 'none';
    },
    addEditMenu: function (id, nodename, commands, cssClassName, offsetX, offsetY, menuId) {
        Event.observe(window, 'load', function () { cloudsprout.doAddEditMenu(id, nodename, commands, cssClassName, offsetX, offsetY, menuId) });
    },
    doAddEditMenu: function (id, nodename, commands, cssClassName, offsetX, offsetY, menuId) {
        var element = $(id);

        if (element != null && menuId != this.lastRenderEditMenuId) {
            var cumulativeOffset = Element.cumulativeOffset(element);

            var menuElement = document.createElement("div");

            menuElement.id = 'csEditMenuDot_' + id;
            menuElement.style.position = 'absolute';
            menuElement.style.left = Math.max(cumulativeOffset.left - offsetX, 0) + 'px';
            menuElement.style.top = Math.max(cumulativeOffset.top - offsetY, 0) + 'px';

            menuElement.className = 'csEditMenuDotCollapsed ' + cssClassName;

            menuElement.onmouseover = function () { cloudsprout.doHighlightElement(element); }
            menuElement.onmouseout = function () { cloudsprout.doDownlightElement(element); }

            menuElement.innerHTML = this.getCollapsedEditMenuDot(id) + this.getExpandedEditMenuDot(id, nodename, commands);

            document.body.insert({ top: menuElement });

            Event.observe(window, 'resize', function () { cloudsprout.repositionEditMenu(id, offsetX, offsetY); });

            this.lastRenderEditMenuId = menuId;
        }
    },
    repositionEditMenu: function (id, offsetX, offsetY) {
        var element = $(id);

        var cumulativeOffset = Element.cumulativeOffset(element);

        var menuElement = $('csEditMenuDot_' + id);

        menuElement.style.left = Math.max(cumulativeOffset.left - offsetX, 0) + 'px';
        menuElement.style.top = Math.max(cumulativeOffset.top - offsetY, 0) + 'px';
    },
    expandEditMenu: function (id) {
        var expandedElements = document.body.select('.csEditMenuDotExpanded');

        if (this.lastExpandedEditMenuId != undefined && this.lastExpandedEditMenuId != null) {
            var lastExpandedEditMenuElement = $(this.lastExpandedEditMenuId);
            lastExpandedEditMenuElement.addClassName('csEditMenuDotCollapsed');
            lastExpandedEditMenuElement.removeClassName('csEditMenuDotExpanded');
            lastExpandedEditMenuElement.style.zIndex = 500;
        }

        var element = $('csEditMenuDot_' + id);

        element.style.zIndex = 1000;
        element.removeClassName('csEditMenuDotCollapsed');
        element.addClassName('csEditMenuDotExpanded');

        this.lastExpandedEditMenuId = element.id;
    },
    collapseAllMenus: function () {
        if (this.lastExpandedEditMenuId != undefined && this.lastExpandedEditMenuId != null) {
            var lastExpandedEditMenuElement = $(this.lastExpandedEditMenuId);
            lastExpandedEditMenuElement.addClassName('csEditMenuDotCollapsed');
            lastExpandedEditMenuElement.removeClassName('csEditMenuDotExpanded');
            lastExpandedEditMenuElement.style.zIndex = 500;
        }
    },
    collapseEditMenu: function (cssClassId) {
        var element = $('csEditMenuDot_' + cssClassId);

        element.addClassName('csEditMenuDotCollapsed');
        element.removeClassName('csEditMenuDotExpanded');

        this.lastExpandedEditMenuId = null;
    },
    getCollapsedEditMenuDot: function (cssClassId) {
        return '<div class="collapsed"><a onclick="cloudsprout.expandEditMenu(\'' + cssClassId + '\');"></a></div>';
    },
    getExpandedEditMenuDot: function (id, name, commands) {
        var result = '<div class="expanded"><div class="top"><a onclick="cloudsprout.collapseEditMenu(\'' + id + '\')"><span>' + name + '</span></a><ul>';

        for (var i = 0; i < commands.length; i++) {
            result += '<li><a href="#" onclick="window.parent.' + commands[i].javascriptString + '" >' + commands[i].name + '</a></li>';
        }
        result += '</ul></div><div class="bottom"></div></div>';

        return result;
    },
    steps: {
        renderShadow: function () {
            cloudsprout.ensureIncludes();

            if (typeof jQuery != 'undefined') {
                $(window).load(function () { cloudsprout.steps.doRenderShadow() });
            } else {
                // Assume Prototype.js
                Event.observe(window, 'load', function () { cloudsprout.steps.doRenderShadow() });
            }


        },
        doRenderShadow: function () {
            var element = document.createElement("div");

            element.id = this.elementId;
            element.style.height = this.getDocumentHeight() + 'px';
            element.style.position = 'absolute';
            element.style.left = '0px';
            element.style.top = '0px';
            element.style.width = '4px';
            element.className = 'cloudsproutShadow';

            if (typeof jQuery != 'undefined') {
                $('body').prepend(element);
                $(window).resize(function () { cloudsprout.steps.resizeRenderShadow() });
            }
            else {
                document.body.insert({ top: element });
                Event.observe(window, 'resize', function () { cloudsprout.steps.resizeRenderShadow() });

            }
        },
        resizeRenderShadow: function () {
            if ($('.cloudsproutShadow') != null) {
                var element = $('.cloudsproutShadow')[0];

                element.style.height = '10px';
                element.style.height = this.getDocumentHeight() + 'px';
            }
        },
        getDocumentHeight: function () {
            var db = document.body;
            var dde = document.documentElement;

            return Math.max(db.scrollHeight, dde.scrollHeight, db.offsetHeight, dde.offsetHeight, db.clientHeight, dde.clientHeight);
        }
    },
    isInExplorer: function () {
        return (window.parent != null && window.parent.location.href.indexOf("Main2.aspx") != -1);
    }
}

if (document.observe != undefined) {
    document.observe('keydown', function (event) {
        if (cloudsprout.loginDialog.visible && cloudsprout.loginDialog.inTextField && event.keyCode == 13) {
            cloudsprout.loginDialog.buttonClicked();
        }

        // Detect alt + shift + l
        if (event.keyCode == 76 && event.altKey && event.shiftKey) {
            cloudsprout.loginDialog.toogle();
        }
    });
}