<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Geotrigger Editor</title>

  <link rel="stylesheet" href="proxy.css">

  <!-- css: dependencies -->
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet.esri.geocoder/1.0.2/esri-leaflet-geocoder.css">

  <!-- css: main -->
  <link rel="stylesheet" href="../../dist/css/geotrigger-editor.css">

  <!-- js: legacy support -->
  <!--[if lte IE 8]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
  <![endif]-->
</head>
<body>
  <header id="site-header">
    <h1>Geotrigger Editor</h1>
  </header>

  <div id="gt-editor">
    <form id="example">
      <input id="client-id" type="text" placeholder="Client ID">
      <input id="client-secret" type="text" placeholder="Client Secret">
      <button class="engage">Engage</button>
    </form>
  </div>

  <!-- js: cdn dependencies -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.4.1-bundled/backbone.marionette.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.runtime.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>

  <!-- js: local dependencies -->
  <script src="../../node_modules/geotrigger-js/geotrigger.js"></script>
  <script src="//cdn.jsdelivr.net/leaflet.esri/1.0.1/esri-leaflet.js"></script>
  <script src="//cdn.jsdelivr.net/leaflet.esri.geocoder/1.0.2/esri-leaflet-geocoder.js"></script>

  <!-- js: main -->
  <script src="../../dist/js/geotrigger-editor.js"></script>

  <!-- js: initializer -->
  <script>
    $(function(){
      $('#example').submit(function(e){
        e.preventDefault();

        var config = {
          session: {
            clientId: $('#client-id').val(),
            clientSecret: $('#client-secret').val(),
            proxy: 'proxy/'
          }
        };

        $(this).remove();

        Geotrigger.Editor.start(config);
      });
    });
  </script>
</body>
</html>
