$(function(doc) {
/*******************************  stdNatCen.js  *******************************
 * Based on
 * - Template: stdNatCen.htm
 * - CSS: stdNatCen.css, stdPurple.css, stdFont.css
 **
 * REVISIONS
 * - V1.0 27/02/2015	Initial Release
 * - V1.1 14/06/2015	Commented Adding .not-one-line
 *         						Instead .bottom-distance is added in QT_default
 * - V1.2	22/06/2015	Added HideDK, HideREF and HideNA to stdHandleGridDkRef()
 * 				22/06/2015	CHANGED custom log functions
 * - V1.3	25/01/2016	Only bind swipeleft swiperight when window.width <= 480
 *										REMOVE className disabled after 2 seconds
 *******************************************************************************/
  logStdNatCenINFO('L#000 stdNatCen.js V1.1 --- CONSOLE.LOG == FALSE');


	// + + + + + HANDLE the visualization of the dkRef in grid(s) + + + + + //
	stdHandleGridDkRef($('td input[value="dontknow"], td input[value="refuse"], td input[value="noanswer"]'));

	// + + + + + Trigger next when no dom-element has focus + + + + + //
	$('BODY').on('keyup',stdHandleNextBtn);

	// + + + + + ADD class to buttons section when there is no previous input + + + + + //
	if($('.mrPrev').length==0){
		$('.nav .buttons').addClass('no-prev');
	}

	// + + + + + REMOVE empty goto-button-span + + + + + //
	$('span.goto-button').each(function(){
		if($('input',this).length == 0)
		{
			$(this).remove();
		}
	});

	// + + + + + PREVENT double submit + + + + + //
	$('input[type="submit"]').on("click", function(e){

		//HAS CLASS
		if($(this).hasClass('disabled')){
			//PREVENT submit
			e.preventDefault();
		}
		else{
			//ADD CLASS 'disabled' to all submit button's
			$('input[type="submit"]').addClass('disabled');
			//REMOVE after 2 seconds
			setTimeout(function(){ $('input[type="submit"]').removeClass('disabled'); }, 2000);
		}
	});
	
	//DISABLE all submit-buttons once form is submit via one of the submit-buttons
	$('input[type="submit"]').on('submit',function(){
		$('input[type="submit"]').prop('disabled',true);
		$('input[type="submit"]').addClass('disabled');
	});


	// + + + + + TOGGLE progress-box visibility + + + + + //
	$('.pgbox-bar').on('click',stdToggleProgressBox);
	

	// + + + + + ADD className to each td that has a rowspan || to prevent tr:hover styles in that td  + + + + + //
	$('td[rowspan]').addClass('hasRowSpan');


	// + + + + + MOVE error-text in tables to the cell that contains the question-text  + + + + + //
	stdMoveTableErrors();
	

	//  + + + + + Responsive actions + + + + + //
	//Set the initial view
	stdResizeHandler();

	//API Standards >> resize-event 
	if (window.addEventListener) {
		window.addEventListener("resize", stdResizeHandler, false);
	}
	//IE model >> resize-event
	else if (window.attachEvent) {
		window.attachEvent("onresize", stdResizeHandler);
	}


	//  + + + + + Browser does not support media queries  + + + + + //
	if(!window.matchMedia){

		//Set the initial class name for the body:
		stdMatchMediaCustom();

		//API Standards >> resize-event
		if (window.addEventListener) {
			window.addEventListener("resize", stdMatchMediaCustom, false);
		}
		//IE model >> resize-event
		else if (window.attachEvent) {
			window.attachEvent("onresize", stdMatchMediaCustom);
		}		
		
	}// --- END: Browser does not support media queries ---


	// + + + + + ENABLE SWIPE  + + + + + //
	// Hammer(document.getElementById('main-section')).on('swipeleft swiperight',function(e){ stdToggleSlides(e.type); });
		Hammer(document.getElementById('header-swipe-section')).on('swipeleft swiperight',function(e){ stdToggleSlides(e.type); });
		Hammer(document.getElementById('topbar-swipe-section')).on('swipeleft swiperight',function(e){ stdToggleSlides(e.type); });
		Hammer(document.getElementById('qure-swipe-section')).on('swipeleft swiperight',function(e){ stdToggleSlides(e.type); });
		Hammer(document.getElementById('bottombar-swipe-section')).on('swipeleft swiperight',function(e){ stdToggleSlides(e.type); });
		Hammer(document.getElementById('footer-swipe-section')).on('swipeleft swiperight',function(e){ stdToggleSlides(e.type); });

		Hammer(document.getElementById('slide-section')).on('swipeleft swiperight',function(e){ stdToggleSlides(e.type); });
		$('.menu-icon').on('click',function(){ stdToggleSlides('click'); });

	//  + + + + + Don't show top-bar browser  + + + + + //
	if(typeof scrollY === 'undefined') return;

	function s() { if (!scrollY) scroll(0, 1); }

	addEventListener('load', s);

	addEventListener('orientationchange', s);
	

	//  + + + + + Make clickable touchable  + + + + + //
	$("label[for*='_Q']").on('click touchstart',function(){
	/**
	 * Makes label clickable(touchable) on mobile
	 * Works in combination with IncludeElementIDs="true"
	 */
	});


	//  + + + + + fix the viewport scaling bug on orientation change  + + + + + //
	var addEvent = 'addEventListener',
	    type = 'gesturestart',
	    qsa = 'querySelectorAll',
	    scales = [1, 1],
	    meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

	function fix() {
		meta.content = 'width=device-width,minimum-scale='+ scales[0] +',maximum-scale='+ scales[1];
		doc.removeEventListener(type, fix, true);
	}

	if ((meta = meta[meta.length - 1]) && addEvent in doc) {
		fix();
		scales = [.25, 1.6];
		doc[addEvent](type, fix, true);
	}


});//END: document ready


