{% load i18n l10n %}

<style type="text/css">

	.connectedSortable{ 
		display: inline-block;
		list-style-type: none; 
		margin: 0;
		padding: 0 0 2.5em;
		float: left;
		margin-right: 10px; 
		width: 95%;
		border:1px solid grey;
		border-radius: 3px;
		margin:5px;
		padding: 5px
	}
	
	.connectedSortable li {
		display: inline-block;
		margin: 0 5px 5px 5px; 
		float: center;
		padding: 5px;
		font-size: 1.2em;
	   	width: 140px; 
	}

	

	.drag_and_drop_str1{
		/*border:1px solid red;*/
		display: inline-block;
		width: 80%;
		float:right;
	}

	.drag_and_drop_str1  ul{
		
		float:right;
	}

	

	.drag_and_drop_str2  ul{
		
		float:right;
	}



	.drag_and_drop_str2{
		/*border:1px solid red;*/
		display: inline-block;
		width: 20%;
		float:left;
	}
	



	

	.drag_and_drop_title_sortable{
		/*border:1px solid red;*/
		text-align: center;
		
		display:inline-block;
		float:left;
		margin-left: 10%;
	}

	.drag_and_drop{
		float:left;
		width:95%;
		margin-left: 2%;
	/*	border: 1px solid grey;
		border-radius: 5px;
		padding:;
	*/
	}



	</style>
	{% get_current_language as LANGUAGE_CODE %}


	<div id = '{{view_name}}_drag_and_drop' class='drag_and_drop'>

		<div id = '{{view_name}}_atr' class= 'drag_and_drop_str2'>
			
				<div class='drag_and_drop_title_sortable'> {{name2}} </div>
				<ul id="{{view_name}}_sortable2" class="connectedSortable"> 
					{% for key in group_by_column_hide%}
						<li id = '{{key.0}}'  class="ui-state-default">{{key.1}}</li>
					{% endfor%}
				</ul>
			
		</div>

		

		<div id = '{{view_name}}_atr' class= 'drag_and_drop_str1'>
			
				<div class='drag_and_drop_title_sortable'> {{name1}} </div>
				<ul id="{{view_name}}_sortable1" class="connectedSortable"> 					
					{% for key in  group_by_column_show %}
						<li id = '{{key.0}}'  class="ui-state-default">{{key.1}}</li>
					{% endfor%}
				</ul>
			
		</div>
		
	</div>



	<script type="text/javascript" lang="text/javascript">

		
	
		$( "#{{view_name}}_sortable1, #{{view_name}}_sortable2" ).sortable({
			connectWith: ".connectedSortable",
			stop: function( event, ui ) { 
				
				{{view_name}}ControlDragAndDrop ();
				
			 },	 

			 beforeStop: function( event, ui ) { 

				$('#{{view_name}}_sortable1 li').each(function(){
					{{view_name}}DragAndDropShow();
				});

				$('#{{view_name}}_sortable2 li').each(function(){

					{{view_name}}DragAndDropHide();
				});				
			 },		
			  
		}).disableSelection();

		



		function {{view_name}}DragAndDropShow()
		{
			
			$("#{{view_name}}_table_grid").showCol($(this).attr('id'));
			
		}

		function {{view_name}}DragAndDropHide()
		{
			
			$("#{{view_name}}_table_grid").hideCol($(this).attr('id'));
			
		}
		function {{view_name}}ControlDragAndDrop ()
		{
			length=$("#{{view_name}}_sortable2")[0].getElementsByTagName("li").length;
			
			if (length>3 || length<1)
			{
				$("#{{view_name}}_sortable1").sortable( "cancel" );
				$("#{{view_name}}_sortable2").sortable( "cancel" );
			}
			else
			{
				$('#{{view_name}}_grid_content').block({message:' <div> <div style = " width:125px; margin: 2px 0px 0px 2px;  float: left;"> Press button update  </div> <div class="ui-icon ui-icon-refresh" style="background-color: black; width: 15px; border:1px solid grey; float: left;"> </div> <div style = " width:75px; float: left; margin: 2px 0px 0px 0px; "> to continue </div> </div>'});
			}
			
			{{view_name}}sortList()
		}


		function {{view_name}}sortList() 
		{
		  
			ul = document.getElementById('{{view_name}}_sortable1');


		  	// Get the list items and setup an array for sorting
		  	var lis = ul.getElementsByTagName("LI");
		  	var vals = [];
		  	var vals_ids = {};
		  	
		  	// Populate the array and the dict with text:id
		  	for(var i = 0, l = lis.length; i < l; i++)
		  	{
			    vals.push(lis[i].innerHTML);
				vals_ids[lis[i].innerHTML]=lis[i].id
			}

		
		  	// Sort by the text
		  	vals.sort();		  	
		  	// Change the list on the page by the text 
		  	for(var i = 0, l = lis.length; i < l; i++)
		  	{
		    	lis[i].innerHTML = vals[i];
		    	lis[i].id=vals_ids[vals[i]]
		    }

		    
		}

	</script>