CP = {};

Request.active = 0;

CP.State = new Class({

	Implements: Options,

	options: {
		countryField: null,
		stateField: null
	},

	initialize : function(options) {
		this.setOptions(options);
	},

	initSelect : function() {

		var countryField = $(this.options.countryField);

		if (countryField) {
			countryField.addEvent("change", function(event) {
				var countryId = event.target.options[event.target.selectedIndex].value;
				new Request.JSON({url : '/countries/' + countryId + '/states.json',
				onRequest: function() {
					Request.active++;
				},
				onSuccess: function(states) {

					var selectOptions = new Element('select');

					selectOptions.adopt(new Element('option', {
						'value': '',
						'html': 'Please select your county/state'
					}) )

					for(var i = 0; i < states.length; i++) {
						state = states[i].state;
						selectOptions.adopt(new Element('option', {
							'value': state.id,
							'html': state.name
						}));
					}

					$(this.options.stateField).set('html', selectOptions.innerHTML);
					$(this.options.stateField).set('disabled', (states.length < 1) ? true : false);

					Request.active--;

				}.bind(this) }).get();
			}.bind(this));
		}

	}

});

window.addEvent('domready', function() {

	var state = new CP.State({countryField: 'user_country_id', stateField: 'user_state_id'});
	state.initSelect();

});