$(document).ready(function() {
	initRecoverForm();
});

var countries = null;
var states = new Array();

function login(afterLogin) {

	$('html,body').animate({
		scrollTop : 0
	}, 2000);

	if (!afterLogin)
		afterLogin = function() {
		};

	var overlay = new Overlay();	
	overlay.show(function() {
		loginForm(overlay, afterLogin);
	});

}

function loginForm(overlay, afterLogin) {

	var container = document.createElement('div');
	container.id = 'login-form-container';
	$('body').append(container);

	var win = document.createElement('div');
	win.id = 'login-form-win';
	$(container).append(win);

	var closeButton = document.createElement('div');
	closeButton.id = 'login-form-close-button';
	$(win).append(closeButton);

	$(closeButton).click(function() {
		overlay.close();
		$(container).remove();
	});

    $(overlay.overlay).click(function() {
		overlay.close();
		$(container).remove();    
    });
	
	var bg1 = document.createElement('div');
	bg1.id = 'login-form-bg1';
	$(win).append(bg1);
	var div0 = document.createElement('div');
	div0.id = 'login-form-div0';
	$(win).append(div0);

	var h20 = document.createElement('h2');
	$(div0).append(h20);
	$(h20).text($('#user-js-text_F_NOTUSER').text());

	var div1 = document.createElement('div');
	$(div1).addClass('login-form-text');
	$(div0).append(div1);
	$(div1).text($('#user-js-text_F_LEGENDREGISTER').text());

	var div2 = document.createElement('div');
	div2.id = 'login-form-div2';
	$(div0).append(div2);
	$(div2).append(
			userFormButton($('#user-js-text_F_REGISTER').text(), function() {
				$(container).remove();
				newUser(overlay);
			}));

	var form = document.createElement('form');
	$(bg1).append(form);

	var h21 = document.createElement('h2');
	$(form).append(h21);
	$(h21).text($('#user-js-text_F_REGISTRED').text());

	$(form).append(
			loginFormInput($('#user-js-text_F_MAIL_PC').text(), 162, 'login',
					'text'));
	$(form).append(loginFormInput('Password', 162, 'password', 'password'));

	var div1 = document.createElement('div');
	$(form).append(div1);
	div1.id = 'login-form-password-remember';
	var anchor = document.createElement('a');
	if ($('#page-lang').text() != 'es') {
		anchor.href = '/' + $('#page-lang').text() + "/password-recover";
	} else {
		anchor.href = "/password-recover";
	}
	$(anchor).text($('#user-js-text_F_FORGOTPASS').text());
	$(div1).append(anchor);

	var div4 = document.createElement('div');
	div4.id = 'login-form-div4';
	$(form).append(div4);
	$(div4).append(
			userFormButton($('#user-js-text_F_LOGIN').text(), function() {
				doLogin(overlay, afterLogin);
			}));
}

function doLogin(overlay, afterLogin) {

	var login = $('#login-form-login-input')[0].value;
	var password = $('#login-form-password-input')[0].value;

	var params = 'login=' + login + '&password=' + password;

	$.ajax({
		url : '/login',
		type : 'POST',
		data : params,
		dataType : 'xml',
		success : function(data) {
			window.location.reload();
			afterLogin();
		},
		error : function(request, textStatus) {
			$('#login-form-bg0').remove();
			loginError(overlay);
		}
	});

}

function loginError(overlay) {

	var win = new OverWindow(400, 100, overlay);
	win.destroyOverlayOnClose = false;
	
	var div0 = document.createElement('div');
	div0.id = 'login-form-error';
	win.content = div0;

	var br = document.createElement('br');
	$(div0).append(br);
	var span = document.createElement('span');
	$(div0).append(span);
	$(span).text($('#user-js-text_M_USER_BAD').text());

	win.show(function() {
	});

}

function loginFormInput(label, width, name, type) {
	var input = document.createElement('input');
	input.id = 'login-form-' + name + '-input';
	if (type == 'hidden')
		$(input).hide();
	if (type == 'password')
		input.type = 'password';
	input.name = name;
	var div = document.createElement('div');
	$(div).addClass('login-form-input');
	var span = document.createElement('span');
	$(span).text(label);
	$(div).append(span);
	$(div).append(document.createElement('br'));
	$(div).append(input);
	input.style.width = width + 'px';
	return div;
}

