<krpano version="1.19" title="La Construction de la Cathédrale de Rodez ">

	<include url="skin/vtourskin.xml" />

<!-- =========================================================
     PLUGIN SON - AMBIANCE CHANTIER MÉDIÉVAL
========================================================= -->

<plugin name="soundinterface"
        url.html5="%SWFPATH%/plugins/soundinterface.js"
        url.flash="%SWFPATH%/plugins/soundinterface.swf"
        preload="true"
        keep="true" />

	<!-- customize skin settings: maps, gyro, thumbnails, tooltips, layout, design, ... -->
	<skin_settings maps="false"
	               maps_type="bing"
	               maps_bing_api_key=""
	               maps_zoombuttons="false"
	               gyro="true"
	               littleplanetintro="false"
	               title="true"
	               thumbs="true"
	               thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
	               thumbs_opened="false"
	               thumbs_text="false"
	               thumbs_dragging="true"
	               thumbs_onhoverscrolling="false"
	               thumbs_scrollbuttons="false"
	               thumbs_scrollindicator="false"
	               thumbs_loop="false"
	               tooltips_buttons="false"
	               tooltips_thumbs="false"
	               tooltips_hotspots="false"
	               tooltips_mapspots="false"
	               deeplinking="false"
	               loadscene_flags="MERGE"
	               loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
	               loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
	               loadscene_blend_next="SLIDEBLEND(0.5,   0, 0.75, linear)"
	               loadingtext="loading..."
	               layout_width="100%"
	               layout_maxwidth.normal="900"
	               layout_maxwidth.mobile=""
	               controlbar_width.normal="-44"
	               controlbar_width.mobile="100%"
	               controlbar_height.normal="38"
	               controlbar_height.mobile="34"
	               controlbar_offset.normal="22"
	               controlbar_offset.mobile="0"
	               controlbar_offset_closed="-40"
	               controlbar_overlap.normal="7"
	               controlbar_overlap.mobile="2"
	               design_skin_images="vtourskin.png"
	               design_bgcolor="0x000000"
	               design_bgalpha="0.5"
	               design_bgborder="0 0xFFFFFF 1.0"
	               design_bgroundedge.normal="9"
	               design_bgroundedge.mobile="1"
	               design_bgshadow="0 0 9 0xFFFFFF 0.5"
	               design_thumbborder_bgborder="4 0xFFFFFF 1.0"
	               design_thumbborder_padding="2"
	               design_thumbborder_bgroundedge="5"
	               design_text_css="color:#FFFFFF; font-family:Arial; font-weight:bold;"
	               design_text_shadow="1"
	               />

	<!--
	    For an alternative skin design either change the <skin_settings> values 
	    from above or optionally include one of the predefined designs from below.
	    Either by removing the 'xml-if-check' from the particular <include> element
	    or by adding e.g. initvar:{design:'flat_light'} to the embedpano() call in
	    the html file:
	-->
	<include url="skin/vtourskin_design_glass.xml"       if="design === 'glass'"       />
	<include url="skin/vtourskin_design_flat.xml"        if="design === 'flat'"        />
	<include url="skin/vtourskin_design_flat_light.xml"  if="design === 'flat_light'"  />
	<include url="skin/vtourskin_design_ultra_light.xml" if="design === 'ultra_light'" />
	<include url="skin/vtourskin_design_117.xml"         if="design === '117'"         />


	<!-- startup action - load the first pano/scene -->
	<action name="startup" autorun="onstart">
		if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
		loadscene(get(startscene), null, MERGE);
		if(startactions !== null, startactions() );
	</action>

	<!-- =========================================================
     STYLE DES HOTSPOTS INFORMATIFS
========================================================= -->

<style name="hotspot_info"
       url="skin/info.png"
       scale="0.4"
       alpha="0.95"
       edge="center"
       distorted="false"
       zorder="20"
       onover="
            tween(scale,0.72,0.15);
            show_hotspot_title(get(title));
       "
       onout="
            tween(scale,0.55,0.15);
            hide_hotspot_title();
       "
/>
		<!-- place your scene hotspots here -->
<!-- =========================================================
     PANNEAU D'INFORMATION - VERSION STABLE SANS PARENT
