var sliderCreated = false;
var currentPos = 0;


function createSlider() {

	if (jQuery('#slider .scrollContainer > div').text() != '') {
	
		//some vars
		var $panels = jQuery('#slider .scrollContainer > div');
		var $container = jQuery('#slider .scrollContainer');
		var $scroll = jQuery('#slider .scroll');
		
		// if false, we'll float all the panels left and fix the width
		// of the container
		var horizontal = true;

		// float the panels left if we're going horizontal
		if (horizontal) {

			// calculate a new width for the container (so it holds all panels)
			$container.css('width', $panels[0].offsetWidth * $panels.length);
		}
		
		/////////////////////////////////////////////////////////////////////////////////////////////
		//helper functions
		
		//moving from 0 to 1 is only allowed, if at least one checkmark on panel0 is set
		isAllowedFrom0To1 = function () {
			return (jQuery('#panel0 input:checkbox:checked').length > 0 )
		};
		
		//moving from 1 to 2 is only allowed, if at least one checkmark on panel1 is set
		isAllowedFrom1To2 = function () {
			return (jQuery('#panel1 input:checkbox:checked').length > 0 )
		};
		
		//display error
		setToError = function (panelId) {
			jQuery($scroll).scrollTo({top:0, left:'+=200px'},200, {easing:'swing'})
						   .scrollTo({top:0, left:'-=200px'},200, {easing:'swing',
								onAfter:function(){
									//in callback to queue in
									jQuery('div#panel' + panelId + ' .errorbox').fadeIn(200);
								}
						   
						   });
			
		};
		/////////////////////////////////////////////////////////////////////////////////////////////		
		

		/////////////////////////////////////////////////////////////////////////////////////////////
		// Navigation
		//set up navigation manually (special check action before scroll)
		jQuery('#contactform-navigation li.panel0').click(function() {
			//scrolling to panel0 is always permitted
			jQuery($scroll).trigger( 'goto', [ 0 ] );
		});
		
		//Panel1
		jQuery('#contactform-navigation li.panel1').click(function() {
			scrollingIsAllowed=true;
			
			//scrolling to panel1 needs filled out panel0, if going forward from panel0
			if (currentPos==0) {
				if (!isAllowedFrom0To1()) {
					scrollingIsAllowed=false;
					setToError(0);
				}
			}
			
			//scroll, if we are allowed to do so
			if(scrollingIsAllowed) {
				jQuery($scroll).trigger( 'goto', [ 1 ] );
			}
			
		});
		
		//Panel2
		jQuery('#contactform-navigation li.panel2').click(function() {
			scrollingIsAllowed=true;
			
			//scrolling to panel2 needs filled out panel1, if going forward from panel1
			if (currentPos==1) {
				if (!isAllowedFrom1To2()) {
					scrollingIsAllowed=false;
					setToError(1);
				}
			}

			//scrolling to panel2 needs filled out panel0 and panel1, if going forward from panel0
			if (currentPos==0) {
				if (isAllowedFrom0To1()) {
					if (!isAllowedFrom1To2()) {
						//move half the way				
						jQuery($scroll).trigger( 'goto', [ 1 ] );
						scrollingIsAllowed=false;
						setToError(1);
					}
				} else {
					scrollingIsAllowed=false;
					setToError(0);
				}

			}
			
			//scroll, if we are allowed to do so
			if(scrollingIsAllowed) {
				jQuery($scroll).trigger( 'goto', [ 2 ] );
			}
		});
		
		
		jQuery('#contactform-switch .next').click(function() {
			scrollingIsAllowed=true;
			
			//scrolling to panel1 needs filled out panel0, if going forward from panel0
			if (currentPos==0) {
				if (!isAllowedFrom0To1()) {
					scrollingIsAllowed=false;
					setToError(0);
				}
			}
			
			//scrolling to panel2 needs filled out panel1, if going forward from panel1
			if (currentPos==1) {
				if (!isAllowedFrom1To2()) {
					scrollingIsAllowed=false;
					setToError(1);
				}
			}
			
			//scroll, if we are allowed to do so
			if(scrollingIsAllowed) {
				jQuery($scroll).trigger( 'next' );
			}
			
			
		});
		jQuery('#contactform-switch .prev').click(function() {
			jQuery($scroll).trigger( 'prev' );
		});
		/////////////////////////////////////////////////////////////////////////////////////////////
		
		
		/////////////////////////////////////////////////////////////////////////////////////////////
		// clientside validity check for panel2
		jQuery('#contactform-catalogue').bind('submit', function(e){


			if (7 != (
				  checkGenderField('tx_pilmailform_pi1_gender_male', 'tx_pilmailform_pi1_gender_female', 'label.gender')
				+ checkInputLength('tx_pilmailform_pi1_surname')
				+ checkInputLength('tx_pilmailform_pi1_name')
				+ checkInputLength('tx_pilmailform_pi1_street')
				+ checkInputLength('tx_pilmailform_pi1_zip')
				+ checkInputLength('tx_pilmailform_pi1_city')
				+ checkInputLength('tx_pilmailform_pi1_email'))) {
					e.preventDefault();
					e.stopPropagation();
					return false;
			} 
			
		});
		
		checkInputLength = function(id){
			if(jQuery('#' + id).val().length < 1) {
				jQuery('label[for=' + id + ']').addClass( 'error' );
				valid = false;
			} else {
				jQuery('label[for=' + id + ']').removeClass( 'error' );
				valid = true;
			};
			
			return valid;
		};
		
		checkGenderField = function(id1, id2, label){
			if(!jQuery('#' + id1).attr('checked') && !jQuery('#' + id2).attr('checked') ) {
				jQuery(label).addClass( 'error' );
				valid = false;
			} else {
				jQuery(label).removeClass( 'error' );
				valid = true;
			};
			
			return valid;
		};

		/////////////////////////////////////////////////////////////////////////////////////////////
		

		/////////////////////////////////////////////////////////////////////////////////////////////
		// Event handling
		function handleBeforeScroll(e, elem, $pane, $items, pos) {
			/**
			 * 'this' is the triggered element 
			 * e is the event object 
			 ' elem is the element we'll be scrolling to
			 * $pane is the element being scrolled
			 * $items is the items collection at this moment
			 * pos is the position of elem in the collection if it returns false, the event will be ignored
			 */
			 
			//do not scroll, if we are on target
			if (currentPos == pos) {
				return false;
			}
			
			// remove all active-classes
			jQuery('#contactform-navigation li').removeClass('active');
			
			// special actions on some panels
			jQuery('#contactform-switch div').show();
			jQuery('#tx_pilmailform_pi1_submit').hide();		

		}

		function handleAfterScroll(e, elem, $pane, $items, pos) {
			/**
			 * 'this' is the triggered element e is the event object elem is the
			 * element we'll be scrolling to $pane is the element being scrolled
			 * $items is the items collection at this moment pos is the position
			 * of elem in the collection if it returns false, the event will be
			 * ignored
			 */
			// id of panel we arrived right now is the class of the li that is
			// "responsible"
			jQuery('#contactform-navigation li.' + e.id).addClass('active');


			// special actions on some panels
			switch (e.id) {
				// panel0: no prev-Button
				case 'panel0':
					currentPos = 0;
					jQuery('#contactform-switch div.prev').hide();
					break;
				case 'panel1':
					currentPos = 1;
					break;
				case 'panel2':
					currentPos = 2;
					jQuery('#contactform-switch div.next').hide();
					jQuery('#tx_pilmailform_pi1_submit').show();
					break;
	
				default:
					//show in onBeforeScroll with: jQuery('#contactform-switch div').show();
					//break;
			}

		}
		/////////////////////////////////////////////////////////////////////////////////////////////
	
		// set mouseOver for the LIs (we do not have As and ther is no css
		// "hover" for LIS in IE<=6
		jQuery('#contactform-navigation li').hover(
			function() {
				jQuery(this).addClass('jq_hover');
			}, 
			function() {
				jQuery(this).removeClass('jq_hover');
			}
		);

		// offset is used to move to *exactly* the right place, since I'm using
		// padding on my example, I need to subtract the amount of padding to
		// the offset. Try removing this to get a good idea of the effect
		var offset = parseInt((horizontal ? $container.css('paddingTop')
				: $container.css('paddingLeft')) || 0)
				* -1;

		var scrollOptions = {
			target : $scroll, // the element that has the overflow

			// can be a selector which will be relative to the target
			items : $panels,

			//navigation : '#contactform-navigation li',

			// selectors are NOT relative to document, i.e. make sure they're
			// unique
			// prev: '#tx-bucore-modelFinder-switch .prev',
			// next: '#tx-bucore-modelFinder-switch .next',

			// allow the scroll effect to run both directions
			axis : 'xy',

			onBefore : handleBeforeScroll, // fired before scrolling starts
			onAfter : handleAfterScroll, // fired after scrolling ready

			offset : offset,

			// duration of the sliding effect
			duration : 500,

			// easing - can be used with the easing plugin:
			// http://gsgd.co.uk/sandbox/jquery/easing/
			easing : 'swing'
		};

		// apply serialScroll to the slider - we chose this plugin because it
		// supports// the indexed next and previous scroll along with hooking
		// in to our navigation.
		jQuery('#slider').serialScroll(scrollOptions);

		// now apply localScroll to hook any other arbitrary links to trigger
		// the effect
		jQuery.localScroll(scrollOptions);

		// finally, if the URL has a hash, move the slider in to position,
		// setting the duration to 1 because I don't want it to scroll in the
		// very first page load. We don't always need this, but it ensures
		// the positioning is absolutely spot on when the pages loads.
		scrollOptions.duration = 1;
		jQuery.localScroll.hash(scrollOptions);

	}
}