function newUser(overlay, onSuccess) {

	var win = new OverWindow(610, 450, overlay);

	var content = document.createElement('form');
	win.content = content;
	content.id = 'user-form';

	var title = document.createElement('h2');
	$(content).append(title);
	$(title).text($('#user-js-text_F_REGISTRATION').text());

	var h3 = document.createElement('h3');
	$(content).append(h3);
	$(h3).text($('#user-js-text_F_TOREGISTER').text());

	var div0 = document.createElement('div');
	div0.id = 'user-form-social-media';
	$(content).append(div0);
	var span0 = document.createElement('span');
	$(div0).append(span0);
	$(span0).text('_');

	var div1 = document.createElement('div');
	div1.id = 'user-form-text';
	$(content).append(div1);
	$(div1).text($('#user-js-text_F_PLEASE').text());

	var h40 = document.createElement('h4');
	$(content).append(h40);
	$(h40).text($('#user-js-text_F_CLIENTDETAILS').text());

	var row0 = userFormRow();
	$(content).append(row0);
	$(row0).append(
			userFormInput($('#user-js-text_F_NAME').text(), 115, 'firstName',
					'text'));
	$(row0).append(
			userFormInput($('#user-js-text_F_SURNAME').text(), 270, 'lastName',
					'text'));
	$(row0).append(
			userFormInput($('#user-js-text_F_PHONE').text(), 112, 'phone',
					'text'));

	var row1 = userFormRow();
	$(content).append(row1);
	$(row1).append(
			userFormInput($('#user-js-text_F_ADRESS').text(), 175, 'address',
					'text'));
	$(row1).append(
			userFormInput($('#user-js-text_F_CP').text(), 50, 'postalCode',
					'text'));
	$(row1).append(
			userFormInput($('#user-js-text_F_COUNTRY').text(), 80, 'country',
					'text'));
	$(row1).append(
			userFormInput($('#user-js-text_F_COUNTRY').text(), 80, 'country',
					'hidden'));
	$(row1).append(
			userFormInput($('#user-js-text_F_PROVINCE').text(), 80, 'state',
					'text'));
	$(row1).append(
			userFormInput($('#user-js-text_F_PROVINCE').text(), 80, 'state',
					'hidden'));
	$(row1)
			.append(
					userFormInput($('#user-js-text_F_CITY').text(), 84, 'city',
							'text'));

	$(content).append(userFormSeparator());

	var h41 = document.createElement('h4');
	$(content).append(h41);
	$(h41).text($('#user-js-text_F_ACCESSDATA').text());

	var row2 = userFormRow();
	$(content).append(row2);
	$(row2).append(
			userFormInput($('#user-js-text_F_MAIL').text(), 200, 'email',
					'text'));
	$(row2).append(
			userFormInput($('#user-js-text_F_REPEATMAIL').text(), 200,
					'email0', 'text'));
	$(row2).append(
			userFormInput($('#user-js-text_F_PASSWORD').text(), 100,
					'password', 'password'));

	$(content).append(userFormSeparator());

	// var row3 = userFormRow();
	// $(content).append(row3);
	// $(row3).append(createCaptcha());
	// $(content).append(document.createElement('hr'));

	var languageInput = document.createElement('input');
	$(content).append(languageInput);
	languageInput.name = 'language';
	languageInput.type = 'text';
	$(languageInput).hide();
	languageInput.value = $('#page-lang').text();

	var row4 = userFormRow();
	$(content).append(row4);
	$(row4).append(
			userFormButton($('#user-js-text_F_CANCEL').text(), function() {
				win.close();
			}));
	$(row4).append(userFormButton($('#user-js-text_F_SAVE').text(), function() {
		userDoRegister(content, win, onSuccess);
	}));

	win.show(function() {
		initCountries();
	});

}

function userFormRow() {
	var div = document.createElement('div');
	$(div).addClass('user-form-row');
	return div;
}

function userFormInput(label, width, name, type) {
	var input = document.createElement('input');
	input.type = type;
	input.name = name;
	if (type == 'hidden') {
		input.id = 'user-form_' + name + '_hidden';
		return input; // FIXME:
	} else {
		input.id = 'user-form_' + name;
	}

	var div0 = document.createElement('div');
	$(div0).addClass('user-form-input');

	/* IE bug */
	var div1 = document.createElement('div');
	div1.style.cssFloat = 'none';
	$(div0).append(div1);

	var span = document.createElement('span');
	$(span).text(label);
	$(div1).append(span);
	$(div1).append(document.createElement('br'));
	$(div1).append(input);
	input.style.width = width + 'px';
	return div0;
}

