<div class="container">
  <div class="iframe-container">
    <iframe id="api-frame"></iframe>
  </div>
  <div class="explainer" id="explainer">
    It's possible to use annotations to trigger other actions. Click annotation 1 to hide or show the teapot. Click annotation 2 to change the opacity of the material of the disc.
    In this example the annotation tooltips and automatic camera movement has been disabled.
  </div>  
  <div class="controls" id="controls">
    <button id="teapotVisibility">Toggle teapot visibility</button>
    <button id="discOpacity">Toggle disc opacity</button>
  </div>
</div>

html, body {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;

    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: grayscale;
    font-family: Open Sans, sans-serif;
}

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.iframe-container {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
}

.iframe-container > iframe {
    border: 0;
    width: 100%;
    flex: 1;
}

.explainer {
    height: 120px;
    padding: 15px 15px 0 15px;
    background-color: #E2E2E2;
    overflow: auto;
}

.controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
    height: 80px;
    padding: 15px 0 0 15px;
    background-color: #F2F2F2;
    
    overflow: auto;
}

.controls > * {
    margin-right: 15px;
    margin-bottom: 15px;
}

let version = '1.11.0';
let urlid = '0767c47d62db4018a3db02cde21a5ebb'
let iframeID = 'api-frame'
let api = null
let materialListByName = {}
let teapotVisible = true
let discOpacity = 1

/* ATTENTION
Several methods here come from different codepens. You can find them in 
this collection: https://codepen.io/collection/eJggqa
*/

// get the list of materials in the Sketchfab scene. Store this list in an object for easy access
function setMaterialListByName() {
  api.getMaterialList(function (err, sceneMaterials) {
    sceneMaterials.forEach(material => {
      materialListByName[material.name] = material
    })
    console.log(materialListByName)
  })      
}

// change a material property of the locally stored material
// and send the changed material to the Sketchfab scene
function setMaterialProperty(materialName, materialChannel, channelProperty, channelValue) {
  /*
    A material has a fixed structure
    Material object
    > name
    > channels
    > > channel (e.g. Opacity)
    > > > channelproperties
  */
  materialListByName[materialName].channels[materialChannel][channelProperty] = channelValue
  api.setMaterial(materialListByName[materialName], function () {})    
}

function toggleTeapot() {
  teapotVisible = !teapotVisible
  setVisibilityByNodename(api, ['Teapot001'], teapotVisible)
}

function toggleDisc() {
  if (discOpacity === 1) {
    discOpacity = 0.25
  } else {
    discOpacity = 1
  }
  setMaterialProperty("Disk", "Opacity", "enable", true) // make sure the opacity channel is enabled
  setMaterialProperty("Disk", "Opacity", "factor", discOpacity)
}

function actionSkfb() {
  var iframe = document.getElementById(iframeID);
  var client = new window.Sketchfab(version, iframe);

  var success = function(sketchfabApi) {
    api = sketchfabApi
    api.start(() => {
      api.addEventListener('viewerready', function() {
        setNodeMapByName(api)
        setMaterialListByName()
        
        // Avoid the camera movement when clicking an annotation
        api.setAnnotationCameraTransition(false, true)

        document.getElementById('teapotVisibility').addEventListener('click', function() {toggleTeapot()});
        document.getElementById('discOpacity').addEventListener('click', function() {toggleDisc()});
      });
      
      // ATTENTION: annotation 1 has the index 0. This is a bit confusing.      
      api.addEventListener('annotationSelect', function(index) {
        console.log('Selected annotation', index)
        if (index === 0) toggleTeapot()
        if (index === 1) toggleDisc()
      });
    
    });
  };

  client.init(urlid, {
    success: success,
    ui_stop: 0,
    ui_inspector: 0,
    ui_infos: 0,
    ui_controls: 0,
    ui_watermark: 0,
    annotation_tooltip_visible: 0 // don't show the annotation tooltip
  });
}

actionSkfb();