var OpenIdPanel = new Class({
	initialize : function(options) {
		this.usernamePanel = options.usernamePanel;
		this.usernameInput = options.usernameInput;
		this.urlPrefixPanel = options.urlPrefixPanel;
		this.urlSuffixPanel = options.urlSuffixPanel;
		this.providerSelect = options.providerSelect;
		this.providerInfoFunc = options.providerInfoFunc;
		this.initClearUserName = options.initClearUserName;
		this.firstChange = true;
		this.providerChange();
		this.clearUserNameOnUpdate = true;
		this.providerSelect.addEvent('change', this.providerChange.bind(this));
	}, 
	providerChange : function() {
		var providerId = this.providerSelect.getValue();
		if (providerId < 1) {
			this.updatePanel(null);
			return;
		}
		this.providerInfoFunc(providerId, function(provider) {
			this.updatePanel(provider);
			this.firstChange = false;
		}.bind(this));
	},
	updatePanel : function(provider) {
		if (provider == null || !provider.userNameRequired) {
			this.usernamePanel.setStyle('display', 'none');
		} else {
			if (!this.firstChange || this.initClearUserName)
				this.usernameInput.value = '';
			this.urlPrefixPanel.innerHTML = provider.urlUserNamePrefix;
			this.urlSuffixPanel.innerHTML = provider.urlUserNameSuffix;
			this.usernamePanel.setStyle('display', '');
		}
	}
});