(function($){
  // plugin definition
  $.fn.textileContent = function(options) {
    // Extend our default options with those provided.
    var opts = $.extend({}, $.fn.textileContent.defaults, options);
    // Find the default textile content element
    if (opts.defaultMsg) {
      defaultMsgElm = $('#'+opts.defaultMsg);
      if (defaultMsgElm.size() > 0)
        buildEditButton();
      else
        defaultMsgElm = null;
    }
    var fieldElm = this.get(0);
    // Load fibre options from server and build inputs
    $.get('/designers/'+opts.designerId+'/fibre_options', function(data){
      optionsHtml = data;
      // Build list of inputs
      buildInputs(fieldElm);
      updateDeleteButtons();
    });
  };

  $.fn.textileContent.defaults = {
    defaultMsg: null,
    designerId: null
  };
  
  var defaultMsgElm;
  var editButton;
  var container;
  var originalField; // raw element
  var addButton;
  var optionsHtml = '';
  
  function buildEditButton() {
    editButton = $("<a href='#' class='edit'>edit</a>");
    defaultMsgElm.append(editButton);
    editButton.click(function() {
      container.show();
      defaultMsgElm.hide();
      return false;
    });
  };
  
  function buildInputs(fieldElm) {
    // container div
    originalField = fieldElm;
    $(originalField).hide();
    
    container = $("<div class='textile-contents'></div>");
    
    // get the add button ready
    addButton = $("<a href='#' class='add'>new</a>");
    
    // build lines
    $.each(originalField.value.split('|'), function(i, pair) {
      bits = pair.split('=');
      buildInputLine(bits[0], bits[1]||'');
    })
    
    $(originalField).after(container);
    
    // hide inputs if we're showing 
    if (defaultMsgElm) {
      if (originalField.value.blank()) {
        container.hide();
      }
      else
        defaultMsgElm.hide();
    }
  };
  
  function rebuildString() {
    originalField.value = $.map(container.find(".textile-content"), function(elm) {
      textile = $(elm).find('select.textile').get(0).value;
      content = $(elm).find('input.content').get(0).value;
      textile = textile.replace(/[=|]/g, '');
      content = content.replace(/[=|]/g, '');
      if (textile.strip() == '')
        return null;
      else
        return textile+'='+content;
    }).join('|');
    $(originalField).change();
  };
  
  function remainingPercentage() {
    value = 100;
    container.find(".textile-content input.content").each(function(i, elm) {
      value -= parseInt(elm.value);
    });
    return value >= 0 ? value : 0;
  };
  
  function countInputLines() {
    return container.find(".textile-content").size();
  };
  
  function deleteClicked(event) {
    if (countInputLines() == 1 && defaultMsgElm) {
      // Hide input container and show default msg elm
      container.find("input").each(function (i, elm) {elm.value = ''});
      container.find("select").each(function (i, elm) {elm.selectedIndex = 0});
      rebuildString();
      container.hide();
      defaultMsgElm.show();
    } else if (countInputLines() > 1) {
      event.data.inputs.remove();
      rebuildString();
      moveAddButton();
      updateDeleteButtons();
    }
    return false;
  };
  
  function addClicked(event) {
    buildInputLine('', remainingPercentage());
    container.find("select.textile:last").get(0).focus();
    return false;
  };
  
  function buildInputLine(textile, content) {
    textileInput = $("<select class='textile'></select>");
    textileInput.html(optionsHtml);
    contentInput = $("<input type='text' size='3' class='content'/>");
    textileInput.change(function() {
      contentInput.focus();
    });
    deleteButton = $("<a href='#' class='delete'>delete</a>");
    inputs = $("<div class='textile-content'></div>");
    //inputs.css('border', '2px solid blue');
    textileInput.get(0).value = textile;
    contentInput.get(0).value = content;
    textileInput.bind("change keyup", function(e) {rebuildString()});
    contentInput.bind("change keyup", function(e) {rebuildString()});
    deleteButton.bind("click", {inputs:inputs}, deleteClicked);

    inputs.append(textileInput);
    inputs.append(" @ ");
    inputs.append(contentInput);
    inputs.append(" % ");
    inputs.append(deleteButton);
    inputs.append(" ");
    $(container).append(inputs);
    
    moveAddButton();
    updateDeleteButtons();
  };
  
  function moveAddButton() {
    addButton.remove().appendTo(container.find('.textile-content:last'));
    addButton.bind("click", addClicked);
  };
  
  function updateDeleteButtons() {
    if (countInputLines() == 1 && !defaultMsgElm) {
      container.find("a.delete").hide();
    } else {
      container.find("a.delete").show();
    }
  };
  
})(jQuery);