<script type="text/javascript">

  window.selected_ctrl_row_id = -1;
  ax_change_id = -1;
 
  function selectTr(id)
  {  	  
  	if(selected_ctrl_row_id != -1)
  	{
  	  var recent_row = document.getElementById(selected_ctrl_row_id);
  	  var recent_descendants = getDescendantsNodes(recent_row);
  	  for(var i = 0; i<recent_descendants.length; i++)
  	    $(recent_descendants[i]).css("background-color", "");
  	}
  	
  	if(selected_ctrl_row_id == id)
  	  selected_ctrl_row_id = -1;
  	else
  	{
  	  selected_ctrl_row_id = id;
  	  var row = document.getElementById(id);
  	  var descendants = getDescendantsNodes(row);
  	  for(var i = 0; i<descendants.length; i++)
  	    $(descendants[i]).css("background-color", "LightSteelBlue");
  	  change_id = id.replace('change_', '');
  	  
  	  $.get(ajax_get_ctrl_preview, {id: change_id}, function(resp) {
        draw_filtered_frames(resp['serialized_frames'], 'change-ctrl-preview', 'ctrl-frame-table', '', new Array(), 'InactiveFrameTable', window.lemma_entry);
      }); 	  
  	}
  }

  $("tr.ChangeControlTableRow").click(function(){
    selectTr(this.id)});
    
  $("button#restore").click(function(){
    restore_lemma();
  });

</script>

<div class="change-ctrl-container">

  <table class='ChangeControlTable' id='change-ctrl-table'>
	<tr> 
	  <td class='ColumnHeader'>Czas modyfikacji:</td> 
	  <td class='ColumnHeader'>Właściciel:</td>
	  <td class='ColumnHeader'>Osoba dokonująca zmiany:</td>
	</tr>
	{% for version in old_versions %}
	  <tr class='ChangeControlTableRow' id="change_{{version.id}}"> 
		<td>{{version.time}}</td> 
		<td>{{version.act_owner.username}}</td>
		<td>{{version.user.username}}</td>
	  </tr>
	{% endfor %}
  </table>	
</div>

{% if can_modify and perms.dictionary.change_lemma_version %}
<div id="change-ctrl-buttons">
  <button type="button" id="restore" style="width:120px">Przywróć</button>
</div>
{% endif %}
</br>
</br>
<strong>Podgląd:</strong>
<div id="change-ctrl-preview">
</div>
