--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/soc/templates/modules/ghop/program/tag/task_type.html	Fri Aug 28 13:15:56 2009 +0200
@@ -0,0 +1,112 @@
+{% 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/type_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/type_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 task_type in task_types %}
+ <li id="existing-{{ forloop.counter }}" 
+ name="{{ task_type.tag }}" class="handle">{{ task_type.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 %}
+