var hasChanged = false;
jQuery(function($) {

	// settings
	var step 			= 4;					// number of item to slide at once
	var time			= 800;					// time of the slide transition
	var cycle			= 4000;					// time between auto switch
	//var easing			= 'easeOutQuart';		// easing
	var easing			= '';
	
	// aliases
	var $root 			= $('#regions');
	var $slider 		= $root.find('div.slider');
	var $item 			= $slider.find('div.property-a');
	var count 			= $item.size();
	var pages			= Math.ceil(count/step);
	
	// correct slider width
	var packWidth 		= $slider.find('div.pack').width();
	var sliderWidth 	= packWidth * 9;
	var itemWidth 		= $item.outerWidth();
	var itemMargin 		= parseInt($item.css('margin-left'));
	var itemTotal 		= itemWidth + itemMargin;
	var stepWidth 		= step * (itemWidth + itemMargin);
	
	//$root.height($root.height());
	$slider.width(sliderWidth).hide();
	

	
	// clone items for cycle 
	var item = 1;
	$root.find('div.pack').css('visibility','visible').clone().appendTo($slider).clone().appendTo($slider).clone().appendTo($slider).clone().appendTo($slider);
	
	// center and show slider
	var half = Math.floor($root.width()/2);
	var center = packWidth*2 - half + Math.ceil((stepWidth)/2) + itemMargin * 0.5;
	$slider.css('margin-left','-'+center+'px').fadeIn(300);
	//$slider.css('margin-left','0px').fadeIn(300);
	// paging
	$root.append('<ul class="index"><li class="prev"><a href="#prev">Précédent</a></li><li class="next"><a href="#next">Suivant</a></li></ul>');
	$root.find('ul.index li a').click(function(){
		if($slider.is(':animated')) return false;
		$slider.css('margin-left',(-center - (item * itemTotal - itemTotal)) +'px');
		
		var direction = $(this).parent().is('.next') ? -1 : 1;
		
		$slider.animate({marginLeft: '+='+direction*stepWidth},time,easing,function(){
			item = item - direction * step;
			if(item < 1) item = item + count;
			if(item > count) item = item - count;
		});
		return false;
	});
	
	// auto cycle
	var showcaseCycle = setInterval(function(){
		$root.find('ul.index li.next a').trigger('click');
	},cycle+time);
	
	$root.bind('mouseenter',function(){
		clearInterval(showcaseCycle);
	});
	
	$('.numDep').css('opacity','.9');
	$root.find('.property-a img').click(function(){
		resetRegs();
		$('.numDep',$(this).parent()).css('display','block');
	});
	
	$('#numDep').click(resetRegs);
	
	$("#regions img[alt]").tipTip();
	$(".numDep div[title]").tipTip();

	
	buybox();
	
	
	 
});

function buybox(){
	 $("#plaqueCom").mask("aa-999-aa");

		$("#regions .numDep div.on").bind('click',function (){
			$('#numDep option').attr('selected','');
			$("#numDep option[value='"+$(this).text()+"']").attr('selected','selected');
			$("#numDep").change();
			//window.location.href="#orderPlaque";
		});
		$("#numDep").bind('change',function (){
			$('#plaque .regDep').css('background','url(/img/departements/'+this.options[this.selectedIndex].value+'.png) no-repeat');
		});
		/*
		$('#plaqueCom').bind('click',function (){
			if ($('#plaqueCom').attr('value')=='AB-123-CD') $('#plaqueCom').attr('value','');
		});
		$('#plaqueCom').bind('blur',function (){
			if ($('#plaqueCom').attr('value')==''){
				$('#plaqueCom').attr('value','AB-123-CD');
				$('#plaqueCom').keyup();
			}
		});
		*/
		$('#plaqueCom').bind('keyup',function (){
			$('#plaque .numero').html($('#plaqueCom').attr('value'));
			hasChanged = true;
		});	
	
}

function resetRegs(){
	$('.numDep').css('display','none');
}

function validFrontForm(frm){
	
	var regExp= /[a-z]{2}-[0-9]{3}-[a-z]{2}/i;
	
	var er=new Array();
	if (!regExp.test(frm.plaqueCom.value)) er.push('Numéro de plaque invalide.');
	if ( (frm.numDep.selectedIndex == -1 || frm.numDep.selectedIndex == 0 ) &&  frm.numDep.length>1 ) er.push('Un département doit être sélectionné.');
	if ( frm.numDep.options[frm.numDep.selectedIndex].value == '-1' ) er.push('Ce département est en rupture de stock, merci d\'en sélectionner un autre.');
	if (er.length!=0){
		$("#dialog-message").html('<p>'+er.join("<br />")+'</p>');
		$("#dialog-message").attr('title','ATTENTION');
		$("#dialog-message").dialog({
			modal: true,
			buttons: {
				Ok: function() {
					$(this).dialog('close');
				}
			}
		});

		return false;
	}
	
	if(!hasChanged){
		$("#dialog-message").html("<p>Veuillez saisir votre numéro de plaque d'immatriculation</p>");
		$("#dialog-message").attr('title','ATTENTION');
		$("#dialog-message").dialog({
			modal: true,
			buttons: {
				Ok: function() {
					$(this).dialog('close');
				}
			}
		});

		return false;
	}
	
}