(function($) {
$.ti.login = {

	loginHTML:	$([ '<div id="swapableContent">',
						'<h2><img src="/shared/resource/images/itinerary_planner/nl/text/log-in-trip-planner.png" width="301" height="28" alt="Bewaar je Reisplanner. Als je Reisplanner al bewaard is, log dan in."/></h2>',
						'<p>Als je je Reisplanner al hebt bewaard, log dan in.</p>',
						'<form method="" action="" id="loginForm">',
							'<fieldset class="login">',
                    '<h3 id="loginHeading" style="display: none"></h3>',
								'<input type="text" id="loginUsername" value="Gebruikersnaam (je e-mailadres)"/>',
								'<div class="passwordOverlay">',
									'<label class="password" for="loginPassword">Voer wachtwoord in</label>',
									'<input type="password" id="loginPassword" />',
								'</div>',
							'</fieldset>',
							'<input type="image" id="logInButton" class="button" src="/shared/resource/images/itinerary_planner/nl/buttons/login.png" alt="Inloggen" />',
                    '<img id="becomeMember" class="button" src="/shared/resource/images/itinerary_planner/nl/buttons/sign_up_now.png" alt="Bewaar je Reis op Ierland.nl" />',
							'<div><a href="#" class="call-to-action" id="forgotPassword">Ik ben mijn wachtwoord vergeten</a></div>',
						'</form>',
						'<h3></h3>',
						'<p></p>',
					'</div>'
				].join('')),

	registerHTML:	$([	'<div id="swapableContent">',
						'<h2><img src="/shared/resource/images/itinerary_planner/nl/text/overlay-headings/save-your-trip.png" alt="Bewaar je Reisplanner op Ierland.nl" height="23" /></h2>',
						'<p id="registerInstructions">Hallo, om je Reis te bewaren zodat je er later weer bij kunt, voer je e-mailadres in en kies een wachtwoord. Hierna kun je je Reis een andere naam geven, andere Reizen plannen, deze met familie en vrienden delen en anderen inspireren. </p>',
						'<form method="" action="" id="registerForm">',
							'<fieldset class="login section">',
								'<h3></h3>',
								'<select id="registerTitle" class="select">',
									'<option selected="selected">Aanspreektitel</option>',


									'<option>Dhr</option>',



									'<option>Mevr</option>',





									'<option>Mej</option>',



									'<option>Dr</option>',






								'</select>',
								'<input type="text" id="registerFirstName" value="Voornaam" />',
								'<input type="text" id="registerLastName" value="Achternaam" />',
							'</fieldset>',
							'<fieldset class="login">',
								'<h3>Jouw Reisplanner-gegevens</h3>',
								'<input type="text" id="registerEmail" value="Jouw e-mailadres (dit wordt je gebruikersnaam)" />',
								'<input type="text" id="registerEmailConfirm" value="Bevestig je e-mailadres" />',
								'<div class="passwordOverlay">',
									'<label class="password" for="registerPassword">Wachtwoord</label>',
									'<input type="password" id="registerPassword" value="" />',
								'</div>',
								'<div class="passwordOverlay">',
									'<label class="password" for="registerPasswordConfirm">Bevestig je nieuwe wachtwoord</label>',
									'<input type="password" id="registerPasswordConfirm" value="" />',
								'</div>',

									'<input type="checkbox" class="checkbox" path="marketing" id="marketing" />',
									'<label for="marketing"><span style="font-size : 8pt;line-height:14pt">Graag ontvang ik per email nieuws en speciale promoties van Ierland Toerisme.</span></label>',
								
							'</fieldset>',
						'<input type="image" id="registerButton" class="button" src="/shared/resource/images/itinerary_planner/nl/buttons/save-now.png" alt="Bewaar je Reisplanner op Ierland.nl" style="float: right" />',
                        '<img class="button" id="transitionToLogin" src="/shared/resource/images/itinerary_planner/nl/buttons/already_signed_up.png" alt="Inloggen" />',
						'</form>',
						'</div>'
					].join('')),

	forgotHTML: $([ '<div id="swapableContent">',
						'<h2>Maak een nieuw wachtwoord aan</h2>',
						'<p>Je wachtwoord wordt verstuurd naar je e-mailadres</p>',
						'<form method="" action="" id="forgotForm">',
							'<fieldset class="login">',
								'<h3>Voer je e-mailadres in:</h3>',
								'<input type="text" id="forgotEmail" value="E-mailadres" />',
							'</fieldset>',
								'<input type="image" class="button" value="submit" id="forgotButton" src="/shared/resource/images/itinerary_planner/nl/buttons/submit.png" height="22" />',
						'</form>',
					'</div>'
				].join('')),

	emailSentHTML: $([
						'<div id="swapableContent">',
							'<h2>Bevestiging</h2>',
							'<p>Je wachtwoord is verstuurd naar het opgegeven e-mailadres</p>',
							'<p>Bedankt.</p>',
							'<input type="image" class="button" value="close" id="closeButton" src="/shared/resource/images/itinerary_planner/nl/buttons/close.png" height"22" />',
						'</div>'
					].join('')),

    init: function() {
		// Is user logged in?
        if($.ti.tripData.trip.login) {
			$.ti.login.loggedIn = true;
        }
		this.setUserStatus();
	},

	loggedIn: false,

	afterLogin: function() {$.ti.popup.close();},

    openDialogue: function()
    {
        $.ti.login.openDialogueWithMode("register");
    },

    openDialogueWithMode: function(mode)
    {
        var content = $.ti.login.registerHTML;
        var events = $.ti.login.registerEvents;

        if (mode === "login")
        {
            content = $.ti.login.loginHTML;
            events = $.ti.login.events;
        }

        $.ti.popup.init({
            content: content,
            callback: events,
            width: '360px'
        });
    },


/*
    openDialogue: function() {
		$.ti.popup.init({
			content: $.ti.login.loginHTML,
			callback: $.ti.login.events,
			width:'360px'
		});
	},
    */

	events: function() {
		$('#loginForm').bind('submit.submitLogin', function(event){
			event.preventDefault();
			$.ti.validate.check('#loginForm', {
				rules: {
					loginUsername: {
						"required" : 'Dit is een verplicht veld'
					},
					loginPassword: {
						"required" : 'Dit is een verplicht veld',
						"minLength": ["6", 'Het wachtwoord moet uit minimaal 6 tekens bestaan']
					}
				},
				success: $.ti.login.submitLogin,
				failure: $.ti.login.throwError
				});
		});

		$('#forgotPassword').click(function(){
			$.ti.popup.swapContent($.ti.login.forgotHTML, "360px", $.ti.login.forgotEvents);
		});

		$('#becomeMember').click(function(){
			$.ti.popup.swapContent($.ti.login.registerHTML,"360px", $.ti.login.registerEvents);
		});
	},

	registerEvents: function() {
		$('#registerButton').click(function(event){
			event.preventDefault();
			$.ti.validate.check('#registerForm', {
				rules: {
					registerFirstName: {
						"required"	: 'Dit is een verplicht veld'
					},
					registerLastName: {
						"required"	: 'Dit is een verplicht veld'
					},
					registerEmail: {
						"required"	: 'Dit is een verplicht veld',
						"email"		: 'Het e-mailadres is ongeldig'
					},
					registerEmailConfirm: {
						"required"	: 'Dit is een verplicht veld',
						"matchVal"	: ['#registerEmail', 'De e-mailadressen moeten overeenkomen']
					},
					registerPassword: {
						"required"	: 'Dit is een verplicht veld',
						"minLength"	: ["6", 'Het wachtwoord moet uit minimaal 6 tekens bestaan'],
						"matchVal"	: ['#registerPasswordConfirm', 'Sorry, je wachtwoorden komen niet overeen. Om toegang te krijgen tot je Reisplanner, klik op &#39;wachtwoord vergeten&#39;.']
					},
					registerPasswordConfirm: {
						"required"	: 'Dit is een verplicht veld',
						"minLength"	: ["6", 'Het wachtwoord moet uit minimaal 6 tekens bestaan']
					}
				},

				success: $.ti.login.submitRegister
				});
		});

        $("#transitionToLogin").unbind("click");
        $("#transitionToLogin").click(function(event) {
            event.preventDefault();
            $.ti.popup.swapContent($.ti.login.loginHTML, "360px", $.ti.login.events);
        });
	},

	submitRegister: function() {
		var login = {
			username: $('#registerEmail').val(),
			title: $('#registerTitle').val(),
			firstname: $('#registerFirstName').val(),
			lastname: $('#registerLastName').val(),
			password: $('#registerPassword').val(),
                                                marketing: false
		};

                                if ($('#marketing').is(':checked'))
                                     login.marketing = true;

		$.ti.tripData.trip.login = login;
		$.ti.ajax.postData('/nl/trip/', $.ti.tripData, $.ti.login.registerResponse);
	},

	registerResponse: function(response) {
        if (response === 20)
        {
            // Already registered...
            $('#registerInstructions').text(



				'This email address has already been registered'


				).css('color', 'red');
        } else if(response !== 0) {
			$.ti.popup.close();
			$.ti.login.loggedIn = true;
			$.ti.login.setUserStatus();
		} else {
			// ToDo - need to represent this to user
			$.ti.console.log('failed login');
		}
	},

	forgotEvents: function() {
		$('#forgotButton').click(function(event){
			event.preventDefault();
			$.ti.validate.check('#forgotForm', {
				rules: {
					forgotEmail: {
						"required" : 'Dit is een verplicht veld',
						"email" : 'Voer een geldig e-mailadres in'
					}
				},
				success: $.ti.login.submitForgot
			});
		});
	},

	submitForgot: function() {
		var forgot = {
				login: {
					username: $('#forgotEmail').val()
				}
			};
		$.ti.ajax.postData('/nl/trip/', forgot, $.ti.login.forgotResponse);
	},

	forgotResponse: function(response) {
		if(response !== 0) {
			$.ti.popup.swapContent($.ti.login.emailSentHTML, "360px", $.ti.login.emailSentEvents);
		} else {
			var errorLabel = $('<label for="forgotEmail" class="error">Dit e-mailadres is niet aangemeld</label>').hide();
            $('#forgotEmail').before(errorLabel);
            errorLabel.fadeIn(500);
		}
	},

	emailSentEvents: function() {
		$('#closeButton').click(function(){
			$.ti.popup.close();
		});
	},

	submitLogin: function() {
		var login = {
			login: {
				username: $('#loginUsername').val(),
				password: $('#loginPassword').val()
			}
		};

		$.ti.tripData.trip.login = login.login;
		if($.ti.tripData.trip.tripActivities) {
			$.ti.ajax.postData('/nl/trip/?tripId=' + $.ti.tripData.trip.id, $.ti.tripData, $.ti.login.checkLoginResponse);
		} else {
			$.ti.ajax.postData('/nl/trip/?tripId=', $.ti.tripData, $.ti.login.checkLoginResponse);
		}
	},

	checkLoginResponse: function(data) {
		if(data !== 0) {
			$('#loginForm').unbind('submit.submitLogin');
			// run the temporary after login function
			$.ti.login.afterLogin();
			// reset the after login function to it's normal close popup behaviour
			$.ti.login.afterLogin = function() {$.ti.popup.close();};
			// Todo - stop using this item - work from main trip object
			$.ti.login.loggedIn = true;
			$.ti.panel.saveTripAndPromos(data, $.ti.panel.useTripData);
		} else {
			var error = $('<label for="loginUsername" class="error">Sorry, je gebruikersnaam en wachtwoord komen niet overeen met onze gegevens</label>');
			$('#loginHeading').html(error).show();
		}
	},

	checkLogoutResponse: function(data) {
		if(data !== 0) {
			$.ti.login.loggedIn = false;
			$.ti.login.setUserStatus();
			$.ti.recalculateCalendarGrid.clearGrid();
            $('.day', '#calendarDays').remove();
			$.ti.panel.saveTripAndPromos(data, $.ti.panel.useTripData);
		}
	},

	setUserStatus: function() {
		if($.ti.login.loggedIn === true) {
			// Set username and account management event
			$('#userName').empty()
						  .append('Hallo:&nbsp;<a id="userName">'



							  + $.ti.tripData.trip.login.firstname


							  + '</a>')
						  .click(function(){
							$.ti.account.init();
						  });
			// Clear click events
			$('#logIn').unbind('click');
			// Add log out event
			$('#logIn').text('Uitloggen')
					   .bind('click.logout', function(event) {
							event.stopPropagation();
							$.ti.login.logOut();
						});

		} else {
			$('#userName').text('Bekijk je opgeslagen reizen');
			// Clear click events
			$('#logIn').unbind('click');
			$('#logIn').text('Inloggen')
					   .bind('click.login', function(event){
							event.stopPropagation();
							$.ti.login.openDialogueWithMode("login");
						});
		}
	},

	logOut: function() {
		var logout = {
			username: ''
		};
		$.ti.tripData.trip.login = logout;
		$.ti.ajax.postData('/nl/trip/?tripId=-1', $.ti.tripData, $.ti.login.checkLogoutResponse);
	}
};
})(jQuery);