<!DOCTYPE html>
<html lang="pt-br">
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="/{{site.github.project_title}}/assets/css/styles.css">
  <link rel="stylesheet" href="/{{site.github.project_title}}/assets/css/materialize.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="Content-Language" content="pt-br">
</head>
<body>
  <div class="navbar-fixed hide-on-print">
    <nav>
      <div class="nav-wrapper container">
        <a id="logo-container" href="https://www.jeedom.com/doc" class="brand-logo center"><img src="/{{site.github.project_title}}/assets/images/logo.png" style="height:50px;margin-top:5px"></a>
        <ul class="left hide-on-med-and-down">
          <li><a href="https://www.jeedom.com/doc">Jeedom Documentation</a></li>
        </ul>
        <a href="https://www.jeedom.com/doc" data-activates="nav-mobile" class="button-collapse btn-floating btn-large waves-effect waves-light jeedomcolorbg"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li><a href="https://www.jeedom.com/site">Site</a></li>
          <li><a href="https://www.jeedom.com/blog">Blog</a></li>
          <li><a href="https://www.jeedom.com/forum">Forum</a></li>
          <li><a href="https://www.jeedom.com/market">Market</a></li>
          <li class="active"><a href="https://www.jeedom.com/doc">Doc</a></li>
        </ul>
        <ul class="side-nav" id="nav-mobile">
          <li><a href="https://www.jeedom.com/blog">Blog</a></li>
          <li><a href="https://www.jeedom.com/forum">Forum</a></li>
          <li><a href="https://www.jeedom.com/market">Market</a></li>
          <li class="active"><a href="https://www.jeedom.com/doc">Doc</a></li>
        </ul>
      </div>
    </nav>
  </div>
  <div class="row" id="div_main">
    <div id="side-nav" class="side-nav fixed hide-on-print">
      <div class="container">
       <div class="row">
        <div class="col s2">
          <i class="material-icons" style="position: relative;top:15px;">language</i>
        </div>
        <div class="col s10">
          <select class="sel_lang">
            {% if site.langs.size >= 2 %}
            {% for lang in site.langs %}
            <option data-href="index{% if lang != "fr_FR" %}-{{ lang }}{% endif %}.html" value="{{ lang }}">{% if lang == "fr_FR" %}Français{% endif %}{% if lang == "en_US" %}English{% endif %}{% if lang == "ru_RU" %}Russe{% endif %}{% if lang == "de_DE" %}Deutsch{% endif %}{% if lang == "es_ES" %}Spanish{% endif %}{% if lang == "it_IT" %}Italien{% endif %}{% if lang == "id_ID" %}Indien{% endif %}</option>
            {% endfor %}
            {% endif %}
          </select>
        </div>
      </div>
    </div>
    <div id="div_summary" style="margin-top:-45px;padding-bottom: 45px;"></div>
  </div>
  <div>
    <i class="material-icons hide-on-print" id="bt_up" style="position:fixed;bottom:10px;right:10px;cursor: pointer;font-size:3em;">keyboard_arrow_up</i>
    <div class="hide-on-large-only hide-on-print" id='div_menuMobile'>
     <div class="row">
      <div class="col s2">
        <i class="material-icons" style="position: relative;top:15px;left:20px;">language</i>
      </div>
      <div class="col s10">
       <select class="sel_lang">
        {% if site.langs.size >= 2 %}
        {% for lang in site.langs %}
        <option value="{{ lang }}">{% if lang == "fr_FR" %}Français{% endif %}{% if lang == "en_US" %}English{% endif %}{% if lang == "ru_RU" %}Russe{% endif %}{% if lang == "de_DE" %}Deutsch{% endif %}{% if lang == "es_ES" %}Spanish{% endif %}{% if lang == "it_IT" %}Italien{% endif %}{% if lang == "id_ID" %}Indien{% endif %}</option>
        {% endfor %}
        {% endif %}
      </select>
    </div>
  </div>
  <div id="div_summary2"></div>
</div>
<div id="div_summary3" style="display: none;" class="show-on-print"></div>
<div id="div_content">
  {{content}}
