﻿/*
OpenID Plugin

Jeremy Seekamp <jseekamp@jadalabs.com>
*/
(function($) {
    $.fn.openid = function(options) {
        var xprovider;
        var INPUTID = 'openid_username';
        var inputarea = $('#openid_inputarea').length ? $('#openid_inputarea') : $('<div id="openid_inputarea" />');
        var defaults = {
            txt: {
                label: 'Enter your {provider} {username}',
                username: 'username',
                title: 'Select your OpenID provider'
            },
            providers: [
			    {
			        name: 'Google',
			        url: 'https://www.google.com/accounts/o8/id',
			        auto: true,
			        spritex: 0,
			        spritey: -125,
			        height: 65,
			        major: true
			    },
			    {
			        name: 'Yahoo',
			        url: 'http://yahoo.com',
			        auto: true,
			        spritex: 0,
			        spritey: -20,
			        height: 45,
			        major: true
			    },
			    {
			        name: 'OpenID',
			        username_token: 'url',
			        spritex: 0,
			        spritey: -60,
			        height: 65,
			        major: true
			    },
			    {
			        name: 'MyOpenID',
			        url: 'http://{username}.myopenid.com/',
			        spritex: 0,
			        spritey: 0
			    },
			    {
			        name: 'LiveJournal',
			        url: 'http://{username}.livejournal.com',
			        spritex: 21,
			        spritey: 0
			    },
			    {
			        name: 'Flickr',
			        url: 'http://flickr.com/{username}/',
			        spritex: 42,
			        spritey: 0
			    },
			    {
			        name: 'Wordpress',
			        url: 'http://{username}.wordpress.com/',
			        spritex: 63,
			        spritey: 0
			    },
			    {
			        name: 'Blogger',
			        url: 'http://{username}.blogspot.com/',
			        spritex: 84,
			        spritey: 0
			    },
			    {
			        name: 'Verisign',
			        url: 'http://{username}.pip.verisignlabs.com/',
			        spritex: 105,
			        spritey: 0
			    },
			    {
			        name: 'Vidoop',
			        url: 'http://{username}.myvidoop.com/',
			        spritex: 126,
			        spritey: 0
			    },
			    {
			        name: 'ClaimID',
			        url: 'http://claimid.com/{username}',
			        spritex: 147,
			        spritey: 0
			    }
		    ],
            img_path: '/content/images/openid_sprite.png'
        };

        var getOption = function(provider, idx) {
            return $('<option value="' + idx + '">' + provider + '</option>');
        };

        var selected = function(e, tidx) {
            var idx = 0;
            if (tidx) {
                idx = parseInt(tidx);
                if (settings.providers[idx].auto) {
                    $('select#openid_selector').val(idx);
                }

            }
            else {
                idx = this.selectedIndex - 1;
            }

            if (!(xprovider = settings.providers[idx]))
                return;

            setLoginCookie(idx);

            //prompt for input


            if (xprovider.auto) {
                inputarea.empty();
                showMajorSelection(xprovider);
                //form.submit();
            }
            else {
                showInputBox();
            }
            return false;
        };

        var showMajorSelection = function() {
            inputarea.show().append('<div style="background: url(' + settings.img_path + ') no-repeat ' + xprovider.spritex + 'px ' + xprovider.spritey + 'px; width: 200px; height: ' + xprovider.height + 'px;"></div>')
        };

        var showMinorSelection = function() {
            var minorContainer = $('<div id="minor"></div>');
            $.each(settings.providers, function(i, val) {
                if (!val.major) {
                    var minorOption = $('<a id="btn_' + i + '" href="javascript:;" style="background: url(' + settings.img_path + ') no-repeat -' + val.spritex + 'px ' + val.spritey + 'px; width:21px; height:16px; display:inline-block;"></a>').click(changeMinorSelection);
                    minorContainer.append(minorOption);
                }
            });
            return minorContainer;
        };

        var changeMinorSelection = function(obj, tidx) {
            idx = $(tidx || this).attr('id').replace('btn_', '');
            xprovider = settings.providers[idx];
            var label = (xprovider.label || settings.txt.label).replace('{username}', (xprovider.username_token !== undefined) ?
		        xprovider.username_token : settings.txt.username)
		        .replace('{provider}', xprovider.name);

            $('.oidlabel').html(label);
            $('#' + INPUTID).focus();
        };

        var showInputBox = function() {
            inputarea.empty().show();
            if (xprovider.name = 'OpenID') {
                var minorSelection = showMinorSelection();
                inputarea.append(minorSelection);
            }

            var label = (xprovider.label || settings.txt.label).replace('{username}', (xprovider.username_token !== undefined) ?
		    xprovider.username_token : settings.txt.username)
		    .replace('{provider}', xprovider.name);

            inputarea.append('<span class="oidlabel">' + label + '</span><input id="' + INPUTID + '" type="text" ' +
			' name="username_txt" class="oidusername"/>');
            showMajorSelection(xprovider);
            $('#' + INPUTID).focus();

        };

        var submit = function() {
            var prov = (xprovider.url) ? xprovider.url.replace('{username}', $('#' + INPUTID).val()) : $('#' + INPUTID).val();
            form.append($('<input type="hidden" name="openid_identifier" value="' + prov + '" />'));
        };

        var settings = $.extend(defaults, options || {});

        var selector = $('<select id="openid_selector"><option>Select your provider</option></select>').change(selected);

        // Add options for each provider
        $.each(settings.providers, function(i, val) {
            if (val.major)
                selector.append(getOption(val.name, i));
        });

        var form = this;
        form.css({ 'background-image': 'none' });
        form.append(selector).append(inputarea).submit(submit);

        idx = readLoginCookie()
        if (idx && idx != -1) {
            selected(null, idx);
            return true;
        }
        else {
            return false;
            setLoginCookie(-1);
        }

    };
})(jQuery);