function stdButtonsFitInSection(){
/*********************** stdButtonsFitInSection() ***********************
 * Get total width of all submit buttons
 * RETURN true when buttons fit in area and false if they don't fit
 **
 * BD-150209.V1.0
 *********************************************************************/
 //stdButtonsFitInSection('L#163 stdButtonsFitInSection()');

	var totalButtonWidth = 0;

	//EACH (submit)button
	$('.buttons input').each(function(){
	
		totalButtonWidth += $(this).innerWidth();
	
	});

	return (totalButtonWidth + 7) < $('.nav').width();
	
}

function stdHandleGridDkRef(pmGridDkRefs){
/*********************** stdHandleGridDkRef() ***********************
 * LOOP EACH dkRef-grid-input in given array (pmGridDkRefs)
 * SEARCH for checked input in the row of dkRef-grid-input
 * HIDE the dkRef-grid-input when there is a non-dkref input checked
 **
 * pmGridDkRefs (array) of dkRef-grid-input(s)
 **
 * BD-150203.V1.0
 *********************************************************************/
 logStdNatCenLog('L#187 stdNatCen:: stdHandleGridDkRef()');

	var nonDkRefChecked = false;

	//EACH gridDkRef
	for(var i=0; i<pmGridDkRefs.length; i++){
	
		//GET the parent row of this dkRef
		var thisTr = $(pmGridDkRefs[i]).closest('tr');

		//EACH input in parent row
		$('input',thisTr).each(function(){

			//THIS non-dkref input is checked
			if($(this)[0].checked && $(this).val()!='dontknow' && $(this).val()!='refuse' && $(this).val()!='noanswer'){

				//Hide dkRefInput
				$(pmGridDkRefs[i]).css('display','none');
				
			};

		});//END: EACH input in parent row
	}//END: EACH gridDkRef
}//END: stdHandleGridDkRef()


