var OpenID = function(){
    function displayBox()
    {
        if ($('#openid_selector_box:visible').length == 0)
        {
            var box = OpenID.currentBox;
            var screenWidth = $('body').outerWidth();
            var screenHeight = $('body').outerHeight();
            var boxOffset = box.offset();
            
            var left = boxOffset.left;
            var top = boxOffset.top + box.outerHeight();
            if (left > screenWidth / 2)
            {
                left = boxOffset.left + box.outerWidth() - $('#openid_selector_box').outerWidth();
            }
            $('#openid_selector_box').css("left", left);
            $('#openid_selector_box').css("top", top);
            $("#openid_selector_box input").attr("readonly", "readonly");
            $("#openid_selector_box input").val("");
            $("#openid_selector_box .openid_providers div").css("background-color", "");
            $('#openid_signup').hide();
            OpenID.currentOpenidBox = box;
            $('#openid_selector_box').show();
        }
    }

    function hideBox(box)
    {
        $('#openid_selector_box').hide();
    }

    function handleTimeout()
    {
        if (OpenID.displaying)
        {
            displayBox();
        }
        else
        {
            hideBox();
        }
    }

    function startHideBox()
    {
        OpenID.displaying = false;
        OpenID.currentBox = $(this);
        var timeoutFunc = function(){handleTimeout()};
        setTimeout(timeoutFunc, 750);
    }

    function startDisplayBox()
    {
        if ($(this).attr("somnium:openid_active"))
        {
            OpenID.currentBox = $(this);
        }
        OpenID.displaying = true;
        var timeoutFunc = function(){handleTimeout()};
        setTimeout(timeoutFunc, 750);
    }

    function keepDisplayBox()
    {
        OpenID.displaying = true;
    }

    function getProviders()
    {
        return [
            {
                name: "MyOpenID",
                icon: "http://myopenid.com/favicon.ico",
                signupUrl: "https://www.myopenid.com/signup",
                produce : function(username){
                    return "http://" + username + ".myopenid.com";
                }
            },
            {
                name: "MyLid",
                icon: "http://mylid.net/favicon.ico",
                signupUrl: "http://signup.mylid.net/signup/step1.php",
                produce : function(username){
                    return "http://mylid.net/" + username;
                }
            },
            {
                name: "LoveJournal",
                icon: "http://www.livejournal.com/favicon.ico",
                signupUrl: "https://www.livejournal.com/create.bml",
                produce: function(username){
                    return "http://" + username + ".livejournal.com";
                }
            }
        ];
    }

    function signupProvider()
    {
        if (getProviders()[OpenID.currentProvider].signupUrl)
        {
            window.open(getProviders()[OpenID.currentProvider].signupUrl);
        }
    }

    function handleProvider()
    {
        OpenID.currentProvider = $(this).attr("somnium:provider_offset");
        $("#openid_selector_box .openid_providers div").css("background-color", "");
        if (getProviders()[OpenID.currentProvider].signupUrl)
        {
            $('#openid_signup').show();
        }
        else
        {
            $('#openid_signup').hide();
        }
        $(this).css("background-color", "#fcaf7e");
        $("#openid_selector_box input").attr("readonly", "");
        $("#openid_selector_box input").focus();
    }

    function enteredUsername()
    {
        if (!OpenID.currentProvider)
        {
            return;
        }

        var provider = getProviders()[OpenID.currentProvider];
        var username = $(this).val();
        OpenID.currentOpenidBox.val(provider.produce(username));
    }

    return {
        activateTextBox : function(selector) {
            $(selector).hover(startDisplayBox, startHideBox);
            $(selector).attr("somnium:openid_active", 1);
        },
        initialize : function() {
            var providers = getProviders();
            $("body").appendDom([{
                tagName: "div",
                style: "background-color: #ddd; color: black; border: 1px solid black; float: left; position: absolute;",
                id: "openid_selector_box",
                childNodes: [{
                    tagName: "span",
                    style: "font-size: 1.2em; text-align: left; margin: 0; border: 0; float: left; ",
                    innerHTML: "Select your OpenID provider"
                },
                {
                    tagName: "span",
                    style: "font-size: 1.2em; text-align: right; margin: 0; border: 0; float: right; display: none; cursor: pointer;",
                    innerHTML: "Sign up now",
                    id: "openid_signup"
                },
                {
                    tagName: "div",
                    style: "text-align: left; width: 30em; padding: 0; background-color: #fff; clear: both;",
                    class: "openid_providers"
                },
                {
                    tagName: "div",
                    style: "text-align: left; width: 30em; padding: 0; clear: both;",
                    childNodes: [{
                        tagName: "span",
                        style: "width: 25%; padding-right: 1em; padding-left: 0.5em;",
                        innerHTML: "Username"
                    },
                    {
                        tagName: "input",
                        style: "width: 75%; ",
                        readonly: "readonly"
                    }]
                }]
            }]);

            for (var i = 0; i < providers.length; ++i)
            {
                var provider = providers[i];
                if (provider.icon)
                {
                    $("#openid_selector_box .openid_providers").appendDom([{
                        tagName: "div",
                        style: "float: left; width: 10em; margin: 0; border: 0;",
                        "somnium:provider_offset": "" + i,
                        childNodes: [{
                            tagName: "span",
                            style: "padding: 0.5em;padding-left: 20px; background: url(" + provider.icon + ") no-repeat center left;",
                            innerHTML: provider.name
                        }]
                    }]);
                }
                else
                {
                    $("#openid_selector_box .openid_providers").appendDom([{
                        tagName: "div",
                        style: "float: left; width: 10em; margin: 0; border: 0;",
                        "somnium:provider_offset": "" + i,
                        childNodes: [{
                            tagName: "span",
                            style: "padding: 0.5em",
                            innerHTML: provider.name
                        }]
                    }]);
                }
            }
            $("#openid_selector_box .openid_providers div").click(handleProvider);
            $("#openid_signup").click(signupProvider);
            $("#openid_selector_box .openid_providers").appendDom([{
                tagName: "div",
                style: "clear: both;",
                innerHTML: " "
            }]);
            $("#openid_selector_box input").change(enteredUsername);
            $("#openid_selector_box input").keyup(enteredUsername);
            hideBox();
            $("#openid_selector_box, #openid_selector_box *, #openid_selector_box input").hover(keepDisplayBox, startHideBox);
        }
    };
}();

$(document).ready(function() {
    OpenID.initialize();
});