var TagEditor = function(container) {
  this.initialize(container);
};

$.extend(TagEditor.prototype, {
  initialize: function(container) {
    var tagEditor = this;
    tagEditor.container = container;
    tagEditor.tags = Array();
    tagEditor.serializeField = $(tagEditor.container).find('.serialized_tags').get(0);
    tagEditor.findTags(true);

    tagEditor.inputField = $(tagEditor.container).find('.add-tag').get(0);
    $(tagEditor.container).find('.add-tag-button').click(function() {
      tagEditor.addTag();
      $(tagEditor.container).find('.add-tag').blur();
      return false;
    });
    $(tagEditor.container).find('.add-tag').keydown(function(event) {
      if (event.which === 13) {
        tagEditor.addTag();
        return false;
      }
    });

    $(tagEditor.container).find('.add-tag').each(function(){
      var field = this;
      field.exampleText = $(field).val();
      $(field).addClass('example');
      $(field).focus(function(event){
        $(tagEditor.container).find('.add-tag-button').fadeIn('fast');
        $(field).removeClass('example');
        if ($(field).val() === field.exampleText) {
          $(field).val('');
        }
      });
      $(field).blur(function(event) {
        $(tagEditor.container).find('.add-tag-button').fadeOut('fast');
        if (!$(field).val() || $(field).val() === field.exampleText) {
          $(field).addClass('example').val(field.exampleText);
        }
      });
    });
    $(tagEditor.container).find('.add-tag-button').hide();
  },

  addTag: function() {
    var tagEditor = this;
    var tagName = $(tagEditor.inputField).val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');
    if (tagName) {
      if (this.hasTag(tagName)) {
        this.enable(this.getTagByName(tagName));
      } else {
        $(tagEditor.container).find('.tags').append('<span class="tag"><input type="checkbox" name="tag-'+tagName+'" value="1" checked="checked"><span class="name">'+tagName+'</span></span>');
        tagEditor.findTags();
      }
    }
    $(tagEditor.inputField).val('');
  },

  findTags: function(permanentize) {
    var tagEditor = this;
    $(this.container).find('.tag').each(function () {
      var tag = this;
      if (!tag.tagEditorApplied) {
        tag.checkBox = $(tag).find('input[type=checkbox]').get(0);
        tag.name = $(tag).find('.name').text();
        if(tagEditor.isChecked(tag)){
          tag.enabled = true;
          $(tag).addClass('enabled');
        } else {
          tag.enabled = false;
        }
        $(tag).click(function () {
          tagEditor.toggle(tag);
        });
        tagEditor.tags[tagEditor.tags.length] = tag;
        tag.tagEditorApplied = true;
      }
    });
    tagEditor.serializeTags();
  },

  hasTag: function(tagName) {
    var hasTag = false;
    $(this.tags).each(function () {
      if (tagName.toLowerCase() === this.name.toLowerCase()) {
        hasTag = true;
      }
    });
    return hasTag;
  },

  setEnabled: function(tag, enabled) {
    tag.enabled = enabled;
    if (tag.enabled) {
      $(tag).addClass('enabled');
    } else {
      $(tag).removeClass('enabled');
    }
    $(tag.checkBox).attr('checked', tag.enabled);
    this.serializeTags();
  },

  toggle: function(tag) {
    if (tag.enabled) {
      this.disable(tag);
    } else {
      this.enable(tag);
    }
  },

  enable: function(tag) {
    this.setEnabled(tag, true);
  },

  disable: function(tag) {
    this.setEnabled(tag, false);
  },

  getTagByName: function(tagName) {
    var tag = null;
    $(this.tags).each(function(){
      if (this.name.toLowerCase() === tagName.toLowerCase()) {
        tag = this;
      }
    });
    return tag;
  },

  isChecked: function(tag) {
    return $(tag.checkBox).attr('checked');
  },

  enabledTags: function() {
    var enabledTags = Array();
    $(this.tags).each(function() {
      if (this.enabled) {
        enabledTags[enabledTags.length] = this;
      }
    });
    return enabledTags;
  },

  serializeTags: function() {
    var tagNames = Array();
    $(this.enabledTags()).each(function() {
      tagNames[tagNames.length] = '"' + this.name.replace('"', '\\"') + '"';
    });
    $(this.serializeField).val('['+tagNames.join(', ')+']');
    $(this.container).find('.add-tag').attr('disabled', false);
  }
});

// Apply the tag editor to each instance
$(function() {
  $('.tag-editor').each(function() {
    this.tagEditor = new TagEditor(this);
  });
});