var isIE;
var webKit;

jQuery.ajaxSettings.traditional = true;

$(document).ready(function () {
    isIE = $.browser.msie;
    webKit = $.browser.webkit;
	
	$.fn.watermarks();
	$.fn.codes();
	$.fn.checkbox();
	$.fn.radio();
	$.fn.detail();
	
	Cufon.replace('.euroBS', { fontFamily: 'Eurostile Bold'});
	Cufon.replace('.euroBSL', { fontFamily: 'Eurostile Bold', textShadow: '0px 1px rgba(19, 100, 151, 0.5)' });
	Cufon.replace('.euroR', { fontFamily: 'Eurostile', hover: true });
	Cufon.replace('.euroB', { fontFamily: 'Eurostile Bold', hover: true });
	Cufon.replace('.start-text', { fontFamily: 'Eurostile Bold', textShadow: '0px 1px rgba(19, 100, 151, 0.5)' });

	var timer = setTimeout(function(){
		if($('#flashBack').length > 0){
			$('body').addClass('flash');
		};
	}, 1000);
});


$.fn.codes = function() {
	var $steps = $('.right-side > ul');
	var step;
	var path;
	var allTick = false;
	var value;
	var $object;
	var doRequest = false;
	var doValidate = false;
	var action;
	var arg;
	var hasError;
	var renew = '';
	var data = [ [], [], []];
	var $obje;
	var noEr = true;
	var edata;
	var vals;
	var timerS;
	var e;
	var errors = [
	"The Code1 field is required.",
	"The Code2 field is required.",
	"The Type1 field is required.",
	"The LotNumber1 field is required.",
	"The FirstName field is required.",
	"The LastName field is required.",
	"The PostCode field is required.",
	"The HouseNr field is required.",
	"The Email field is required.",
	"The BirthDate field is required.",
	"The Email field is not a valid e-mail address.",
	"Code1 must be exactly 8 characters.",
	"Code2 must be exactly 8 characters.",
	"Type1 must be '1/5', '1/1', '1/2' or '1/1Final'.",
	"Type2 must be '1/5', '1/1', '1/2' or '1/1Final'.",
	"LotNumber1 must be in the format AB123456.",
	"LotNumber2 must be in the format AB123456.",
	"PostCode must be in the format 1234AB.",
	"Code1 found.",
	"Code2 found.",
	"LotNumber1 was already used 5 times and Type1 is '1/5'.",
	"LotNumber1 was already used and Type1 is '1/1'.",
	"LotNumber1 was already used twice and Type1 is '1/2'.",
	"LotNumber1 was already used and Type1 is '1/1Final'.",
	"Type2 is required because Type1 is not '1/1Final'.",
	"LotNumber2 is required because Type1 is not '1/1Final'.",
	"is not valid for BirthDate.",
	"Code1 is the same as Code2",
    "LotNumber1 is the same as LotNumber2."
	];
	var arrError = [];
	var errrosPopup = [
	"U dient Code 1 in te voeren.",
	"U dient Code 2 in te voeren.",
	"U moet een type staatslot kiezen.",
	"U dient een lotnummer in te voeren.",
	"U dient  'voornaam' in te vullen.",
	"U dient het 'achternaam' in te vullen.",
	"U dient het 'postcode' in te vullen.",
	"U dient 'huisnummer' in te vullen.",
	"U dient 'E-mailadres' in te vullen.",
	"U dient 'Geboorte datum' in te vullen.",
	"Het ingevulde e-mailadres is ongeldig.",
	"Code 1 dient uit 8 karakters te bestaan.",
	"Code 2 dient uit 8 karakters te bestaan.",
	"U moet een type staatslot kiezen.",
	"U moet een type staatslot kiezen.",
	"Het lotnummer dient in het formaat AB123456 te zijn.",
	"Het lotnummer dient in het formaat AB123456 te zijn.",
	"De ingevoerde postcode is ongeldig.",
	"De ingevoerde code is al een keer gebruikt.",
	"De ingevoerde code is al een keer gebruikt.",
	"Het ingevoerde lotnummer voor 1/5 lot is al 5 keer ingevoerd .",
	"Het ingevoerde lotnummer voor een heel lot is al eerder ingevoerd.",
	"Het ingevoerde lotnummer voor een half eindejaarslot is al twee keer ingevoerd.",
	"Het ingevoerde lotnummer voor een heel eindejaarslot is al eerder ingevoerd.",
	"Er moet nog een code ingevoerd worden, omdat het ingevoerde lotnummer niet van een heel eindejaarslot is.",
	"Er moet nog een ander lotnummer ingevoerd worden, omdat het eerste lotnummer niet van een heel eindejaarslot is.",
	"U heeft een ongeldige geboortedatum ingevoerd.",
	"U heeft twee keer dezelfde code ingevoerd.",
    "Een lotnummer mag slechts eenmaal ingevoerd worden."
	];

	// error messages
	function translate(searchword){
		for (e = 0; e < errors.length; e++){
			if (searchword.search(errors[e]) >= 0){
				return e;
			}
		}
	}
	
	function errorMessage(edata){
		if (edata.Message.length > 0){
			var arrError = [];
			for (var ss = 0; ss < edata.Message.length; ss++){
				arrError.push(translate(edata.Message[ss]));
			}
			showError(arrError);			
		}
	}
	function showError(arrError){
		$('.error-popup').remove();
		var htmlError = '';
		for (var i = 0; i < arrError.length; i++){
			htmlError += '<p>'+errrosPopup[arrError[i]]+'</p>';
		}
		$('<div class="error-popup euroB">'+htmlError+'<a href="#" class="closes"><!-- --></a></div>').appendTo('.personal-form');
		Cufon.replace('.error-popup');
		if (isIE){
			$('.error-popup').show();
		}else{
				$('.error-popup').fadeIn();
			}
		$('.button, .closes, .chbx, .progress > span').live('click', function(){
			$('.error-popup').remove();
			return false;
		});
		$('input').focus(function(){
			$('.error-popup').remove();
		});
	}

	
	// check on load
	if(window.location.hash === "#code") {
		change(2);
		clear();
	}
	
	// change step
	function change(step){
		if (isIE){
			$('li', $steps).hide(0);
			$('li:nth-child('+step+')', $steps).show(0);			
		}else{
				$('li', $steps).fadeOut(300);
				$('li:nth-child('+step+')', $steps).fadeIn(300);
			}
		
	}

	// validate function
	function validate($object, path, value, doRequest, doValidate, action, arg, vals){
		if (doRequest){
			$.ajax({
				type: "POST",
				url: path,
				dataType: "json",
				data: (
					vals
				),
				success: function (data) {
					if (data.Success){
						eval(action + '(arg, '+true+');');
						error($object, false);
					}else{
						eval(action + '(arg, '+false+');');
						error($object, true);
					}
				},
				error: function () {
					error($object, true);
					//alert("error");
				}
			}); 	
		}
	}
	
	// Remove disable
	function ablLine(arg, noEr){
		if (noEr){
			$(''+arg+'').removeClass('disable');
			$('input', ''+arg+'').removeProp('disabled');
			if (isIE){Cufon.replace('label', ''+arg+'');}
		}else{
				$(''+arg+'').addClass('disable');
				$('input', ''+arg+'').prop('disabled');
			}
		
	}
	function abButton(arg, noEr){
		if (noEr){
			$(''+arg+'').removeClass('disable');
		}else{
				$(''+arg+'').addClass('disable');
			}
	}
	
	// Validation messages
	function error($object, hasError){
		if (!hasError){
			$object.removeClass('error');
			if ($object.parent().hasClass('numblot')){
					$('input',$object.parents('.lot-container')).removeClass('error');
				}
			$object.next('.validation').hide();
		}else{
				$object.addClass('error');
				if ($object.parent().hasClass('numblot')){
					$('input',$object.parents('.lot-container')).addClass('error');
				}
				$object.next('.validation').show();
			}
	}
	
	// check personal form
	function valid(arg){
		var $form = $(''+arg+'');
		if (arg == '#codeP'){
			if ($('input:radio:checked', '#codeP').length == 0){
				$('input:radio', $form).parent().prev().addClass('error');
				$('input:radio', $form).parent().prev().css('color', '#FF0000');
				Cufon.replace('label.rad');
			}else{
				$('input:radio', $form).parent().prev().removeClass('error');
				$('input:radio', $form).parent().prev().css('color', '#FFFF');
				Cufon.replace('label.rad');
				}
		}
		$('input', $form).each(function(){
			if ($(this).parent().hasClass('req')){
				if ($(this).val() == $(this).data('default')){
					$(this).parent().addClass('error');
				}else{
						$(this).parent().removeClass('error');
					}
				if ($(this).parent().hasClass('email')){
					$(this).val($(this).val().replace(' ',''));
					if (!validEmail($(this))){
						$(this).parent().addClass('error');	
					}else{
							$(this).parent().removeClass('error');
						}
				}
				if ($(this).parent().hasClass('chbx') && !$(this).is('":checked')){
					var $erLable = $(this).parent().next('label');
					$erLable.addClass('error');
					Cufon.replace('.rcheck');
				}else{
					var $erLable = $(this).parent().next('label');
					$erLable.removeClass('error');
					Cufon.replace('.rcheck');
					}
			}
		});
		if ($('.error', $form).length > 0){
			return false;	
		}else{
				sendData();
				_gaq.push(['_trackPageview', '/actiecodes-invullen/stap4']);
			}
	}
	
	// check email
	function validEmail($obje) {
	   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	   var address = $obje.val();
	   if(reg.test(address) == false) {
		  return false;
	   }else{
		  return true; 
		}
	}
	
	// send all data
	function sendData(){
		var codef = data[0][0];
		var typef = data[1][0];
		var lotf = data[2][0];
		var codes = data[0][1];
		var types = data[1][1];
		var lots = data[2][1];
		var fname = $('#voornaam').val();
		if ($('#tussen').val() == $('#tussen').data('default')){
			$('#tussen').val('');
		}
		var insert = $('#tussen').val();
		var lname = $('#achter').val();
		var gender = $('input:radio:checked', '#codeP').val();
		var postcode = $('#postcode').val();
		var housenum = $('#house').val();
		if ($('#add').val() == $('#add').data('default')){
			$('#add').val('');
		}
		var houseadd = $('#add').val();
		var day = $('#day').val();
		var month = $('#month').val();
		var year = $('#year').val();
		var email = $('#emaila').val();
		var newsletter = $('#emails').is(":checked");
		if (newsletter){
			_gaq.push(['_trackEvent', 'nieuwsbrief', 'klik', 'inschrijving']);
		}
		var bday = month+"/"+day+"/"+year;
		
		$.ajax({
			type: "POST",
			url: "/Home/AddNew",
			dataType: "json",
			data: {
				Code1 : codef, 
				Code2 : codes, 
				Type1 : typef,
				Type2: types,
				LotNumber1: lotf,
				LotNumber2: lots,
				Gender: gender,
				FirstName: fname,
				Insertion: insert,
				LastName: lname,
				PostCode: postcode,
				HouseNr: housenum,
				HouseNrAddition: houseadd,
				Email: email,
				BirthDate: bday,
				Newsletter: newsletter
			   },
			   success: function (data) {
				  if (data.Success){
					  change(5);
					  redirectUrl();
					  clear();
				  }else{
				  	errorMessage(data);
				  	}
				},
				error: function () {
					alert("error");					
				}
	   });
	};
	
	function redirectUrl(){
		timerS = setTimeout(function(){
			window.location.href='http://www.primera.nl/';
		}, 10000);
	}
	
	// clear steps
	function clear(){
		$('input:text', '#codeF').each(function(){
			$(this).val($(this).data('default'));
		});
		$('input:text', '#codeS').each(function(){
			$(this).val($(this).data('default'));
		});
		ablLine('.optionff', false);
		ablLine('.optionfs', false);
		ablLine('#codeF .volgen', false);		
		ablLine('.optionsf', false);
		ablLine('.optionss', false);
		ablLine('.optionst', false);
		ablLine('#codeS .volgen', false);
		if (isIE){
			Cufon.replace('label', '#codeF');
			Cufon.replace('label', '#codeS');
		}
	}
	
	// actions 
	// start
	$('.start-text .enter-code').click(function(){
		change(2);
		clear();
		$('#codeff').focus();
		return false;
	});
	// check first code
	$('#codeff').keyup(function(){
		if ($(this).val().length == $(this).attr('maxlength')){
			if (renew == $(this).val()){
				return false
			}else{
					renew = $(this).val();
					var vals = {"Code1": $(this).val()};
					validate($(this), '/Home/CheckCode1', $(this).val(), true, false, 'ablLine', '.optionff', vals);
				}
		}
	});
	$('#codefsn, #codessn').keydown(function(){
		if ($(this).parents().hasClass('disable')) return false;
	});
	$('#codefsn').keyup(function(){
		if ($(this).parents().hasClass('disable')) return false;
		if ($(this).val().length == $(this).attr('maxlength')){
			if (renew == $(this).val()){
				return false
			}else{
					renew = $(this).val();
					var vals = {"Type1": $('#codeF .radio.checked input').val(), "LotNumber1": $('#codefsl').val()+$(this).val()};
					validate($(this), '/Home/CheckLotNumber1', $(this).val(), true, false, 'ablLine', '#codeF .volgen', vals);
				}
		}
	});
	$('#codefsn').keydown(function(e){
		if (e.keyCode == 13 && !$('#codeF .volgen').hasClass('disable')){
			$('.volgen', '#codeF').click();
		}
	});
	$('#codeF .radio, #codeF .fr').click(function(){
			if ($(this).parents().hasClass('disable')){return false;}
			ablLine('.optionfs', true);
			$('#codefsl').val('');
			$('#codefsn').val('');
			renew =  '';
			$('#codefsl').focus();
	});
	$('#codesf').keyup(function(){
		if ($(this).parents().hasClass('disable')) return false;
		if ($(this).val().length == $(this).attr('maxlength')){
			if (renew == $(this).val()){
				return false
			}else{
					renew = $(this).val();
					var vals = {"Code2": $(this).val()};
					if (allTick){
						validate($(this), '/Home/CheckCode2', $(this).val(), true, false, 'ablLine', '#codeS .volgen', vals);
					}else{
							validate($(this), '/Home/CheckCode2', $(this).val(), true, false, 'ablLine', '.optionss', vals);
					}
				}
		}
	});
	$('#codessn').keyup(function(){
		if ($(this).val().length == $(this).attr('maxlength')){
			if (renew == $(this).val()){
				return false
			}else{
					renew = $(this).val();
					var vals = {"Type2": $('#codeS .radio.checked input').val(), "LotNumber2": $('#codessl').val()+$(this).val()};
					validate($(this), '/Home/CheckLotNumber2', $(this).val(), true, false, 'ablLine', '#codeS .volgen', vals);
				}
		}
	});
	$('#codessn').keydown(function(e){
		if (e.keyCode == 13 && !$('#codeF .volgen').hasClass('disable')){
			$('.volgen', '#codeS').click();
		}
	});
	$('#codeS .radio, #codeS .fr').click(function(){
			if ($(this).parents().hasClass('disable')){return false;}
			ablLine('.optionst', true);
			$('#codessl').val('');
			$('#codessn').val('');
			renew =  '';
			$('#codessl').focus();
	});
	
	$('.volgen', '#codeF').click(function(){
			if ($(this).hasClass('disable')){return false;}
			data[0][0] = $('#codeff').val();
			data[1][0] = $('#codeF .radio.checked input').val();
			data[2][0] = $('#codefsl').val()+$('#codefsn').val();
			ablLine('.optionsf', true);
			if (data[1][0] == '1/1Final'){
				$('.optionss').hide();
				$('.optionst').hide();
				$('.textb').show();
				$('input', '.optionst').attr('checked', false);
				$('input', '.optionst').val('');
				allTick = true;
			}else{
				allTick = false;
				$('.textb').hide();
				$('.optionss').show();
				$('.optionst').show();
			}
			change(3);
			_gaq.push(['_trackPageview', '/actiecodes-invullen/stap2']);
			renew =  '';
			$('#codesf').focus();
			return false;
	});
	$('.volgen', '#codeS').click(function(){
			if ($(this).hasClass('disable')){return false;}
			data[0][1] = $('#codesf').val();
			data[1][1] = $('#codeS .radio.checked input').val();
			data[2][1] = $('#codessl').val()+$('#codessn').val();
			change(4);
			_gaq.push(['_trackPageview', '/actiecodes-invullen/stap3']);
			renew =  '';
			$('#voornaam').focus();
			return false;
	});
	$('.versturen', '#codeP').click(function(){
			valid('#codeP');
			return false;
	});
	$('input', '#codeP').keydown(function(e){
		if (e.keyCode == 13){
			valid('#codeP');
			return false;
		}
	});
	$('.pass', '.progress').click(function(){
		if ($(this).index() == 0){
			change(2);
		}else{
			change(3);
			}
	});
	$('.code-again').click(function(){
		change(2);
		_gaq.push(['_trackPageview', '/actiecodes-invullen/stap1']);
		clear();
		clearTimeout(timerS);
		return false;
	});
	$('.input input', '#codeP').blur(function(){
		if ($(this).parent().hasClass('req')){
			if ($(this).val() == $(this).data('default')){
				$(this).parent().addClass('error');
			}else{
					$(this).parent().removeClass('error');
				}
			if ($(this).parent().hasClass('email')){
				$(this).val($(this).val().replace(' ',''));
				if (!validEmail($(this))){
					$(this).parent().addClass('error');	
				}else{
						$(this).parent().removeClass('error');
					}
			}
		}								  
	});
	$('#day, #month, #year', '#codeP').keyup(function(){
		if ($(this).val().length == $(this).attr('maxlength')){
			if ($(this).attr('id') == 'day'){
				$('#month').focus();
			}
			if ($(this).attr('id') == 'month'){
				$('#year').focus();
			}
			if ($(this).attr('id') == 'year'){
				$('#emaila').focus();
			}
		}
	});
	$('#codefsl, #codessl').keyup(function(){
		if ($(this).val().length == $(this).attr('maxlength')){
			if ($(this).attr('id') == 'codefsl'){
				$('#codefsn').focus();
			}
			if ($(this).attr('id') == 'codessl'){
				$('#codessn').focus();
			}
		}
	});
	$('#codeff, #codefsl, #codefsn, #codesf, #codessl, #codessn').keydown(function(e){
		if (e.keyCode == 32){return false;}
	});
};

