$(function() {
  ListingEditor.register('categories', {
    fields: ['categories'],
    show: function(callback) {
      var context = this;
      var editor = $$("div.editor");
      
      $("<h2>Add <strong>Category</strong></h2>").appendTo(editor);
      
      search_box = $$('input.search', {style: 'width: 250px'}).appendTo(editor)
      
      editor.append(EditorFormatter.dialogButtons(function() {
          context.addCategory(search_box.val())
          ModalPopup.hide();
          if (callback) callback();
          $("#categories ul li:last").effect('highlight', {}, 2000);
      }, function () {
          ModalPopup.hide();           
      }));
      
      ModalPopup.show(editor);
      SearchSuggestions.extend(search_box, true);
    },
    refresh: function() {
      var listing = ListingEditor.workingListing();
      var context = this;
      if (ListingEditor.isEditing){
        $("#categories p").hide();
        if ($("#categories ul").length == 0) $("#categories p").after($$("ul"));
        // $("#categories ul").empty();
        
        // remove unused categories
        $("#categories ul li").each(function(){
          var found = false;
          var element = this;
          $.each(listing.categories || [], function() {
            if (this.name == element.title){
              found = true;
            }
          });
          if (!found){
            $(this).fadeTo(1000, 0).slideUp(500, function(){$(this).remove()});
          }
        });
        
        // add new categories
        $.each(listing.categories || [], function() {
          if ($("#categories ul li[title='" + this.name + "']").length == 0){
            context.displayCategoryItem(this);            
          }
        }); 
      }
      else{
        $("#categories p").show();
        $("#categories ul").hide();
        var items = [];
        $.each(listing.categories || [], function() {
          items.push(this.name);
        });
        $("#categories p").text(items.join(', '))
      }
    },
    addCategory: function(name){
      
      var listing = ListingEditor.workingListing();
      var level = listing.service_level || 0;
	
      var limit = (ListingEditor.options['mode'] == 'approve' || ListingEditor.options['mode'] == 'save') ? 10 : ((level >= 2) ? 6 : 3);
      
      if (listing.categories.length >= limit){
        this.deleteCategory(listing.categories[0].name);
      }
      
      var changes = ListingEditor.changes;
      if (!changes.categories) changes.categories = {add: [], remove: []}
      // remove from remove
      for (var i = 0; i < changes.categories.remove.length; i++){
        if (changes.categories.remove[i] == name) {
          changes.categories.remove.splice(i, 1); i -= 1;
        }
      }
      // exit if item already will be added
      for (var i = 0; i < changes.categories.add.length; i++){
        if (changes.categories.add[i] == name) return;
      }
      changes.categories.add.push(name);
    },
    deleteCategory: function(name){
      var changes = ListingEditor.changes;
      if (!changes.categories) changes.categories = {add: [], remove: []}
      // remove from add
      for (var i = 0; i < changes.categories.add.length; i++){
        if (changes.categories.add[i] == name) {
          changes.categories.add.splice(i, 1); i -= 1;
        }
      }
      // exit if item already will be removed
      for (var i = 0; i < changes.categories.remove.length; i++){
        if (changes.categories.remove[i] == name) return;
      }
      changes.categories.remove.push(name);
    },
    
    displayCategoryItem: function(c){
      var category = c;
      var context = this;
      var deleteLink = $$('a.delete', $$('a', $$('img', {src:'/images/icons/delete.png'}), {href: '#'}).click(function() {
        context.deleteCategory(category.name);
        $(this).parents("li").fadeTo(100, 0).slideUp(100, function(){$(this).remove()});
        return false;
      }));
      
      $("#categories ul").append($("<li>").attr({title: category.name}).append(category.name, deleteLink));
    }
  });
});