/*
INCLUDES
**********************************************/
// specify which javascripts to include on the webpage
js('/files/javascript/jquery.autocomplete.min.js');

/*
ON LOAD
*********************************************/
// jQuery 'onReady' script - runs when the document have been loaded, but before images
$(function(){
	formValidation();
	toggleMainMenu();
	fixMainMenuFill();
	toggleAreaMenu();
	
	activateAjaxShopping({
		ajaxMode: true
	});
	
	//autocompletePostalCode2('.jsPostalcode', '.jsCity', ':input[name="country"]');
	//autocompletePostalCode2('.jsPostalcode2', '.jsCity2', ':input[name="country2"]');
	productlistImage();
	postPolls();
	quizWizzard();
	tracktrace();
	feedReader();
	changeProductImage();
	flashLoad();
	openPopups();
	showInlineHelp();
	//variantSelection();
	
	// replace content if there is a flashmovie available 
	$('.frontpage').find('div[class*="jsFlash"]').flash(null,{version: 8},function(htmlOptions){
		var $this = $(this);
		var flashRegExp = new RegExp('jsFlash.+]','i');
		htmlOptions.src = $this.attr('class').match(flashRegExp)[0].replace('jsFlash[','').replace(']','');
		htmlOptions.width = 186;
		htmlOptions.height = 218;
		htmlOptions.wmode = 'transparent';
		
		if ($this.closest('.columnsize2').size() > 0){
			htmlOptions.height = 109;
		}
		if ($this.hasClass('middleimage')){
			htmlOptions.width = 373;
			htmlOptions.height = 217;
		}
		
		this.innerHTML = '<div class="flashAlt">'+this.innerHTML+'</div>';
		$this.addClass('flash-replaced').prepend($.fn.flash.transform(htmlOptions));
	});
	
	$('#productImages').find('a').click(function(){
		$.modal('<img src="' + this.href.replace('/large/','/extralarge/') + '" alt=""/>',{
			closeHTML: '<img class="close" src="/images/close_popup.gif" alt=""/>',
			overlayClose: true,
			containerId: 'popupProductimage',
			containerCss: {
				backgroundColor: '#fff',
				height: 550,
				padding: '10px',
				width: 400
			},
			onShow: function(dialog){
				$('<a class="previous" href="#">previous</a><a class="next" href="#">next</a>').appendTo('#popupProductimage');
				
				$('#popupProductimage .previous').click(function(){
					if ($(this).hasClass('disabled') == false){
						switchPopupImage(-1);
					}
					$(this).blur();
					return false;
				});
				$('#popupProductimage .next').click(function(){
					if ($(this).hasClass('disabled') == false){
						switchPopupImage(1);
					}
					$(this).blur();
					return false;
				});
				
				// make sure that the previous/next buttons are showing the correct state
				switchPopupImage(0);
			}

		});
		
		return false;
	});
	
	// get GLS data on the delivery page
	activateGLS();
	
});

// change image in the popup depending on the user defined direction.
function switchPopupImage(intDirection){
	var strImages = '';
	
	if ($('#productImages').find('ul img').size() > 1){
		
		$('#productImages').find('ul img').each(function(i){
			if (i != 0) {
				strImages += ';';
			}
			strImages += this.src.replace('/thumbs/','/extralarge/');
		});
		
		var arrImages = strImages.split(';');
		var strCurrentImage = $('#simplemodal-data').find('img').attr('src');
		var intCurrentIndex = $(arrImages).index(strCurrentImage);
		
		// set new image
		var intNewIndex = intCurrentIndex+intDirection;
		$('#simplemodal-data').find('img').attr('src',arrImages[intNewIndex]);
		
		// check if the buttons should be disabled or enabled
		if (intNewIndex === 0) {
	  	$('#popupProductimage .previous').addClass('disabled');
	  }
	  else {
	  	$('#popupProductimage .previous').removeClass('disabled');
	  }
		
		if (intNewIndex == (arrImages.length-1)){
			$('#popupProductimage .next').addClass('disabled');
		} else {
			$('#popupProductimage .next').removeClass('disabled');
		}
	} else {
		
		$('#popupProductimage .next, #popupProductimage .previous').addClass('disabled');
		
	}
}

