<!doctype html>
<html ng-controller="AppCtrl as app">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta name = "format-detection" content = "telephone=no">
  {% if designedForOffline %}
  <meta name="ptc-thingx-designed-for-offline" content="true">
  <link rel="ptc-thingx-experience-zip" href=".">
  {% endif %}
  {% if thumbnail %}
  <link rel="ptc-thingx-thumbnail" type="<%= thumbnail.type =%>" href="<%= thumbnail.href =%>">
  {% endif %}
  <link rel="stylesheet" href="css/system-widget-extensions.css?v<%= uuid =%>">
  <link rel="stylesheet" href="css/app-theme.css?v<%= uuid =%>">

  <!-- Extension Stylesheets -->
  {% for file in extensionInfo.runtimeFiles %}{% if file.endsWith('.css') %}
    <link rel="stylesheet" href="<%= file =%>">
  {% endif  %}{% endfor %}

  <link rel="stylesheet" href="css/app-runtime-base.css?v<%= uuid =%>">
  <link rel="stylesheet" href="css/app.css?v<%= uuid =%>">
  <script src="lib/cdn/ionic.bundle.min.js" type="text/javascript"></script>
  <script src="extensions/js/vuforia-angular.js" type="text/javascript"></script>
  <script src="extensions/js/url-search-params.js" type="text/javascript"></script>
  <!-- VuforiaImpl -->

  <script src="app-runtime.js" type="text/javascript"></script>
</head>
<body ng-cloak {% if menu %} class="leftmenu" {% endif %} onload="loadSetup()" {% if projectType === 'HMT' %} data-tap-disabled="true" {% endif %}>
  <%= dataHTMLContents =%>
  <ion-side-menus ng-controller="AppsMenuCtrl" class="seethrough">
    <!-- Center content -->
    <ion-side-menu-content class="seethrough {% if menu %} hasHeaderShowing {% endif %}" drag-content="isCordovaApp">
    {% if menu %}
      <ion-nav-bar align-title="center" class="bar-light">
        <ion-nav-back-button>
          Back
        </ion-nav-back-button>
        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeftMenu()" menu-toggle="left" data-wml-speech-command="navigation menu">
          </button>
        </ion-nav-buttons>
      </ion-nav-bar>
      {% endif %}
      <ion-nav-view {% if projectType === 'HMT' %} data-tap-disabled="true" {% endif %}></ion-nav-view>
    </ion-side-menu-content>
    {% if menu %}
    <ion-side-menu enable-menu-with-back-views="false" delegate-handle="left" side="left" ng-cloak ng-hide="hideLeftMenu">
       <ion-header-bar class="bar-stable">
        <h1 class="title">Menu</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>
        {% for v in views %}
          {% if v.showInMainMenu %}
            <ion-item ng-click="navigateFromLeftMenu('/<%= v.fileName =%>')" data-wml-speech-command="<%= v.escapedTitle =%>"><%= v.escapedTitle =%></ion-item>
          {% endif %}
        {% endfor %}
        </ion-list>
      </ion-content>
    </ion-side-menu>
    {% endif %}
  </ion-side-menus>

<!-- Extension JS Libraries -->
{% for lib in extensionInfo.runtimeFiles %}{% if lib.endsWith('.js') %}{% if !(ignoreJSFiles.includes(lib)) %}
<script src="<%= lib =%>" type="text/javascript"></script>{% endif %}{% endif %}{% endfor %}

<script src="lib/cdn/ng-cordova.min.js" type="text/javascript"></script>
<script src="lib/uuid.js" type="text/javascript"></script>
<script src="lib/cdn/lodash.min.js" type="text/javascript"></script>
<script src="lib/twx-connector.js" type="text/javascript"></script>
<script src="lib/twx-client-core-all.js" type="text/javascript"></script>
<script src="app/app.js?v<%= uuid =%>" type="text/javascript" charset="utf-8"></script>

{% if projectType !== 'HMT' %}
<!-- TML Related -->

<script name="recogniser" type="x-shader/x-fragment">
  precision mediump float;
  varying vec4 vertexCoord;
  varying vec2 texCoord;

  uniform bool useTexture;
  uniform vec4 surfaceColor;
  uniform float tick;
  uniform float active;
  uniform sampler2D sampler0;
  uniform sampler2D sampler1;
  void main() {
    vec4 color = surfaceColor;
    if (useTexture) {
      color = texture2D(sampler1, texCoord);
      if (active > 0.0) {
        float td = -mod(1.0 * tick, 1.0) * 2.0 * 3.14159;
        float delta = (sin(td) + 1.0) / 2.0;
        vec2 mx = texCoord - 0.5;
        vec2 rx = vec2((cos(td) * mx.x + sin(td) * mx.y), (-sin(td) * mx.x + cos(td) * mx.y));
        vec4 msk = texture2D(sampler0, rx + 0.5);
        vec4 tmpc = color * msk;
        tmpc.a = color.a - (1.0 - msk.g);
        color = mix(color, tmpc, active);
      }
    }

    if (color.a < 0.35) {
      discard;
    }

    gl_FragColor = color;
  }
</script>
<script name="recogniser" type="x-shader/x-vertex">
  attribute vec4 vertexPosition;
  attribute vec2 vertexTexCoord;

  varying vec2 texCoord;
  varying vec4 normal;
  varying vec4 vertexCoord;
  uniform mat4 modelViewProjectionMatrix;
  void main() {
    gl_Position = modelViewProjectionMatrix * vertexPosition;
    vertexCoord = gl_Position;
    texCoord    = vertexTexCoord;
  }