$.fn.watermarks = function() {
	var $default;
	$('input[type="text"], textarea').each(function () {
		$(this).focus(function(){
			$(this).parent().addClass('focus');
			$default = $(this).data('default');
			if ($(this).val() == $default) {
				$(this).val('');
			}
		});
		$(this).blur(function () {
			if ($(this).val() == '') {
				$(this).val($default);
			}
			if ($(this).val() == $default){
				$(this).parent().removeClass('focus');
			}
		});
	});
};

$.fn.checkbox = function() {
	$('.chbx').each(function(){
		var $chbx = $(this).children('input');
		if ($chbx.is(':checked')) $(this).addClass('checked');
	});
	
	
	$('.chbx').live('click', function (){
		var $this = $(this);
		var $chbx = $(this).children('input');
		if ($chbx.is(':checked')){
			$chbx.attr('checked', false);
			$this.removeClass('checked');
		}
		else{
			$chbx.attr('checked', true);
			$this.addClass('checked');
		}
	});
	
	$('label.checks').live('click', function (){
		var $span = $(this).prev();
		var $chbx = $(this).prev().children('input');
		if ($chbx.is(':checked')){
			$chbx.attr('checked', false);
			$span.removeClass('checked');
		}
		else{
			$chbx.attr('checked', true);
			$span.addClass('checked');
		}
	});
};

