{% load crispy_forms_field %}
{% load sekizai_tags %}

	<div id="div_{{ field.auto_id }}" class="clearfix control-group{% if form_show_errors%}{% if field.errors %} error{% endif %}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
		{% if field.label %}
			<label for="{{ field.id_for_label }}" class="control-label {% if field.field.required %}requiredField{% endif %}">
				{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
			</label>
		{% endif %}
    

<div class="controls">
	{% include 'bootstrap/layout/field_errors_block.html' %}

    {% crispy_field field %}


    	{% include 'bootstrap/layout/help_text.html' %}

      <div data-input-id="{{ field.auto_id }}" class="miller">
	<div class="miller-column">
		{% for id, name in roots %}
		<span class="miller-row" data-id="{{id}}">{{name}}</span>
		{% endfor %}
	</div>
</div>

<input type="hidden" id="entity-description-filter"/>
</div>

{% addtoblock "head" %}
<style>
.miller {
	border: 1px solid #ccc;
	height:30em;
	overflow-x:auto;
	overflow-y:hidden;
	white-space:nowrap;
	position:relative;
}
.miller-column {
	height:100%;
	overflow-y:scroll;
	overflow-x:hidden;
	position:absolute;
}
.miller-row {
	display:block;
	white-space:nowrap;
	clear:both;
	padding-right:15px;
	overflow:hidden;
	text-decoration:none;
	max-width: 20em;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
}
.miller-selected { background: #08C; }
</style>
{% endaddtoblock %}

{% addtoblock "endscripts" %}
<script src="{{ STATIC_URL }}livequery/jquery.livequery.js"></script>
<script>
	$('.miller-row').livequery('click', function (event) {
		$('.miller-selected').removeClass('miller-selected');
		$(this).addClass('miller-selected');
		var top_container = $(this).parent().parent();
		var container = $(this).parent();
		var id = top_container.attr('data-input-id');
		var eid = $(this).attr('data-id');
		$('#'+id).attr('value', eid);
    $('#label_' + id).val($(this).text());
		var level = $('div', top_container).index(container);
		$('div:gt(' + level + ')', top_container).remove();
		var total_width = 0;
		$('div', top_container).each(function (key, value) {
			total_width += $(value).width();
		});
		var filter_input = $('#entity-description-filter');
		if (! /^\s*$/.test(filter_input.attr('value'))) {
			suffix = '?filter=' + filter_input.attr('value');
		} else {
			suffix = '';
		}
		$.getJSON('/entity/' + eid + '/' + suffix, function (data) {
			if (data.children.length) {
				var container = $('<div class="miller-column"></div>').appendTo(top_container);
				$(container).css({'top': 0, 'left': total_width});
				$.each(data.children, function (key, val) {
					var eid = val.id;
          var code = val.code;
					var description = val['description'];
					var node = $('<span class="miller-row" rel="popover" data-title="' + code + '" data-id="' + eid + '" data-content="' +description+ '"data-code="' + code + '">' + description + '</span>').appendTo(container);
				});
				$('span.miller-row[rel=popover]').popover({'placement': 'left'});
				$(top_container).scrollLeft(total_width);
			}
		});
	});
</script>
{% endaddtoblock %}