========================================================= -->

<layer name="info_panel"
       type="container"
       align="center"
       width="560"
       height="590"
       bgcolor="0x1b1209"
       bgalpha="0.94"
       bgborder="1 0xffd28a 0.45"
       bgroundedge="18"
       bgshadow="0 8 30 0x000000 0.55"
       visible="false"
       zorder="100"
       keep="true" />

<layer name="info_title"
       url="%SWFPATH%/plugins/textfield.swf"
       align="center"
       x="0"
       y="-255"
       width="500"
       height="45"
       html=""
       css="font-family:Arial; font-size:24px; color:#ffd28a; font-weight:bold; text-align:left;"
       background="false"
       border="false"
       selectable="false"
       enabled="false"
       visible="false"
       zorder="310"
       keep="true" />

<layer name="info_image"
       align="center"
       x="0"
       y="-80"
       width="500"
       height="281"
       url=""
       visible="false"
       keep="true"
       zorder="200"
       handcursor="true"
       onclick="show_big_image(get(current_info_image));" />

<layer name="info_text"
       url="%SWFPATH%/plugins/textfield.swf"
       align="center"
       x="0"
       y="190"
       width="500"
       height="150"
       html=""
       css="font-family:Arial; font-size:15px; color:#FFFFFF; text-align:left;"
       background="true"
       backgroundcolor="0x000000"
       backgroundalpha="0.78"
       border="false"
       padding="14"
       wordwrap="true"
       selectable="false"
       enabled="true"
       visible="false"
       zorder="99999"
       keep="true" />

<layer name="info_close"
       url="%SWFPATH%/plugins/textfield.swf"
       align="center"
       x="250"
       y="-260"
       width="32"
       height="32"
       html="X"
       css="font-family:Arial; font-size:22px; color:#ffffff; font-weight:bold; text-align:center;"
       background="false"
       border="false"
       selectable="false"
       visible="false"
       zorder="340"
       keep="true"
       onclick="hide_info();" />


<action name="show_info">
    set(layer[info_title].html, "");
    set(layer[info_text].html, "");

    set(layer[info_title].html, %1);
    set(layer[info_text].html, %2);

    if(%3 != null,
        set(current_info_image, %3);
        set(layer[info_image].url, get(current_info_image));
        set(layer[info_image].visible, true);

        set(layer[info_text].x, 0);
        set(layer[info_text].y, 190);
        set(layer[info_text].width, 500);
        set(layer[info_text].height, 150);
        set(layer[info_text].zorder, 99999);
        set(layer[info_text].visible, true);
      ,
        set(current_info_image, null);
        set(layer[info_image].visible, false);

        set(layer[info_text].x, 0);
        set(layer[info_text].y, 20);
        set(layer[info_text].width, 500);
        set(layer[info_text].height, 360);
        set(layer[info_text].zorder, 99999);
        set(layer[info_text].visible, true);
    );

    set(layer[info_panel].alpha, 0);
    set(layer[info_panel].scale, 0.92);

    set(layer[info_panel].visible, true);
    set(layer[info_title].visible, true);
    set(layer[info_text].visible, true);
    set(layer[info_close].visible, true);

    tween(layer[info_panel].alpha, 1, 0.18);
    tween(layer[info_panel].scale, 1, 0.18);
</action>

<action name="hide_info">
    set(layer[info_panel].visible, false);
    set(layer[info_title].visible, false);
    set(layer[info_image].visible, false);
    set(layer[info_text].visible, false);
    set(layer[info_close].visible, false);
</action>
<layer name="big_image_panel"
       type="container"
       align="center"
       width="760"
       height="480"
       bgcolor="0x000000"
       bgalpha="0.94"
       bgroundedge="18"
       visible="false"
       zorder="100000"
       keep="true" />

<layer name="big_image"
       parent="big_image_panel"
       url=""
       align="center"
       width="720"
       height="405"
       keep="true"
       zorder="100001" />

