{# Bare-bones skeletal template. #}
{% load kegweblib %}
{% load humanize %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{% block title %}Kegbot{% endblock %}</title>

<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.9.1.min.js"></script>

{% block css %}
<link rel="icon" type="image/png" href="{{ STATIC_URL}}images/kegbot-icon-72x72.png" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/kegweb.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}fancybox/jquery.fancybox.css" media="screen" />
{% endblock %}

{% block kb-extracss %}{% endblock %}
</head>

<body {% block bodyattrs %}{% endblock %}>
{% block body %}
{% endblock body %}

{% block js %}
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.cookie.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.timeago.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.autounits.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.scrollstop.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.lazyload.min.js"></script>

<script type="text/javascript" src="{{ STATIC_URL }}bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}lib/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>

<script type="text/javascript" src="{{ STATIC_URL }}highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}fancybox/jquery.fancybox.pack.js"></script>

{% if GOOGLE_ANALYTICS_ID %}
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', '{{GOOGLE_ANALYTICS_ID}}']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
{% endif %}

<script type="text/javascript">
  $(document).ready(function() {
      $("span.hmeasure").autounits({ metric: {% if metric_volumes %}true{% else %}false{% endif %} })
      $("abbr.timeago").timeago();
      $(".alert").alert()
      $(".clickable").each(function() {
        var href = $(this).attr("data-href");
        $(this).click(function(e) {
          var node = e.target.nodeName.toLowerCase();
          if (node == 'a') return;
          window.location = href;
          return false;
        });
      });
      $("img.lazy").lazyload();
      $("a.gallery-image").fancybox({
        'speedIn' : 100,
        'speedOut' : 100,
        'titlePosition' : 'inside',
        'cyclic' : true,
      });
      $('.bar').progressbar({
          display_text: 'fill',
          percent_format: function(p) {return p + '% remaining';}
      });
      $('.keg-popover').popover();
  });

  $(document).ready(function() {
    $('.input-volume').each(function() {
      var inputId = this.id;
      var valueId = inputId + '-value';
      var unitsId = inputId + '-units';

      var newDiv = '<div class="control-group">';
      newDiv += '<input type="hidden" id="' + inputId + '" name="' + this.name + '" value="' + $(this).val() + '">';
      newDiv += '<input class="numberinput" type="number" step="0.01" id="';
      newDiv += valueId;
      newDiv += '" value="' + $(this).val() + '">';
      newDiv += '<select id="' + unitsId + '" class="span2"> \
      <option value="milliliters">Milliliters</option> \
      <option value="ounces">Ounces</option> \
      <option value="liters">Liters</option> \
      <option value="gallons">Gallons</option> \
      </select>';
      newDiv += '</div>';

      $(this).replaceWith(newDiv);

      var hiddenInput = $('#' + inputId);
      var valueInput = $('#' + valueId);
      var unitsInput = $('#' + unitsId);

      $(unitsInput).change(function() {
        var currentUnits = $(this).val();
        var currentValue = $(hiddenInput).val()

        if (currentUnits == 'milliliters') {
          var display = currentValue * 1.0;
        } else if (currentUnits == 'ounces') {
          var display = currentValue / 29.5735;
        } else if (currentUnits == 'liters') {
          var display = currentValue / 1000.0;
        } else if (currentUnits == 'gallons') {
          var display = currentValue / 3785.41;
        }

        display = +display.toFixed(2);
        $(valueInput).val(display);
      });

      $(valueInput).change(function() {
        var currentValue = $(this).val()
        var currentUnits = $(unitsInput).val();

        if (currentUnits == 'milliliters') {
          var volume_ml = currentValue * 1.0;
        } else if (currentUnits == 'ounces') {
          var volume_ml = currentValue * 29.5735;
        } else if (currentUnits == 'liters') {
          var volume_ml = currentValue * 1000.0;
        } else if (currentUnits == 'gallons') {
          var volume_ml = currentValue * 3785.41;
        }

        $(hiddenInput).val(volume_ml);
      });

      var metric = {% if metric_volumes %}true{% else %}false{% endif %};
      if (metric) {
        $(unitsInput).val('liters');
      } else {
        $(unitsInput).val('ounces');
      }
    });

  });
</script>

{% if user.is_staff %}
{% include 'kegadmin/includes/extrajs.html' %}
{% endif %}

{% endblock js %}

{% block kb-extrajs %}{%endblock%}
</body>
