// We kunnen er niet altijd vanuit gaan dat de jQuery shortcut aanwezig is,
// daarom hier de shortcut forceren (als)
var $ = jQuery;

// Functie voor tonen feature popup
function _show_popup (itemsArray, target, active, popupPath) {
	// andere popups verbergen
	$(target).jqm().jqmHide();
	
	var ajaxUri = popupPath + itemsArray[active] + '.php?nodecorator=true';
	
	// popup laten zien
	$(target).jqm({
		ajax: ajaxUri, 
		target: 'div.popupContent', 
		overlay: 70, 
		toTop: true
	}).jqmShow();
	
	_popup_nav(itemsArray, target, active, popupPath);
}

function _popup_nav (itemsArray, target, active, popupPath) {
	// Navigatie knoppen verbergen 
	$('.bottom a').hide();
	
	// Show the previous button
	if (active > 0) {
		$('a.previous').show();
		$('a.previous')
			.unbind()
			.bind('click', function() {
				active = active - 1;
				_show_popup(itemsArray, target, active, popupPath);
			});
	}
	
	// Show the next button
	if (active < (itemsArray.length - 1)) {
		$('a.next').show();
		$('a.next')
			.unbind()
			.bind('click', function() {
				active = active + 1;
				_show_popup(itemsArray, target, active, popupPath);
			});
	}
}

//Functie voor tonen trial popup
function _show_trial_popup (trialImagesArray, target, active, mediaPath) {
	// andere popups verbergen
	$(target).jqm().jqmHide();
	
	// HTML van eerdere popups verwijderen en nieuwe popup toevoegen
	$("#trial-popup").remove();
	$('body').append('<div id="trial-popup" class="clearfix"><div class="top clearfix"><a href="#" class="jqmClose">Sluiten</a></div><div class="popupContent"></div><div class="bottom"><a href="#" class="previous">Vorige stap</a><a href="#" class="next">Volgende stap</a></div></div>');
	$('div.popupContent').html('<p style="text-align: center;"><img src="' + mediaPath + trialImagesArray[active] + '" alt="" /></p>');
	
	// popup laten zien
	$(target).jqm({
		//ajax: ajaxUri, 
		target: 'div.popupContent', 
		overlay: 70, 
		toTop: true
	}).jqmShow();
	
	_trial_popup_nav(trialImagesArray, target, active, mediaPath);
}

