{% load i18n %}
{% load static %}

<script type="text/javascript" src='{% static "ldt/js/jquery-ui.min.js" %}'></script>
<script type="text/javascript">
		
	function init_events() {
		$("#itemcontainer tr").each(function () {
			var current_item = $(this);
			var val = $("input",$(this)).val();
			$("#selecteditemcontainer tr").each(function () {
				var cmp_val = $("input",$(this)).val();
				if (cmp_val == val) {
					current_item.remove();
				}
			});
		});
	}	
	
	$(document).ready(function() {
		var can_edit = '{% static "ldt/img/pencil.png" %}';
		var can_view = '{% static "ldt/img/eye.png" %}';

		{% if group_edition %}
			var search_url = "{% url 'ldt.ldt_utils.views.workspace.share_filter' filter='__FILTER__' use_groups='false' %}";
		{% else %}
			var search_url = "{% url 'ldt.ldt_utils.views.workspace.share_filter' filter='__FILTER__' use_groups='true' %}";
		{% endif %}
		
		input_list_init = [
			{'input_selector':"#searchuserinput", 'container_selector': "#itemcontainer", 'url':search_url}
		];	           	
		searchFieldInit(input_list_init);
		
		$("#media_public input[type=checkbox]").change(function () {
			if ($(this).is(':checked')) {
				$("#permissioncontainer").hide();
			} else {
				$("#permissioncontainer").show();
			}
		});
		
		$("#content_public input[type=checkbox]").change(function () {
			if ($(this).is(':checked')) {
				$("#media_public input[type=checkbox]").attr('disabled', false)
			} else {
				$("#media_public input[type=checkbox]").attr('disabled', true)
			}
		});
	
		$(".can_edit").live('click', function () {			
			$(this).attr('src', can_view);
			$(this).attr('title', "{% trans 'share.eye' %}");
			$(this).removeClass('can_edit').addClass('can_view');			
			var id_item = $("input",$(this).closest('.shareline')).val();
			$("#write input[value=" + id_item + "]").remove();
		});
		
		$(".can_view").live('click', function () {
			$(this).attr('src', can_edit);
			$(this).attr('title', "{% trans 'share.pencil' %}");
			$(this).removeClass('can_view').addClass('can_edit');
			var id_item = $("input",$(this).closest('.shareline')).val();
			$("#write").append('<input type="hidden" name="write_list" value="' + id_item + '"/>');
		});
		
		$("#sharecontainer table").selectable({
			filter: ".shareline",
			cancel: ".can_view, .can_edit",
		});
		
		$("#selectelems").click(function () {
			var selection = $("#elemslistcontainer .ui-selected");
			$("#selectedlistcontainer table").append(selection);
			$("#elemslistcontainer").remove(".ui-selected");
			
			selection.each(function () {
				var id_item = $("input",$(this)).val();
				var eye_img = '{% static "ldt/img/eye.png" %}';
				$("#read").append('<input type="hidden" name="read_list" value="' + id_item + '"/>');
				$("td:last",$(this)).append('<img class="can_view" src="'+eye_img+'" title="{% trans "share.eye" %}" alt="{% trans "share.eye" %}"/>');
			});
		});
		
		$("#removeelems").click(function () {
			var selection = $("#selectedlistcontainer .ui-selected");
			$("#elemslistcontainer table").append(selection);
			$("#selectedlistcontainer").remove(".ui-selected");	
			
			selection.each(function () {
				var id_item = $("input",$(this)).val();
				$("#read input[value=" + id_item + "]").remove();
				$("#write input[value=" + id_item + "]").remove();
				$(".can_view, .can_edit", $(this)).remove();
			});
		});
		
		$("#selectallitems").click(function () {
			$("#elemslistcontainer tr").addClass('ui-selected');
			$("#selectelems").trigger('click');			
		});
		
		$("#removeallitems").click(function () {
			$("#selectedlistcontainer tr").addClass("ui-selected");
			$("#removeelems").trigger('click');			
		});
	});
</script>