function stdHandleNextBtn(e){
/*********************** stdHandleNextBtn() ***********************
 * UNSURE that the keycode is 13 and the event-target is the body
 * TRIGGER the click-event on .mrNext
 **
 * pmType (string) checkbox or radio
 * pmParentClass (string) className
 * pmDivClass (string) className
 **
 * BD-141124.V1
 * BD-141126.V2 ONLY two parameters pmDivClass is not needed anymore
 *********************************************************************/
 logStdNatCenLog('L#225 stdNatCen:: stdHandleNextBtn()');

	var keyCode = (e.keyCode) ? e.keyCode : e.which;
	var e_target;

	//RETURN-ENTER-KEY
	if (keyCode === 13) {

		//GET target's (lowerCase)tagName
		e_target = e.srcElement || e.target;
		e_target = (e_target !== undefined) ? $(e_target).prop('tagName') : '';
		e_target = (e_target !== undefined) ? e_target.toLowerCase() : '';

		//FOCUS ON BODY (no focus on dom-element)
		if (e_target === 'body') {
			$('.mrNext').trigger('click');
		}

	}//END: RETURN-ENTER-KEY
}//END: stdHandleNextBtn()


function stdLoopCheckboxRadio(pmType,pmParentClass){ //,pmDivClass){
/*********************** stdLoopCheckboxRadio() ***********************
 * - LOOP through each element of given type (pmType)
 * - CHECK if the parent doesn't contain given className (pmParentClass)
 * - ADD given className (pmParentClass) to the parent element
 * - ADD given className (pmDivClass) to the first div in the parent-element
 **
 * pmType (string) checkbox or radio
 * pmParentClass (string) className
 * pmDivClass (string) className
 **
 * BD-141124.V1
 * BD-141126.V2 ONLY two parameters pmDivClass is not needed anymore
 *********************************************************************/
 logStdNatCenLog('L#261 stdNatCen:: stdLoopCheckboxRadio()');
 
	//LOOP all checkboxes
	$(pmType).each(function(){

		//CHECK if the element is in a (real) table.question || custom tables have no 'tableid'
		var table_question = $(this).closest('table').attr('tableid') != undefined;
	
		//CLASSNAME doesn't exist AND the element is not part of a table.question
		if( !($(this).parent().hasClass(pmParentClass)) && !table_question )
		{
			var parent_node = $(this).parent();
	
			$(parent_node).addClass(pmParentClass);
			//$('div:first',parent_node).addClass(pmDivClass);
		}
	
	});
}


function stdMatchMediaCustom(){
/************************** stdMatchMediaCustom() **************************
 * GET window width
 * RESET classNames by removing all (custom) match-media-classNames
 * ADD match-media-classNames on basis of window width
 * - Large Devices, Wide Screens	: 1280px have no match-media-classNames
 * - Medium Devices, Desktops 		: 992px
 * - Tablets 											: 768px
 * - Smartphones (landscape) 			: 480px
 * - Smartphones (portrait) 			: 320px
 **
 * BD-141121.V1
 **********************************************************************/
 logStdNatCenLog('L#295 stdNatCen:: stdMatchMediaCustom()');

	var clientWidth = $(window).width();

	//RESET classNames
	$('body.medium-device').removeClass('medium-device');
	$('body.tablet-device').removeClass('tablet-device');
	$('body.phone-ls-device').removeClass('phone-ls-device');
	$('body.phone-pt-device').removeClass('phone-pt-device');
	$('body.below360px').removeClass('below360px');


	//ADD match-media-classNames
	//Smartphones (portrait)
	if(clientWidth <= 320){
		$('body').addClass('phone-pt-device');
	}
	//Smartphones (landscape)
	else if(clientWidth <= 480){
		$('body').addClass('phone-ls-device');
		
		if(clientWidth <= 360){
			$('body').addClass('below360px');
		}
	}
	//Tablets : 768px
	else if(clientWidth <= 768){
		$('body').addClass('tablet-device');
	}
	//Medium Devices, Desktops : 992px
	else if(clientWidth <= 992){
		$('body').addClass('medium-device');
	}

}//END: stdMatchMediaCustom()


function stdMoveSection(pmMoveables,pmMoveTo)
{
/************************** moveInfoSection() **************************
 * LOOP through each dom-element in given array (pmMoveables)
 * Move each dom-element into dom-element with given selector (pmMoveTo)
 **
 * pmMoveables (array) array of dom-elements
 * pmMoveTo (string) selector of dom-element
 **
 * BD-141121.V1
 **********************************************************************/
 logStdNatCenLog('L#343 stdNatCen:: stdMoveSection()');

 for(var i=0;i<pmMoveables.length;i++)
 {
		//MOVE section
		$(pmMoveTo).prepend(pmMoveables[i]);
 }

}//END: stdMoveSection


