{% load i18n %}

<script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}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() {
		{% if group_edition %}
			var search_url = "{% url ldt.ldt_utils.views.share_filter filter='__FILTER__' use_groups='false' %}";
		{% else %}
			var search_url = "{% url ldt.ldt_utils.views.share_filter filter='__FILTER__' use_groups='true' %}";
		{% endif %}
		var share_this = '{% trans "share this project" %}';
		var do_not_share = '{% trans "do not share" %}';
		var share_img = '{{LDT_MEDIA_PREFIX}}img/user_add.png';
		var do_not_share_img = '{{LDT_MEDIA_PREFIX}}img/user_delete.png';
		var can_edit = '{{LDT_MEDIA_PREFIX}}img/pencil.png';
		var can_view = '{{LDT_MEDIA_PREFIX}}img/eye.png';
		var state = 1;
			
		if ($("#add_contribution").size()) {
			var resize_elem = $("#add_contribution");	
		} else {
			var resize_elem = $("#add_content");
		}
		
		input_list_init = [
			{'input_selector':"#searchuserinput", 'container_selector': "#itemcontainer", 'url':search_url}
		];	           	
		searchFieldInit(input_list_init);	
	
		$("#shareproject").click(function () {
			if (state == 1) {
				$("#sharecontainer").show();
				$("input[id=id_share]").val('True');
				var new_img = '<img class="shareicon" src=' + do_not_share_img + '>';
				$(this).html(new_img + do_not_share);
				state = 2;
			} else {
				$("#sharecontainer").hide();
				$("input[id=id_share]").val('False');
				var new_img = '<img class="shareicon" src=' + share_img + '>';
				$(this).html(new_img + share_this);
				state = 1;
			}
			
			resize_modal_window(resize_elem);
		});		

		$(".can_edit").live('click', function () {			
			$(this).attr('src', can_view);
			$(this).removeClass('can_edit').addClass('can_view');			
			var id_item = $("input",$(this).closest('.shareline')).val();
			$("#read input[value=" + id_item + "]").remove();
			$("#write input[value=" + id_item + "]").remove();
		});
		
		$(".can_view").live('click', function () {
			$(this).attr('src', can_edit);
			$(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();
				$("#read").append('<input type="hidden" name="read_list" value="' + id_item + '"/>');
				$("td:last",$(this)).append('<img class="can_view" src="{{LDT_MEDIA_PREFIX}}img/eye.png" 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">
<img class="shareicon" src="{{LDT_MEDIA_PREFIX}}img/user_add.png" />{% trans "share" %}
</div>
{% endif %}

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

<div id="sharecontainer" {% if not group_edition %}style="display:none;"{% endif %}>

	<div id="permissioncontainer" class="append-bottom clear">
		<div id="elemslistcontainer" clas="span-9">
			<div id="elemslistheader">
				{% trans "User and group list" %}<br />
				<div class="searchfield span-4"><input type="text" name="search" id="searchuserinput" class="searchfieldinput searchfieldinputbase" value="{% trans 'search' %}"/><img id="projectsajaxloader" class="searchajaxloader" src="{{LDT_MEDIA_PREFIX}}/img/ajax-loader-16x16.gif" alt="loader"/><img id="projecsclear" class="searchclear" src="{{LDT_MEDIA_PREFIX}}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="{{LDT_MEDIA_PREFIX}}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="{{LDT_MEDIA_PREFIX}}img/to-right.gif" title="{% trans "select users" %}"></a><br />
			<a href="#" id="removeelems"><img src="{{LDT_MEDIA_PREFIX}}img/to-left.gif" title="{% trans "remove users" %}"></a>
		</div>
	
		<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="{{LDT_MEDIA_PREFIX}}img/user.png" alt="{% trans "user" %}"/>
				{% else %}
					<img src="{{LDT_MEDIA_PREFIX}}img/group.png" alt="{% trans "group" %}"/>		
				{% endif %}
				</td>
				
				<td style="width: 95%;">{{ elem.name }}</td>
				<td>
				{% if elem.change %}
				<img class="can_edit" src="{{LDT_MEDIA_PREFIX}}img/pencil.png" alt="{% trans "share.pencil" %}" />
				{% else %}
				<img class="can_view" src="{{LDT_MEDIA_PREFIX}}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>