function userFormSeparator() {
	var div = document.createElement('div');
	$(div).addClass('user-form-separator');
	return div;
}

function createCaptcha() {

	var captcha = document.createElement("div");
	captcha.id = "captcha";

	Recaptcha.create("6LcS474SAAAAAA2iOy3XPHq_14cdpd3BFZqfcDg8 ", captcha, {
		theme : "clean",
		lang : "es",
		callback : Recaptcha.focus_response_field
	});

	/*
	 * var img = document.createElement('img'); img.src = '/img/captcha.png';
	 * img.id = 'user-form-captcha';
	 */
	return captcha;
}

function userFormButton(text, f) {
	var input = document.createElement('input');
	input.type = 'button';
	$(input).addClass('button');
	input.value = text;
	$(input).click(function() {
		f();
	});
	return input;
}

function initCountries() {

	listCountries(function() {

		$('#user-form_country').autocomplete({
			minLength : 0,
			source : countries,
			select : function(event, ui) {

				var value = ui.item.value;
				var label = ui.item.label;
				$('#user-form_country_hidden')[0].value = value;
				$('#user-form_country')[0].value = label;

				initStates(value);

				return false;
			},
			focus : function(event, ui) {

				var value = ui.item.value;
				var label = ui.item.label;
				$('#user-form_country_hidden')[0].value = value;
				$('#user-form_country')[0].value = label;

				return false;
			},
			change : function(event, ui) {

				if (ui.item == null) {
					$('#user-form_country_hidden')[0].value = '';
					$('#user-form_country')[0].value = '';
					initStates(null);
				}

			}
		});

	});

	$('#user-form_country').click(function(event, ui) {
		$('#user-form_country').autocomplete('search', '');
	});

}

function listCountries(afterLoad) {

	var lang = $('#page-lang').text();

	if (countries != null) {
		afterLoad();
	} else {

		$
				.ajax({
					url : '/countries',
					success : function(data) {

						countries = new Array();
						var countryList = data.getElementsByTagName('country');
						for ( var i = 0; i < countryList.length; i++) {
							var country = new Object();
							countries.push(country);
							country['value'] = countryList[i]
									.getAttribute('code');
							var countryNameList = countryList[i]
									.getElementsByTagName('name');
							var name = null;
							for ( var j = 0; j < countryNameList.length
									&& name == null; j++)
								if (countryNameList[j].getAttribute('lang') == lang)
									name = countryNameList[j].firstChild.nodeValue;
							country['label'] = name;
						}

						countries.sort(function(a, b) {
							if (a.label == b.label)
								return 0;
							else if (a.label > b.label)
								return 1;
							else
								return -1;
						});
						afterLoad(countries);

					}
				});

	}

}

function initStates(countryCode) {

	$('#user-form_state_hidden')[0].value = '';
	$('#user-form_state')[0].value = '';

	if (countryCode == null) {

		$('#user-form_state').autocomplete('destroy');

	} else {

		listStates(countryCode, function() {

			$('#user-form_state').autocomplete({
				minLength : 0,
				source : states[countryCode],
				select : function(event, ui) {

					var value = ui.item.value;
					var label = ui.item.label;
					$('#user-form_state_hidden')[0].value = value;
					$('#user-form_state')[0].value = label;

					return false;
				},
				focus : function(event, ui) {

					var value = ui.item.value;
					var label = ui.item.label;
					$('#user-form_state_hidden')[0].value = value;
					$('#user-form_state')[0].value = label;

					return false;
				},
				change : function(event, ui) {

					if (ui.item == null) {
						$('#user-form_state_hidden')[0].value = '';
						$('#user-form_state')[0].value = '';
					}
				}
			});

			$('#user-form_state').click(function(event, ui) {
				$('#user-form_state').autocomplete('search', '');
			});

		});

	}

}

