<script type="text/javascript">
 $(document).ready(function() {
      // Get the HTML element where the id of the current variation displayed is stored.
      // each theme could have a different element with this information stored so this selector could change.
      // this is the selector of the default template: ProductSelect-product-template
      var $productSelectEl = $('#ProductSelect-product-template');
      // cylindo viewer el and not cylindo viewer el
      var $cylindoViewerEl = $('#cylindo-viewer');
      var $defaultViewerEl = $('#default-viewer');
      // get the product metafileds
      var productData = {{ product.metafields.cylindo | json}};
      // get the features from the metafieds for each variation available on this product.
      var productVariants = [
        {% for variant in product.variants %}
        {
          id: {{ variant.id }},
          features: {{ variant.metafields.cylindo.features }},
        },
        {% endfor %}
      ];
      // get the account id / it could be a static value.
      var accountID = productData.accountID;
      // get the product code.
      var productCode = productData.productCode;
      // prepare the viewer instance variable
      var viewerInstance = null;
      // this method gets the new features according to the new variant selected
      var getFeatures = function() {
        var variant = productVariants.find(function(el) {
          return el.id == $productSelectEl.val();
        });
        return variant.features || [];
      }
      // prepare the first set of features.
      var features = getFeatures();
      // declare options variable.
      var options;
	  // if we've all the information needed to create the viewer instance proceed
      if (accountID && productCode && features && features.length) {
        // define the options.
        options = {
          'SKU': productCode,
          'accountID': accountID,
          'features': features,
          'country': 'us',
          'containerID': 'cylindo-viewer',
          'thumbs': true,
          'zoom': true,
          'progressBar': false,
          'styleshots': false,
        }
		// if cylindo is loaded create the viewer instance using the options object.
        if (cylindo) {
          cylindo.on('ready', function () {
            viewerInstance = cylindo.viewer.create(options);
           	// Subscribe to the onchange event of the default comboboxes 
            // when the user interacts with the configuration panel and their value is changed,
            // the value of the current variant element is also modified 
            // and we need to grab that new variant value to get the new features from the metafields.
            $('body').on('change', '.single-option-selector', function() {
              features = getFeatures();
              // update the viewer
              viewerInstance.setFeatures(features);
            });
          });
          $cylindoViewerEl.show();
        }
        else {
          // if cylindo is not found, show the error and display the default viewer
          console.log('Cylindo viewer scripts not loaded!');
          $defaultViewerEl.show();
        }
       } else {
         // if the information required to build the new instance is not present, then show the error and display the default viewer
         console.log('Missing information to create 360 viewer');
       	 $defaultViewerEl.show();
      }
  });
</script>