{capture name=path}{l s='Votre diagnostic'}{/capture}
{include file="$tpl_dir./breadcrumb.tpl"}
<link href="{$css_dir}{$page_name}.css" rel="stylesheet" type="text/css" media="all" /> 
<script type="text/javascript" src="{$js_dir}diagnostic.js"></script>
<div class="borderGreen auto">
	{if $step<1}
	<h1 class="border">[{l s='Diagnostic'}]</h1>
	{include file="$tpl_dir./errors.tpl"} 
		<form action="{$link->getPageLink('diagnostic.php')}?step=1" class="std" method="post">
			<div class="center">
				<p><img src="{$img_dir}Saveria-COSTE.jpg" alt="{l s='Savéria COSTE'}" width="250"/></p>
				<p><strong>{l s='Savéria COSTE'}</strong>, {l s='Docteur en Pharmacie, vous fait '}<br/>{l s='partager son expertise pour votre diagnostic de peau.'}</p>
				<p>{l s='Avez-vous les bons gestes ? Les bonnes routines beauté ?'}<br/>{l s='Répondez à ces quelques questions pour avoir un'} <br/>{l s='diagnostic clair et précis.'}</p>
				<div class="clear submit" style="padding-right:118px"><input type="submit" value="{l s='Démarrer le diagnostic'}"/></div>
			</div>
		</form>
	{else if $step==7}
	
		<script type="text/javascript" src="{$js_dir}modules/blockcart/ajax-cart-mobile.js"></script>
		<link href="{$css_dir}product_list_mobile.css" rel="stylesheet" type="text/css" media="all" />
	<h1 class="border">[{l s='Votre rituel beauté magique'}]</h1>
	{include file="$tpl_dir./errors.tpl"}
	<p>{l s='Découvrez votre rituel beauté personnalisé complètement magique !'}</p>
	<form class="std" action="#">
	<div class="tiroirs">
		{if isset($categoryA)}{include file="./diagnostic-items.tpl" categorie=$categoryA rituel=1}{/if}
		{if isset($categoryB)}{include file="./diagnostic-items.tpl" categorie=$categoryB rituel=2}{/if}
		{if isset($categoryC)}{include file="./diagnostic-items.tpl" categorie=$categoryC rituel=3}{/if}
		{if isset($categoryD)}{include file="./diagnostic-items.tpl" categorie=$categoryD rituel=4}{/if}
	</div>
	</form>
	<div class="clear mobile">
	{include file="./diagnostic-share.tpl"}
	</div>
	<form class="std" action="#">
		<div class="submit bilanComplet" style="float:left;padding-left:55px"> 
			<input type="button" class="button uppercase commanderRituel" value="{l s='Commander mon rituel magique complet'}" />
		</div>
	</form>
		<script type="text/javascript">
		{literal}
		$(document).ready(function(){
			$('.commanderRituel').each(function(){
				$(this).css('width','auto').css('display','block');
				var widthRituel=$(this).width();
				var widthBtn=$(this).find('.ui-btn').width();
				var paddLeftRituel=(widthRituel-widthBtn)/2; 
				$(this).css('float','left').css('padding-left',paddLeftRituel+'px');
			});
			
				$('.bilanComplet').css('width','auto').css('display','block');
				var widthRituel=$('.tiroirs').width();
				var widthBtn=$('.bilanComplet .ui-btn').width();
				var paddLeftRituel=(widthRituel-widthBtn)/2; 
				$('.bilanComplet').css('float','left').css('padding-left',paddLeftRituel+'px');
		});
		{/literal}
		</script>
	{else}
	<h1 class="border">[{l s='Diagnostic'}]</h1>
	{include file="$tpl_dir./errors.tpl"}
		<ul class="diagnosticMiniStep">
			<li>{if $step>1}<a href="{$link->getPageLink('diagnostic.php')}?step=1">{/if}<img src="{$img_dir}diagnosticMiniStep{if $step==1}Selected{/if}.png" alt="1" />{if $step>1}</a>{/if}</li>			
			<li>{if $step>2}<a href="{$link->getPageLink('diagnostic.php')}?step=2">{/if}<img src="{$img_dir}diagnosticMiniStep{if $step==2}Selected{/if}.png" alt="2" />{if $step>2}</a>{/if}</li>			
			<li>{if $step>3}<a href="{$link->getPageLink('diagnostic.php')}?step=3">{/if}<img src="{$img_dir}diagnosticMiniStep{if $step==3}Selected{/if}.png" alt="3" />{if $step>3}</a>{/if}</li>			
			<li>{if $step>4}<a href="{$link->getPageLink('diagnostic.php')}?step=4">{/if}<img src="{$img_dir}diagnosticMiniStep{if $step==4}Selected{/if}.png" alt="4" />{if $step>4}</a>{/if}</li>			
			<li>{if $step>5}<a href="{$link->getPageLink('diagnostic.php')}?step=5">{/if}<img src="{$img_dir}diagnosticMiniStep{if $step==5}Selected{/if}.png" alt="5" />{if $step>5}</a>{/if}</li>			
			<li>{if $step>6}<a href="{$link->getPageLink('diagnostic.php')}?step=6">{/if}<img src="{$img_dir}diagnosticMiniStep{if $step==6}Selected{/if}.png" alt="6" />{if $step>6}</a>{/if}</li>			
		</ul>
		<ul class="clear diagnosticSteps step{$step}">
			<li class="item1{if $step==1} selected{/if}"><a href="{if $step>1}{$link->getPageLink('diagnostic.php')}?step=1{else}javascript:void(0){/if}">{l s='En savoir plus sur vous'}</a></li>
			<li class="item2{if $step==2} selected{/if}"><a href="{if $step>2}{$link->getPageLink('diagnostic.php')}?step=2{else}javascript:void(0){/if}">{l s='Bilan hydratation eclat'}</a></li>
			<li class="item3{if $step==3} selected{/if}"><a href="{if $step>3}{$link->getPageLink('diagnostic.php')}?step=3{else}javascript:void(0){/if}"><span>{l s='Bilan imperfections'}</span></a></li>
			<li class="item4{if $step==4} selected{/if}"><a href="{if $step>4}{$link->getPageLink('diagnostic.php')}?step=4{else}javascript:void(0){/if}">{l s='Bilan anti-âge yeux'}</a></li>
			<li class="item5{if $step==5} selected{/if}"><a href="{if $step>5}{$link->getPageLink('diagnostic.php')}?step=1{else}javascript:void(0){/if}"><span>{l s='Routine beauté'}</span></a></li>
			<li class="item6{if $step==6} selected{/if}"><a href="{if $step>6}{$link->getPageLink('diagnostic.php')}?step=1{else}javascript:void(0){/if}"><span>{l s='Bilan corps'}</span></a></li>
		</ul>  
		
			<form class="std formulaire" id="diagnostic{$step}" method="post" action="javascript:void(0)" rel="{$link->getPageLink('diagnostic.php')}?step={$step+1}" {*onsubmit="return checkDiagnostic('diagnostic{$step}','{$link->getPageLink('diagnostic.php')}?step={$step+1}')"*}> 
					{foreach from=$full_rep item=rep}  
						{if in_array($rep.id_item,$Q_a_Masquer)}
							{assign var=QAMasquer value=1}
						{else}
							{assign var=QAMasquer value=0}							
						{/if}
							{if $rep.id_item==5}
							<p class="titre">{l s='Avez-vous des zones de brillance au niveau :'}</p>
							{/if}
							{if $rep.id_item==14}
								{if $QAMasquer==1}
									<input type="hidden" value="6" id="q{$rep.id_item}_F" name="q{$rep.id_item}" />
								{else}
								<div style="float:left;" class="item14 ">	{* curseur à faire *}
									
								{if $rep.id_item==5 || $rep.id_item==6}
									<p class="titre diagFlecheSmall">{$rep.question}</p>
								{else}
									<p class="titre">{$rep.question}</p>
								{/if} 
								<div class="radio required hidden">
									{if $rep.repA!=""}<input type="radio" value="1" class="item1" id="q{$rep.id_item}_A" name="q{$rep.id_item}"{if $rep.reponse==1 || $rep.reponse==''} checked="checked"{/if} data-role="none"/>{/if}
									{if $rep.repB!=""}<input type="radio" value="2" class="item2" id="q{$rep.id_item}_B" name="q{$rep.id_item}"{if $rep.reponse==2} checked="checked"{/if}  data-role="none"/>{/if}
									{if $rep.repC!=""}<input type="radio" value="3" class="item3" id="q{$rep.id_item}_C" name="q{$rep.id_item}"{if $rep.reponse==3} checked="checked"{/if} data-role="none" />{/if}
									{if $rep.repD!=""}<input type="radio" value="4" class="item4" id="q{$rep.id_item}_D" name="q{$rep.id_item}"{if $rep.reponse==4} checked="checked"{/if}  data-role="none"/>{/if}
									{if $rep.repE!=""}<input type="radio" value="5" class="item5" id="q{$rep.id_item}_E" name="q{$rep.id_item}"{if $rep.reponse==5} checked="checked"{/if} data-role="none" />{/if}
										<div class="clear"></div>
								</div>
								<div class="diagCurseurBar">
									<img src="{$img_dir}diagCurseur.png" alt="1" class="item1 {if $rep.reponse==1 || $rep.reponse==''}selected{else}fade op05{/if}" />
									<img src="{$img_dir}diagCurseur.png" alt="2" class="item2 {if $rep.reponse==2}selected{else}fade op05{/if}" />
									<img src="{$img_dir}diagCurseur.png" alt="3" class="item3 {if $rep.reponse==3}selected{else}fade op05{/if}" />
									<img src="{$img_dir}diagCurseur.png" alt="4" class="item4 {if $rep.reponse==4}selected{else}fade op05{/if}" />
									<img src="{$img_dir}diagCurseur.png" alt="5" class="item5 {if $rep.reponse==5}selected{else}fade op05{/if}" />									
								</div>
								<div class="imageGrade">
									<img src="{$img_dir}grade1.png" alt="1" class="item1 {if $rep.reponse==1 || $rep.reponse==''}selected{else}fade{/if}" />
									<img src="{$img_dir}grade2.png" alt="2" class="item2 {if $rep.reponse==2}selected{else}fade{/if}" />
									<img src="{$img_dir}grade3.png" alt="3" class="item3 {if $rep.reponse==3}selected{else}fade{/if}" />
									<img src="{$img_dir}grade4.png" alt="4" class="item4 {if $rep.reponse==4}selected{else}fade{/if}" />
									<img src="{$img_dir}grade5.png" alt="5" class="item5 {if $rep.reponse==5}selected{else}fade{/if}" />
								</div>
								</div>	 
								<div style="flaot:right;height:115px;width:450px"></div>
								<script type="text/javascript">{literal}
								$(document).ready(function(){
									$('.item14 input').click(function(){
										var newVal=$(this).val();
										$('.imageGrade img.selected').css('z-index',2);
										$('.imageGrade img.item'+newVal).fadeTo(0,0).css('z-index',4).fadeTo('fast',1,function(){								
											$('.imageGrade img.selected').css('z-index',1).removeClass('selected');
											$(this).addClass('selected');
										});
									});
									$('.diagCurseurBar').find('img.fade').css('opacity', '0.5');

									$('.diagCurseurBar').hover(function(){
										$(this).find('img.fade').fadeTo('fast',0.5);
									},
									function(){
										$(this).find('img.fade').fadeTo('fast',0);
									});
									$('.diagCurseurBar img').click(function(){	
									$('.diagCurseurBar img').removeClass('op05');
									$('.diagCurseurBar img.selected').addClass('fade').removeClass('selected').fadeTo('fast',0.5); 
									$(this).addClass('selected').removeClass('fade').fadeTo('fast',1);
										var newVal=$(this).attr('alt');
										// alert(newVal);
										$('.item14 .radio input.item'+newVal).click(); 
									});
									
									$('.diagCurseurBar img.fade').fadeTo('fast',0);
								});
								
								{/literal}</script>
								
								{/if}
							{else} 
								{if $rep.id_item==12|| $rep.id_item==13}								
									<div style="float:right;width:450px">
								{else}
									<div class="clear"></div>
								{/if}
								{if $QAMasquer==1} 
								<input type="hidden" value="6" id="q{$rep.id_item}_F" name="q{$rep.id_item}" />
								{else}
								{if $rep.id_item==5 || $rep.id_item==6}
									<p class="titre diagFlecheSmall">{$rep.question}</p>
								{else}
									<p class="titre">{$rep.question}</p>
								{/if} 
									<div class="radio required radio{$rep.id_item}">
										{if $rep.repA!=""}<input type="radio" value="1" id="q{$rep.id_item}_A" name="q{$rep.id_item}"{if $rep.reponse==1} checked="checked"{/if} /><label for="q{$rep.id_item}_A" class="label1">{$rep.repA}</label>{if $rep.repC!=""}<br/>{/if}{/if}
										{if $rep.repB!=""}<input type="radio" value="2" id="q{$rep.id_item}_B" name="q{$rep.id_item}"{if $rep.reponse==2} checked="checked"{/if}/><label for="q{$rep.id_item}_B" class="label2">{$rep.repB}</label>{if $rep.repC!=""}<br/>{/if}
										{/if}
										
										{if $rep.repC!=""}<input type="radio" value="3" id="q{$rep.id_item}_C" name="q{$rep.id_item}"{if $rep.reponse==3} checked="checked"{/if}/><label for="q{$rep.id_item}_C" class="label3">{$rep.repC}</label>{if $rep.repD!=""}<br/>{/if}
										{/if}
										
										{if $rep.repD!=""}<input type="radio" value="4" id="q{$rep.id_item}_D" name="q{$rep.id_item}"{if $rep.reponse==4} checked="checked"{/if} /><label for="q{$rep.id_item}_D" class="label4">{$rep.repD}</label>{if $rep.repE!=""}<br/>{/if}
										{/if}
										{if $rep.repE!=""}<input type="radio" value="5" id="q{$rep.id_item}_E" name="q{$rep.id_item}"{if $rep.reponse==5} checked="checked"{/if}/><label for="q{$rep.id_item}_E" class="label5">{$rep.repE}</label>{/if}
										<div class="clear"></div>
									</div> 	
								{/if} 
								{if $rep.id_item==12|| $rep.id_item==13}								
									</div>
								{/if}
						{/if}
							{if $rep.texterepA!=""}<div class="hidden"><a href="#textere_q{$rep.id_item}_A" id="lien_q{$rep.id_item}_A" class="thickbox"></a><div id="textere_q{$rep.id_item}_A" class="popinDiag">{$rep.texterepA}</div></div>{/if}
							{if $rep.texterepB!=""}<div class="hidden"><a href="#textere_q{$rep.id_item}_B" id="lien_q{$rep.id_item}_B" class="thickbox"></a><div id="textere_q{$rep.id_item}_B" class="popinDiag">{$rep.texterepB}</div></div>{/if}
							{if $rep.texterepC!=""}<div class="hidden"><a href="#textere_q{$rep.id_item}_C" id="lien_q{$rep.id_item}_C" class="thickbox"></a><div id="textere_q{$rep.id_item}_C" class="popinDiag">{$rep.texterepC}</div></div>{/if}
							{if $rep.texterepD!=""}<div class="hidden"><a href="#textere_q{$rep.id_item}_D" id="lien_q{$rep.id_item}_D" class="thickbox"></a><div id="textere_q{$rep.id_item}_D" class="popinDiag">{$rep.texterepD}</div></div>{/if}
							{if $rep.texterepE!=""}<div class="hidden"><a href="#textere_q{$rep.id_item}_E" id="lien_q{$rep.id_item}_E" class="thickbox"></a><div id="textere_q{$rep.id_item}_E" class="popinDiag">{$rep.texterepE}</div></div>{/if}
						
					{/foreach}
				
			<input type="hidden" value="{$step+1}" name="step" />
			<div class="submit">
				<input type="submit" value="{l s='Suivante'}" class="uppercase button" />
				{*<a href="{$link->getPageLink('diagnostic.php')}?step={$step-1}" class="uppercase button back">{l s='Précédente'}</a>*}
			</div>
			</form>
			<script type="text/javascript">
					// var idForm=$(this).attr('id');
					{literal} 
				$(document).ready(function(){
					$('#diagnostic{/literal}{$step}{literal}').submit(function() {
						var idForm=$(this).attr('id');
						var newRel=$(this).attr('rel');
						$('#'+idForm).attr('action','javascript:void(0)');
						var newError=false;
						$('#'+idForm+' p,#'+idForm+' p label').removeClass('erreur');
						$('#'+idForm+' .required').each(function(){
							if($(this).hasClass('radio') || $(this).hasClass('checkbox')){
								if($(this).find('input:checked').length<1){
									newError=true;
									$(this).prev().addClass('erreur');
									$(this).find('label').addClass('erreur');
								} 
							} 
						});							
						if(newError==false){
							$('#'+idForm).attr('action',newRel);
							return true;
						}
					  return false;
					});
					
					$('.formulaire .required input').click(function(){
						var newID=$(this).attr('id');
						if($('#lien_'+newID).length>0)
							$('#lien_'+newID).click();
					});
					
				});
			{/literal}</script>
	{/if}
		<div class="clear"></div>
</div>