$.fn.radio = function() {
	$('.radio').each(function(){
		var $chbx = $(this).children('input');
		if ($chbx.is(':checked')) $(this).addClass('checked');
	});
	
	
	$('.radio').live('click', function (){
		var $this = $(this);
		if ($this.parents().hasClass('disable')){return false}
		var $chbx = $(this).children('input');
		if (!$chbx.is(':checked')){
			$chbx.attr('checked', true);
			var $parchbx = $chbx.parent().parent();
			$('.radio.checked input', $parchbx).attr('checked', false);
			$('.radio.checked', $parchbx).removeClass('checked');
			$this.addClass('checked');
		}
		return false
	});
	
	$('label.fr').live('click', function (){
		var $span = $(this).prev();
		var $chbx = $(this).prev().children('input');
		if (!$chbx.is(':checked')){
			$chbx.attr('checked', true);
			var $parchbx = $chbx.parent().parent();
			$('.radio.checked input', $parchbx).attr('checked', false);
			$('.radio.checked', $parchbx).removeClass('checked');
			$span.addClass('checked');
		}
		return false
	});
};

$.fn.detail = function(){
	var page;
	
	if(window.location.hash === "#detail") {
		change(2);
	};
	$('.meer').click(function(){
		change(2);
	});
	
	$('.terug', '#detail').click(function(){
		change(1);
	});
	
	$('.enter-code', '#detail').click(function(){
		change(1);
	});
	
	function change(page){
		if (page == 2){
			if (isIE){
				$('#home').hide(0, function(){
					$('#detail').show();								 
				});				
			}else{
					$('#home').fadeOut(500, function(){
						$('#detail').fadeIn();								 
					});
				}
		}else{
				if (isIE){
					$('#detail').hide(0, function(){
						$('#home').show();
						clear();
					});
				}else{
						$('#detail').fadeOut(500, function(){
							$('#home').fadeIn();
							clear();
						});
					}
			}
	}
	function clear(){
		$('.right-side ul li').hide();
		$('.right-side ul li:nth-child(2)').show();
		$('input:text', '.right-side > ul').each(function(){
			$(this).val($(this).data('default'));
		});
		
	}
};

