{% extends "admin/change_form.html" %}

{% block extrahead %}
  {% load adminmedia inlines %}
  {{ block.super }}
  <script type="text/javascript">
    function InlineInit() {
      var body_div = document.getElementById('id_body').parentNode;
      var content = ''
      content += '{% get_inline_types as inline_list %}'
      content += '<label>Body inlines:</label>'
      
      content += '<strong>Inline type:</strong> '
      content += '<select id="id_inline_content_type" onchange="document.getElementById(\'lookup_id_inline\').href = \'../../../\'+this.value+\'/\';" style="margin-right:20px;">'
      content += '  <option>----------</option>'
      content += '  {% for inline in inline_list %}'
      content += '  <option value="{{ inline.content_type.app_label }}/{{ inline.content_type.model }}">{{ inline.content_type.app_label|capfirst }}: {{ inline.content_type.model|capfirst }}</option>'
      content += '  {% endfor %}'
      content += '</select> '
      
      content += '<strong>Object:</strong> '
      content += '<input type="text" class="vIntegerField" id="id_inline" size="10" /> '
      content += '<a id="lookup_id_inline" href="#" class="related-lookup" onclick="if(document.getElementById(\'id_inline_content_type\').value != \'----------\') { return showRelatedObjectLookupPopup(this); }" style="margin-right:20px;"><img src="{% admin_media_prefix %}img/admin/selector-search.gif" width="16" height="16" alt="Loopup" /></a> '
      
      content += '<strong>Class:</strong> '
      content += '<select id="id_inline_class">'
      content += '  <option value="small_left">Small left</option>'
      content += '  <option value="small_right">Small right</option>'
      content += '  <option value="medium_left">Medium left</option>'
      content += '  <option value="medium_right">Medium right</option>'
      content += '  <option value="large_left">Large left</option>'
      content += '  <option value="large_right">Large right</option>'
      content += '  <option value="full">Full</option>'
      content += '</select>'
      
      content += '<input type="button" value="Add" style="margin-left:10px;" onclick="return insertInline(document.getElementById(\'id_inline_content_type\').value, document.getElementById(\'id_inline\').value, document.getElementById(\'id_inline_class\').value)" />'
      content += '<p class="help">Insert inlines into your body by choosing an inline type, then an object, then a class.</p>'
      
      var div = document.createElement('div');
      div.setAttribute('style', 'margin-top:10px;');
      div.innerHTML = content;
      
      body_div.insertBefore(div);
    }
    
    function insertInline(type, id, classname) {
      if (type != '----------' && id != '') {
        inline = '<inline type="'+type.replace('/', '.')+'" id="'+id+'" class="'+classname+'" />';
        body = document.getElementById('id_body');
        body.value = body.value + inline + '\n';
      }
    }
    
    addEvent(window, 'load', InlineInit);
  </script>
{% endblock %}