<layer name="big_image_close"
       parent="big_image_panel"
       url="%SWFPATH%/plugins/textfield.swf"
       align="topright"
       x="14"
       y="10"
       width="32"
       height="32"
       html="X"
       css="font-family:Arial; font-size:22px; color:#ffffff; font-weight:bold; text-align:center;"
       background="true"
       backgroundcolor="0x000000"
       backgroundalpha="0.65"
       border="false"
       keep="true"
       zorder="100002"
       onclick="hide_big_image();" />
       
    <action name="show_big_image">
    set(layer[big_image].url, %1);

    set(layer[big_image_panel].zorder, 100000);
    set(layer[big_image].zorder, 100001);
    set(layer[big_image_close].zorder, 100002);

    set(layer[big_image_panel].alpha, 0);
    set(layer[big_image_panel].scale, 0.92);
    set(layer[big_image_panel].visible, true);

    tween(layer[big_image_panel].alpha, 1, 0.18);
    tween(layer[big_image_panel].scale, 1, 0.18);
</action>
       <action name="hide_big_image">
    tween(layer[big_image_panel].alpha, 0, 0.15, easeOutQuad,
        set(layer[big_image_panel].visible, false);
    );
</action>
	<events name="info_keyboard"
        keep="true"
        onkeyup="if(keycode == 27, hide_info(););"
/>


<!-- =========================================================
     TOOLTIP TITRE AU SURVOL DES HOTSPOTS
========================================================= -->

<layer name="hotspot_tooltip"
       url="%SWFPATH%/plugins/textfield.swf"
       align="center"
       x="0"
       y="-220"
       width="360"
       height="42"
       html=""
       css="font-family:Arial; font-size:16px; color:#FFFFFF; font-weight:bold; text-align:center;"
       background="true"
       backgroundcolor="0x000000"
       backgroundalpha="0.72"
       border="false"
       padding="8"
       bgroundedge="8"
       visible="false"
       zorder="99998"
       keep="true" />

<action name="show_hotspot_title">
    set(layer[hotspot_tooltip].html, %1);
    set(layer[hotspot_tooltip].alpha, 0);
    set(layer[hotspot_tooltip].visible, true);
    tween(layer[hotspot_tooltip].alpha, 1, 0.12);
</action>

<action name="hide_hotspot_title">
    tween(layer[hotspot_tooltip].alpha, 0, 0.12, easeOutQuad,
        set(layer[hotspot_tooltip].visible, false);
    );
</action>

<!-- =========================================================
     BOUTON AMBIANCE SONORE
========================================================= -->

<layer name="sound_button"
       url="%SWFPATH%/plugins/textfield.swf"
       align="righttop"
       x="18"
       y="18"
       width="220"
       height="42"
       html="🔇 Activer l’ambiance"
       css="font-family:Arial; font-size:15px; color:#FFFFFF; font-weight:bold; text-align:center;"
       background="true"
       backgroundcolor="0x000000"
       backgroundalpha="0.70"
       border="false"
       padding="10"
       bgroundedge="10"
       handcursor="true"
       keep="true"
       zorder="99997"
       onclick="toggle_ambiance_sound();" />

<action name="toggle_ambiance_sound">

    if(sound_ambiance_on == true,

        stopsound(ambiance_chantier);
        set(sound_ambiance_on, false);
        set(layer[sound_button].html, '🔇 Activer l’ambiance');

      ,

        playsound(
            ambiance_chantier,
            'media/son.mp3',
            0
        );

        set(sound_ambiance_on, true);
        set(layer[sound_button].html, '🔊 Couper l’ambiance');
    );

</action>

<!-- =========================================================
     INTRO VISITE - CONTEXTE HISTORIQUE
========================================================= -->

<layer name="intro_overlay"
       type="container"
       align="center"
       width="100%"
       height="100%"
       bgcolor="0x000000"
       bgalpha="0.82"
       visible="true"
       keep="true"
       zorder="200000" />

<layer name="intro_card"
       type="container"
       align="center"
       width="720"
       height="620"
       bgcolor="0x1b1209"
       bgalpha="0.96"
       bgborder="1 0xffd28a 0.45"
       bgroundedge="22"
       bgshadow="0 12 40 0x000000 0.70"
       visible="true"
       keep="true"
       zorder="200001" />

<layer name="intro_image"
       url="media/1277.png"
       align="center"
       x="0"
       y="-120"
       width="640"
       height="360"
       visible="true"
       keep="true"
       zorder="200002" />