function stdMoveTableErrors(){
/****************************** stdMoveTableErrors() ******************************
 * LOOP through all response tables
 * LOOP through all error-messages in this table
 * MOVE the error to the right place
 **
 * BD-141127.V1
 * BD-141201.V2 >> Don't move when there is an error in other (then second) column
 * BD-150108.V2.2 >> Move error to the start of it's parent TD
 *********************************************************************************/
 logStdNatCenLog('L#364 stdNatCen:: stdMoveTableErrors()');

	//LOOP RESPONSE-TABLES
	$('.qt-section table').each(function(index,t){

		 //NO ERRORS outside column 2 in this table
		 if( ($('td:not(:nth-child(2)) .mrErrorText',t).length==0) )
		 {
			//LOOP EACH ERROR IN THIS TABLE
			$('td:nth-child(2) .mrErrorText',t).each(function(i,cur_error){

				//GET PARENT-CELL
				var error_cell = $(cur_error).closest('td');

				//NO QUESTIONTEXT in current td
				if($('.mrQuestionText',error_cell).length==0)
				{
					//GET PARENT-ROW
					var error_row = $(cur_error).closest('tr');

					//GET CEL with question-text in parent-row
					var questiontxt_cell = $('.mrQuestionText',error_row);

					//CELL with question-text found
					if(questiontxt_cell.length>0)
					{
						//MOVE the error to the first td, in current tr, which contains the question
						$(questiontxt_cell[0]).prepend(cur_error);
					}

				}//END: NO QUESTIONTEXT in current td

			});//END: LOOP ERROR(s)

		 }//END: NO ERRORS outside column 2
		 //ERRORS in other column(s)
		 else
		 {
			 //LOOP EACH ERROR IN THIS TABLE
			 $('td .mrErrorText',t).each(function(i,cur_error){

				 //GET PARENT-CELL
				 var error_cell = $(cur_error).closest('td');

				 //MOVE error to the top of parent-cell
				$(error_cell).prepend(cur_error);
			 });
		 }

	 });//END: LOOP RESPONSE-TABLES

}//END: stdMoveTableErrors()
	
	
function stdResizeHandler(){
/************************** stdResizeHandler() **************************
 * SET the height of the Slide-section
 * - use the biggest size
 * GET window-width
 * ON basis of window-width
 * - Move '#info-section' to '#main-section' or '#slide-section'
 * - Move '#logo-section' to '#main-section' or '#slide-section'
 **
 * BD-141121.V1.0
 * BD-141215.V1.1 ADDED moving the progress-box
 **********************************************************************/
 logStdNatCenLog('L#430 stdNatCen:: stdResizeHandler()');
 
	//SET height
	var total_height = Math.max( $(window).height(),$(document).height() );
	$('#slide-section').height(total_height);

	//GET current window width
	var cur_width = $(window).width();

	//Change checkbox and radiobutton design
	stdRespCheckboxRadio(cur_width);
	
	//Smartphones (landscape)
	if(cur_width <= 480)
	{
		//MOVE '#info-section' from '#main-section' into '#slide-section'
		stdMoveSection($('#main-section #info-section'),'#slide-section .footer');

		//MOVE '#logo-section' from '#main-section' into '#slide-section'
		stdMoveSection($('#main-section #logo-section'),'#slide-section .header');

		//MOVE extra-buttons from '.nav' into '.secondary-nav-section'
		stdMoveSection($('.secondary-button-section .secondary-buttons'),'.secondary-nav-section');
		
		//MOVE progress-box from '.pgbox-section' into '.pgbox-mobile-section'
		stdMoveSection($('#pgbox .pgbox-section.pgbox-menu .pgbox-sub-container'),'#pgbox .pgbox-mobile-section .pgbox-menu');

		//Check if the buttons fit in section ELSE adapt-size
		if(stdButtonsFitInSection()){
			//ADD class to adapt button-sizes
			$('.nav .buttons').addClass('adapt-size');
		}

		//WRAP a div around the table to make it's appearance slidable
		//stdSliderWrap('wrap','table'); //TODO prevent bubbling-slide-effect before creating the div

	}//END: Smartphones (landscape)
	//BIGGER than smartphone
	else if(cur_width > 480)
	{
		//MOVE '#info-section' from '#slide-section' into '#main-section'
		stdMoveSection($('#slide-section #info-section'),'#main-section .header');

		//MOVE '#logo-section' from '#slide-section' into '#main-section'
		stdMoveSection($('#slide-section #logo-section'),'#main-section .footer');

		//MOVE extra-buttons from '.secondary-nav-section' into '.nav'
		stdMoveSection($('.secondary-nav-section .secondary-buttons'),'.secondary-button-section');

		//Check if the buttons fit in section ELSE adapt position and size
		if(!stdButtonsFitInSection()){

			//ADD class to adapt button-sizes
			$('.nav .buttons').addClass('adapt-size');

			//MOVE extra-buttons from '.nav' into '.secondary-nav-section'
			stdMoveSection($('.secondary-button-section .secondary-buttons'),'.secondary-nav-section');
		}

		//MOVE progress-box from '.pgbox-section' into '.pgbox-mobile-section'
		stdMoveSection($('#pgbox .pgbox-mobile-section .pgbox-menu .pgbox-sub-container'),'#pgbox .pgbox-section.pgbox-menu');
		
		//REMOVE existing div.sliding-wrapper(s) around table(s)
		//stdSliderWrap('unwrap','table'); //TODO prevent bubbling-slide-effect before creating the div

	}//END: BIGGER than smartphone

}//END: stdResizeHandler()



