--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/soc/templates/modules/ghop/program/tag/difficulty.html	Fri Aug 28 13:15:56 2009 +0200
@@ -0,0 +1,113 @@
+{% extends "soc/models/edit.html" %}
+{% comment %}
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+{% endcomment %}
+
+{% block stylesheet %}
+{{ block.super }}
+<link rel='stylesheet' href='/soc/content/css/jquery-ui-sortable-090806.css' 
+type='text/css' media='all' />
+{% endblock %}
+
+{% block scripts %}
+  {{ block.super }}
+  <script type="text/javascript" src="/jquery/jquery-in-place-edit.js"></script>
+  <script type="text/javascript" src="/jquery/jquery-ui.sortable.js"></script>
+  <script type="text/javascript">
+   var submit_handler = function(element, id, value) {
+	   $.get("/ghop/program/difficulty_tag_edit", 
+	         { 'tag_data': [$("#"+id).attr("name"), value], 
+    	       'program_key_name': '{{ program_key_name }}' },
+           function(data) {
+    	       if (!data) {
+    	    	   $("#"+id).remove();
+    	       } else {
+    	         $("#"+id).attr('name', data);
+    	       }
+    	     }
+     );
+	  return true;
+	};
+
+	var cancel_handler = function(element) {
+	  // Nothing
+	  return true;
+	};
+
+	// Enable in-place-edit
+	$(document).ready(function(){
+	      
+	  // paragraph, list examples
+	  $(".in-place-edit").children().inPlaceEdit({
+	    submit : submit_handler,
+	    cancel : cancel_handler
+	  }); 
+
+	  $("#dynamic-add").sortable({
+		  update : function () {
+		    var order = $('#dynamic-add').sortable('toArray');
+		    var new_order = new Array();
+	      for (i in order) {
+		      if (order[i])
+			      new_order[i] = $("#"+order[i]).attr("name");
+	      }
+		    $.get("/ghop/program/difficulty_tag_edit", 
+		          { 'order': new_order,
+	              'program_key_name': '{{ program_key_name }}' }
+        ); 
+		  } 
+		});
+	});
+  </script>
+{% endblock %}
+
+{% block body %}
+To add new tags click on Add button. To edit a tag click on the tag. To 
+delete a tag click on it and make its content empty. To order them drag and
+drop the tags.
+<ul class="in-place-edit" id="dynamic-add">
+ {% for difficulty in difficulties %}
+ <li id="existing-{{ forloop.counter }}" 
+ name="{{ difficulty.tag }}" class="handle">{{ difficulty.tag }}</li>
+ {% endfor %}
+</ul>
+<p>
+ <input style="font-weight: bold" type="button" 
+ value="Add" onclick="return add()"/>
+</p>
+
+<script type="text/javascript">
+ var index = 0;
+
+ function add() {
+   $('#dynamic-add').append(
+	     '<li id="category-new-' + index + '" name="" class="handle">Type name here...</li>');
+
+   var new_element = $("#category-new-" + index);
+   new_element.inPlaceEdit({
+     submit : submit_handler,
+     cancel : cancel_handler
+   });
+
+   new_element.click();
+
+   new_element.find('.field').focus();
+   new_element.find('.field').select();
+
+   index = index + 1;
+
+   return false;
+ }
+</script>
+{% endblock %}
+