{{#Config settings that will change for different views, e.g. for AT, trail2016, etc. These are stored in the setup_params dictionary
#UI_layer->page        The name of the UI layer view file
#UI_layer->tabs        A name or array of names of tabs to use (names are in OZglobals:tab_definitions and the linkouts() 
#                       function in tree.py as key names in the url dict) or 'default' for the default set or 'all' for all. 
#                       Tabs (if they exist) will be shown in this order when popping up linkouts to other pages.
#UI_layer->custom_tabs A dict of tab definitions, like OZglobals.py. UI_callbacks.populateLinkouts will have to provide the
#                       data to make it work
#UI_layer->vars->links Can be 'none' for no links, 'newtab' for all links (except the OZ logo) in new tab, or 'default' (or unset) to leave.
#UI_layer->vars->no_external_links
#                      If true, hide any links to external pages (e.g. opening wikipedia pages in a new tab)
#popups->vars          Passed to pic_info.load, about.load, how.load, data_sources.load, and the 
#                       internal linkouts urls. You will usually want to define 'popup':1 or 'popup':3 (see popup.html). 
#                       It's also sensible to set 'form_reservation_code' to a UID so that re-opening sponsor tabs remembers who you are
#partner               (Optional): if it matches a partner_identifier in the partners table, we will automatically fill out 
#                       the popups and UI_layer params to make am automatically created sponsorship site
#locations_json        Partners can provide their own json string of locations to use, but if not is provided
#                       or there is no partner, the json here is used. This is an array whose items are strings (headers) or 
#                       dicts (each turned into a clickable items) with at least one key labelled 'OTT', and then any other optional 
#                       names keyed by language, e.g. {"OTT":1012685, "en":"Mushrooms", "":"Always use this instead of default VN"}.
#pre_ui_setup          An array of javascript calls to make before Setup_UI, mostly to override global config, for example:
#                       "onezoom.config.projection.draw_sponsors = false"
setup_params = {
  'UI_layer': {
    'page':'UI_layer.load', 
    'vars':{
      'no_oz_logo': True,
      'tabs':['otopchallenge', 'wiki', 'ozspons', 'ozlinks'],
      'custom_tabs': {
          'otopchallenge': {'id':'otopchallenge','name':T('Challenge'), 'icon':URL('static','otop/challenge.svg')},
      },
      'links':'newtab',
      'no_external_links': True,
    }
  },
  'popups': {
    'vars':{'popup':2, 'no_sponsoring':1} }, #don't need to keep track of reservation_code
  'partner':page_info.get('partner'),
  'locations_json':('[' 
      '"Challenge species",'
      '{"OTT":5557278},'  #Cichlid
      '{"OTT":913935},'  #Chimpanzees
      '{"OTT":965954},'  #Butterfly
      '{"OTT":207473},'  #Banana
      '{"OTT":753726},'  #Ants
      '{"OTT":225495},'  #Cyanobacteria
      '{"OTT":81461},'  #Birds
      '{"OTT":635958},'  #Archaea
      '{"OTT":35942},'  #Paris japonica
      '{"OTT":395048},'  #Caenorhabditis elegans
      '{"OTT":4133413},'  #Golden toad
      '{"OTT":195672},'  #Alligator
      '{"OTT":698424},'  #Whale
      '{"OTT":756460},'  #Escherichia coli
      '{"OTT":4790644},'  #Carsonella ruddii
      '"Popular places",'
      '{"OTT":770315},'  #Human - should get looked up automatically: this also allows the correct language to be used
      '{"OTT":991547},'  #Frogs and toads
      '{"OTT":801601},'  #Vertebrates
      '{"OTT":1062253},' #Insects
      '{"OTT":691846},'  #Animals
      '{"OTT":361838},'  #Green plants
      '{"OTT":10218},'   #Seed plants
      '{"OTT":1012685, "en":"Mushrooms"},' #the default OZ english name is bad for menus here, so we replace it
      '{"OTT":304358}'   #Complex life (eukaryotes)
      ']'
    ),
  'pre_ui_setup': [
    'onezoom.config.search_jump_mode = "flight"',
    'onezoom.config.generation_on_subbranch_during_fly = 9',
    'onezoom.config.generation_at_searched_node = 20',
    'onezoom.config.custom_querystring_params = ["ucaya_user", "otop_background", "otop_init_slideshow"]',
    'onezoom.config.projection.sign_thres = screen.width <= 640 ? 100 : 170'
    ]
  }
}}
{{extend ('treeviewer/layout_popuped_viewer.html' if request.vars.popup else 'treeviewer/layout.html')}}
<link rel="stylesheet" type="text/css" href="{{=URL('static', 'css/tree-dark.css')}}" />
<style>
.ui-controls #settingsButton { display: none; }