function _trial_popup_nav (itemsArray, target, active, popupPath) {
	// Navigatie knoppen verbergen 
	$('.bottom a').hide();
	
	// Show the previous button
	if (active > 0) {
		$('a.previous').show();
		$('a.previous')
			.unbind()
			.bind('click', function() {
				active = active - 1;
				_show_trial_popup(itemsArray, target, active, popupPath);
			});
	}
	
	// Show the next button
	if (active < (itemsArray.length - 1)) {
		$('a.next').show();
		$('a.next')
			.unbind()
			.bind('click', function() {
				active = active + 1;
				_show_trial_popup(itemsArray, target, active, popupPath);
			});
	}
}
$(document).ready(function(){
	/*
	---------------------------------------------------------------------------------------
	FEATURES POPUP
	---------------------------------------------------------------------------------------
	*/
	if ( $('#table-features').length > 0 ) {
		// Features uit tabel in array zetten			
		var featuresArray = new Array();
		$('#table-features tr td').each(function( intIndex ){
			featuresArray[intIndex] = $.trim($('#table-features tr td:eq('+(intIndex)+')').children('a').text()).toLowerCase().replace(/ +/g, "-");
		});
		
		// Eventueel ook features uit footer in array erbij zetten
		if ( $('#feature-list').length > 0 ) {
			$('#feature-list li').each(function( intIndex ){
				featuresArray[(intIndex+$('#table-features tr td').length)] = $.trim($('#feature-list li:eq('+(intIndex)+')').text()).toLowerCase().replace(/ +/g, "-");
			});
		}
		
		$('#table-features tr td, #feature-list li').click(function(){
			var target = '#feature-popup';
			var active = $('#table-features tr td').index(this);
			if (active < 0) {
				active = $('#feature-list li').index(this) + $('#table-features tr td').length;
			}
			
			// Eventuele eerdere popups verwijderen
			$("#feature-popup").remove();
	
			/** 
			 *
			 * Volgende html wordt toegevoegd aan body
			 *
				<div id="feature-popup" class="clearfix">
					<div class="top clearfix"><a href="#" class="jqmClose">Sluiten</a></div>
					 
					<div class="popupContent">
						<p></p>
					</div>
									
					<div class="bottom">
						<a href="#" class="previous">Vorige feature</a>
						<a href="#" class="next">Volgende feature</a>
					</div>
				</div>
			 *
			 */
			$('body').append('<div id="feature-popup" class="clearfix"><div class="top clearfix"><a href="#" class="jqmClose">Sluiten</a></div><div class="popupContent"><p></p></div><div class="bottom"><a href="#" class="previous">Vorige feature</a><a href="#" class="next">Volgende feature</a></div></div>');
			
			// jqm popup en navigatie aanroepen
			_show_popup(featuresArray, target, active, popupPath);
			
			return false;
		});
	}

	/*
	---------------------------------------------------------------------------------------
	PRICING POPUP
	---------------------------------------------------------------------------------------
	*/
	if ( $('.pricingTable').length > 0 ) {
		$('.pricingTable thead th, .pricingTable td.functionaliteit, .pricingTable tfoot td').click(function() {
			var target = '#website-popup';
			var active = 0;
			var websiteArray = new Array();
			var tempArray = new Array();
			popupPath = '';
			
			tempArray[0] = $(this).find('a:first').attr('href');
			websiteArray = tempArray[0].split('.html');
			websiteArray.splice(1,1);

			// Eventuele eerdere popups verwijderen
			$("#website-popup").remove();
			
			/** 
			 *
			 * Volgende html wordt toegevoegd aan body
			 *
				<div id="website-popup" class="clearfix">
					<div class="top clearfix"><a href="#" class="jqmClose">Sluiten</a></div>
					 
					<div class="popupContent">
						<p></p>
					</div>
									
					<div class="bottom">
						<a href="#" class="previous">Vorige feature</a>
						<a href="#" class="next">Volgende feature</a>
					</div>
				</div>
			 *
			 */
			$('body').append('<div id="website-popup" class="clearfix"><div class="top clearfix"><a href="#" class="jqmClose">Sluiten</a></div><div class="popupContent"><p></p></div><div class="bottom"><a href="#" class="previous">Vorige feature</a><a href="#" class="next">Volgende feature</a></div></div>');
			
			// jqm popup en navigatie aanroepen
			_show_popup(websiteArray, target, active, popupPath);
			
			return false;	
		});
	}
	
	/*
	---------------------------------------------------------------------------------------
	TOUR POPUP
	---------------------------------------------------------------------------------------
	*/
	if ( $('.tourTable').length > 0 ) {
		$('.tourTable tr td.tourTableItem, .tourTable tr td.read a').click(function() {
			var target = '#tour-popup';
			var tableID = $(this).parents('table').attr("id");
			var active = $('#' + tableID + ' tbody tr:not(:first)').index($(this).parents("tr"));
			var tourArray = new Array();
			
			// Tour items uit tabel in array zetten			
			$('#' + tableID + ' tbody tr:not(:first)').each(function( intIndex ){
				tourArray[intIndex] = $.trim($('#' + tableID + ' tbody tr:eq(' + (intIndex+1) + ') td:first').text()).replace(/(\d\. |:)/g, "").replace(/ +/g, "-").toLowerCase();
			});
			
			// Eventuele eerdere popups verwijderen
			$("#tour-popup").remove();
			
			/*
			 * Volgende html wordt toegevoegd aan body
			 *
				<div id="tour-popup" class="clearfix">
					<div class="top clearfix"><a href="#" class="jqmClose">Sluiten</a></div>
					 
					<div class="popupContent">
						<p></p>
					</div>
									
					<div class="bottom">
						<a href="#" class="previous">Vorige</a>
						<a href="#" class="next">Volgende</a>
					</div>
				</div>
			 *
			 */
			$('body').append('<div id="tour-popup" class="clearfix"><div class="top clearfix"><a href="#" class="jqmClose">Sluiten</a></div><div class="popupContent"><p></p></div><div class="bottom"><a href="#" class="previous">Vorige</a><a href="#" class="next">Volgende</a></div></div>');
	
			// Kopje goed zetten
			var heading = $('#' + tableID + ' tbody tr td.tourTableHead').text();
			$('#tour-popup .top').append('<h1 class="' + tableID + '">' + heading + '</h1>');
			
			// jqm popup en navigatie aanroepen
			_show_popup(tourArray, target, active, popupPath);
			
			return false;
		});
	}
	
	/*
	---------------------------------------------------------------------------------------
	WEBSITE POPUP
	---------------------------------------------------------------------------------------
	*/
	if ( $('#website-opties').length > 0 ) {
		$('#website-opties li, #website-overig li').click(function() {
			var target = '#website-popup';
			var active = 0;
			var websiteArray = new Array();
			
			var listID = $(this).parents('ul').attr("id");
			
			if (listID == 'website-opties') {
				// h3 kop uit lijst halen en in array zetten. Wordt gebruikt voor bepalen url
				websiteArray[0] = $.trim($(this).find('h3').text()).toLowerCase().replace(/ +/g, "-");
			} else if (listID == 'website-overig') {
				// class van geklikte li pakken, wordt gebruikt voor bepalen url
				websiteArray[0] = $(this).attr("class");
			}

			// Eventuele eerdere popups verwijderen
			$("#website-popup").remove();
			
			/** 
			 *
			 * Volgende html wordt toegevoegd aan body
			 *
				<div id="website-popup" class="clearfix">
					<div class="top clearfix"><a href="#" class="jqmClose">Sluiten</a></div>
					 
					<div class="popupContent">
						<p></p>
					</div>
									
					<div class="bottom">
						<a href="#" class="previous">Vorige feature</a>
						<a href="#" class="next">Volgende feature</a>
					</div>
				</div>
			 *
			 */
			$('body').append('<div id="website-popup" class="clearfix"><div class="top clearfix"><a href="#" class="jqmClose">Sluiten</a></div><div class="popupContent"><p></p></div><div class="bottom"><a href="#" class="previous">Vorige feature</a><a href="#" class="next">Volgende feature</a></div></div>');
			
			// jqm popup en navigatie aanroepen
			_show_popup(websiteArray, target, active, popupPath);
			
			return false;	
		});
	}
	
	/*
	---------------------------------------------------------------------------------------
	TRIAL POPUP
	---------------------------------------------------------------------------------------
	*/
	if ( $('.trialContainer').length > 0 ) {
		$('a.trialImages').click(function() {
			var active = 0;
			var target = '#trial-popup';
			var trialImagesArray = new Array();
			
			// Link naar afbeeldingen uit deze stap in array zetten
			$(this).closest('div.trialStep').find('img').each(function(intIndex) {
				trialImagesArray[intIndex] = $(this).attr('src').substr(7, 300);
			});
			
			_show_trial_popup (trialImagesArray, target, active, mediaPath)
			
			return false;
		});
	}
	
	
	/*
	---------------------------------------------------------------------------------------
	HOMEPAGE
	---------------------------------------------------------------------------------------
	*/
	/***** NIEUWBERICHTEN VERBERGEN *****/
	if ($('ul.nieuws_list').size() > 0) {
		/* toon alleen de eerste twee nieuwberichten. Verberg de rest */
		$('ul.nieuws_list li:lt(4)').show();
	}
	
	/***** SLIDES *****/ 
	/**
	 * Maag gegeven afbeeldingsnummer zichtbaar
	 *
	 * @param imagenumber  Nummer van afbeelding, begint bij 1
	 */
	function switchWaaromDomeoImage(imagenumber) {

		// Juiste afbeelding laden met animatie
		$('div.waaromdomeo img').fadeTo(200, 0, function() {

			// Bepaal locatie van afbeelding
			var lOldSrc = $(this).attr('src');
			var lExtension = lOldSrc.substr(lOldSrc.length - 4, 4);
			var lNewSrc = lOldSrc.substr(0, lOldSrc.length - 5) + imagenumber + lExtension;

			// Image inladen en na succesvol inladen, terug naar zichtbaar
			var lImage = $(this);
			var lNewImage = new Image();
			lNewImage.onload = function() {
				lImage.attr('src', lNewImage.src);
				lImage.fadeTo(50, 1);
			};

			// Image src zetten, code hierboven wordt ge-notified bij succes
			lNewImage.src = lNewSrc;
		});
	}

	if ($('#slides').size() > 0) {

		// Knoppen 1...n klikbaar maken
		$('#slides ol li').click(function() {

			// Bepalen welk nummer aangeklikt is
			var current = parseInt($(this).text());
			var index = current - 1;

			// Switch image alleen als er een ander image aangeklikt wordt
			if (!$('#slides ol li:eq(' + index + ')').hasClass('active')) {

				// Active achtergrond goed zetten, deze is 0-based
				$('#slides ol li').removeClass('active');
				$('#slides ol li:eq(' + index + ')').addClass('active');

				switchWaaromDomeoImage(current);
			}
		});

		// Klik op de knop "Wat is Domeo"
		$('#slides a.watisdomeo').click(function() {

			// Verbergen "Waarom domeo" image en buttons 1...n
			$('#slides div.waaromdomeo div, #slides div.waaromdomeo ol').hide();
			$('#slides div.watisdomeo').show();

			// button actief zetten
			$('a.waaromdomeo').removeClass('active');
			$('a.watisdomeo').addClass('active');

			return false;
		});

		$('#slides a.waaromdomeo').click(function() {
			// juiste div tonen
			$('#slides div.watisdomeo').hide();
			$('#slides div.waaromdomeo div, #slides div.waaromdomeo ol').show();

			// button actief zetten
			$('a.watisdomeo').removeClass('active');
			$('a.waaromdomeo').addClass('active');

			return false;
		});
	}
	
	/*
	---------------------------------------------------------------------------------------
	BESTELLEN PAGINA
	---------------------------------------------------------------------------------------
	*/
	if ( $('ul#bestellenKeuze').length > 0 ) {
		$('ul#bestellenKeuze li').click(function() {
			var uri = $(this).find('a').attr('href');
			location.href = uri;
		});
	}
	
	/*
	---------------------------------------------------------------------------------------
	FAQ
	---------------------------------------------------------------------------------------
	*/
	if ( $('.faqContainer').length > 0 ) {
		// Alle categorieen en vragen verbergen en class 'closed' meegeven
		$('.faqCategorie, .faqQuestion').toggleClass('closed');
		$('.faqContainer, .faqAnswer').hide();
		
		// Eerste categorie en vraag openklappen en 'active' class meegeven
		$('.faqContainer:first, .faqAnswer:first').show();
		$('.faqCategorie:first, .faqQuestion:first').toggleClass('closed');
		
		// categorie openen of sluiten
		$('h2.faqCategorie').click(function() {
			// active class zetten zodat afbeelding juist wordt getoond
			$(this).toggleClass('closed');
			
			// juiste categorie uitklappen
			var intIndex = $('h2.faqCategorie').index(this);
			$('.faqContainer:eq(' + intIndex + ')').toggle();
		});
		
		// antwoord openen of sluiten
		$('.faqQuestion').click(function() {
			// active class zetten zodat afbeelding juist wordt getoond
			$(this).toggleClass('closed');
			
			// juiste antwoord uitklappen
			var intIndex = $('.faqQuestion').index(this);
			$('.faqAnswer:eq(' + intIndex + ')').toggle();
		});
	}
	
	/*
	---------------------------------------------------------------------------------------
	TRIAL
	---------------------------------------------------------------------------------------
	*/
	if ( $('.trialContainer').length > 0 ) {
		// Alle stappe inklappen en class 'closed' meegeven
		$('.trialStep').hide();
		
		// Stap openen of sluiten
		$('.trialHeading').click(function() {
			$(this).children('span.trialShow').toggle();
			$(this).children('span.trialHide').toggle();
			// Juiste stap uitklappen
			$(this).next('.trialStep').toggle();
		});
		
		// Eerste stap alvast open klappen
		$('.trialHeading:first').trigger('click');
	}
	
	/*
	---------------------------------------------------------------------------------------
	LIVE SUPPORT
	---------------------------------------------------------------------------------------
	*/
	if ( $('#content-sidebar a img').length > 0 ) {
		$("#content-sidebar a img[src='https://support.domeo.nl/images/icons/staffoffline.gif']").parent('a').addClass('support-offline').append('Verstuur een bericht');
		$("#content-sidebar a img[src='https://support.domeo.nl/images/icons/staffbackin5.gif']").parent('a').addClass('support-offline').append('Verstuur een bericht');
		$("#content-sidebar a img[src='https://support.domeo.nl/images/icons/staffaway.gif']").parent('a').addClass('support-offline').append('Verstuur een bericht');
		$("#content-sidebar a img[src='https://support.domeo.nl/images/icons/staffonline.gif']").parent('a').addClass('support-online').append('Chat nu');
	}

	/*
	---------------------------------------------------------------------------------------
	NAVIGATIE
	---------------------------------------------------------------------------------------
	*/
	$('#nav li a').click(function() {
		// controleer of menu een submenu heeft
		if ($(this).parent('li').find('ul').length > 0) {
			return false;
		} else {
			// zo niet, link van menu volgen
			return true;
		}
	});
	$('#nav li ul li a').click(function() {
		return true;
	});
	
	/*
	// Variabelen voor achtergrond posities van navigatie items.
	var horPosition = new Array();
	var verPosition = new Array();
	
	// Zet css voor second level menu niet zichtbaar
	$('#nav li ul.subnav').css('display', 'none');
	
	// Zet beginwaarden achtergrondpositie in variabele voor later gebruik
	// Loop over alle links in navigatie
	$('#nav li a').each(
		// "intIndex" is de loop iteratie index voor het huidige element
		function( intIndex ){
			var bgPosition = ($(this).css('background-position'));
			// voor IE, herkent 'background-position' niet
			if (bgPosition === undefined) {
				bgPosition = $(this).css('background-position-x') + ' ' + $(this).css('background-position-y');
			}
			bgPosition = bgPosition.split(" ");
			horPosition[intIndex] = bgPosition[0];
			verPosition[intIndex] = bgPosition[1];
		}
	);

	// Verplaatst achtergrond afbeelding voor muis events
	$('#nav li a').mousedown(function(){
		// alle achtergronden naar beginwaarde zetten
		$('#nav li a').each (
			function( intIndex ) {
				$(this).css({backgroundPosition: horPosition[intIndex] + ' ' + verPosition[intIndex]});
			}
		);
		
		// 'click' achtergrond tonen voor menu-item door achtergrond positie te wijzigen
		var index = $('#nav li a').index(this);
		$(this).css({backgroundPosition: horPosition[index] + ' -105px'});		
	}).mouseup(function(){
		// 'over' achtergrond tonen voor menu-item door achtergrond positie te wijzigen
		var index = $('#nav li a').index(this);
		if (verPosition[index] != '-70px') {
			$(this).css({backgroundPosition: horPosition[index] + ' -35px'});
		} else {
			$(this).css({backgroundPosition: horPosition[index] + ' ' + verPosition[index]});
		}
	}).click(function(event){
		// Verberg alle submenu's
		$('#nav li ul').hide();
		
		// controleer of menu een submenu heeft
		if ($(this).parent('li').find('ul').length > 0) {
			// zo ja, tonen en link van menu niet volgen
			$(this).next('ul').slideDown(50);
			return false;
		} else {
			// zo niet, link van menu volgen
			return true;
		}
	});
	
	// Als buiten menu geklikt wordt alle submenu's verbergen en achtergrond goedzetten
	$('html').click(function(){
		$('#nav li ul').hide();
		
		// alle achtergronden naar beginwaarde zetten
		$('#nav li a').each (
			function( intIndex ) {
				$(this).css({backgroundPosition: horPosition[intIndex] + ' ' + verPosition[intIndex]});
			}
		);
	});
	
	// Niet verbergen als binnen het menu geklikt wordt
	$("#nav, #nav *").click(function(event) {
		event.stopPropagation();
	});
	
	// Hover effect van css werkt niet meer na openen submenu, dus met javascript weer laten werken
	$('#nav li a').each(function(intIndex){  
		$(this).bind('mouseover', function(){
			if (verPosition[intIndex] != '-70px') {
				$(this).css({backgroundPosition: horPosition[intIndex] + ' -35px'});
			}		
		}).bind('mouseout', function() {
			$(this).css({backgroundPosition: horPosition[intIndex] + ' ' + verPosition[intIndex]});
		});
	});
	*/

});