</script>

<script name="imageRecogniser" type="x-shader/x-vertex">
  attribute vec4 vertexPosition;
  attribute vec2 vertexTexCoord;
  uniform mat4 modelViewProjectionMatrix;
  varying vec2 texCoord;

  void main()
  {
    gl_Position = modelViewProjectionMatrix * vertexPosition;
    texCoord = vertexTexCoord;
  }
</script>
<script name="imageRecogniser" type="x-shader/x-fragment">
  precision mediump float;
  uniform float active;
  uniform float tick;
  uniform float imageWidth;
  uniform float imageHeight;

  uniform sampler2D gradientSampler;

  varying vec2 texCoord;

  void main()
  {
    const float thickness = 0.04;
    const vec4 baseColor = vec4(0, 1, 0, 1);

    float tracerWidth, tracerHeight;
    if (imageWidth > imageHeight) {
      tracerHeight = imageHeight / imageWidth;
      tracerWidth = 1.0;
    } else {
      tracerHeight = 1.0;
      tracerWidth = imageWidth / imageHeight;
    }

    float yOffset = (1.0 - tracerHeight) / 2.0;
    float xOffset = (1.0 - tracerWidth) / 2.0;
    float minY = yOffset;
    float maxY = 1.0 - yOffset;
    float minX = xOffset;
    float maxX = 1.0 - xOffset;

    float x = texCoord.x;
    float y = texCoord.y;
    vec4 color;
    // Are current x, y coords within the tracer area? If so draw it.
    if (((y <= maxY && y > minY) && ((x > minX && x <= (minX + thickness)) || (x < maxX && x >= (maxX - thickness)))) ||
        ((x <= maxX && x > minX) && ((y > minY && y <= (minY + thickness)) || (y < maxY && y >= (maxY - thickness))))) {
      color = baseColor;

      if (active > 0.0) {
        // Tracer "fade in" animation is handled here, it basically rotates the gradient sampler every frame to take and mix its color value.
        float td = -mod(1.0 * tick, 1.0) * 2.0 * 3.14159;
        float delta = (sin(td) + 1.0) / 2.0;
        vec2 mx = texCoord - 0.5;
        vec2 rx = vec2((cos(td) * mx.x + sin(td) * mx.y), (-sin(td) * mx.x + cos(td) * mx.y));
        vec4 msk = texture2D(gradientSampler, rx + 0.5);
        vec4 tmpc = color * msk;
        tmpc.a = color.a - (1.0 - msk.g);
        color = mix(color, tmpc, active);
      }

      gl_FragColor = color;
    } else {
      discard;
    }
  }
</script>

{% endif %}

<script type="text/javascript">

updateTitleWithExpTitle();

var setUpAngularModuleAndBootstrap = function() {
  setUpAngularModuleAndBootstrap = function() {}; //no-op guarantees won't run twice

  // We're not allowed to inject vuforiaCleanup in config(), so we forward declare and set this var in run()
  var vuforiaCleanupService;

  angular.module('app')
    .config(function ($stateProvider, $urlRouterProvider, $compileProvider) {

      $stateProvider
        {% for v in views %}
        .state('<%= v.fileName =%>', {
          url: '/<%= v.fileName =%>?entityName&thing&template&vumark',
          templateUrl: 'app/components/<%= v.fileName =%>.html',
          cache: false,
          resolve: {
            preparePromise: function () {
              try {
                if (vuforiaCleanupService && vuforiaCleanupService.cleanUpAndPauseIfRequested) {
                  return vuforiaCleanupService.cleanUpAndPauseIfRequested();
                }
              }
              catch (e) {
                console.error('Could not cleanup vuforia', e);
              }
              return Promise.resolve();
            }
          },
          controller: 'BaseCtrl'
        })
        {% endfor %}

      $urlRouterProvider.otherwise('/<%= defaultRoute =%>');
      $compileProvider.debugInfoEnabled(<%= angularDebugEnabled =%>);

    }).run(function($rootScope, $timeout, vuforiaCleanup) {
       twx.app.fn.handleVanityURL(experienceInfo, window.location);

       vuforiaCleanupService = vuforiaCleanup;
       $rootScope.expTitle = document.title;
       $rootScope.enableVoiceCommands = <%= enableVoiceCommands =%>;
       $rootScope.$on('$ionicView.afterEnter', function(event, toState, toParams, fromState, fromParams) {
          $timeout(function() {
               document.title = $rootScope.expTitle;
               var expIdx = experienceInfo.findExperienceIndex(toState.stateId);
               if(expIdx >= 0) {
                   // update the description meta tag, only if an experience exists for the navigated-to view
                   appendDescriptionMetaData(experienceInfo.getDescription(expIdx));
               }
          }, 1);
       });
    })
    .value('thingViewPath', 'extensions/js');
  angular.bootstrap(document, ['app']);
};

var setupWrapper = function() {setUpAngularModuleAndBootstrap();};
function setupIonicListener() {
    window.ionic.Platform.ready(setupWrapper);
}
function loadSetup() {
    window.removeEventListener('load', loadSetup, false);
    if (window.cordova && window.cordova.plugins) {
        setupIonicListener();
    }
    else {
       document.addEventListener('deviceready', setupIonicListener, false);
       //Add in a desktop ready event here...
       //desktop-ready-replacement
    }
}
window.addEventListener('load', loadSetup);
//<builder-settings>
</script>
{% if projectType === 'HMT' %}
<script type="text/javascript" src="extensions/js/hmt-project-startup.js"></script>
{% endif %}
</body>
</html>