body {
  background: #120a15;
}
body > canvas {
  opacity: 1;
  transition: opacity 7s ease-in;
}
body.loading > canvas {
  opacity: 0;
}
.background-layer {
  perspective: 800px;
  pointer-events: none;
}
.background-layer > * {
  position: absolute;
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
.background-layer .particles {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transition: opacity 0.5s linear, transform 1s ease-in;
    -webkit-transition: opacity 0.5s linear, -webkit-transform 1s ease-in;
}
.background-layer .particles .particles-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vmax;
    height: 100vmax;
    transform: perspective(2000px) rotateX(10deg);
    -webkit-transform: perspective(2000px) rotateX(10deg);

    background: url({{=URL("static","otop/otop-bkgd-particles.png")}});
    background-size: cover;
}
.background-layer .particles .particles-inner {
    animation-name: spin;
    animation-duration: 480000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 480000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

/* Turn on single info button */
.ui-controls #singleInfoButton { display: list-item; }

#tutorial-slideshow h3,
#tutorial-slideshow {
    font-family: "Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    text-transform: uppercase;
    font-weight: bold;
    font-size: 22px;
}
#tutorial-slideshow p {
    line-height: 1.2;
}
#tutorial-slideshow .uk-modal-dialog .uk-close {
    right: auto;
    left: 10px;
}
#tutorial-slideshow .uk-modal-dialog h3,
#tutorial-slideshow .uk-modal-dialog {
    color: #FFF !important;
}
#tutorial-slideshow .uk-modal-dialog .big-text {
    text-align: center;
    padding: 0 9%;
    font-size: 24px;
}
#tutorial-slideshow .uk-modal-dialog a img {
    opacity: 0.8;
}
#tutorial-slideshow .uk-modal-dialog a:hover img,
#tutorial-slideshow .uk-modal-dialog a:active img {
    opacity: 1;
}
#tutorial-slideshow .slideshow-item {
  display: table;
  position: absolute;
  top: 40px;
  right: 10%;
  bottom: 40px;
  left: 10%;
  width: 80%;
  height: calc(100% - 80px);
}
#tutorial-slideshow .slideshow-item > * {
  display: table-row;
  height: 0;
}
#tutorial-slideshow .slideshow-item > *:first-child > * {
  padding: 0 10px;
}
#tutorial-slideshow .slideshow-item > .main-image {
  display: table-row;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
@media screen and (max-width: 490px) {
  #tutorial-slideshow,
  #tutorial-slideshow .big-text,
  #tutorial-slideshow h3 {
    font-size: 18px !important;
  }
}

</style>
<script src="{{=URL('static','otop/backgrounds.js')}}"></script>
<script type="text/javascript">
var tree_config= {
   cols: 'otop',
   vis: 'polytomy',
   'layout.branch': 'otop',
   'layout.node': 'otop',
   'layout.leaf': 'otop',
   'layout.sign': 'otop',
   midnode: 'polytomy',
};
var pagetitle_func=null;

// Wrap around data_path_pics, passing through URLs when we have direct URLs from UCAYA
server_urls._old_data_path_pics = server_urls.data_path_pics;
server_urls.data_path_pics = function(src, src_id) {
    if (src_id.indexOf('https://') === 0) {
        return src_id;
    }
    if (src_id.indexOf('http://') === 0) {
        return src_id;
    }
    if (src_id.indexOf('otop:') === 0) {
        return '{{=URL("static","otop")}}' + '/' + src_id.slice('otop:'.length);
    }
    return server_urls._old_data_path_pics.apply(server_urls, arguments);
}