function stdRespCheckboxRadio(pmWidth) {
/*********************** stdRespCheckboxRadio() ***********************
 * SET variable 'parent_class' and 'div_class' with a className
 * IF the given width (pmWidth) is smaller than 769px
 * - add classNames to checkboxes and radiobuttons and their surrounding elements
 * ELSE
 * - REMOVE all 'div_class' within 'parent_class' elements
 * - REMOVE 'parent_class' from all classNames
 **
 * pmWidth (integer)
 **
 * BD-141124.V1
 * BD-141126.V2 Don't add/remove the 'div_class' to the first div
 *           Handle the css via 'parent_class' (L#379)
 *********************************************************************/
 logStdNatCenLog('L#516 stdNatCen:: stdRespCheckboxRadio()');
 
	var parent_class = 'resp-checkbox-radio-parent';
	//var div_class = 'top10-distance';
	
	//Tablets : 768px
	if(pmWidth <= 768)
	{
		stdLoopCheckboxRadio('input[type="checkbox"]',parent_class); //,div_class);
		stdLoopCheckboxRadio('input[type="radio"]',parent_class); 		//,div_class);

	}//END: <= 768
	else
	{
		//$('.'+parent_class+' .'+div_class).removeClass(div_class);
		$('*').removeClass(parent_class);
	}

	
}//END: axRespCheckbox()


function stdSliderWrap(pmWrapUnwrap,pmSelector) {
/*************************** stdSliderWrap() ***************************
 * Loop through each element with given selector (pmSelector)
 * WRAP or UNWRAP on basis of given instruction (pmWrapUnwrap)
 * - unless the wrapper already has the requested appearance 
 **
 * pmWrapUnwrap (string) either 'unwrap' or 'wrap'
 * pmSelector (string)
 **
 * BD-141124.V1
 **********************************************************************/
 logStdNatCenLog('L#549 stdNatCen:: stdSliderWrap()');
	
	$(pmSelector).each(function(){
	
		if( (pmWrapUnwrap=='wrap') && !($(this).parent().hasClass('sliding-wrapper')) )
		{
			//WRAP INTO DIV.sliding-wrapper
			$(this).wrap('<div class="sliding-wrapper"></div>');
		}
	
		else if( (pmWrapUnwrap=='unwrap') && ($(this).parent().hasClass('sliding-wrapper')) )
		{
			//REMOVE SURROUNDING DIV.sliding-wrapper;
			$(this).unwrap();
		}
	
	});
}//END: stdSliderWrap()


