<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="description" content="{{DESCRIPTION}}" />
    <meta name="author" content="{{AUTHOR}}" />
    <meta name="keywords" content="{{KEYWORDS}}" />
    <meta charset="utf-8" />
    <meta property="og:title" content="{{TITLE}}"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content=""/>
    <meta property="og:description" content="{{DESCRIPTION}}"/>
    <meta property="og:image" content="http://xia.dane.ac-versailles.fr/img/logo.jpg"/>
    <title>{{TITLE}}</title>
    <link rel="stylesheet" type="text/css" href="{{MainCSS}}"/>
    <script src="{{labJS}}"></script>
</head>
<body id="image-active">
    <div id="loader">
        <div id="splash">
            <p><img src="{{LogoLoading}}" alt="xia"/></p>
            <div id="progressbar-wrap">
                <div class="meter">
                    <span id="progressbar"></span>
                </div>
            </div>

        </div>
    </div>
    <div id='invisible' style='display:none;'></div>
    <div id="container">
        <header>
            <h1 id="title">{{TITLE}}</h1>
        </header>
        <section style="position:relative;overflow: hidden;">
          <div id="canvas"></div>
          <div id="ripple_background"></div>
          <div id="popup_material_background" >
            <div id="popup_material">
              <div id="popup_material_title" class="title_material">
                <div  id="popup_material_title_text">
                  <div style="padding:10px;position: absolute;bottom:10%;"><h1>TITLE</h1></div>
                  <img id="popup_material_delete" src='{{LogoDelete}}' alt='fermer' />
                  <div style="position:absolute;bottom:0;background : #0077AA;height:10%;width:100%;"></div>
                </div>
              </div>
              <div style='height:70%;overflow-x: none;overflow-y: auto;'>
                <div id="popup_material_content" style="padding:15px;">
                <section id="content">{{CONTENT}}</section>
                </div>
              </div>
            </div>
          </div>
          <div style="position:absolute;bottom:0px;left:0px;width:50px;height:50px;background:#0099CC;border-top-right-radius:100%;">
            <a class="meta-doc" href="#" title="information générale"></a>
          </div>
          <div style="position:absolute;bottom:0px;right:0px;width:50px;height:50px;background:#0099CC;border-top-left-radius:100%;">
            <a class="infos" href="#" title="à propos"></a>
          </div>
          <div id="popup_material_image_background" style="display:none;background: black; position: absolute; top:0;left:0;width:100%;height:100%;"></div>


        </section>
    </div>
    <footer class="overlay" id="rights">
        <section id="popup" style='display:flex;flex-direction:column;'>
            <div id="popup_meta_title" class="title_material" style='flex-basis:auto;'>
              <div  id="popup_meta_title_text">
                <div style="padding:10px;">
                  <h1>{{TITLE}}</h1>
                  <h3>{{CREATOR}}</h3>
                </div>
                <img id="popup_close" src="{{LogoDelete}}" alt="close"/>
                <!-- <div style="position:absolute;bottom:0;background : #0077AA;height:10%;width:100%;"></div> -->
              </div>
            </div>
            <div id="popup_text" style="display: flex;flex-direction:column;height:100%;flex-basis:auto;">
                <!-- <p>{{METADATAS}}</p> -->
                <div style="flex-basis:80%;overflow:auto;text-align:left;font-family: yanone_thin;font-size:1.2em;">
                  <div style='padding:10px;'>
                    {{DESCRIPTION}}
                  </div>
                </div>
                <div style="flex-basis:20%;text-align:left;font-family: yanone_thin;font-size:1.2em;">
                    <p id='license' style="background-color:#0099CC;color:white;padding:7px;">Licence : {{LICENSE}}</p>
                    <div style="display:flex;">
                    <ul style="flex-basis:50%;margin:0;padding:-left:10px;list-style:none;">
                      <li>Date : {{DATE}}</li>
                      <li>Droit : {{RIGHTS}}</li>
                      <li>Éditeur : {{PUBLISHER}}</li>
                      <li>Source : {{SOURCE}}</li>
                      <li>Identifiant : {{IDENTIFIER}}</li>
                    </ul>
                    <ul style="flex-basis:auto;margin:0;padding:-left:10px;list-style:none;">
                      <li>Langues : {{LANGUAGES}}</li>
                      <li>Mots clés : {{KEYWORDS}}</li>
                      <li>Contributeurs : {{CONTRIBUTOR}}</li>
                      <li>Relation : {{RELATION}}</li>
                      <li>Portée : {{COVERAGE}}</li>
                    </ul>
                  </div>
                </div>
            </div>
        </section>
    </footer>
    {{datasJS}}
    <script>
        var loadLibs = function() {
            var lazyDatas = "{{lazyDatasJS}}";
            var embedded_scripts = [];
            var progressbar = document.getElementById("progressbar");
            var updateProgressbar = function(i) {
                var percentage = Math.floor((100 / embedded_scripts.length) * i);
                progressbar.style.width = percentage + "%";
                if (i + 1 < embedded_scripts.length) {
                    $LAB.script(embedded_scripts[i+1]).wait(function(){
                       updateProgressbar(i+1);
                    });
                }
                else {
                    $LAB.script(embedded_scripts[i+1]);
                }
            };

            embedded_scripts.push("{{kineticJS}}");
            if (lazyDatas !== "") embedded_scripts.push(lazyDatas);
            embedded_scripts.push("{{JqueryJS}}");
            embedded_scripts.push("{{sha1JS}}");
            embedded_scripts.push("{{hooksJS}}");
            embedded_scripts.push("{{xiaJS}}");

            $LAB.setGlobalDefaults({CacheBust:true});
            $LAB.script(embedded_scripts[0]).wait(function(){
                updateProgressbar(0);
            });
        }

        document.body.onload = loadLibs;
    </script>

</body>
</html>