$.fn.popup = function(options) {

	var defaults = {
		speedPopup: 500,
		speedOverlay: 500
	}, 	opts = $.extend(defaults, options);
	
	var $popup = this;
	var speedPopup = opts['speedPopup'];
	var speedOverlay = opts['speedOverlay'];

	if ($popup.is(':visible')){
		if (isIE){
			$popup.hide(0);
			$('.overlay').hide();
		}else{
			$popup.fadeOut(speedPopup);
			$('.overlay').fadeOut(speedOverlay);	
		}			
	}else{
			var popupH = $popup.outerHeight();
			var popupW = $popup.outerWidth();
			$popup.css({
				'margin-top': -(popupH/2),
				'margin-left': -(popupW/2)				
			});
			if (isIE){
				$popup.show(0);
			}else{
				$popup.fadeIn(speedPopup);
			}
			var heightWindow = $(window).height();
			var documentH = $('body').height();
			if (documentH < heightWindow) documentH = heightWindow;
			$('.overlay').css('height', documentH);
			if (isIE){
				$('.overlay').show();
			}else{
				$('.overlay').fadeIn(speedOverlay);	
			}
			scrolls($popup);
		}
	$(window).resize(function(){
		if ($popup.is(':visible')){
			var heightWindow = $(window).height();
			var documentH = $('body').height();
			if (documentH < heightWindow) documentH = heightWindow;
			$('.overlay').css('height', documentH);
		}
	});
	
	
	function scrolls($popup){
		   var difference = $('.popup-content', $popup).outerHeight() - $('.popup-container', $popup).outerHeight();
		   var proportion = difference  / $('.popup-content', $popup).outerHeight();
		   var handleHeight = Math.round((1-proportion)*$('.popup-container').outerHeight());
		   handleHeight -= handleHeight%2; 

			//set up the slider 
		   $(".slider-wrap", $popup).slider({
			  orientation: 'vertical',
			  min: 0,
			  max: 100,
			  value: 100,
			  slide: function(event, ui) {
				 var topValue = -((100-ui.value)*difference/100);
				 $('.popup-content', $popup).css({top:topValue});
			  },
			  change: function(event, ui) {
				 var topValue = -((100-ui.value)*difference/100);
				 $('.popup-content', $popup).css({top:topValue});
			  }
			});
		   
		   var origSliderHeight = $(".slider-vertical", $popup).outerHeight();
		   var sliderHeight = origSliderHeight - handleHeight ;
		   var sliderMargin =  (origSliderHeight - sliderHeight)*0.5;
	}
	
	return false
}