jQuery(document).ready(function() {
	//make slider
	createSlider();
	
	
	/////////////////////////////////////////////////////////////////////////////////////////////
	// Form handling
	
	//selectAll-Checkbox for motorhomes
	jQuery('#allMotorhomes').click(function() {
		jQuery('#category_motorhomes input:checkbox').attr('checked', jQuery(this).is(':checked'));
		
		//hide error, if a box is checked
		if (jQuery(this).is(':checked')){
			jQuery('div.errorbox').fadeOut(200);
		}
	});
	
	//single checkboxes of motorhomes toggle selctAll-Checkbox
	jQuery('#category_motorhomes input:checkbox').click(function() {
		mustBeChecked = jQuery('#category_motorhomes input:checkbox:checked').length == jQuery('#category_motorhomes input:checkbox').length;
		jQuery('#allMotorhomes').attr('checked',mustBeChecked);
		
		//hide error, if a box is checked
		if (jQuery(this).is(':checked')){
			jQuery('div.errorbox').fadeOut(200);
		}
	});
	
	//selectAll-Checkbox for caravans
	jQuery('#list_caravans').click(function() {
		jQuery('#category_caravans input:checkbox').attr('checked', jQuery(this).is(':checked'));
		
		//hide error, if a box is checked
		if (jQuery(this).is(':checked')){
			jQuery('div.errorbox').fadeOut(200);
		}
	});
	
	//single checkboxes of caravans toggle selectAll-Checkbox
	jQuery('#category_caravans input:checkbox').click(function() {
		mustBeChecked = jQuery('#category_caravans input:checkbox:checked').length == jQuery('#category_caravans input:checkbox').length;
		jQuery('#list_caravans').attr('checked',mustBeChecked);
		
		//hide error, if a box is checked
		if (jQuery(this).is(':checked')){
			jQuery('div.errorbox').fadeOut(200);
		}
	});
	
	//single checkboxes of caravans toggle selectAll-Checkbox
	jQuery('#panel1 input:checkbox').click(function() {
		
		//hide error, if a box is checked
		if (jQuery(this).is(':checked')){
			jQuery('div.errorbox').fadeOut(200);
		}
	});

	//additional info
	jQuery('#tx_pilmailform_pi1_habe_hatte_ja').click(function() {
		jQuery('dl.brand').show(200);
	});
	jQuery('#tx_pilmailform_pi1_habe_hatte_nein').click(function() {
		jQuery('dl.brand').hide(200);
		jQuery('dl.brand input:radio').removeAttr("checked");
	});
	/////////////////////////////////////////////////////////////////////////////////////////////
	

});