{% extends 'templates/main-layout.twig' %}

{% set bodyClasses = 'pano detail single-scene view-control-buttons' %}
{% set page_title = sceneName ~ ' | Panoramen' %}


{% block stylesheets %}
	{{ parent() }}
	<link rel="stylesheet" media="all" href="{{ base_url() }}/assets/css/showPano.css" type="text/css">
	<link rel="stylesheet" media="all" href="{{ base_url() }}/assets/css/marzipano.css" type="text/css">

  <meta property="og:title" content="{{ page_title }} | DeeFuse.de" />
  <meta property="og:description" content="{{ sceneName }}" />
  <meta property="og:url" content="{{ base_url() }}/pano/{{ pageId }}" />
  <meta property="og:type" content="website" />
  <meta property="og:image:url" content="{{ base_url() }}/assets/img/pano/pano{{ pageId }}.png" />
  <meta property="og:image:secure_url" content="{{ base_url() }}/assets/img/pano/pano{{ pageId }}.png" />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1024" />
  <meta property="og:image:height" content="512" />
  <meta property="og:image:alt" content="{{ sceneName }}" />
  <meta property="fb:app_id" content="134048516758146" />

{% endblock %}

{% block content %}


	<div id="contentsInner">
		<header class="contentsTtl">

		</header>
		<div class="inner">

      <div id="pano"></div>

      <div id="sceneList">
        <ul class="scenes">
          
            <a href="javascript:void(0)" class="scene" data-id="{{ panoId }}">
              <li class="text">{{ sceneName }}</li>
            </a>
          
        </ul>
      </div>

      <div id="titleBar">
        <h1 class="sceneName"></h1>
      </div>

      <a href="javascript:void(0)" id="sceneListToggle">
        <img class="icon off" src="{{ base_url() }}/assets/img/marzipano/expand.png">
        <img class="icon on" src="{{ base_url() }}/assets/img/marzipano/collapse.png">
      </a>

      <a href="javascript:void(0)" id="viewUp" class="viewControlButton viewControlButton-1">
        <img class="icon" src="{{ base_url() }}/assets/img/marzipano/up.png">
      </a>
      <a href="javascript:void(0)" id="viewDown" class="viewControlButton viewControlButton-2">
        <img class="icon" src="{{ base_url() }}/assets/img/marzipano/down.png">
      </a>
      <a href="javascript:void(0)" id="viewLeft" class="viewControlButton viewControlButton-3">
        <img class="icon" src="{{ base_url() }}/assets/img/marzipano/left.png">
      </a>
      <a href="javascript:void(0)" id="viewRight" class="viewControlButton viewControlButton-4">
        <img class="icon" src="{{ base_url() }}/assets/img/marzipano/right.png">
      </a>
      <a href="javascript:void(0)" id="viewIn" class="viewControlButton viewControlButton-5">
        <img class="icon" src="{{ base_url() }}/assets/img/marzipano/plus.png">
      </a>
      <a href="javascript:void(0)" id="viewOut" class="viewControlButton viewControlButton-6">
        <img class="icon" src="{{ base_url() }}/assets/img/marzipano/minus.png">
      </a>

      <a href="javascript:void(0)" id="autorotateToggle" class="viewControlButton viewControlButton-7">
        <img class="icon off" src="{{ base_url() }}/assets/img/marzipano/play.png">
        <img class="icon on" src="{{ base_url() }}/assets/img/marzipano/pause.png">
      </a>
      <a href="javascript:void(0)" id="fullscreenToggle" class="viewControlButton viewControlButton-8">
        <img class="icon off" src="{{ base_url() }}/assets/img/marzipano/fullscreen.png">
        <img class="icon on" src="{{ base_url() }}/assets/img/marzipano/windowed.png">
      </a>
		</div>

	</div>

{% endblock %}

{% block scripts %}
	{{ parent() }}

  <script type="text/javascript">
  {{ panoData|raw }}  
  </script>
	<script src="{{ base_url() }}/assets/js/lib_marzipano.js"></script>
	<script src="{{ base_url() }}/assets/js/panoViewer.js"></script>
{% endblock %}