jQuery cleditor plugin: creating a new button

Using cleditor, I'm trying to set up a custom button with the following code:

(function($) {
    $.cleditor.buttons.link_species = {
        name: "link_species",
        image: "fish.gif",
        title: "Species Link",
        command: "inserthtml",
        popupName: "link_species",
        popupClass: "cleditorPrompt",
        popupContent: "Genus: <input type='text' size='15'> Species: <input type='text' size='15'><br />Remove italics? <input type='checkbox' value='remove'>&nbsp;<input type='button' value='Ok' />",
        buttonClick: link_speciesClick
    };

  // Handle the hello button click event
  function link_speciesClick(e, data) {
    // Wire up the submit button click event
    $(data.popup).children(":button")
      .unbind("click")
      .bind("click", function(e) {

        // Get the editor
        var editor = data.editor;

        var $text = $(data.popup).find(":text"),
          genus = $text[0].value,
          species = $text[1].value;

        var slug = genus + '-' + species;
        slug = htmlEntities(slug);

        var link = '/dev/species/' + slug + '/';
        var rel = link + '?preview=true';

        var display = firstUpper(genus) + ' ' + species;

        // Get the entered name
        var html = '<a href="' + link + '" rel="' + rel + '">' + display + '</a>';

        if ( !$(data.popup).find(":checkbox").is(':checked') ) {
            html = '<em>' + html + '</em>';
        }

        // Insert some html into the document
        editor.execCommand(data.command, html, null, data.button);

        // Hide the popup and set focus back to the editor
        editor.hidePopups();
        editor.focus();
      });
  }
})(jQuery);

It's a WordPress website, and the directory structure is something like this:

/wp-content/plugins/sf-species-profile/cleditor

Within there I have all the cleditor files and config.js.This file is where the above code is stored.

I also have an images folder containing a 24*24 fish.gif file.

For some reason, when I run this code, I get the following error:

[firefox]
a is undefined
<<myurl>>/wp-content/plugins/sf-species-profiles/cleditor/jquery.cleditor.min.js?ver=3.3.1
Line 17

[chrome]
Uncaught TypeError: Cannot read property 'length' of undefined

If I change the "image" argument to image:"" the same image for "B" appears, but the plugin works without error.

Does anyone have any ideas what may be wrong?

It would be easier to debug with the non minimized version. You can get it from here: http://premiumsoftware.net/cleditor/ (zip)

There are 2 functions that include a length call in the code that ends up in line 17 of the minimized code. One in the function hex(s) that processes color. The other is the the imagePath function.

function imagesPath() {
  var cssFile = "jquery.cleditor.css",
  href = $("link[href$='" + cssFile +"']").attr("href");
  return href.substr(0, href.length - cssFile.length) + "images/";
}

It could throw an error of the type you have if your rendered html doesn't include a line like "<link rel="stylesheet" type="text/css" href="path/to/jquery.cleditor.css" />". (Href would then be undefined.)

For wordpress integration, you may find it easier to setup when using the wordpress plugin version of cleditor.