// Listen for OTOP app sending the current user's photo (which may not match the API photo)
document.addEventListener('message', function (rawMessage) {
    var message = JSON.parse(rawMessage.data);

    // Stash the userPhoto ready for use in otop/leaf_layout.js
    if (message.type === "userPhoto") {
        window.otop_profile_image = new Image();
        window.otop_profile_image.src = 'data:image/png;base64,' + message.data;
    }
});

document.addEventListener('DOMContentLoaded', init_background.bind(null, {
    tree: [
        '{{=URL("static","otop/otop-bkgd-tree-1.png")}}',
        '{{=URL("static","otop/otop-bkgd-tree-2.png")}}',
        '{{=URL("static","otop/otop-bkgd-tree-3.png")}}',
        '{{=URL("static","otop/otop-bkgd-tree-4.png")}}',
        '{{=URL("static","otop/otop-bkgd-tree-5.png")}}',
    ],
}));

document.addEventListener('DOMContentLoaded', function () {
    var origPopulateLinkouts = window.UI_callbacks.populateLinkouts;

    // Wrap the main definition of populateLinkouts, insert our challenges tab
    window.UI_callbacks.populateLinkouts = function (responseJSON, initialSelected) {
        var selected_node = {}, region_challenge_map = {
            "default": 'takeaction',
            'water_1': 'nobottledwater',
            'food_2': 'reducemeat',
            'energy_3': 'avoidpalmoil',
            'nature_4': 'plantnative',
            'food_5': 'inseason',
            'waste_6': 'zerowaste',
            'energy_7': 'reduceenergy',
            'energy_8': 'transportation',
            'water_9': 'reducewater',
            'nature_10': 'nature',
            'waste_11': 'reducefoodwaste',
            'nature_12': 'takeaction',
            'waste_13': 'ethicalfashion',
            'food_14': 'sustainableseafood',
            'nature_15': 'ecofriendlyproducts',
        };

        if (responseJSON.id) {
            // TODO: The region is only available on a node once detail_fetched - this happens too early on page reload
            selected_node = onezoom.controller.develop_branch_to_and_target(-responseJSON.id);  // NB: Assume this is a leaf node
        }
        if (selected_node.region) {
            responseJSON.data.otopchallenge = ['/OZtree/static/otop/challenge.html?' + encodeURIComponent(region_challenge_map[selected_node.region] || region_challenge_map["default"])];
        }
        return origPopulateLinkouts(responseJSON, initialSelected);
    };
});
</script>