<layer name="intro_title"
       url="%SWFPATH%/plugins/textfield.swf"
       align="center"
       x="0"
       y="105"
       width="640"
       height="48"
       html="Rodez, 1277"
       css="font-family:Arial; font-size:34px; color:#ffd28a; font-weight:bold; text-align:center;"
       background="false"
       border="false"
       selectable="false"
       visible="true"
       keep="true"
       zorder="200003" />

<layer name="intro_subtitle"
       url="%SWFPATH%/plugins/textfield.swf"
       align="center"
       x="0"
       y="155"
       width="640"
       height="36"
       html="La construction de la cathédrale Notre-Dame"
       css="font-family:Arial; font-size:22px; color:#ffffff; font-weight:bold; text-align:center;"
       background="false"
       border="false"
       selectable="false"
       visible="true"
       keep="true"
       zorder="200003" />

<layer name="intro_text"
       url="%SWFPATH%/plugins/textfield.swf"
       align="center"
       x="0"
       y="225"
       width="620"
       height="110"
       html="Entrez sur le chantier médiéval de la cathédrale de Rodez. Découvrez le chœur rayonnant, la nef en construction, les échafaudages en bois, les tailleurs de pierre, les engins de levage et le grès rose qui façonne l’édifice."
       css="font-family:Arial; font-size:16px; color:#ffffff; text-align:center;"
       background="false"
       border="false"
       selectable="false"
       visible="true"
       keep="true"
       zorder="200003" />

<layer name="intro_button"
       url="%SWFPATH%/plugins/textfield.swf"
       align="center"
       x="0"
       y="310"
       width="280"
       height="46"
       html="Entrer dans la visite 360°"
       css="font-family:Arial; font-size:17px; color:#1b1209; font-weight:bold; text-align:center;"
       background="true"
       backgroundcolor="0xffd28a"
       backgroundalpha="1"
       border="false"
       bgroundedge="12"
       padding="12"
       handcursor="true"
       visible="true"
       keep="true"
       zorder="200004"
       onclick="hide_intro();" />


<action name="hide_intro">
    tween(layer[intro_overlay].alpha, 0, 0.25);
    tween(layer[intro_card].alpha, 0, 0.25);
    tween(layer[intro_image].alpha, 0, 0.25);
    tween(layer[intro_title].alpha, 0, 0.25);
    tween(layer[intro_subtitle].alpha, 0, 0.25);
    tween(layer[intro_text].alpha, 0, 0.25);
    tween(layer[intro_button].alpha, 0, 0.25, easeOutQuad,
        set(layer[intro_overlay].visible, false);
        set(layer[intro_card].visible, false);
        set(layer[intro_image].visible, false);
        set(layer[intro_title].visible, false);
        set(layer[intro_subtitle].visible, false);
        set(layer[intro_text].visible, false);
        set(layer[intro_button].visible, false);
    );
</action>
	<scene name="scene_cathedrale_rodez" title="1277" onstart="" thumburl="panos/cathedrale_rodez.tiles/thumb.jpg" lat="" lng="" heading="">

		<view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

		<preview url="panos/cathedrale_rodez.tiles/preview.jpg" />

		<image type="CUBE" multires="true" tilesize="512">
			<level tiledimagewidth="2624" tiledimageheight="2624">
				<cube url="panos/cathedrale_rodez.tiles/%s/l3/%v/l3_%s_%v_%h.jpg" />
			</level>
			<level tiledimagewidth="1280" tiledimageheight="1280">
				<cube url="panos/cathedrale_rodez.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />
			</level>
			<level tiledimagewidth="640" tiledimageheight="640">
				<cube url="panos/cathedrale_rodez.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
			</level>
		</image>

	
<!-- =========================================================
     HOTSPOTS - CHANTIER DE LA CATHÉDRALE DE RODEZ
========================================================= -->

<hotspot name="hs_1277"
         style="hotspot_info"
          title="1277 — Première pierre"
         ath="7"
         atv="0"
         onclick="show_info(
            '1277 — Première pierre',
            'La première pierre de la cathédrale gothique de Rodez est traditionnellement placée le 25 mai 1277 sous l’épiscopat de Raymond de Calmont. Le chantier s’inscrit dans une ambitieuse reconstruction gothique de l’édifice.',
        	'media/1277.png'
         );" 
         />