function stdToggleProgressBox(pmEvent){
/************************** stdToggleSlides() **************************
 * GET target of given event (pmEvent)
 * GET the first image in the target IF the taget itself is not an image
 * GET the src of the image
 * IF there is a valid src(string)
 * - GET the name of the image
 * - TOGGLE the image name
 * - TOGGLE the visibility of the div.pgbox-menu
 **
 * pmEvent (event) the trigger event
 **
 * BD-141216.V1
 **********************************************************************/

 	//TARGET IMG
	var t_el = pmEvent.srcElement || pmEvent.target ;
	var t_img = ($(t_el).prop('tagName')!='IMG') ? $('img',t_el)[0] : t_el;
	//IMG SRC
	var t_img_src = (t_img!=undefined) ? $(t_img).attr('src') : '';
	
	//VALID IMG SRC
	if(t_img_src!='')
	{
		var t_img_name = t_img_src.split("/").pop();
		var toggle_name = (t_img_name=='arrow-closed.png')?'arrow-open.png':'arrow-closed.png';

		//TOGGLE IMG NAME
		$(t_img).attr('src',t_img_src.replace(t_img_name,toggle_name));
		
		//TOGGLE VISIBILITY
		$('.pgbox-mobile-section .pgbox-menu').slideToggle();

	}

}//END: stdToggleProgressBox()

function stdToggleSlides(pmEvent) {
/************************** stdToggleSlides() **************************
 * EXECUTES functions IF the window-width is smaller than 481
 * SET variable 'sliding_status' with a className
 * TOGGLE, ADD or REMOVE the className on basis of given event (pmEvent)
 * - toggle on 'click'
 * - add on 'swiperight'
 * - remove on 'swipeleft'
 * - DEFAULT toggle className
 **
 * pmEvent (event) the trigger event
 **
 * BD-141121.V1
 **********************************************************************/
 logStdNatCenLog('L#620 stdNatCen:: stdToggleSlides()');
 
 var sliding_status = 'on';

 if($(window).width() <= 480)
 {
 	if(pmEvent == 'swiperight')
 	{
		$('#slide-section').addClass(sliding_status);		
		$('#main-section').addClass(sliding_status);
 	}
 	else if(pmEvent == 'swipeleft')
 	{
		$('#slide-section').removeClass(sliding_status);		
		$('#main-section').removeClass(sliding_status);
 	}
 	else //if(pmEvent == 'click')
 	{
		$('#slide-section').toggleClass(sliding_status);		
		$('#main-section').toggleClass(sliding_status);
 	}
 }

}//END: stdToggleSlides()


// ****************** END: (NON)SPECIFIC LOG-FUNCTIONS ****************** //

//DEFINE IF THE LOGS SHOULD APPEAR IN CONSOLE
function logStdNatCenINFO(pmMsg) { if (true) { consoleLog('STDNATCEN:: ' + pmMsg); } }
function logstdNatCenDebugLog(pmMsg) { if (true) { consoleLog('DEBUG STDNATCEN:: ' + pmMsg); } }
function logStdNatCenDebugObj(pmObj) { if (true) { consoleDir(pmObj); } }
function logStdNatCenLog(pmMsg) { if (false) { consoleLog('STDNATCEN:: ' + pmMsg); } }
function logStdNatCenObj(pmObj) { if (false) { consoleDir(pmObj); } }

//Log string(s) to console IF the console exist
if(typeof window.consoleLog != 'function')
{
  window.consoleLog = function(e){
    if(window.console && window.console.log){
      window.console.log(e); }
  }
}

//Log object(s) to console IF the console exist
if(typeof window.consoleDir != 'function')
{
  window.consoleDir = function(e){
    if(window.console && window.console.dir){
      window.console.dir(e); }
  }
}
// - - - LOG FUNCTIONS - - - //