<script type="text/html" id="tutorial-slideshow-html">
  <div id="tutorial-slideshow" class="uk-flex-top" uk-modal>
    <div class="uk-modal-dialog uk-margin-auto-vertical">
      <button class="uk-modal-close-default" type="button" aria-label="{{=T('Close')}}" uk-close></button>
      <div uk-slideshow="autoplay: true; autoplay-interval: 5000; finite: true" class="uk-slidenav-position">
          <ul class="uk-slideshow-items" uk-height-viewport="offset-bottom: 10">
              <li>
                <div class="slideshow-item">
                  <div>
                    <p class="big-text">{{=T('This tree of life represents more than 2 million living species, you can freely explore it.')}}</p>
                  </div>
                  {{if str(T.accepted_language or '').lower().split('-')[0]=='zh':}}{{guide_example='Life_spiral_IUCN.jpg'}}{{include 'help/localized_illustration.load'}}{{else:}}<div class="main-image" style="background-image: url({{=URL('static','otop/otop-tutorial-0.jpg')}})">&nbsp;</div>{{pass}}
                  <div>
                    <p style="text-align: center; font-size: small">
                      {{=T('Tree of life explorer provided by')}}
                      <a href="http://www.onezoom.org/" target="_blank"><img src="{{=URL('static','images/OZ_logo5_grey3_small_inv.png')}}" title="OneZoom" style="height: 2em; width: 6.24em" /></a>
                    </p>
                  </div>
                </div>
              </li>
              <li>
                <div class="slideshow-item">
                  <div>
                  <h3>{{=T('Searching')}}</h3>
                  <p>{{=T('Type a species here to fly to it. Select one of the suggestions that appear.')}}</p>
                  </div>
                  {{if str(T.accepted_language or '').lower().split('-')[0]=='zh':}}{{guide_example='search.jpg'}}{{include 'help/localized_illustration.load'}}{{else:}}<div class="main-image" style="background-image: url({{=URL('static','otop/otop-tutorial-1.jpg')}})">&nbsp;</div>{{pass}}
                </div>
              </li>
              <li>
                <div class="slideshow-item">
                  <div>
                  <h3>{{=T('Navigating')}}</h3>
                  <p>{{=T('Pan and zoom to explore the tree of life')}}</p>
                  </div>
                  {{if str(T.accepted_language or '').lower().split('-')[0]=='zh':}}{{guide_example='location_buttons.jpg'}}{{include 'help/localized_illustration.load'}}{{else:}}<div class="main-image" style="background-image: url({{=URL('static','otop/otop-tutorial-2.jpg')}})">&nbsp;</div>{{pass}}
                </div>
              </li>
              <li>
                <div class="slideshow-item">
                  <div>
                  <h3>{{=T('Get more info')}}</h3>
                  <p>{{=T('Click on the name of an individual species to see more information like the corresponding challenge and the wikipedia page...')}}</p>
                  </div>
                  {{if str(T.accepted_language or '').lower().split('-')[0]=='zh':}}{{guide_example='Wiki_example.png'}}{{include 'help/localized_illustration.load'}}{{else:}}<div class="main-image" style="background-image: url({{=URL('static','otop/otop-tutorial-3.jpg')}})">&nbsp;</div>{{pass}}
                </div>
              </li>
              <li class="close-on-display">
                <div class="slideshow-item">
                </div>
              </li>
          </ul>
          <a class="uk-slidenav-large uk-position-center-left uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
          <a class="uk-slidenav-large uk-position-center-right uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
          <div class="uk-position-bottom-center uk-position-small">
              <ul class="uk-dotnav">
                  <li uk-slideshow-item="0">{{=XML(T('<a href="#">Item 1</a>'))}}</li>
                  <li uk-slideshow-item="1">{{=XML(T('<a href="#">Item 2</a>'))}}</li>
                  <li uk-slideshow-item="2">{{=XML(T('<a href="#">Item 3</a>'))}}</li>
                  <li uk-slideshow-item="3">{{=XML(T('<a href="#">Item 4</a>'))}}</li>
              </ul>
          </div>
      </div>
    </div>
  </div>
</script>
<script>
      $(document).ready(function() {
          var m, tutorial_slideshow;

          // Copy HTML to page body (we don't have a template slot to add it server-side)
          tutorial_slideshow = document.createElement('DIV');
          tutorial_slideshow.innerHTML = document.getElementById('tutorial-slideshow-html').innerText;
          tutorial_slideshow = tutorial_slideshow.firstElementChild;
          tutorial_slideshow.addEventListener('itemshown', function (e) {
              if (e.target.classList.contains('close-on-display')) {
                  UIkit.modal(tutorial_slideshow).hide();
              }
          });
          tutorial_slideshow.addEventListener('hidden', function (e) {
              var slideshow = UIkit.slideshow(tutorial_slideshow.querySelector('.uk-slideshow'));

              onezoom.controller.set_treestate('@Homo_Sapiens');
              slideshow.stopAutoplay();
              slideshow.show(0);
          });
          document.body.appendChild(tutorial_slideshow);

          // singleInfoButton should show our slideshow, not the default
          document.getElementById('singleInfoButton').querySelector('a').href = "#tutorial-slideshow";

          m = window.location.search.match(new RegExp(/(?:^|&|\?)otop_init_slideshow=off(?:&|$)/));
          if (m) {
              return;
          }

          // Show on startup
          UIkit.modal(tutorial_slideshow).show();
      });
</script>