<hotspot name="hs_choeur"
         style="hotspot_info"
          title="Le chœur rayonnant"
         ath="7"
         atv="-40"
         onclick="show_info(
            'Le chœur rayonnant',
            'Le chantier commence par l’est : le chœur et les chapelles rayonnantes sont les premières parties élevées. Cette méthode permet de maintenir une partie de l’ancien édifice pendant que la nouvelle cathédrale progresse vers l’ouest.',
         	 'media/coeur-rayonnant.png'
         );" />


<hotspot name="hs_nef"
         style="hotspot_info"
          title="La nef en construction"
         ath="7"
         atv="-20"
         onclick="show_info(
            'La nef en construction',
            'La nef est encore en cours d’élévation. Les murs montent progressivement les supports sont mis en place et les zones hautes attendent encore leurs voûtes définitives.',
         	'media/nef.png'
         );" />


<hotspot name="hs_grue_roue"
         style="hotspot_info"
         title="Grue à roue médiévale"
         ath="-120"
         atv="25"
         onclick="show_info(
            'Grue à roue médiévale',
            'La roue d’écureuil fonctionne comme un grand treuil humain. Les ouvriers marchent dans la roue pour enrouler les cordes et hisser les lourds blocs de grès nécessaires à la construction.',
            'media/grue_a_roue.png'
         );" />

<hotspot name="hs_echafaudages"
         style="hotspot_info"
          title="Échafaudages en bois"
         ath="-45"
         atv="-20"
         onclick="show_info(
            'Échafaudages en bois',
            'Les échafaudages permettent aux maçons charpentiers et manœuvres d’accéder aux parties hautes du chantier. Ils supportent les plateformes de travail les passerelles et parfois les cintres temporaires.',
         	'media/echaffaudages.png'
         );" />

<hotspot name="hs_tailleurs"
         style="hotspot_info"
         title="Tailleurs de pierre"
         ath="45"
         atv="45"
         onclick="show_info(
            'Tailleurs de pierre',
            'Les blocs sont préparés au sol avant leur pose. Les tailleurs réalisent l’équarrissage puis la taille et l’ajustement des pierres. Ils utilisent des règles des fils à plomb des gabarits des maillets et des ciseaux.',
            'media/tailleur_de_pierre.png'
         );" />


<hotspot name="hs_gres_rose"
         style="hotspot_info"
          title="Le grès rose de Rodez"
         ath="-6"
         atv="35"
         onclick="show_info(
            'Le grès rose de Rodez',
            'Le chantier utilise une pierre locale aux teintes chaudes caractéristique de Rodez. Ce grès rose donne à la cathédrale son aspect puissant et lumineux.',
        	'media/gres_rose.png'
         );" />

<hotspot name="hs_levage"
         style="hotspot_info"
          title="Levage des pierres"
         ath="80"
         atv="28"
         onclick="show_info(
            'Levage des pierres',
            'Les charges sont déplacées au moyen de cordes palans treuils et structures de bois. Ces dispositifs permettent de hisser les blocs jusqu’aux plateformes supérieures.',
        	'media/levage_pierre.png'
         );" />

<hotspot name="hs_rodez"
         style="hotspot_info"
          title="Rodez médiévale"
         ath="180"
         atv="-15"
         onclick="show_info(
            'Rodez médiévale',
            'Autour du chantier la ville médiévale se développe avec ses rues resserrées ses remparts ses toitures et son paysage aveyronnais. La cathédrale domine progressivement l’espace urbain.',
        	'media/rodez_medievale.png'
         );" />

<hotspot name="hs_roman"
         style="hotspot_info"
          title="Ancienne cathédrale romane"
         ath="7"
         atv="20"
         onclick="show_info(
            'Ancienne cathédrale romane',
            'La reconstruction gothique ne fait pas disparaître l’ancien édifice d’un seul coup. La cathédrale romane est progressivement remplacée à mesure que le nouveau chantier avance vers l’ouest.',
        	'media/cathedrale_romane.png'
         );" />

	</scene>


</krpano>
