var AjaxLogin = new Singleton(function($) {
    this.dependencies = {
        stylesheets: {
            ajax_login: '/stylesheets/citizen/ajax_login.css'
        }
    };
    var base = this;
    
    this.loggedIn;
	this.element;
	this.dialog = $('<div/>');
	
	this.ready = function() {
		base.bindElements();
		base.loadDialog();
	};
	
	this.methods({
	    open: function(form) {
	        base.dialog.find('form').hide().filter('.' + form).show();
	        base.dialog.dialog('option', 'title', (form == 'register') ? 'Register' : 'Sign In').dialog('open');
	    },
	    loadDialog: function() {
	        base.dialog.dialog({
                autoOpen: false,
                bgiframe: true,
                modal: true,
                resizable: false,
                width: 430,
                height: 'auto',
                title: 'Sign In',
                buttons: {
                    Login: function() {
                        $(this).find('form:visible').submit();
                        $(this).loading('show');
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                }
            }).load('/citizen/quick_signin/form', function() {
				$(this).find('a.show_registration').click(function() {
					base.showRegistration();
					return false;
				});
				$(this).find('a.show_login').click(function() {
					base.showLogin();
					return false;
				});
				$(this).find('iframe').load(function() {
					var element = $(this).contents().find('body');
					if (element.text() != '') {
						var data = eval('(' + element.text() + ')');
					}
					if (data != null) { base.handleLoginResponse(data); }
				});
            });
		},
        bindElements: function() {
			$('.requires_login').livequery('click', function() {
				base.element = $(this);
        		(base.loggedIn) ? base.element.trigger('login') : base.dialog.dialog('open');
				return false;
			});
		},
		showRegistration: function(name) {
    		base.dialog.find('form.login').hide('slide', { direction: 'left', easing: 'easeInBack' }, 1000, function() {
    			base.dialog.animate({ height: base.dialog.find('form.register').outerHeight() });
    			base.dialog.find('form.register').show('slide', { direction: 'right', easing: 'easeOutBack' }, 1000);
    			base.dialog.dialog('option', 'title', 'Register');
    		});
    	},
    	showLogin: function(name) {
    		base.dialog.find('form.register').hide('slide', { direction: 'right', easing: 'easeInBack' }, 1000, function() {
    			base.dialog.animate({ height: base.dialog.find('form.login').outerHeight() });
    			base.dialog.find('form.login').show('slide', { direction: 'left', easing: 'easeOutBack' }, 1000);
    			base.dialog.dialog('option', 'title', 'Sign In');
    		});
    	},
    	handleLoginResponse: function(response) {
    		if (response.errors) {
    			window.alert('Please review the following errors:\n' + response.errors.join('\n'));
    		}
    		else if (response.verify) {
    			window.alert(response.verify);
    			base.dialog.dialog('close');
    		}
    		else {
    			base.loggedIn = true;
    			base.dialog.dialog('close');
    			$.get('/citizen/quick_signin/top_bar', function(data) {
    				$('#top_bar').replaceWith(data);
    			});

    			var events = base.element.data('events');
    			if ((events) && (events.login == null)) {
    				// If there is not login handler, do the browser default actions
    				if (base.element.is('a')) {
    					window.location.href = base.element.attr('href');
    				}
    				if (base.element.is('input[type=submit]')) {
    					base.element.parents('form').submit();
    				}
    			}
    			else {
    				base.element.trigger('login');
    			}
    		}
    		base.dialog.loading('hide');
    	}
	});
});