// JavaScript Document for Aussie SE global elements.

$(document).ready(function() {
													 
	// We need to play with the footer a little. It must always appear to either sit at the bottom of the browser window or the document depending on which is higher.
	if ($(window).height() >= $('#containerMain').height()) {
		$('#containerFooter').css('position', 'absolute');
	} else {
		$('#containerFooter').css('position', 'relative');
	}
	
	// The code below toggles the slide down and slide up for the hair must-haves.
	// We add the content dynamically and load it into the DOM. Without JS it will merely link to a separate page.
	// We need to initially hide the content, set the relevant CSS and adjust the width to be the same as that of contentMustHaves. Finally, we apply the toggle functionality onClick.
	// TODO: the load function to pull in the "Must Haves" content.
	$('#containerMustHaves a#arrowOpen').after(	
		'<div id="contentMustHaves"></div>'
	);
	
	$('#contentMustHaves').css({display: 'none', position: 'absolute', top: ($('#containerJoinList').height()) + 'px', left: '0px', paddingLeft: '10px', paddingRight: '10px', backgroundColor: '#2d2d2d', zIndex: '100'})
		.width($('#containerMustHaves').width());

	$('#containerAccount a#arrowOpen2').after(	
		'<div id="contentAccount"></div>'
	);
	
	$('#contentAccount').css({display: 'none', position: 'absolute', top: ($('#containerJoinList').height()) + 'px', left: '0px', paddingLeft: '10px', paddingRight: '10px', marginTop: '5px', backgroundColor: '#2d2d2d', zIndex: '100'})
		.width($('#containerAccount').width() * 2.2);
		
	$('.openSignIn').click(function() {
		if ($('#contentMustHaves').css('display') == "none") {
			$('#contentMustHaves').load('/fi/sign-in.php .overlay', function() {
				$('#txtOpen').text('Close');
				$('#arrowOpen img').attr('src', '/country/fi/images/img-close-cross.png');
				$('#contentMustHaves').slideDown('slow');
				
				$.getScript('/country/fi/scripts/jquery.validate.js', function() {
					$("#signInFrm").validate({
							
						rules: {
							email: {
								required: true,
								email: true
							},
							password: {
								required: true
							}
						},
						
						highlight: function(element) {
							$(element.form).find("label[for=" + element.id + "]")
								.css('color', '#f00');
						},
						unhighlight: function(element) {
							$(element.form).find("label[for=" + element.id + "]")
								.css('color', '#ccc');
						},
			
						messages: {
							email: {
								required: "",
								email: ""
							},
							password: ""
						},
						
						submitHandler: function() {
							
							jQuery.post('/modules/sign-in.ajax.code.php', {
								'email': $("#email").attr("value"),
								'password': $("#password").attr("value")
							}, function(data) {
								if (data != null && data.status == 'login-succeeded') {
									window.location = '/fi/my-hair-must-haves/index.php';
								} else if (data != null && data.status == 'login-failed') {
									$('#loginFailed').remove();
									$('#signInIntro').after('<p id="loginFailed">Login Failed!</p>');
								} else {
									$('#loginFailed').remove();
									$('#signInIntro').after('<p id="loginFailed">Server response is not what was expected!</p>');
								}
							}, "json");
							
							return false; 
							
						}
					});																									
				});
				
			});
		} else {
			$('#txtOpen').text('Sign In');
			$('#arrowOpen img').attr('src', '/country/fi/images/img-down-arrow.png');
			$('#contentMustHaves').slideUp('slow');
		}
		return false;
	});
	
	$('.openAccount').click(function() {
		if ($('#contentAccount').css('display') == "none") {
			$('#contentAccount').load('/fi/account.php .overlay', function() {
				$('#txtOpen2').text('Close');
				$('#arrowOpen2 img').attr('src', '/country/fi/images/img-close-cross.png');
				$('#contentAccount').slideDown('slow');
				$('#containerAccount').css({borderBottom: '5px solid #2D2D2D'});
				
				$.getScript('/country/fi/scripts/jquery.validate.js', function() {
					$("#signInFrm2").validate({
							
						rules: {
							email: {
								required: true,
								email: true
							},
							password: {
								required: true
							}
						},
						
						highlight: function(element) {
							$(element.form).find("label[for=" + element.id + "]")
								.css('color', '#f00');
						},
						unhighlight: function(element) {
							$(element.form).find("label[for=" + element.id + "]")
								.css('color', '#ccc');
						},
			
						messages: {
							email: {
								required: "",
								email: ""
							},
							password: ""
						},
						
						submitHandler: function() {
							
							jQuery.post('/modules/sign-in.ajax.code.php', {
								'email': $("#email2").attr("value"),
								'password': $("#password2").attr("value")
							}, function(data) {
								if (data != null && data.status == 'login-succeeded') {
									window.location = '/fi/my-account/index.php';
								} else if (data != null && data.status == 'login-failed') {
									$('#loginFailed2').remove();
									$('#signInIntro2').after('<p id="loginFailed2">Login failed, you can <a href="/fi/reset-password/">reset your password</a>!</p>');
								} else if (data != null && data.status == 'login-failed-frozen') {
									$('#loginFailed2').remove();
									$('#signInIntro2').after('<p id="loginFailed2">Account was frozen for 24 hours!</p>');
								} else {
									$('#loginFailed2').remove();
									$('#signInIntro2').after('<p id="loginFailed2">Server response is not what was expected!</p>');
								}
							}, "json");
							
							return false; 
							
						}
					});																									
				});
				
			});
		} else {
			$('#txtOpen2').text('My Account');
			$('#arrowOpen2 img').attr('src', '/country/fi/images/img-down-arrow.png');
			$('#contentAccount').slideUp('slow', function() {
				$('#containerAccount').css({borderBottom: '0'});
			});
		}
		return false;
	});	
	
	$('.openMustHaves').click(function() {
		if ($('#contentMustHaves').css('display') == "none") {
			$('#contentMustHaves').load('/modules/my-hair-must-haves/index.ajax.php .overlay', function() {
				$('#txtOpen').text('Close');
				$('#arrowOpen img').attr('src', '/country/fi/images/img-close-cross.png');
				$('#contentMustHaves').slideDown('slow');
			});
		} else {
			$('#txtOpen').text('Open');
			$('#arrowOpen img').attr('src', '/country/fi/images/img-down-arrow.png');
			$('#contentMustHaves').slideUp('slow');
		}
		return false;
	});
	
	// The code below toggles the slide down and slide up for the country selector.
	// We add the content dynamically and load it into the DOM. Without JS it will merely link to a separate page.
	// We need to initially hide the content, set the relevant CSS and adjust the width to be the same as that of countrySelect. Finally, we apply the toggle functionality onClick.
	// TODO: the load function to pull in the countries.
	$('#countrySelect a').after(	
		'<div id="contentCountrySelect">hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello</div>'
	);
	
	$('#contentCountrySelect').css({display: 'none', position: 'absolute', bottom: '18px', right: '0px', paddingLeft: '4px', backgroundColor: '#000', zIndex: '99'})
		.width($('#countrySelect').width() + 17);
		
	$('#countrySelect a').click(function() {
		if ($('#contentCountrySelect').css('display') == "none") {
			$('#contentCountrySelect').slideDown('slow');
		} else {
			$('#contentCountrySelect').slideUp('slow');
		}
		return false;
	});

	// We are using jQuery to make it appear that the background of the nav extends to the edge of the browser window.
	// We insert the element after the nav container.
	$('#bgNav').after(	
		'<div id="navBg"></div>'
	);
	
	// We need to get the dimensions of the browser window, subtract the width of containerMain from that and then halve it.
	// We then set its height to be the same as containerNav and apply the CSS we need to position and render it.
	$('#navBg').width(($(document).width() - $('#containerMain').width()) / 2)
		.height($('#bgNav').height())
		.css({position: 'absolute', top: '0px', left: $('#containerMain').width() + 'px', backgroundColor: '#000'});
		
	// The above code happens onLoad. We also need to make sure it resizes the width of navBg when the window is resized. We'll also factor in the the above footer positioning code too.
	$(window).resize(function() {
		$('#navBg').width(($(document).width() - $('#containerMain').width()) / 2);	
		
		if ($(window).height() >= $('#containerMain').height()) {
			$('#containerFooter').css('position', 'absolute');
		} else {
			$('#containerFooter').css('position', 'relative');
		}
	});
	
});