<div id="crop_example-container">

  <script type="text/javascript">
    /**
     * Load jQuery Only If Not Present
     **/
    if(!(window.jQuery || $)) {
      var s = document.createElement('script');
      s.setAttribute('src', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');
      s.setAttribute('type', 'text/javascript');
      document.getElementsByTagName('head')[0].appendChild(s);
    }
  </script>

  <script src="{{ STATIC_URL }}admin/opps/images/js/jquery.imgareaselect.pack.js"></script>
  <link href="{{ STATIC_URL }}admin/opps/images/css/imgareaselect-default.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript">
    django.jQuery(function(){
      var check_url = function() {
        var src = "{{ THUMBOR_SERVER }}/unsafe/";
        var l = 800;
        var r = 600;
        if (django.jQuery("#id_fit_in").is(':checked')) { src += 'fit-in/'; }
        if (django.jQuery("#id_flip").is(':checked')) { l = '-' + l; }
        if (django.jQuery("#id_flop").is(':checked')) { r = '-' + r; }
        src += l + "x" + r + "/";
        if (django.jQuery("#id_halign").val()) { src += django.jQuery("#id_halign").val() + '/'; }
        if (django.jQuery("#id_valign").val()) { src += django.jQuery("#id_valign").val() + '/'; }
        if (django.jQuery("#id_smart").is(':checked')) { src += 'smart/'; }

        img = django.jQuery("#imageExample").attr('src')
        if (img.split('http').length == 1){
          img = '{{ THUMBOR_MEDIA_URL }}' + img;
        }
        django.jQuery("#crop_example").attr('src', src + img)
      }

      django.jQuery("#id_meta, #id_flip, #id_flop, #id_fit_in, #id_smart, #id_halign, #id_valign").change(function(){
        check_url();
      });
      check_url();

      django.jQuery(".field-crop_x1").hide()
      django.jQuery(".field-crop_x2").hide()
      django.jQuery(".field-crop_y1").hide()
      django.jQuery(".field-crop_y2").hide()
    });
  </script>
  <img id="crop_example" />
</div>
