{% extends "base.html" %}
{% load sekizai_tags %}

{% block content %}
<div>
	<label for="entity-input">Sélection:</label><input type="text" id="entity-input"/>
	<label for="entity-description-filter">Filtre sur la description:</label><input type="text" id="entity-description-filter"/>
</div>
<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: blue; }
</style>
<div data-input-id="entity-input" class="miller">
	<div class="miller-column">
		<span class="miller-row" data-code="DAUPHINE">
			Université Paris Dauphine
		</span>
		<span class="miller-row" data-code="SRI">
			Service Relation International
		</span>
	</div>
</div>
{% addtoblock "endscripts" %}
<script src="/static/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 code = $(this).attr('data-code');
		$(document.getElementById(id)).attr('value', code);
		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/' + code + '/' + suffix, function (data) {
			if (data.length) {
				var container = $('<div class="miller-column"></div>').appendTo(top_container);
				$(container).css({'top': 0, 'left': total_width});
				$.each(data, function (key, val) {
					var code = val['code'];
					var description = val['description'];
					var node = $('<span class="miller-row" rel="popover" data-content="' +code+" &lt;br/&gt; " +description+ '"data-code="' + code + '">' + description + '</span>').appendTo(container);
				});
				$('span.miller-row[rel=popover]').popover({'placement': 'left'});
				$(top_container).scrollLeft(total_width);
			}
		});
	});
</script>
{% endaddtoblock %}
{% endblock %}