{% extends "base.html" %}
{% block comments %}
<!--
# Copyright (c) 2014 Riverbed Technology, Inc.
#
# This software is licensed under the terms and conditions of the MIT License
# accompanying the software ("License").  This software is distributed "AS IS"
# as set forth in the License.
-->
{% endblock %}
{% load url from future %}

{% block title %}App Framework: System Settings{% endblock %}

{% block header %}
    <script type="text/javascript">
        $(document).ready( function() {
            version = $('#id_maps_version').val();
            if ( version == 'DISABLED') {
                $('#mapsEnable').prop('checked', false);
                $('#osmDiv').hide();
                $('#mapsDiv').hide();
                $('#googleDiv').hide();
            } else {
                $('#mapsEnable').prop('checked', true);
                $('#mapsDiv').show();
                if (version == 'OPEN_STREET_MAPS') {
                    $('#osmDiv').show();
                    $('#googleDiv').hide();
                    $('#mapsVersionOSM').prop('checked', true);
                //} else if (version == 'STATIC_MAPS') {
                //    $('#osmDiv').hide();
                //    $('#googleDiv').hide();
                //    $('#mapsVersionStatic').prop('checked', true);
                } else {
                    $('#osmDiv').hide();
                    $('#googleDiv').show();
                    $('#mapsVersionGoogle').prop('checked', true);
                };
            };

            // copy key from input value and bind changes to feed back
            $('#id_maps_api_key_input').val($('#id_maps_api_key').val())
            $('#id_maps_api_key_input').change(function(e) {
                text = this.value;
                $('#id_maps_api_key').val(text);
                if (!text && $('#id_maps_version').value != 'BUSINESS') {
                    $('#id_maps_version').val('DEVELOPER');
                }
            });

            setAPIKeyInput();

            $('input[name="optionMapsVersion"]').change(function(e) {
                toggleMapsVersion();
            });
            $('input[name="optionGoogleMapsVersion"]').change(function(e) {
                toggleGoogleMapsVersion();
            });

            $('#mapsEnable').change(function(e) {
                $('#mapsDiv').toggle();
                if (!$('#mapsEnable').is(':checked')) {
                    $('#id_maps_version').val('DISABLED');
                } else {
                    $('#id_maps_version').val('DEVELOPER');
                }
                setAPIKeyInput();
            });
        });


        function toggleMapsVersion() {
            if ($('#mapsVersionOSM').is(':checked')) {
                $('#id_maps_version').val('OPEN_STREET_MAPS');
                $('#osmDiv').show();
                $('#googleDiv').hide();
            } else if ($('#mapsVersionGoogle').is(':checked')) {
                $('#osmDiv').hide();
                $('#googleDiv').show();
                toggleGoogleMapsVersion();
            //} else {
            //    $('#id_maps_version').val('STATIC_MAPS');
            //    $('#osmDiv').hide();
            //    $('#googleDiv').hide();
            };
        };
        function toggleGoogleMapsVersion() {
            if ($('#mapsVersionFree').is(':checked')) {
                $('#id_maps_version').val('FREE');
            } else {
                $('#id_maps_version').val('BUSINESS');
            };
            setAPIKeyInput();
        };
        function setAPIKeyInput() {
            var text = $('#id_maps_version').val();
            if (text == 'BUSINESS') {
                $('#mapsVersionFree').prop('checked', false);
                $('#mapsVersionBusiness').prop('checked', true);
                $('#id_maps_api_key_input').prop('placeholder', 'Client ID');
            } else {
                $('#mapsVersionFree').prop('checked', true);
                $('#mapsVersionBusiness').prop('checked', false);
                $('#id_maps_api_key_input').prop('placeholder', 'API Key');
            }
        };
    </script>
{% endblock %}

{% block header_row %}<h3>System Settings</h3>{% endblock %}

{% block content %}
    <div class="container">
      <div class="row">
        <div class="span6">
            <form class="form-horizontal" action="" method="POST">
              {% csrf_token %}
              {% for field in form.hidden_fields %}
                {{ field }}
              {% endfor %}
              {% for field in form.visible_fields %}
                <div class="control-group{% if field.errors %} error{% endif %}">
                  <label class="control-label" for="{{field.id_for_label}}">
                      {{field.label}}:
                  </label>
                  <div class="controls">
                    {{ field }}
                    {% if field.errors %}
                        <span class="help-inline">
                            {% for err in field.errors %}{{ err }}{% endfor %}
                        </span>
                    {% else %}
                        {% if field.help_text %}
                            <span class="help-inline">{{ field.help_text }}</span>
                        {% endif %}
                    {% endif %}
                  </div>
                </div>
              {% endfor %}

              <div class="control-group">
                <label class="control-label" for="mapsEnable">
                    Enable Map Widgets:
                </label>
                <div class="controls">
                    <input id="mapsEnable" type="checkbox">
                </div>
                <div id="mapsDiv" style="border: 1px solid #bbb; padding: 5px;margin-top:5px;display: none;">

                   <label class="radio">
                     <input type="radio" name="optionMapsVersion" id="mapsVersionOSM" value="OPEN_STREET_MAPS">
                     OpenStreetMap
                   </label>
                   <div id="osmDiv" style="border: 1px solid #bbb; padding: 5px;margin-top:5px;display: none;">
                       <p>See Readme for additional details on using OpenStreetMap.</p>
                   </div>

                   <label class="radio">
                     <input type="radio" name="optionMapsVersion" id="mapsVersionGoogle" value="GOOGLE">
                     Google Maps
                   </label>
                   <div id="googleDiv" style="border: 1px solid #bbb; padding: 5px;margin-top:5px;display: none;">
                       <p>Please select your method for accessing the Google Maps/Google Earth API (see Readme for details):</p>
                       <label class="radio">
                         <input type="radio" name="optionGoogleMapsVersion" id="mapsVersionFree" value="FREE">
                         API Key
                       </label>
                       <label class="radio">
                         <input type="radio" name="optionGoogleMapsVersion" id="mapsVersionBusiness" value="BUSINESS">
                         Client ID
                       </label>
                       <input id="id_maps_api_key_input" type="text" style="width: 95%;" placeholder="Text input">
                       {% if form.maps_api_key.errors %}
                           <p class="text-error">{% for err in form.maps_api_key.errors %}{{ err }}{% endfor %}</p>
                       {% endif %}
                   </div>

                   <!--
                   <label class="radio">
                     <input type="radio" name="optionMapsVersion" id="mapsVersionStatic" value="STATIC_MAPS">
                     Static Maps (not currently supported)
                   </label>
                   -->

                </div>
              </div>

              <div style="text-align: center;">
                  <input class="btn btn-primary" type="submit" value="Save" />
              </div>
          </form>
        </div>
      </div>
    </div>
{% endblock %}