{% if not group_edition %}
<div id="shareproject" class="clear dropdownlist">
<img class="shareicon" src='{% static "ldt/img/user_add.png" %}' />{% trans "share" %}
</div>
{% endif %}

<input type="hidden" name="share" value="False" id="id_share"/>

<div id="sharecontainer">

	{% if media_form %}
	<div id="media_public">{{ media_form.media_public }}<label>{% trans  "publish for everyone" %}</label></div>
	{% endif %}

	<div id="permissioncontainer" class="append-bottom clear" {% if media_form and media_form.media_public.value %}style="display: none;"{% endif %}>
		<div id="elemslistcontainer" clas="span-9">
			{% if media_form %}
			<div id="content_public">{{ content_form.is_public }}<label>{% trans  "publish the title on the front" %}</label></div>
			<br />
			{% endif %}
			<div id="elemslistheader">
				{% trans "User and group list" %}<br />
				<div class="searchfield span-4">
					<input type="text" name="search" id="searchuserinput" class="searchfieldinput searchfieldinputbase" placeholder="{% trans 'search' %}"/>
					<img id="projectsajaxloader" class="searchajaxloader" src='{% static "ldt/img/ajax-loader-16x16.gif" %}' alt="loader"/>
					<img id="projecsclear" class="searchclear" src='{% static "ldt/img/clear-left.png" %}'/>
				</div>
			</div><br /><br />
			
			<div class="tableuserorgroup">
			<table id="itemcontainer" class="userorgroups">
				{% include "ldt/ldt_utils/partial/sharewith.html" %}
			</table>
			</div>
			
			<div id="elemslistfooter">
				<a href="#" id="selectallitems" title="{% trans "select all displayed elements" %}"><img class="shareicon" src='{% static "ldt/img/user_go.png" %}' title="{% trans "select all displayed elements" %}"/>{% trans "select all displayed elements" %}</a>
			</div>
		</div>
		
		 <div id="selectors">
			<a href="#" id="selectelems"><img src='{% static "ldt/img/to-right.gif" %}' title="{% trans "select users" %}"></a><br />
			<a href="#" id="removeelems"><img src='{% static "ldt/img/to-left.gif" %}' title="{% trans "remove users" %}"></a>
		</div>
		{% if media_form %}
		<br />	<br />
		{% endif %}
		<div id="selectedlistcontainer" class="span-9 last">
			<div id="selectedlistheader" >
				{% trans "Members list" %}
			</div>
			
			<div class="tableuserorgroup">
			<table id="selecteditemcontainer" class="userorgroups" >
			
			{% for elem in member_list %}
			<tr class="shareline">
				<td style="width: 5%;">
				{% if elem.type == "user" %}
					<img src='{% static "ldt/img/user.png" %}' alt="{% trans "user" %}"/>
				{% else %}
					<img src='{% static "ldt/img/group.png" %}' alt="{% trans "group" %}"/>		
				{% endif %}
				</td>
				
				<td style="width: 95%;">{{ elem.name }}</td>
				<td>
				{% if elem.change %}
				<img class="can_edit" src='{% static "ldt/img/pencil.png" %}' alt="{% trans "share.pencil" %}" />
				{% else %}
				<img class="can_view" src='{% static "ldt/img/eye.png" %}' alt="{% trans "share.eye" %}" />
				{% endif %}
				</td>
				
				<input type="hidden" value="{{ elem.id }}-{{ elem.type }}"/>
			</tr>
			{% endfor %}				
			</table>
			</div>
			
			<div id="selectedlistfooter" class="span-6" >
				<a href="#" id="removeallitems" title="{% trans "remove all" %}">{% trans "remove all" %}</a>
			</div>	
		</div>
		
		<div id="read">
		{% for elem in member_list %}
			<input type="hidden" value="{{ elem.id }}-{{ elem.type }}" name="read_list"/>
		{% endfor %}
		</div>
		
		<div id="write">
		{% for elem in admin_list %}
			<input type="hidden" value="{{ elem.id }}-{{ elem.type }}" name="write_list"/>
		{% endfor %}
		</div>
	</div> 

</div>