var sliderCreated = false;

function startSpinner(mode) {
	switch(mode) {
		case "big":
			jQuery('#bucore_modelFinder_result').html('<img id="spinnerBig" src="/typo3conf/ext/bu_products/Resources/Public/Images/modelFinder/loading.gif"/>');
		break;
		case "small":
			jQuery('#bucore_modelFinder_numberOfResults_spinner').html('<img src="/typo3conf/ext/bu_products/Resources/Public/Images/modelFinder/loading_small.gif"/>');	
		break;
	}
}

function stopSpinner(mode) {
	switch(mode) {
		case "big":
			jQuery('#bucore_modelFinder_result').html('');
		break;
		case "small":
			jQuery('#bucore_modelFinder_numberOfResults_spinner').html('');
		break;
	}
}

function restoreModelFinder() {
	createSlider();  									//enable slider
	jQuery('#tx-buproducts-modelFinder-navigation li').addClass( 'enabled' );	//enable all tabs
	jQuery('#slider .scroll').trigger( 'stop' );	
	jQuery('#slider .scroll').trigger( 'goto', [4] );	
	jQuery('#slider .scroll').trigger( 'start' );	
	updateNumber();
}


function createSlider() {

	if (jQuery('#slider .scrollContainer > div').text() != '' ) {
		var linkMenu = jQuery('#tx-buproducts-modelFinder-navigation').html();
		jQuery('#tx-buproducts-modelFinder-navigation').empty();
		jQuery('#tx-buproducts-modelFinder-navigation').append(linkMenu);
		
		
		var scrollContent = jQuery('div.scroll').html();
		jQuery('div.scroll').empty();
		jQuery('div.scroll').append(scrollContent);

		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);
		}



		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
			 */
			 //remove all active-classes
			jQuery('#tx-buproducts-modelFinder-navigation li').removeClass('active');


			//console.dir(e);

		}

		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 "resposible"
			 jQuery('#tx-buproducts-modelFinder-navigation li.' + e.id).addClass('active');

			 // set scroll div height fixed to "450px"
			 jQuery('.tx-buproducts-modelFinder .scroll').css('height','450px');
			 

			 //console.log($pane);
			 //console.log($items.lenght);
			 //special actions on some panels
			switch (e.id) {
				//panel0: no prev/next-Button
				case 'panel0':
					jQuery('#tx-buproducts-modelFinder-switch div').hide();
					break;

				//last panel (actually panel4): no heigth, no next, special xAjax-Action
				case 'panel4':
					jQuery('#bucore_modelFinder_showNumberOfResults').empty();

					jQuery('#tx-buproducts-modelFinder-switch div.next').hide();

					// set scroll div height fixed to "100%"
					jQuery('.tx-buproducts-modelFinder .scroll').css('height','100%');

					getResults();
					break;

				default:
					jQuery('#tx-buproducts-modelFinder-switch div').show();
			}



			 //last panel (actually panel4): no heigth, no next, special xAjax-Action

		}

		//set mouseOver for the LIs (we do not have As and ther is no css "hover" for LIS in IE<=6
		jQuery('#tx-buproducts-modelFinder-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: '#tx-buproducts-modelFinder-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('#slider').serialScroll(scrollOptions);
	}
}

jQuery(document).ready(function() {
	jQuery('#caravan').live('click', function(event) {
		jQuery('#vehicleType').val('caravan');
		displayCaContent();
		jQuery('#tx-buproducts-modelFinder-navigation li').addClass( 'enabled' );
		updateNumber();
		createSlider();
		jQuery('#paramsChanged').val('Change');
	    jQuery('#slider .scroll').trigger( 'next' );
	    event.preventDefault();	
		return false;
	});
	
	jQuery('#motorhome').live('click', function(event) {
		jQuery('#vehicleType').val('motorhome');
		displayRmContent();
		jQuery('#paramsChanged').val('Change');
		jQuery('#tx-buproducts-modelFinder-navigation li').addClass( 'enabled' );
		updateNumber();
		createSlider();
		jQuery('#slider .scroll').trigger( 'next' );
		
	    
	    event.preventDefault();	
		return false;	
	});
	
	jQuery('input.passenger').live('change', function(event) {
		jQuery('#paramsChanged').val('Change');
		updateNumber();
	});
	jQuery('input.bed_check').live('change', function(event) {
		jQuery('#paramsChanged').val('Change');
		updateNumber();
	});
	jQuery('input.bed_radio').live('change', function(event) {
		jQuery('#paramsChanged').val('Change');
		updateNumber();
	});
	jQuery('#overallLength').live('change', function(event) {
		jQuery('#paramsChanged').val('Change');
		updateNumber();
	});
	jQuery('#overallHeight').live('change', function(event) {
		jQuery('#paramsChanged').val('Change');
		updateNumber();
	});
	jQuery('#priceMin').live('change', function(event) {
		jQuery('#paramsChanged').val('Change');
		updateNumber();
	});
	jQuery('#priceMax').live('change', function(event) {
		jQuery('#paramsChanged').val('Change');
		updateNumber();
	});
	jQuery('input.permissibleWeight').live('change', function(event) {
		jQuery('#paramsChanged').val('Change');
		updateNumber();
	});
});


function displayRmContent() {
	var oldContent = jQuery('#panel0').html();
	var newContent = '<div class="scroll"><div class="scrollContainer"><div class="step step1 panel" id="panel0">'+oldContent+'</div>';
	newContent += jQuery('#contentRM').html()+'</div></div>';
	jQuery('#bucore_modelFinder_steps').html(newContent);
}

function displayCaContent() {
	var oldContent = jQuery('#panel0').html();
	var newContent = '<div class="scroll"><div class="scrollContainer"><div class="step step1 panel" id="panel0">'+oldContent+'</div>';
	newContent += jQuery('#contentCA').html()+'</div></div>';
	jQuery('#bucore_modelFinder_steps').html(newContent);
		
}

function getResults() {
	startSpinner('big');
	var mode = jQuery('#vehicleType').val();
	var pageId = jQuery('#pageId').val();
	var dataString = jQuery("#bucore_modelFinder").serialize();
	jQuery.ajax({
        type: "POST",
        url: "index.php?id="+pageId+"&no_cache=1&tx_buproducts_pi2[controller]=Finder&tx_buproducts_pi2[action]=showResult",
        data: dataString,
	    dataType: "json",
	    success: function(data) {
	    	stopSpinner('big');
	    	if(data.modelContent) {
				jQuery('#bucore_modelFinder_result').html(data.modelContent);
	    	}
	    	if(data.modelNumber) {
				jQuery('span#bucore_modelFinder_showNumberOfResults').html(data.modelNumber);
	    	}
	    	
	    	switch(mode) {
				case "motorhome":
					jQuery('p.modelHint').show();
				break;
				default:
					jQuery('p.modelHint').hide();
				break;
			}
		}
     });
	
}


function updateNumber() {
	startSpinner('small');
	var mode = jQuery('#vehicleType').val();
	var pageId = jQuery('#pageId').val();
	var dataString = jQuery("#bucore_modelFinder").serialize();
	jQuery.ajax({
        type: "POST",
        cache: false,
        url: "index.php?id="+pageId+"&no_cache=1&tx_buproducts_pi2[controller]=Finder&tx_buproducts_pi2[action]=updateNumber",
        data: dataString,
	    dataType: "json",
	    success: function(data) {
	    	if(data.modelNumber) {
				jQuery('span#bucore_modelFinder_numberOfResults').text(data.modelNumber);
	    	}
	    	stopSpinner('small');
		}
     });
}