// validate forms on submit and on input typing and blur
function formValidation(){

	// single field validation
	function validateField(evt){
		var $this = $(this), objForm = $this.closest('form'), strActivateKeyup = 'jsTextfieldactivatekeyup', bitOk = true, re;
		
		if (evt.type != "keyup" || $this.hasClass(strActivateKeyup)) {
			// if the input doesn't allow keyup events, activate it (this happens at first blur event)
			if (!$this.hasClass(strActivateKeyup)) {
				$this.addClass(strActivateKeyup);
			}
			
			// validate field
			
			/*
			 * Valideringen skal understoette foelgende data, krav og afgraensninger:
			 *
			 * Fornavn og efternavn skal indeholde tekst.
			 * Gade skal indeholde et ord efterfulgt af et mellemum og et tal.
			 * postnummer skal vaere 4 tegn i Danmark.
			 * By bliver automatisk indsat efter postnummer.
			 * Telefon skal indeholde 8 tegn for dansk tlf.nummer.
			 * E-mail skal indeholde min. 1 tegn efterfulgt af et @ (snabel a) efterfulgt af min. 1 tegn efterfulgt af et . (punktum) efterfulgt af 2-4 karakterer.
			 *
			 *
			 * For at identificere de forskellige felttyper, skal hvert felt have en css klasse der fort�ller hvordan feltet skal valideres.
			 * Forslag til css klasser, der kan benyttes til validering samt beskrivelse af hvad de skal validere:
			 *
			 * jsValidate: bruges kun til at identificere hvilke felter der skal valideres.
			 * jsValidatetext: validerer om feltet ikke er tomt - dette skal vaere basis form for validering, alle andre valideringstyper goer automatisk dette
			 * jsValidatefullname: kontrollerer om der er minimum 2 ord i feltet
			 * jsValidatepostalcode: tester om postnummeret er korrekt i forhold til det enkelte lands krav
			 * jsValidatephone: Ser om telefonnummeret er indtastet korrekt i forhold til landets krav
			 * jsValidatemail: E-mail skal indeholde de paakraevede dele specificeret ovenfor
			 * jsValidateaddress: Korrekt indtastet adresse - efter ovenstaaende specifikation
			 * jsValidaterepeat: Tester om teksten i feltet er det samme som i feltet med det tilknyttede ID (i css klassen "jsValidaterepeatfromIDPAAFELT"
			 *
			 *
			 */
			// test if there is a required field for this input field
			var strCurrentName = $this.attr('name');
			var objRequiredField = $('input[name=_' + strCurrentName + '_required],input[name=' + strCurrentName + '_Required]', objForm);
			var bitRequired = (objRequiredField.size() > 0);
			
			if ($this.hasClass('jsValidatetext')) {
				re = /.+/;
			}
			else 
				if ($this.hasClass('jsValidatefullname')) {
					re = /\w+\s\w+/;
				}
				else 
					if ($this.hasClass('jsValidatepostalcode')) {
						// her boer man have forskellige landevalg, saa valideringen ved hvordan den skal validere? ligenu gaar den kun efter 4 cifre
						//re = /^\d{4}$/;
						re = /^\d+$/;
					}
					else 
						if ($this.hasClass('jsValidatephone')) {
							// her boer man have forskellige landevalg, saa valideringen ved hvordan den skal validere? ligenu gaar den kun efter 8 cifre
							re = /^\d{8}$/;
						}
						else 
							if ($this.hasClass('jsValidatemail')) {
								re = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]+$/i;
							}
							else 
								if ($this.hasClass('jsValidateaddress')) {
									re = /^(.)+\s[1-9]/;
								}
								else {
									// hvis der ikke er nogen specifik validering, skal der alligevel valideres paa om der er indhold i feltet.
									re = /.+/;
								}
			
			bitOk = re.test($this.val());
			
			// hvis feltet er et repeat felt, f.eks. gentag password eller e-mail,
			// skal valideringen i stedet gaa paa om feltets indhold er det samme som det tilknyttede
			if ($this.hasClass('jsValidaterepeat')) {
				var strAllclasses = $this.attr('class').split(' '), strOriginalInputId;
				
				$.each(strAllclasses, function(i, val){
					if (val.indexOf('jsValidaterepeatfrom') > -1) {
						strOriginalInputId = val.replace('jsValidaterepeatfrom', '');
						
						return false;
					}
				});
				
				bitOk = ($this.val() == $('#' + strOriginalInputId).val() && $this.val != '');
			}
			
			// hvis et postalcode felt ikke indeholder tal mellem 1000 og 9999, skal der vises en fejl
			/*
			if ($this.hasClass('jsValidatepostalcode') && bitOk) {
				var intPostal = parseInt($this.val());
				if (intPostal < 1000 || intPostal > 9999){
					bitOk = false;
				}
			}
			*/
			
			if ((bitRequired && bitOk) || (!bitRequired && $this.val() != '' && bitOk)) {
				// hvis feltet er korrekt udfyldt
				$this.removeClass('textfield_error');
				$this.addClass('textfield_valid');
				
				$this.data('validatedOk', true);
			}
			else 
				if ((bitRequired && !bitOk) || (!bitRequired && $this.val() != '' && !bitOk) || (bitRequired && $this.val() == '')) {
					// hvis feltet ikke er udfyldt korrekt.
					$this.removeClass('textfield_valid');
					$this.addClass('textfield_error');
					
					$this.data('validatedOk', false);
				}
				else 
					if ($this.val() == '' && !bitRequired) {
						// hvis feltet ikke er udfyldt og det ikke er paakraevet
						$this.removeClass('textfield_error');
						$this.removeClass('textfield_valid');
						
						$this.data('validatedOk', true);
					}
					else {
					}
			
		}
	}
	
	
	$('form').each(function(){
		var objForm = this;
		$(objForm).data('allOk', '1');
		
		// select all fields that require a certain mask validation
		$('.jsValidate', objForm).bind('keyup blur', validateField);
		
		$(objForm).submit(function(){
			var bitSendform = true;
			
			// Run a validation on all required fields
			$(':input[name*=_Required], :input[name*=_required]', this).each(function(){
				var relatedInput = $(':input[name=' + $(this).attr('name').replace(/_Required$/i, '').replace(/^_/, '') + ']', objForm);
				relatedInput.each(validateField)
			});
			
			// test if any active fields are not valid
			$(':input', this).not('[disabled]').each(function(){
				var $input = $(this);
				
				if ($input.data('validatedOk') == false) {
					bitSendform = false;
				}
			});
			
			if (!bitSendform) {
				$(objForm).data('allOk', '0');
				
				var strAlert = 'Du skal udfylde alle felter med * med korrekt data';
				alert(strAlert);
				return false;
			}
		});
		
	});
}