function listStates(countryCode, afterLoad) {

	var lang = $('#page-lang').text();

	$
			.ajax({
				url : '/states?country=' + countryCode,
				success : function(data) {

					if (states[countryCode] == null) {

						states[countryCode] = new Array();

						var stateList = data.getElementsByTagName('state');
						for ( var i = 0; i < stateList.length; i++) {
							var state = new Object();
							states[countryCode].push(state);
							state['value'] = stateList[i].getAttribute('code');
							var stateNameList = stateList[i]
									.getElementsByTagName('name');
							var name = null;
							for ( var j = 0; j < stateNameList.length
									&& name == null; j++)
								if (stateNameList[j].getAttribute('lang') == lang)
									name = stateNameList[j].firstChild.nodeValue;
							state['label'] = name;
						}

						states[countryCode].sort(function(a, b) {
							if (a.label == b.label)
								return 0;
							else if (a.label > b.label)
								return 1;
							else
								return -1;
						});
					}

					afterLoad(states[countryCode]);

				}
			});

}

function userDoRegister(form, win, onSuccess) {
	var validated = true;

	validated &= validateInput('user-form_firstName');
	validated &= validateInput('user-form_lastName');
	validated &= validateInput('user-form_phone');
	// validated &= validateInput('user-form_address');
	// validated &= validateInput('user-form_postalCode');
	validated &= validateInput('user-form_country');
	// validated &= validateInput('user-form_state');
	// validated &= validateInput('user-form_city');
	validated &= validateInput('user-form_email');
	validated &= validateInput('user-form_email0');
	validated &= validateInput('user-form_password');

	var email = $('#user-form_email')[0];
	if (validated) {

		var email0 = $('#user-form_email0')[0];

		if (email.value != email0.value) {
			markInput(email);
			markInput(email0);
			validated = false;
		}

	}

	if (validated) {

		var login = document.createElement('input');
		$(form).append(login);
		$(login).hide();
		login.name = 'login';
		login.value = email.value;

		var params = $(form).serialize();
		$.ajax({
			url : '/user-do-register',
			type : 'POST',
			data : params,
			dataType : 'xml',
			success : function(data) {
				var errors = data.getElementsByTagName('error');
				if (errors != null && errors.length > 0) {
					var message = errors[0].firstChild.nodeValue;
					alert($('#user-js-text_M_USER_REGIS').text());
				} else {
					alert($('#user-js-text_M_REGIS_OK').text());
					$('#login-box-login').hide();
					$('#login-box-logout').show();
					win.close();
					if (onSuccess)
						onSuccess(data)
				}
			},
			error : function(request, textStatus) {
				alert(textStatus);
			}
		});
	}
}

function validateInput(id) {

	var input = $('#' + id)[0];
	if (input.value == '') {
		markInput(input);
		return false;
	}
	return true;
}

function markInput(input) {

	input.style.backgroundColor = '#ffeded';
	$(input).click(function() {
		$.each($('[id^=user-form_]'), function(i, v) {
			v.style.backgroundColor = 'white';
		});
	});

}

function initRecoverForm() {

	if ($('#recover-form').length == 0)
		return;

	$('#recover-form-button_1').click(function() {
		doPasswordRecover('1');
	});
	$('#recover-form-button_2').click(function() {
		doPasswordRecover('2');
	});
	$('#recover-form-button_3').click(function() {
		doPasswordRecover('3');
	});
}

function doPasswordRecover(box) {

	if (!validateInput('recover-form-login-input_' + box)) {
		$('#recover-form-login-input_' + box).click(function() {
			this.style.backgroundColor = 'white';
		});
		return;
	}

	var params = 'login=' + $('#recover-form-login-input_' + box)[0].value;

	$.ajax({
		url : '/password-do-recover',
		type : 'POST',
		data : params,
		success : function(data) {
			var overlay = new Overlay();
			overlay.show(function() {
				recoverMessage(overlay, $('#user-js-text_M_PASS_SENT').text());
			});
		},
		error : function(request, textStatus) {
			var overlay = new Overlay();
			overlay
					.show(function() {
						recoverMessage(overlay, $('#user-js-text_M_USER_EXIST')
								.text());
					});
		}
	});

}

function recoverMessage(overlay, message) {

	var win = new OverWindow(400, 100, overlay);

	var div0 = document.createElement('div');
	div0.id = 'login-form-error';
	win.content = div0;

	var br = document.createElement('br');
	$(div0).append(br);
	var span = document.createElement('span');
	$(div0).append(span);
	$(span).text(message);

	win.show(function() {
	});

}