</div>
</div>
</div>
<script type="text/javascript" src="/{{site.github.project_title}}/assets/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/{{site.github.project_title}}/assets/js/materialize.min.js"></script>
<script type="text/javascript" src="/{{site.github.project_title}}/assets/js/jquery.inview.min.js"></script>
<script type="text/javascript" src="/{{site.github.project_title}}/assets/js/jquery.toc.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
   var title = '{{site.github.project_title}}';
   title = title.replace('plugin-','');
   $('#doc_title').append(title[0].toUpperCase() + title.substring(1))
   document.title = 'Documentation Jeedom | '+ title[0].toUpperCase() + title.substring(1)
   $(".button-collapse").sideNav();
   $('meta[name=description]').remove();
   $('head').append( '<meta name="description" content="Ceci est la documentation du plugin "'+ title[0].toUpperCase() + title.substring(1)+'", lier à la solution domotique Jeedom.">' ); 
   $('img').addClass('responsive-img');
   $('#div_content table').addClass('striped');
   init();
   var regex = /\/([a-z]{2}_[A-Z]{2})\//g;
   var corresp  = regex.exec(window.location.href)
   if(corresp !== null && corresp[1]){
    $('.sel_lang').val(corresp[1])
  }
  $('select').material_select();
  $('.sel_lang').on('change',function(){
    var regex = /\/([a-z]{2}_[A-Z]{2})\//g;
    var corresp  = regex.exec(window.location.href);
    var url = window.location.href.replace(corresp[1], $(this).find('option:selected').attr('value'));
    if(url.endsWith('/')){
      url += 'index';
    }
    window.location.href = url;
  })
  $('#bt_up').on('click',function(){
    window.scrollTo(0, 0);
  })
  $(window).on("orientationchange", function (event) {
    init();
  });
  $(window).on("resize", function (event) {
    init();
  });
  function init(){
    $('#div_summary2,#div_summary,#div_summary3').empty();
    var titlePlugin = title.charAt(0).toUpperCase() + title.substring(1).toLowerCase()
    if(window.innerWidth < 992){
      $('#div_main').addClass('container');
      $('#div_content').toc({
        renderIn : "#div_summary2",
        selectors : 'h1,h2'
      });
    }else{
     $('#div_main').removeClass('container');
     $('#div_content').toc({
      renderIn : "#div_summary",
      selectors : 'h1,h2'
    });
   }
    $('#div_content').toc({
      renderIn : "#div_summary3",
      selectors : 'h1,h2'
    });
   $('#div_summary #toctitle').html('<h2 style="padding-left:5px !important;">'+titlePlugin+'</h2>');
   $('#div_summary2 #toctitle').html('<h2 style="padding-left:5px !important;">'+titlePlugin+'</h2>');
   $('#div_summary3 #toctitle').html('<h2 style="padding-left:5px !important;">'+titlePlugin+'</h2>');
   $('.toclevel-2').parent().css('color', 'blue');
 }
 var i = 1, j = 1;
 $('h1, h2', $('#div_content')).each(function(){
  if($(this)[0].tagName.toLowerCase() == 'h1'){
    $('#'+$(this).attr('id')).text(i + ') ' + $(this).text());
    i++;
  } 
  if($(this)[0].tagName.toLowerCase() == 'h2'){
    $('#'+$(this).attr('id')).text( (i-1) + '.' + j + ') ' + $(this).text()); 
    j++;
  }else{
    j = 1;
  }
});  
});

  var idChapitre = null, nbrChapitre = 0, idAncre = null;
  $('#div_content h1, #div_content h2').on('inview',function(event, isInView){
    nbrChapitre = $('a.active').length;
    idAncre = $(this).attr('id');
    if(isInView){
      $('a[href="#'+ idAncre +'"]').addClass('active');
      if(idChapitre != null){
        $('a[href="#'+ idChapitre +'"]').removeClass('active');
        idChapitre = null;
      }
    }else if (nbrChapitre > 1){
      $('a[href="#'+ idAncre +'"]').removeClass('active');
    }else{
      idChapitre = idAncre;
    }
    $('#div_summary3 a').removeClass('active');
  });
</script>
</body>
</html>