function activateGLS(){
	
	if ($('.jsGlspostalcode').size() > 0){
		$('.jsGlspostalcode').blur(getGLS);
		getGLS();
	}
	
}

function getGLS(){
	
		var formular = $('.jsGlspostalcode').closest('form').get(0);
		
		var strStreet = formular.street.value;
		var strPostalcode = formular.postalcode.value;
		
		if (formular.postalcode2) {
			if (formular.postalcode2.value != '') {
				strStreet = formular.street2.value;
				strPostalcode = formular.postalcode2.value;
			}
		}
		if (strPostalcode != ''){
			
			$.get("dynamic.aspx?data=glsdelivery&ajaxmode=1",{
				street: strStreet,
				postalcode: strPostalcode
			}, function(data){
				
				if (data != ''){
					// replace the old GLS data with new
					$('#jsGlsdata').replaceWith(data);
				} else {
					$('#jsGlsdata').empty('');
				}
				
				$('#jsGlsdata :radio:checked').click();
				
			},'html');
		
		}	
}

// makes the main menu take up the entire menuline
function fixMainMenuFill(){
	
	var intMenupunkter;
	var intSamletbredde;
	var intSpildplads;
	var intPadding;
	var intMaxPadding;
	
	// Fix mainmenu
	intMenupunkter = $("#mainMenu>ul>li").size();
	intSamletbredde = 0;
	intMaxPadding = 170;
	
	$("#mainMenu>ul>li>a").css({paddingLeft:"0", paddingRight:"0"})
		.each(function(){
			intSamletbredde += $(this).width()
		});
		
	
	intSpildplads = $("#mainMenu>ul").width() - intSamletbredde;
	
	intPadding = Math.floor(intSpildplads / intMenupunkter);
	
	if (intPadding < 0) {intPadding = 0};
	
	if (intPadding > intMaxPadding) {intPadding = intMaxPadding};
	
	
	$("#mainMenu>ul>li>a").each(function(){
		$(this).css({
			width: ($(this).width() + (intPadding-5)) + "px",
			paddingLeft: '5px'
		});
	});
	// Fix mainmenu
	
}