	<div id="tags" class="clear">
	<% @categorylist.each do |category| %>
    <div class="tag clear">
      <div class="tagitem">
        <i class="icon-folder-close"></i>
        <% @site_valid_locales.each do |locale| %>
       		<span class="value" for="<%= locale %>"><%= category.name_translations[locale] %> </span>
       	<% end %>
      </div>
      <div class="action">
      	<a href="<%= category.id %>" class='delete' onclick='return false;'><%= t("gallery.delete") %></a>
      	<a href="<%= category.id %>" class='edit' onclick='return false;'><%= t("gallery.edit") %></a>
      	<%= show_gallery_category_permission_link(category) %>
      </div>
    </div>
   <% end %>
 </div>
    <div class="form-actions form-fixed pagination-right">
			<div style="margin:0;padding:0;display:inline">
				<%= t("gallery.new_category")+"["+ t("gallery.english")+"]"  %> : <input type="text" id="category_name_en" />
  			<%= t("gallery.new_category") +"["+ t("gallery.chinese")+"]" %> : <input type="text" id="category_name_zh_tw" />
  			<a href="#" class="btn btn-primary" id="category_save_btn" onclick="return false;"><%= t("gallery.save") %></a>
			</div>
		</div>
<script type="text/javascript">
	var deleteCategory = function(a){
	  	var cid = a.attr("href");
	  	var parent = a.parent().parent();
	    $.post("gallery_category_delete",{id:cid},function(response){
	    if(response.success)
		     parent.hide("slide",function(){parent.remove();})
	  })
	}

	var editCategory = function(a){
			var cid = a.attr("href");
			var parent = a.parent().parent();
			var parenthtml = parent.html();
			var tempdom = $("<div class='tagitem'></div>");
			parent.find("span.value").each(function(){
				var locale = $(this).attr("for");
				var lang = {
					"en" : "English",
					"zh_tw" : "Chinese"
				}
				tempdom.append("<label>"+lang[locale] + " :</label><input type='text' id='temp_name_"+locale+"' value='"+$(this).text()+"' />");
			})
			tempdom.append('<br /><a href="#" class="btn btn-primary" id="temp_save_btn" onclick="return false;"><%= I18n.t("gallery.save") %></a> <a href="#" class="btn btn-primary" id="temp_cancel_btn" onclick="return false;"><%= I18n.t("gallery.cancel") %></a>');
			tempdom.find("a#temp_cancel_btn").click(function(){
				parent.html(parenthtml);
				parent.find("div.action a.delete").click(function(){
					 deleteCategory($(this));
				})
				parent.find(" div.action a.edit").click(function(){
					editCategory($(this));
				})
			})
			parent.html(tempdom);
	}

  $(document).ready(function(){
      $("#tags div.action a.delete").click(function(){
        deleteCategory($(this));
      })
      $("#tags div.action a.edit").click(function(){
        editCategory($(this));
      })
      $("#category_save_btn").click(function(){
        var lang = {
          "en" : $("#category_name_en").val(),
          "zh_tw" : $("#category_name_zh_tw").val()
       	};
        
        $.post("gallery_category_save",{"category":lang},function(response){
          if(response.success){
          	var $dom = $('<div class="tag clear hide"><div class="tagitem"><i class="icons-star"></i>'+lang.en+' '+lang.zh_tw+'</div> <div class="action"><a href="'+response.id+'" class="delete" onclick="return false;"><%= I18n.t("gallery.delete") %></a></div></div>');
            $("div#tags").append($dom);
            $dom.show('slide');
            $dom.find("a.delete").click(function(){
              deleteCategory($(this));
            })
            $("input[type=text]").val("");
          }
        })

     })

  })
</script>