comparison test-data/meme_output_test2.html @ 8:8436beac5eed draft default tip

planemo upload for repository https://github.com/galaxyproject/tools-iuc/tree/master/tools/meme commit 89ee0af6e955ff964b7984d77ad536e0a9154278

7:47e7ae719765

      <script>
      {
        $("opt_mod").className = data.options.mod;
        $("opt_objfun").textContent = data.options.objfun;
        $("opt_spfun").textContent = data.options.spfun;

8:8436beac5eed

 * See http://stackoverflow.com/a/5450113/66387
 * Does string multiplication like the perl x operator.
 */
function string_mult(pattern, count) {
    if (count < 1) return '';
    var result = '';
    while (count > 1) {
        if (count & 1) result += pattern;
        count >>= 1, pattern += pattern;
    }
    return result + pattern;
}

/*
 * See http://stackoverflow.com/questions/814613/how-to-read-get-data-from-a-url-using-javascript
 * Slightly modified with information from
 * https://developer.mozilla.org/en/DOM/window.location
 */
function parse_params() {
  "use strict";
  var search, queryStart, queryEnd, query, params, nvPairs, i, nv, n, v;
  search = window.location.search;
  queryStart = search.indexOf("?") + 1;
  queryEnd   = search.indexOf("#") + 1 || search.length + 1;
  query      = search.slice(queryStart, queryEnd - 1);

  if (query === search || query === "") return {};

  params  = {};
  nvPairs = query.replace(/\+/g, " ").split("&");

  for (i = 0; i < nvPairs.length; i++) {
    nv = nvPairs[i].split("=");
    n  = decodeURIComponent(nv[0]);
    v  = decodeURIComponent(nv[1]);
    // allow a name to be used multiple times
    // storing each value in the array
    if (!(n in params)) {
      params[n] = [];
    }
    params[n].push(nv.length === 2 ? v : null);
  }
  return params;
}

/*
 * coords
 *
 * Calculates the x and y offset of an element.
 * From http://www.quirksmode.org/js/findpos.html
 * with alterations to take into account scrolling regions
 */
function coords(elem) {
  var myX = myY = 0;
  if (elem.getBoundingClientRect) {
    var rect;
    rect = elem.getBoundingClientRect();
    myX = rect.left + ((typeof window.pageXOffset !== "undefined") ?
        window.pageXOffset : document.body.scrollLeft);
    myY = rect.top + ((typeof window.pageYOffset !== "undefined") ?
        window.pageYOffset : document.body.scrollTop);
  } else {
    // this fall back doesn't properly handle absolutely positioned elements
    // inside a scrollable box
    var node;
    if (elem.offsetParent) {
      // subtract all scrolling
      node = elem;
      do {
        myX -= node.scrollLeft ? node.scrollLeft : 0;
        myY -= node.scrollTop ? node.scrollTop : 0;
      } while (node = node.parentNode);
      // this will include the page scrolling (which is unwanted) so add it back on
      myX += (typeof window.pageXOffset !== "undefined") ? window.pageXOffset : document.body.scrollLeft;
      myY += (typeof window.pageYOffset !== "undefined") ? window.pageYOffset : document.body.scrollTop;
      // sum up offsets
      node = elem;
      do {
        myX += node.offsetLeft;
        myY += node.offsetTop;
      } while (node = node.offsetParent);
    }
  }
  return [myX, myY];
}

/*
 * position_popup
 *
 * Positions a popup relative to an anchor element.
 *
 * The available positions are:
 * 0 - Centered below the anchor.
 */
function position_popup(anchor, popup, position) {
  "use strict";
  var a_x, a_y, a_w, a_h, p_x, p_y, p_w, p_h;
  var a_xy, spacer, margin, scrollbar, page_w;
  // define constants
  spacer = 5;
  margin = 15;
  scrollbar = 15;
  // define the positions and widths
  a_xy = coords(anchor);
  a_x = a_xy[0];
  a_y = a_xy[1];
  a_w = anchor.offsetWidth;
  a_h = anchor.offsetHeight;
  p_w = popup.offsetWidth;
  p_h = popup.offsetHeight;
  page_w = null;
  if (window.innerWidth) {
    page_w = window.innerWidth;
  } else if (document.body) {
    page_w = document.body.clientWidth;
  }
  // check the position type is defined
  if (typeof position !== "number") {
    position = 0;
  }
  // calculate the popup position
  switch (position) {
    case 1:
      p_x = a_x + a_w + spacer;
      p_y = a_y + (a_h / 2) - (p_h / 2);
      break;
    case 0:
    default:
      p_x = a_x + (a_w / 2) - (p_w / 2);
      p_y = a_y + a_h + spacer;
      break;
  }
  // constrain the popup position
  if (p_x < margin) {
    p_x = margin;
  } else if (page_w != null && (p_x + p_w) > (page_w - margin - scrollbar)) {
    p_x = page_w - margin - scrollbar - p_w;
  }
  if (p_y < margin) {
    p_y = margin;
  }
  // position the popup
  popup.style.left = p_x + "px";
  popup.style.top = p_y + "px";
}

function lookup_help_popup(popup_id) {
  var _body, pop, info;
  pop = document.getElementById(popup_id);
  if (pop == null) {
    _body = document.getElementsByTagName("body")[0];
    pop = document.createElement("div");
    pop.className = "pop_content";
    pop.id = popup_id;
    pop.style.backgroundColor = "#FFC";
    pop.style.borderColor = "black";
    info = document.createElement("p");
    info.style.fontWeight = "bold";
    info.appendChild(document.createTextNode("Error: No popup for topic \"" + popup_id + "\"."));
    pop.appendChild(info);
    // this might cause problems with the menu, but as this only happens
    // when something is already wrong I don't think that's too much of a problem
    _body.insertBefore(pop, _body.firstChild);
  }
  if (document.getElementsByTagName('body')[0].hasAttribute("data-autobtns")) {
    if (!/\bauto_buttons\b/.test(pop.className)) {
      pop.className += " auto_buttons";
      var back_btn_sec = document.createElement("div");
      back_btn_sec.className = "nested_only pop_back_sec";
      var back_btn = document.createElement("span");
      back_btn.className = "pop_back";
      back_btn.appendChild(document.createTextNode("<< back"));
      back_btn.addEventListener("click", function(e) {
        help_return();
      }, false);
      back_btn_sec.appendChild(back_btn);
      pop.insertBefore(back_btn_sec, pop.firstChild);
      var close_btn_sec = document.createElement("div");
      close_btn_sec.className = "pop_close_sec";
      var close_btn = document.createElement("span");
      close_btn.className = "pop_close";
      close_btn.appendChild(document.createTextNode("close"));
      close_btn.addEventListener("click", function(e) {
        help_popup();
      }, false);
      close_btn_sec.appendChild(close_btn);
      pop.appendChild(close_btn_sec);
    }
  }
  return pop;
}

/*
 * help_popup
 *
 * Moves around help pop-ups so they appear
 * below an activator.
 */
function help_popup(activator, popup_id) {
  "use strict";
  var pop;
  // set default values
  if (typeof help_popup.popup === "undefined") {
    help_popup.popup = [];
  }
  if (typeof help_popup.activator === "undefined") {
    help_popup.activator = null;
  }
  var last_pop = (help_popup.popup.length > 0 ? help_popup.popup[help_popup.popup.length - 1] : null);
  if (typeof(activator) == "undefined") { // no activator so hide
    if (last_pop != null) {
      last_pop.style.display = 'none';
      help_popup.popup = [];
    }
    return;
  }
  pop = lookup_help_popup(popup_id);
  if (pop == last_pop) {
    if (activator == help_popup.activator) {
      //hide popup (as we've already shown it for the current help button)
      last_pop.style.display = 'none';
      help_popup.popup = [];
      return; // toggling complete!
    }
  } else if (last_pop != null) {
    //activating different popup so hide current one
    last_pop.style.display = 'none';
  }
  help_popup.popup = [pop];
  help_popup.activator = activator;
  toggle_class(pop, "nested", false);
  //must make the popup visible to measure it or it has zero width
  pop.style.display = 'block';
  position_popup(activator, pop);
}

/*
 * help_refine
 * 
 * Intended for links within a help popup. Stores a stack of state so
 * you can go back.
 */
function help_refine(popup_id) {
  if (help_popup.popup == null || help_popup.popup.length == 0 || help_popup.activator == null) {
    //throw new Error("Cannot refine a help popup when one is not shown!");
    var pop = lookup_help_popup(popup_id);
    var act_id = popup_id + '_act';
    var activator = document.getElementById(act_id);
    help_popup(activator, popup_id);
  }
  var pop = lookup_help_popup(popup_id);
  var last_pop = help_popup.popup[help_popup.popup.length - 1];
  if (pop == last_pop) return; // slightly odd, but no real cause for alarm
  help_popup.popup.push(pop);
  toggle_class(pop, "nested", true);
  last_pop.style.display = "none";
  //must make the popup visible to measure it or it has zero width
  pop.style.display = "block";
  position_popup(help_popup.activator, pop);
}

/*
 * help_return
 * 
 * Intended for links within a help popup. Stores a stack of state so
 * you can go back.
 */
function help_return() {
  if (help_popup.popup == null || help_popup.popup.length == 0 || help_popup.activator == null) {
    throw new Error("Can not return to a earlier help popup when one is not shown!");
  }
  var last_pop = help_popup.popup.pop();
  last_pop.style.display = "none";
  var pop = (help_popup.popup.length > 0 ? help_popup.popup[help_popup.popup.length - 1] : null);
  if (pop != null) {
    toggle_class(pop, "nested", help_popup.popup.length > 1);
    pop.style.display = "block";
    position_popup(help_popup.activator, pop);
  } else {
    help_popup.activator = null;
  }
}

/*
 * update_scroll_pad
 *
 * Creates padding at the bottom of the page to allow
 * scrolling of anything into view.
 */
function update_scroll_pad() {
  var page, pad;
  page = (document.compatMode === "CSS1Compat") ? document.documentElement : document.body;
  pad = $("scrollpad");
  if (pad === null) {
    pad = document.createElement("div");
    pad.id = 'scrollpad';
    document.getElementsByTagName('body')[0].appendChild(pad);
  }
  pad.style.height = Math.abs(page.clientHeight - 100) + "px";
}

function substitute_classes(node, remove, add) {
  "use strict";
  var list, all, i, cls, classes;
  list = node.className.split(/\s+/);
  all = {};
  for (i = 0; i < list.length; i++) {
    if (list[i].length > 0) all[list[i]] = true;
  }
  for (i = 0; i < remove.length; i++) {
    if (all.hasOwnProperty(remove[i])) {
      delete all[remove[i]];
    }
  }
  for (i = 0; i < add.length; i++) {
    all[add[i]] = true;
  }
  classes = "";
  for (cls in all) {
    classes += cls + " ";
  }
  node.className = classes;
}

/*
 * toggle_class
 *
 * Adds or removes a class from the node. If the parameter 'enabled' is not 
 * passed then the existence of the class will be toggled, otherwise it will be
 * included if enabled is true.
 */
function toggle_class(node, cls, enabled) {
  var classes = node.className;
  var list = classes.replace(/^\s+/, '').replace(/\s+$/, '').split(/\s+/);
  var found = false;
  for (var i = 0; i < list.length; i++) {
    if (list[i] == cls) {
      list.splice(i, 1);
      i--;
      found = true;
    }
  }
  if (typeof enabled == "undefined") {
    if (!found) list.push(cls);
  } else {
    if (enabled) list.push(cls);
  }
  node.className = list.join(" ");
}

/*
 * find_child
 *
 * Searches child nodes in depth first order and returns the first it finds
 * with the className specified.
 * TODO replace with querySelector
 */
function find_child(node, className) {
  var pattern;
  if (node == null || typeof node !== "object") {
    return null;
  }
  if (typeof className === "string") {
    pattern = new RegExp("\\b" + className + "\\b");
  } else {
    pattern = className;
  }
  if (node.nodeType == Node.ELEMENT_NODE && 
      pattern.test(node.className)) {
    return node;
  } else {
    var result = null;
    for (var i = 0; i < node.childNodes.length; i++) {
      result = find_child(node.childNodes[i], pattern);
      if (result != null) break;
    }
    return result;
  }
}

/*
 * find_parent
 *
 * Searches parent nodes outwards from the node and returns the first it finds
 * with the className specified.
 */
function find_parent(node, className) {
  var pattern;
  pattern = new RegExp("\\b" + className + "\\b");
  do {
    if (node.nodeType == Node.ELEMENT_NODE && 
        pattern.test(node.className)) {
      return node;
    }
  } while (node = node.parentNode);
  return null;
}

/*
 * find_parent_tag
 *
 * Searches parent nodes outwards from the node and returns the first it finds
 * with the tag name specified. HTML tags should be specified in upper case.
 */
function find_parent_tag(node, tag_name) {
  do {
    if (node.nodeType == Node.ELEMENT_NODE && node.tagName == tag_name) {
      return node;
    }
  } while (node = node.parentNode);
  return null;
}

/*
 * __toggle_help
 *
 * Uses the 'topic' property of the this object to
 * toggle display of a help topic.
 *
 * This function is not intended to be called directly.
 */
function __toggle_help(e) {
  if (!e) e = window.event;
  if (e.type === "keydown") {
    if (e.keyCode !== 13 && e.keyCode !== 32) {
      return;
    }
    // stop a submit or something like that
    e.preventDefault();
  }

  help_popup(this, this.getAttribute("data-topic"));
}

function setup_help_button(button) {
  "use strict";
  var topic;
  if (button.hasAttribute("data-topic")) {
    topic = button.getAttribute("data-topic");
    if (document.getElementById(topic) != null) {
      button.tabIndex = "0"; // make keyboard selectable
      button.addEventListener("click", function() {
        help_popup(button, topic);
      }, false);
      button.addEventListener("keydown", function(e) {
        // toggle only on Enter or Spacebar, let other keys do their thing
        if (e.keyCode !== 13 && e.keyCode !== 32) return;
        // stop a submit or something like that
        e.preventDefault();
        help_popup(button, topic);
      }, false);
    } else {
      button.style.visibility = "hidden";
    }
  }
  button.className += " active";
}

/*
 * help_button
 *
 * Makes a help button for the passed topic.
 */
function help_button(topic) {
  var btn = document.createElement("div");
  btn.className = "help";
  btn.setAttribute("data-topic", topic);
  setup_help_button(btn);
  return btn;
}

/*
 * prepare_download
 *
 * Sets the attributes of a link to setup a file download using the given content.
 * If no link is provided then create one and click it.
 */
function prepare_download(content, mimetype, filename, link) {
  "use strict";
  // if no link is provided then create one and click it
  var click_link = false;
  if (!link) {
    link = document.createElement("a");
    click_link = true;
  }
  try {
    // Use a BLOB to convert the text into a data URL.
    // We could do this manually with a base 64 conversion.
    // This will only be supported on modern browsers,
    // hence the try block.
    var blob = new Blob([content], {type: mimetype});
    var reader = new FileReader();
    reader.onloadend = function() {
      // If we're lucky the browser will also support the download
      // attribute which will let us suggest a file name to save the link.
      // Otherwise it is likely that the filename will be unintelligible. 
      link.setAttribute("download", filename);
      link.href = reader.result;
      if (click_link) {
        // must add the link to click it
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    }
    reader.readAsDataURL(blob);
  } catch (error) {
    if (console && console.log) console.log(error);
    // probably an old browser
    link.href = "";
    link.visible = false;
  }
}

/*
 * add_cell
 *
 * Add a cell to the table row.
 */
function add_cell(row, node, cls, click_action) {
  var cell = row.insertCell(row.cells.length);
  if (node) cell.appendChild(node);
  if (cls && cls !== "") cell.className = cls;
  if (click_action) cell.addEventListener("click", click_action, false);
}

/*
 * add_header_cell
 *
 * Add a header cell to the table row.
 */
function add_header_cell(row, node, help_topic, cls, colspan, is_new) {
  var th = document.createElement("th");
  if (node) th.appendChild(node);
  if (help_topic && help_topic !== "") th.appendChild(help_button(help_topic));
  if (is_new && is_new !== "") {
    var br = document.createElement("span");
    br.innerHTML = "<br>";
    th.appendChild(br);
    var new_icon = document.createElement("img");
    new_icon.src = new_icon_src;
    new_icon.alt = "NEW";
    th.appendChild(new_icon);
  }
  if (cls && cls !== "") th.className = cls;
  if (typeof colspan == "number" && colspan > 1) th.colSpan = colspan;
  row.appendChild(th);
}

/*
 * add_text_cell
 *
 * Add a text cell to the table row.
 */
function add_text_cell(row, text, cls, action) {
  var node = null;
  if (typeof(text) != 'undefined') node = document.createTextNode(text);
  add_cell(row, node, cls, action);
}

/*
 * add_text_header_cell
 *
 * Add a text header cell to the table row.
 */
function add_text_header_cell(row, text, help_topic, cls, action, colspan, is_new) {
  var node = null;
  if (typeof(text) != 'undefined') {
    var nbsp = (help_topic ? "\u00A0" : "");
    var str = "" + text;
    var parts = str.split(/\n/);
    if (parts.length === 1) {
      if (action) {
        node = document.createElement("span");
        node.appendChild(document.createTextNode(str + nbsp));
      } else {
        node = document.createTextNode(str + nbsp);
      }
    } else {
      node = document.createElement("span");
      for (var i = 0; i < parts.length; i++) {
        if (i !== 0) {
          node.appendChild(document.createElement("br"));
        }
        node.appendChild(document.createTextNode(parts[i]));
      }
    }
    if (action) {
      node.addEventListener("click", action, false);
      node.style.cursor = "pointer";
    }
  }
  add_header_cell(row, node, help_topic, cls, colspan, is_new);
}

function setup_help() {
  "use strict";
  var help_buttons, i;
  help_buttons = document.querySelectorAll(".help:not(.active)");
  for (i = 0; i < help_buttons.length; i++) {
    setup_help_button(help_buttons[i]);
  }
}

function setup_scrollpad() {
  "use strict";
  if (document.getElementsByTagName('body')[0].hasAttribute("data-scrollpad") && document.getElementById("scrollpad") == null) {
    window.addEventListener("resize", update_scroll_pad, false);
    update_scroll_pad();
  }
}

// anon function to avoid polluting global scope
(function() {
  "use strict";
  window.addEventListener("load", function load(evt) {
    window.removeEventListener("load", load, false);
    setup_help();
    setup_scrollpad();
  }, false);
})();

/*
 *  make_link
 *
 *  Creates a text node and if a URL is specified it surrounds it with a link.
 *  If the URL doesn't begin with "http://" it automatically adds it, as
 *  relative links don't make much sense in this context.
 */
function make_link(text, url) {
  var textNode = null;
  var link = null;
  if (typeof text !== "undefined" && text !== null) textNode = document.createTextNode(text);
  if (typeof url === "string") {
    if (url.indexOf("//") == -1) {
      url = "http://" + url;
    }
    link = document.createElement('a');
    link.href = url;
    if (textNode) link.appendChild(textNode);
    return link;
  }
  return textNode;
}

//
// Function to create an HTML paragraph describing the 
// MEME Suite background model source.
//
function make_background_source(title, source, text) {
  var paraNode = document.createElement("P");
  var titleNode = document.createElement("B");
  var textNode1 = document.createTextNode("\u00A0\u00A0\u00A0\u00A0" + title + ": ");
  titleNode.appendChild(textNode1);
  var source_text = ((source == "--motif--") ? "the (first) motif file" : (source == "--nrdb--") ? "an old version of the NCBI non-redundant database" : (source == "--uniform--") ? "the uniform model" : (source == "--query--") ? "the query file" : (source == "--sequences--") ? "built from the (primary) sequences" : (source == "--control--") ? "built from the control (negative) sequences" : ((source == "--negatives--") ? "built from the negative (control) sequences" : "the file '" + source + "'"));
  if (text) { return source_text; }
  var textNode2 = document.createTextNode(source_text);
  paraNode.appendChild(titleNode);
  paraNode.appendChild(textNode2);
  return paraNode;
}

// Function to create a help button
function make_help_button(container, help_topic) {
  container.appendChild(help_button(help_topic));
}

// Function to toggle display.
function change_display(id) {
  var element=document.getElementById(id);
  element.style.display=(element.style.display=='none') ? element.style.display='inline' : element.style.display='none';
}
</script>
    <script>
      // 
      // return true if any part of the passed element is visible in the viewport
      //
      function element_in_viewport(elem) {
        var rect;
        try {
          rect = elem.getBoundingClientRect();
        } catch (e) {
          return false;
        }
        return (
            rect.top < (window.innerHeight || document.body.clientHeight) &&
            rect.bottom > 0 &&
            rect.left < (window.innerWidth || document.body.clientWidth) &&
            rect.right > 0
            );
      }

      //
      // Functions to delay a drawing task until it is required or it would not lag the display to do so
      //

      // a list of items still to be drawn
      var drawable_list = [];
      // the delay between drawing objects that are not currently visible
      var draw_delay = 1;
      // the delay after a user interaction
      var user_delay = 300;
      // the delay after a user has stopped scrolling and is viewing the stuff drawn on the current page
      var stop_delay = 300;
      // the timer handle; allows resetting of the timer after user interactions
      var draw_timer = null;

      //
      // Drawable
      //
      // elem - a page element which defines the position on the page that drawing is to be done
      // task - an object with the method run which takes care of painting the object
      //
      var Drawable = function(elem, task) {
        this.elem = elem;
        this.task = task;
      }

      //
      // Drawable.is_visible
      //
      // Determines if the element is visible in the viewport
      //
      Drawable.prototype.is_visible = function() {
        return element_in_viewport(this.elem);
      }

      //
      // Drawable.run
      //
      // Run the task held by the drawable
      Drawable.prototype.run = function() {
        if (this.task) this.task.run();
        this.task = null;
      }

      //
      // Drawable.run
      //
      // Run the task iff visible
      // returns true if the task ran or has already run
      Drawable.prototype.run_visible = function() {
        if (this.task) {
          if (element_in_viewport(this.elem)) {
            this.task.run();
            this.task = null;
            return true;
          }
          return false;
        } else {
          return true;
        }
      }

      //
      // draw_on_screen
      //
      // Checks each drawable object and draws those on screen.
      //
      function draw_on_screen() {
        var found = false;
        for (var i = 0; i < drawable_list.length; i++) {
          if (drawable_list[i].run_visible()) {
            drawable_list.splice(i--, 1);
            found = true;
          }
        }
        return found;
      }

      //
      // process_draw_tasks
      //
      // Called on a delay to process the next available
      // draw task.
      //
      function process_draw_tasks() {
        var delay = draw_delay;
        draw_timer = null;
        if (drawable_list.length == 0) return; //no more tasks
        if (draw_on_screen()) {
          delay = stop_delay; //give the user a chance to scroll
        } else {
          //get next task
          var drawable = drawable_list.shift();
          drawable.task.run();
        }
        //allow UI updates between tasks
        draw_timer = window.setTimeout("process_draw_tasks()", delay);
      }

      //
      // delayed_process_draw_tasks
      //
      // Call process_draw_tasks after a short delay.
      // The delay serves to group multiple redundant events.       
      // Should be set as event handler for onscroll and onresize.
      //
      function delayed_process_draw_tasks() {
        //reset the timer
        if (drawable_list.length > 0) { 
          if (draw_timer != null) clearTimeout(draw_timer);
          draw_timer = window.setTimeout("process_draw_tasks()", user_delay);
        }
      }

      //
      // add_draw_task
      //
      // Add a drawing task to be called immediately if it is
      // visible, or to be called on a delay to reduce stuttering
      // effect on the web browser.
      function add_draw_task(elem, task) {
        drawable = new Drawable(elem, task);
        if (drawable.is_visible()) {
          task.run();
        } else {
          drawable_list.push(drawable);
          //reset timer
          if (draw_timer != null) clearTimeout(draw_timer);
          draw_timer = window.setTimeout("process_draw_tasks()", user_delay);
        }
      }

</script>
    <script>
function motif_logo_template(inputs) {
  function _input(name) {
    if (typeof inputs[name] === "undefined") {
      throw new Error("Missing template variable: " + name);
    }
    return inputs[name];
  }
  return (
"%!PS-Adobe-3.0 EPSF-3.0\n" +
"%%Title: Sequence Logo : " + _input("TITLE") + "\n" +
"%%Creator: " + _input("CREATOR") + "\n" +
"%%CreationDate: " + _input("CREATIONDATE") + "\n" +
"%%BoundingBox:   0  0  " + _input("BOUNDINGWIDTH") + " " + _input("BOUNDINGHEIGHT") + " \n" +
"%%Pages: 0\n" +
"%%DocumentFonts: \n" +
"%%EndComments\n" +
"\n" +
"% ---- CONSTANTS ----\n" +
"\/cmfactor 72 2.54 div def % defines points -> cm conversion\n" +
"\/cm {cmfactor mul} bind def % defines centimeters\n" +
"\n" +
"% ---- VARIABLES ----\n" +
"\n" +
"% NA = Nucleic Acid, AA = Amino Acid\n" +
"\/logoType (" + _input("LOGOTYPE") + ") def \n" +
"\n" +
"\/logoTitle (" + _input("TITLE") + ") def\n" +
"\n" +
"% Dimensions in cm\n" +
"\/logoWidth " + _input("LOGOWIDTH") + " cm def\n" +
"\/logoHeight " + _input("LOGOLINEHEIGHT") + " cm def\n" +
"\/totalHeight " + _input("LOGOHEIGHT") + " cm def\n" +
"\n" +
"\/yaxis " + _input("YAXIS") + " def\n" +
"\/yaxisLabel (" + _input("YAXISLABEL") + ") def\n" +
"\/yaxisBits  " + _input("BARBITS") + " def % bits\n" +
"\/yaxisTicBits " + _input("TICBITS") + " def\n" +
"\n" +
"\/xaxis " + _input("NUMBERING") + " def\n" +
"\/xaxisLabel (" + _input("XAXISLABEL") + ") def\n" +
"\/showEnds (" + _input("SHOWENDS") + ") def \n" +
"\n" +
"\/showFineprint true def\n" +
"\/fineprint (" + _input("FINEPRINT") + ") def\n" +
"\n" +
"\/charsPerLine " + _input("CHARSPERLINE") + " def\n" +
"\n" +
"\/showingBox " + _input("SHOWINGBOX") + " def    \n" +
"\/shrinking false def   % true falses\n" +
"\/shrink  1.0 def\n" +
"\/outline " + _input("OUTLINE") + " def\n" +
"\n" +
"\/IbeamFraction  " + _input("ERRORBARFRACTION") + " def\n" +
"\/IbeamGray      0.50 def\n" +
"\/IbeamLineWidth 0.5 def\n" +
"\n" +
"\/fontsize       " + _input("FONTSIZE") + " def\n" +
"\/titleFontsize  " + _input("TITLEFONTSIZE") + " def\n" +
"\/smallFontsize  " + _input("SMALLFONTSIZE") + " def\n" +
"\n" +
"\/topMargin      " + _input("TOPMARGIN") + " cm def\n" +
"\/bottomMargin   " + _input("BOTTOMMARGIN") + " cm def\n" +
"\n" +
"\/defaultColor [0 0 0] def \n" +
"\n" +
_input("COLORDICT") + "\n" +
"\n" +
"\/colorDict fullColourDict def\n" +
"\n" +
"% ---- DERIVED PARAMETERS ----\n" +
"\n" +
"\/leftMargin\n" +
"  fontsize 3.5 mul\n" +
"\n" +
"def \n" +
"\n" +
"\/rightMargin \n" +
"  %Add extra room if showing ends\n" +
"  showEnds (false) eq { fontsize}{fontsize 1.5 mul} ifelse\n" +
"def\n" +
"\n" +
"\/yaxisHeight \n" +
"  logoHeight \n" +
"  bottomMargin sub  \n" +
"  topMargin sub\n" +
"def\n" +
"\n" +
"\/ticWidth fontsize 2 div def\n" +
"\n" +
"\/pointsPerBit yaxisHeight yaxisBits div  def\n" +
"\n" +
"\/stackMargin 1 def\n" +
"\n" +
"% Do not add space aroung characters if characters are boxed\n" +
"\/charRightMargin \n" +
"  showingBox { 0.0 } {stackMargin} ifelse\n" +
"def\n" +
"\n" +
"\/charTopMargin \n" +
"  showingBox { 0.0 } {stackMargin} ifelse\n" +
"def\n" +
"\n" +
"\/charWidth\n" +
"  logoWidth\n" +
"  leftMargin sub\n" +
"  rightMargin sub\n" +
"  charsPerLine div\n" +
"  charRightMargin sub\n" +
"def\n" +
"\n" +
"\/charWidth4 charWidth 4 div def\n" +
"\/charWidth2 charWidth 2 div def\n" +
"\n" +
"\/stackWidth \n" +
"  charWidth charRightMargin add\n" +
"def\n" +
" \n" +
"\/numberFontsize \n" +
"  fontsize charWidth lt {fontsize}{charWidth} ifelse\n" +
"def\n" +
"\n" +
"% movements to place 5'\/N and 3'\/C symbols\n" +
"\/leftEndDeltaX  fontsize neg         def\n" +
"\/leftEndDeltaY  fontsize 1.5 mul neg def\n" +
"\/rightEndDeltaX fontsize 0.25 mul     def\n" +
"\/rightEndDeltaY leftEndDeltaY        def\n" +
"\n" +
"% Outline width is proporional to charWidth, \n" +
"% but no less that 1 point\n" +
"\/outlinewidth \n" +
"  charWidth 32 div dup 1 gt  {}{pop 1} ifelse\n" +
"def\n" +
"\n" +
"\n" +
"% ---- PROCEDURES ----\n" +
"\n" +
"\/StartLogo { \n" +
"  % Save state\n" +
"  save \n" +
"  gsave \n" +
"\n" +
"  % Print Logo Title, top center \n" +
"  gsave \n" +
"    SetStringFont\n" +
"\n" +
"    logoWidth 2 div\n" +
"    logoTitle\n" +
"    stringwidth pop 2 div sub\n" +
"    totalHeight\n" +
"    titleFontsize sub\n" +
"    moveto\n" +
"\n" +
"    logoTitle\n" +
"    show\n" +
"  grestore\n" +
"\n" +
"  % Print X-axis label, bottom center\n" +
"  gsave\n" +
"    SetStringFont\n" +
"\n" +
"    logoWidth 2 div\n" +
"    xaxisLabel\n" +
"    stringwidth pop 2 div sub\n" +
"    0\n" +
"    titleFontsize 3 div\n" +
"    add\n" +
"    moveto\n" +
"\n" +
"    xaxisLabel\n" +
"    show\n" +
"  grestore\n" +
"\n" +
"  % Show Fine Print\n" +
"  showFineprint {\n" +
"    gsave\n" +
"      SetSmallFont\n" +
"      logoWidth\n" +
"        fineprint stringwidth pop sub\n" +
"        smallFontsize sub\n" +
"          smallFontsize 3 div\n" +
"      moveto\n" +
"    \n" +
"      fineprint show\n" +
"    grestore\n" +
"  } if\n" +
"\n" +
"  % Move to lower left corner of last line, first stack\n" +
"  leftMargin bottomMargin translate\n" +
"\n" +
"  % Move above first line ready for StartLine \n" +
"  0 totalHeight translate\n" +
"\n" +
"  SetLogoFont\n" +
"} bind def\n" +
"\n" +
"\/EndLogo { \n" +
"  grestore \n" +
"  showpage \n" +
"  restore \n" +
"} bind def\n" +
"\n" +
"\n" +
"\/StartLine { \n" +
"  % move down to the bottom of the line:\n" +
"  0 logoHeight neg translate\n" +
"  \n" +
"  gsave \n" +
"    yaxis { MakeYaxis } if\n" +
"    xaxis { showEnds (true) eq {ShowLeftEnd} if } if\n" +
"} bind def\n" +
"\n" +
"\/EndLine{ \n" +
"    xaxis { showEnds (true) eq {ShowRightEnd} if } if\n" +
"  grestore \n" +
"} bind def\n" +
"\n" +
"\n" +
"\/MakeYaxis {\n" +
"  gsave    \n" +
"    stackMargin neg 0 translate\n" +
"    ShowYaxisBar\n" +
"    ShowYaxisLabel\n" +
"  grestore\n" +
"} bind def\n" +
"\n" +
"\n" +
"\/ShowYaxisBar { \n" +
"  gsave  \n" +
"    SetStringFont\n" +
"\n" +
"    \/str 10 string def % string to hold number  \n" +
"    \/smallgap stackMargin 2 div def\n" +
"\n" +
"    % Draw first tic and bar\n" +
"    gsave    \n" +
"      ticWidth neg 0 moveto \n" +
"      ticWidth 0 rlineto \n" +
"      0 yaxisHeight rlineto\n" +
"      stroke\n" +
"    grestore\n" +
"\n" +
"   \n" +
"    % Draw the tics\n" +
"    % initial increment limit proc for\n" +
"    0 yaxisTicBits yaxisBits abs %cvi\n" +
"    {\/loopnumber exch def\n" +
"\n" +
"      % convert the number coming from the loop to a string\n" +
"      % and find its width\n" +
"      loopnumber 10 str cvrs\n" +
"      \/stringnumber exch def % string representing the number\n" +
"\n" +
"      stringnumber stringwidth pop\n" +
"      \/numberwidth exch def % width of number to show\n" +
"\n" +
"      \/halfnumberheight\n" +
"         stringnumber CharBoxHeight 2 div\n" +
"      def\n" +
"\n" +
"      numberwidth % move back width of number\n" +
"      neg loopnumber pointsPerBit mul % shift on y axis\n" +
"      halfnumberheight sub % down half the digit\n" +
"\n" +
"      moveto % move back the width of the string\n" +
"\n" +
"      ticWidth neg smallgap sub % Move back a bit more  \n" +
"      0 rmoveto % move back the width of the tic  \n" +
"\n" +
"      stringnumber show\n" +
"      smallgap 0 rmoveto % Make a small gap  \n" +
"\n" +
"      % now show the tic mark\n" +
"      0 halfnumberheight rmoveto % shift up again\n" +
"      ticWidth 0 rlineto\n" +
"      stroke\n" +
"    } for\n" +
"  grestore\n" +
"} bind def\n" +
"\n" +
"\/ShowYaxisLabel {\n" +
"  gsave\n" +
"    SetStringFont\n" +
"\n" +
"    % How far we move left depends on the size of\n" +
"    % the tic labels.\n" +
"    \/str 10 string def % string to hold number  \n" +
"    yaxisBits yaxisTicBits div cvi yaxisTicBits mul \n" +
"    str cvs stringwidth pop\n" +
"    ticWidth 1.5 mul  add neg  \n" +
"\n" +
"\n" +
"    yaxisHeight\n" +
"    yaxisLabel stringwidth pop\n" +
"    sub 2 div\n" +
"\n" +
"    translate\n" +
"    90 rotate\n" +
"    0 0 moveto\n" +
"    yaxisLabel show\n" +
"  grestore\n" +
"} bind def\n" +
"\n" +
"\n" +
"\/StartStack {  % <stackNumber> startstack\n" +
"  xaxis {MakeNumber}{pop} ifelse\n" +
"  gsave\n" +
"} bind def\n" +
"\n" +
"\/EndStack {\n" +
"  grestore\n" +
"  stackWidth 0 translate\n" +
"} bind def\n" +
"\n" +
"\n" +
"% Draw a character whose height is proportional to symbol bits\n" +
"\/MakeSymbol{ % charbits character MakeSymbol\n" +
"  gsave\n" +
"    \/char exch def\n" +
"    \/bits exch def\n" +
"\n" +
"    \/bitsHeight \n" +
"       bits pointsPerBit mul \n" +
"    def\n" +
"\n" +
"    \/charHeight \n" +
"       bitsHeight charTopMargin sub\n" +
"       dup \n" +
"       0.0 gt {}{pop 0.0} ifelse % if neg replace with zero \n" +
"    def \n" +
" \n" +
"    charHeight 0.0 gt {\n" +
"      char SetColor\n" +
"      charWidth charHeight char ShowChar\n" +
"\n" +
"      showingBox { % Unfilled box\n" +
"        0 0 charWidth charHeight false ShowBox\n" +
"      } if\n" +
"\n" +
"\n" +
"    } if\n" +
"\n" +
"  grestore\n" +
"\n" +
"  0 bitsHeight translate \n" +
"} bind def\n" +
"\n" +
"\n" +
"\/ShowChar { % <width> <height> <char> ShowChar\n" +
"  gsave\n" +
"    \/tc exch def    % The character\n" +
"    \/ysize exch def % the y size of the character\n" +
"    \/xsize exch def % the x size of the character\n" +
"\n" +
"    \/xmulfactor 1 def \n" +
"    \/ymulfactor 1 def\n" +
"    \/limmulfactor 0.01 def\n" +
"    \/drawable true def\n" +
"\n" +
"  \n" +
"    % if ysize is negative, make everything upside down!\n" +
"    ysize 0 lt {\n" +
"      % put ysize normal in this orientation\n" +
"      \/ysize ysize abs def\n" +
"      xsize ysize translate\n" +
"      180 rotate\n" +
"    } if\n" +
"\n" +
"    shrinking {\n" +
"      xsize 1 shrink sub 2 div mul\n" +
"        ysize 1 shrink sub 2 div mul translate \n" +
"\n" +
"      shrink shrink scale\n" +
"    } if\n" +
"\n" +
"    % Calculate the font scaling factors\n" +
"    % Loop twice to catch small correction due to first scaling\n" +
"    2 {\n" +
"      gsave\n" +
"        xmulfactor ymulfactor scale\n" +
"      \n" +
"        ysize % desired size of character in points\n" +
"        tc CharBoxHeight \n" +
"        dup 0.0 ne {\n" +
"          div % factor by which to scale up the character\n" +
"          \/ymulfactor exch def\n" +
"        } % end if\n" +
"        {pop pop}\n" +
"        ifelse\n" +
"\n" +
"        xsize % desired size of character in points\n" +
"        tc CharBoxWidth  \n" +
"        dup 0.0 ne {\n" +
"          div % factor by which to scale up the character\n" +
"          \/xmulfactor exch def\n" +
"        } % end if\n" +
"        {pop pop}\n" +
"        ifelse\n" +
"      grestore\n" +
"      % if the multiplication factors get too small we need to avoid a crash\n" +
"      xmulfactor limmulfactor lt {\n" +
"        \/xmulfactor 1 def\n" +
"        \/drawable false def\n" +
"      } if\n" +
"      ymulfactor limmulfactor lt {\n" +
"        \/ymulfactor 1 def\n" +
"        \/drawable false def\n" +
"      } if\n" +
"    } repeat\n" +
"\n" +
"    % Adjust horizontal position if the symbol is an I\n" +
"    tc (I) eq {\n" +
"      charWidth 2 div % half of requested character width\n" +
"      tc CharBoxWidth 2 div % half of the actual character\n" +
"      sub 0 translate\n" +
"      % Avoid x scaling for I \n" +
"      \/xmulfactor 1 def \n" +
"    } if\n" +
"\n" +
"\n" +
"    % ---- Finally, draw the character\n" +
"    drawable { \n" +
"      newpath\n" +
"      xmulfactor ymulfactor scale\n" +
"\n" +
"      % Move lower left corner of character to start point\n" +
"      tc CharBox pop pop % llx lly : Lower left corner\n" +
"      exch neg exch neg\n" +
"      moveto\n" +
"\n" +
"      outline {  % outline characters:\n" +
"        outlinewidth setlinewidth\n" +
"        tc true charpath\n" +
"        gsave 1 setgray fill grestore\n" +
"        clip stroke\n" +
"      } { % regular characters\n" +
"        tc show\n" +
"      } ifelse\n" +
"    } if\n" +
"\n" +
"  grestore\n" +
"} bind def\n" +
"\n" +
"\n" +
"\/ShowBox { % x1 y1 x2 y2 filled ShowBox\n" +
"  gsave\n" +
"    \/filled exch def \n" +
"    \/y2 exch def\n" +
"    \/x2 exch def\n" +
"    \/y1 exch def\n" +
"    \/x1 exch def\n" +
"    newpath\n" +
"    x1 y1 moveto\n" +
"    x2 y1 lineto\n" +
"    x2 y2 lineto\n" +
"    x1 y2 lineto\n" +
"    closepath\n" +
"\n" +
"    clip\n" +
"    \n" +
"    filled {\n" +
"      fill\n" +
"    }{ \n" +
"      0 setgray stroke   \n" +
"    } ifelse\n" +
"\n" +
"  grestore\n" +
"} bind def\n" +
"\n" +
"\n" +
"\/MakeNumber { % number MakeNumber\n" +
"  gsave\n" +
"    SetNumberFont\n" +
"    stackWidth 0 translate\n" +
"    90 rotate % rotate so the number fits\n" +
"    dup stringwidth pop % find the length of the number\n" +
"    neg % prepare for move\n" +
"    stackMargin sub % Move back a bit\n" +
"    charWidth (0) CharBoxHeight % height of numbers\n" +
"    sub 2 div %\n" +
"    moveto % move back to provide space\n" +
"    show\n" +
"  grestore\n" +
"} bind def\n" +
"\n" +
"\n" +
"\/Ibeam{ % heightInBits Ibeam\n" +
"  gsave\n" +
"    % Make an Ibeam of twice the given height in bits\n" +
"    \/height exch  pointsPerBit mul def \n" +
"    \/heightDRAW height IbeamFraction mul def\n" +
"\n" +
"    IbeamLineWidth setlinewidth\n" +
"    IbeamGray setgray \n" +
"\n" +
"    charWidth2 height neg translate\n" +
"    ShowIbar\n" +
"    newpath\n" +
"      0 0 moveto\n" +
"      0 heightDRAW rlineto\n" +
"    stroke\n" +
"    newpath\n" +
"      0 height moveto\n" +
"      0 height rmoveto\n" +
"      currentpoint translate\n" +
"    ShowIbar\n" +
"    newpath\n" +
"    0 0 moveto\n" +
"    0 heightDRAW neg rlineto\n" +
"    currentpoint translate\n" +
"    stroke\n" +
"  grestore\n" +
"} bind def\n" +
"\n" +
"\n" +
"\/ShowIbar { % make a horizontal bar\n" +
"  gsave\n" +
"    newpath\n" +
"      charWidth4 neg 0 moveto\n" +
"      charWidth4 0 lineto\n" +
"    stroke\n" +
"  grestore\n" +
"} bind def\n" +
"\n" +
"\n" +
"\/ShowLeftEnd {\n" +
"  gsave\n" +
"    SetStringFont\n" +
"    leftEndDeltaX leftEndDeltaY moveto\n" +
"    logoType (NA) eq {(5) show ShowPrime} if\n" +
"    logoType (AA) eq {(N) show} if\n" +
"  grestore\n" +
"} bind def\n" +
"\n" +
"\n" +
"\/ShowRightEnd { \n" +
"  gsave\n" +
"    SetStringFont\n" +
"    rightEndDeltaX rightEndDeltaY moveto\n" +
"    logoType (NA) eq {(3) show ShowPrime} if\n" +
"    logoType (AA) eq {(C) show} if\n" +
"  grestore\n" +
"} bind def\n" +
"\n" +
"\n" +
"\/ShowPrime {\n" +
"  gsave\n" +
"    SetPrimeFont\n" +
"    (\\242) show \n" +
"  grestore\n" +
"} bind def\n" +
"\n" +
" \n" +
"\/SetColor{ % <char> SetColor\n" +
"  dup colorDict exch known {\n" +
"    colorDict exch get aload pop setrgbcolor\n" +
"  } {\n" +
"    pop\n" +
"    defaultColor aload pop setrgbcolor\n" +
"  } ifelse \n" +
"} bind def\n" +
"\n" +
"% define fonts\n" +
"\/SetTitleFont {\/Times-Bold findfont titleFontsize scalefont setfont} bind def\n" +
"\/SetLogoFont  {\/Helvetica-Bold findfont charWidth  scalefont setfont} bind def\n" +
"\/SetStringFont{\/Helvetica-Bold findfont fontsize scalefont setfont} bind def\n" +
"\/SetPrimeFont {\/Symbol findfont fontsize scalefont setfont} bind def\n" +
"\/SetSmallFont {\/Helvetica findfont smallFontsize scalefont setfont} bind def\n" +
"\n" +
"\/SetNumberFont {\n" +
"    \/Helvetica-Bold findfont \n" +
"    numberFontsize\n" +
"    scalefont\n" +
"    setfont\n" +
"} bind def\n" +
"\n" +
"%Take a single character and return the bounding box\n" +
"\/CharBox { % <char> CharBox <lx> <ly> <ux> <uy>\n" +
"  gsave\n" +
"    newpath\n" +
"    0 0 moveto\n" +
"    % take the character off the stack and use it here:\n" +
"    true charpath \n" +
"    flattenpath \n" +
"    pathbbox % compute bounding box of 1 pt. char => lx ly ux uy\n" +
"    % the path is here, but toss it away ...\n" +
"  grestore\n" +
"} bind def\n" +
"\n" +
"\n" +
"% The height of a characters bounding box\n" +
"\/CharBoxHeight { % <char> CharBoxHeight <num>\n" +
"  CharBox\n" +
"  exch pop sub neg exch pop\n" +
"} bind def\n" +
"\n" +
"\n" +
"% The width of a characters bounding box\n" +
"\/CharBoxWidth { % <char> CharBoxHeight <num>\n" +
"  CharBox\n" +
"  pop exch pop sub neg \n" +
"} bind def\n" +
"\n" +
"% Set the colour scheme to be faded to indicate trimming\n" +
"\/MuteColour {\n" +
"  \/colorDict mutedColourDict def\n" +
"} def\n" +
"\n" +
"% Restore the colour scheme to the normal colours\n" +
"\/RestoreColour {\n" +
"  \/colorDict fullColourDict def\n" +
"} def\n" +
"\n" +
"% Draw the background for a trimmed section\n" +
"% takes the number of columns as a parameter\n" +
"\/DrawTrimBg { % <num> DrawTrimBox\n" +
"  \/col exch def\n" +
"  \n" +
"  \/boxwidth \n" +
"    col stackWidth mul \n" +
"  def\n" +
" \n" +
"  gsave\n" +
"    0.97 setgray\n" +
"\n" +
"    newpath\n" +
"    0 0 moveto\n" +
"    boxwidth 0 rlineto\n" +
"    0 yaxisHeight rlineto\n" +
"    0 yaxisHeight lineto\n" +
"    closepath\n" +
"    \n" +
"    fill\n" +
"  grestore\n" +
"} def\n" +
"\n" +
"\/DrawTrimEdge {\n" +
"  gsave\n" +
"    0.2 setgray\n" +
"    [2] 0 setdash\n" +
"\n" +
"    newpath\n" +
"    0 0 moveto\n" +
"    0 yaxisHeight lineto\n" +
"    \n" +
"    stroke\n" +
"\n" +
"} def\n" +
"\n" +
"\n" +
"% Deprecated names\n" +
"\/startstack {StartStack} bind  def\n" +
"\/endstack {EndStack}     bind def\n" +
"\/makenumber {MakeNumber} bind def\n" +
"\/numchar { MakeSymbol }  bind def\n" +
"\n" +
"%%EndProlog\n" +
"\n" +
"%%Page: 1 1\n" +
"StartLogo\n" +
"\n" +
_input("DATA") + "\n" +
"\n" +
"EndLogo\n" +
"\n" +
"%%EOF\n"
  );
}</script>
    <script>
//======================================================================
// start Alphabet object
//======================================================================
var Alphabet = function(alphabet, background) {
  "use strict";
  var i, j, sym, aliases, complement, comp_e_sym, ambigs, generate_background;
  generate_background = (background == null);
  if (generate_background) {
    background = [];
    for (i = 0; i < alphabet.ncore; i++) background[i] = 1.0 / alphabet.ncore;
  } else if (alphabet.ncore != background.length) {
    throw new Error("The background length does not match the alphabet length.");
  }
  this.name = alphabet.name;
  this.like = (alphabet.like != null ? alphabet.like.toUpperCase() : null);
  this.ncore = alphabet.ncore;
  this.symbols = alphabet.symbols;
  this.background = background;
  this.genbg = generate_background;
  this.encode = {};
  this.encode2core = {};
  this.complement = {};
  // check if all symbols are same case
  var seen_uc = false;
  var seen_lc = false;
  var check_case = function (syms) {
    var s, sym;
    if (typeof syms === "string") {
      for (s = 0; s < syms.length; s++) {
        sym = syms.charAt(s);
        if (sym >= 'a' && sym <= 'z') seen_lc = true;
        else if (sym >= 'A' && sym <= 'Z') seen_uc = true;
      }
    }
  };
  for (i = 0; i < this.symbols.length; i++) {
    check_case(this.symbols[i].symbol);
    check_case(this.symbols[i].aliases);
  }
  // now map symbols to indexes
  var update_array = function(array, syms, index) {
    var s, sym;
    if (typeof syms === "string") {
      for (s = 0; s < syms.length; s++) {
        sym = syms.charAt(s);
        array[sym] = index;
        // when only a single case is used, then encode as case insensitive
        if (seen_uc != seen_lc) {
          if (sym >= 'a' && sym <= 'z') {
            array[sym.toUpperCase()] = index;
          } else if (sym >= 'A' && sym <= 'Z') {
            array[sym.toLowerCase()] = index;
          }
        }
      }
    }
  }
  // map core symbols to index
  for (i = 0; i < this.ncore; i++) {
    update_array(this.encode2core, this.symbols[i].symbol, i);
    update_array(this.encode, this.symbols[i].symbol, i);
    update_array(this.encode2core, this.symbols[i].aliases, i);
    update_array(this.encode, this.symbols[i].aliases, i);
  }
  // map ambiguous symbols to index
  ambigs = {};
  for (i = this.ncore; i < this.symbols.length; i++) {
    update_array(this.encode, this.symbols[i].symbol, i);
    update_array(this.encode, this.symbols[i].aliases, i);
    ambigs[this.symbols[i].equals] = i;
  }
  // determine complements
  for (i = 0; i < this.ncore; i++) {
    complement = this.symbols[i].complement;
    if (typeof complement === "string") {
      this.complement[i] = this.encode2core[complement];
    }
  }
  next_symbol:
  for (i = this.ncore; i < this.symbols.length; i++) {
    complement = "";
    for (j = 0; j < this.symbols[i].equals.length; j++) {
      comp_e_sym = this.complement[this.encode2core[this.symbols[i].equals.charAt(j)]];
      if (typeof comp_e_sym !== "number") continue next_symbol;
      complement += this.symbols[comp_e_sym].symbol;
    }
    complement = complement.split("").sort().join("");
    if (typeof ambigs[complement] === "number") {
      this.complement[i] = ambigs[complement];
    }
  }
  // determine case insensitivity
  this.case_insensitive = true;
  if (seen_uc == seen_lc) {
    // when there is a mixture of cases it probably won't
    // be case insensitive but we still need to check
    loop:
    for (i = 0; i < this.symbols.length; i++) {
      sym = this.symbols[i].symbol;
      if (sym >= 'A' && sym <= 'Z') {
        if (this.encode[sym.toLowerCase()] != i) {
          this.case_insensitive = false;
          break loop;
        }
      } else if (sym >= 'a' && sym <= 'z') {
        if (this.encode[sym.toUpperCase()] != i) {
          this.case_insensitive = false;
          break loop;
        }
      }
      aliases = this.symbols[i].aliases;
      if (aliases != null) {
        for (j = 0; j < aliases.length; j++) {
          sym = aliases.charAt(j);
          if (sym >= 'A' && sym <= 'Z') {
            if (this.encode[sym.toLowerCase()] != i) {
              this.case_insensitive = false;
              break loop;
            }
          } else if (sym >= 'a' && sym <= 'z') {
            if (this.encode[sym.toUpperCase()] != i) {
              this.case_insensitive = false;
              break loop;
            }
          }
        }
      }
    }
  }
  // normalise aliases to remove the prime symbol and eliminate
  // the alternate cases when the alphabet is case insensitive
  var seen, out;
  for (i = 0; i < this.symbols.length; i++) {
    sym = this.symbols[i].symbol;
    aliases = this.symbols[i].aliases;
    if (typeof aliases != "string") aliases = "";
    seen = {};
    out = [];
    if (this.case_insensitive) {
      sym = sym.toUpperCase();
      aliases = aliases.toUpperCase();
    }
    seen[sym] = true;
    for (j = 0; j < aliases.length; j++) {
      if (!seen[aliases.charAt(j)]) {
        seen[aliases.charAt(j)] = true;
        out.push(aliases.charAt(j));
      }
    }
    this.symbols[i].aliases = out.sort().join("");
  }
};
// return the name of the alphabet
Alphabet.prototype.get_alphabet_name = function() {
  return this.name;
};
// return if the alphabet can be complemented
Alphabet.prototype.has_complement = function() {
  return (typeof this.symbols[0].complement === "string");
};
// return true if an uppercase letter has the same meaning as the lowercase form
Alphabet.prototype.is_case_insensitive = function() {
  return this.case_insensitive;
};
// return the information content of an alphabet letter
Alphabet.prototype.get_ic = function() {
  return Math.log(this.ncore) / Math.LN2;
};
// return the count of the core alphabet symbols
Alphabet.prototype.get_size_core = function() {
  return this.ncore;
};
// return the count of all alphabet symbols
Alphabet.prototype.get_size_full = function() {
  return this.symbols.length;
};
// return the symbol for the given alphabet index
Alphabet.prototype.get_symbol = function(alph_index) {
  "use strict";
  if (alph_index < 0 || alph_index >= this.symbols.length) {
    throw new Error("Alphabet index out of bounds");
  }
  return this.symbols[alph_index].symbol;
};
// return the aliases for the given alphabet index
Alphabet.prototype.get_aliases = function(alph_index) {
  "use strict";
  if (alph_index < 0 || alph_index >= this.symbols.length) {
    throw new Error("Alphabet index out of bounds");
  }
  var sym_obj = this.symbols[alph_index];
  return (sym_obj.aliases != null ? sym_obj.aliases : "");
};
// return the name for the given alphabet index
Alphabet.prototype.get_name = function(alph_index) {
  "use strict";
  var sym;
  if (alph_index < 0 || alph_index >= this.symbols.length) {
    throw new Error("Alphabet index out of bounds");
  }
  sym = this.symbols[alph_index];
  return (typeof sym.name === "string" ? sym.name : sym.symbol);
};
// return the alphabet it is like or null
Alphabet.prototype.get_like = function() {
  "use strict";
  return this.like;
};
// return the index of the complement for the given alphabet index
Alphabet.prototype.get_complement = function(alph_index) {
  var comp_e_sym = this.complement[alph_index];
  if (typeof comp_e_sym === "number") {
    return comp_e_sym;
  } else {
    return -1;
  }
};
// return a string containing the core symbols
Alphabet.prototype.get_symbols = function() {
  "use strict";
  var i, core_symbols;
  core_symbols = "";
  for (i = 0; i < this.ncore; i++) {
    core_symbols += this.symbols[i].symbol;
  }
  return core_symbols;
};
// return if the background was not a uniform generated background
Alphabet.prototype.has_bg = function() {
  "use strict";
  return !this.genbg;
};
// get the background frequency for the index
Alphabet.prototype.get_bg_freq = function(alph_index) {
  "use strict";
  var freq, i, symbols;
  if (alph_index >= 0) {
    if (alph_index < this.ncore) {
      return this.background[alph_index];
    } else if (alph_index < this.symbols.length) {
      freq = 0;
      symbols = this.symbols[alph_index].equals;
      for (i = 0; i < symbols.length; i++) {
        freq += this.background[this.encode2core[symbols.charAt(i)]];
      }
      return freq;
    } 
  }
  throw new Error("The alphabet index is out of range.");
};
// get the colour of the index
Alphabet.prototype.get_colour = function(alph_index) {
  "use strict";
  if (alph_index < 0 || alph_index >= this.symbols.length) {
    throw new Error("BAD_ALPHABET_INDEX");
  }
  if (typeof this.symbols[alph_index].colour != "string") {
    return "black";
  }
  return "#" + this.symbols[alph_index].colour;
};
// get the rgb components of the colour at the index
Alphabet.prototype.get_rgb = function(alph_index) {
  "use strict";
  if (alph_index < 0 || alph_index >= this.symbols.length) {
    throw new Error("BAD_ALPHABET_INDEX");
  }
  if (typeof this.symbols[alph_index].colour != "string") {
    return {"red": 0, "green": 0, "blue": 0};
  }
  var colour = this.symbols[alph_index].colour;
  var red = parseInt(colour.substr(0, 2), 16) / 255;
  var green = parseInt(colour.substr(2, 2), 16) / 255;
  var blue = parseInt(colour.substr(4, 2), 16) / 255;
  return {"red": red, "green": green, "blue": blue};
};
// convert a symbol into the index
Alphabet.prototype.get_index = function(letter) {
  "use strict";
  var alph_index;
  alph_index = this.encode[letter];
  if (typeof alph_index === "undefined") {
    return -1;
  }
  return alph_index;
};
// convert a symbol into the list of core indexes that it equals
Alphabet.prototype.get_indexes = function(letter) {
  "use strict";
  var alph_index, comprise_str, i, comprise_list;
  alph_index = this.encode[letter];
  if (typeof alph_index === "undefined") {
    throw new Error("Unknown letter");
  }
  comprise_str = this.symbols[alph_index].equals;
  comprise_list = [];
  if (typeof comprise_str == "string") {
    for (i = 0; i < comprise_str.length; i++) {
      comprise_list.push(this.encode2core[comprise_str.charAt(i)]);
    }
  } else {
    comprise_list.push(alph_index);
  }
  return comprise_list;
};
// check if a symbol is the primary way of representing the symbol in the alphabet
Alphabet.prototype.is_prime_symbol = function(letter) {
  var alph_index;
  alph_index = this.encode[letter];
  if (alph_index == null) return false;
  if (this.is_case_insensitive()) {
    return (this.symbols[alph_index].symbol.toUpperCase() == letter.toUpperCase());
  } else {
    return (this.symbols[alph_index].symbol == letter);
  }
};
// compare 2 alphabets
Alphabet.prototype.equals = function(other) {
  "use strict";
  var i, sym1, sym2;
  // first check that it's actually an alphabet object
  if (!(typeof other === "object" && other != null && other instanceof Alphabet)) {
    return false;
  }
  // second shortcircuit if it's the same object
  if (this === other) return true;
  // compare
  if (this.name !== other.name) return false;
  if (this.ncore !== other.ncore) return false;
  if (this.symbols.length !== other.symbols.length) return false;
  for (i = 0; i < this.symbols.length; i++) {
    sym1 = this.symbols[i];
    sym2 = other.symbols[i];
    if (sym1.symbol !== sym2.symbol) return false;
    if (sym1.aliases !== sym2.aliases) return false;
    if (sym1.name !== sym2.name) return false;
    if (typeof sym1.colour !== typeof sym2.colour || 
        (typeof sym1.colour === "string" && typeof sym2.colour === "string" &&
         parseInt(sym1.colour, 16) != parseInt(sym2.colour, 16))) {
      return false;
    }
    if (sym1.complement !== sym2.complement) return false;
    if (sym1.equals !== sym2.equals) return false;
  }
  return true;
};
Alphabet.prototype.check_core_subset = function(super_alph) {
  var complement_same = true;
  var seen_set = {};
  var sub_i, sub_symbol, super_i, super_symbol;
  for (sub_i = 0; sub_i < this.ncore; sub_i++) {
    sub_symbol = this.symbols[sub_i];
    super_i = super_alph.encode[sub_symbol.symbol]; 
    if (super_i == null) return 0;
    super_symbol = super_alph.symbols[super_i];
    if (seen_set[super_i]) return 0;
    seen_set[super_i] = true;
    // check complement
    if (sub_symbol.complement != null && super_symbol.complement != null) {
      if (super_alph.encode[sub_symbol.complement] != super_alph.encode[super_symbol.complement]) {
        complement_same = false;
      }
    } else if (sub_symbol.complement != null || super_symbol.complement != null) {
      complement_same = false;
    }
  }
  return (complement_same ? 1 : -1);
};
// convert a sequence to its reverse complement
Alphabet.prototype.invcomp_seq = function(seq) {
  "use strict";
  var syms, i, e_sym, comp_e_sym;
  if (!this.has_complement()) throw new Error("Alphabet must be complementable");
  syms = seq.split("");
  for (i = 0; i < syms.length; i++) {
    e_sym = this.encode[syms[i]];
    if (typeof e_sym === "undefined") {
      e_sym = this.ncore; // wildcard
    }
    comp_e_sym = this.complement[e_sym];
    if (typeof comp_e_sym === "undefined") {
      comp_e_sym = e_sym; // not complementable
    }
    syms[i] = this.symbols[comp_e_sym].symbol;
  }
  return syms.reverse().join("");
};
// convert the alphabet to the text version
Alphabet.prototype.as_text = function() {
  "use strict";
  function name_as_text(name) {
    var i, c, out;
    out = "\"";
    for (i = 0; i < name.length; i++) {
      c = name.charAt(i);
      if (c == "\"") {
        out += "\\\"";
      } else if (c == "/") {
        out += "\\/";
      } else if (c == "\\") {
        out += "\\\\";
      } else {
        out += c;
      }
    }
    out += "\"";
    return out;
  }
  function symbol_as_text(sym) {
    var out;
    out = sym.symbol;
    if (typeof sym.name === "string" && sym.name != sym.symbol) {
      out += " " + name_as_text(sym.name);
    }
    if (typeof sym.colour === "string") {
      out += " " + sym.colour;
    }
    return out;
  }
  var out, i, j, c, sym;
  out = "";
  // output core symbols with 2 way complements
  for (i = 0; i < this.ncore; i++) {
    c = this.complement[i];
    if (typeof c === "number" && i < c && this.complement[c] === i) {
      out += symbol_as_text(this.symbols[i]) + " ~ " + symbol_as_text(this.symbols[c]) + "\n";  
    }
  }
  // output core symbols with no complement
  for (i = 0; i < this.ncore; i++) {
    if (typeof this.complement[i] === "undefined") {
      out += symbol_as_text(this.symbols[i]) + "\n";
    }
  }
  // output ambiguous symbols that have comprising characters
  for (i = this.ncore; i < this.symbols.length; i++) {
    if (this.symbols[i].equals.length == 0) break;
    out += symbol_as_text(this.symbols[i]) + " = " + this.symbols[i].equals + "\n";
    if (typeof this.symbols[i].aliases === "string") {
      for (j = 0; j < this.symbols[i].aliases.length; j++) {
        if (this.symbols[i].aliases.charAt(j) == this.symbols[i].symbol) continue;
        out += this.symbols[i].aliases.charAt(j) + " = " + this.symbols[i].equals + "\n";
      }
    }
  }
  // output aliases of core symbols
  for (i = 0; i < this.ncore; i++) {
    if (typeof this.symbols[i].aliases === "string") {
      for (j = 0; j < this.symbols[i].aliases.length; j++) {
        if (this.symbols[i].aliases.charAt(j) == this.symbols[i].symbol) continue;
        out += this.symbols[i].aliases.charAt(j) + " = " + this.symbols[i].symbol + "\n";
      }
    }
  }
  // output gap symbols
  i = this.symbols.length - 1;
  if (this.symbols[i].equals.length == 0) {
    out += symbol_as_text(this.symbols[i]) + " =\n";
    if (typeof this.symbols[i].aliases === "string") {
      for (j = 0; j < this.symbols[i].aliases.length; j++) {
        if (this.symbols[i].aliases.charAt(j) == this.symbols[i].symbol) continue;
        out += this.symbols[i].aliases.charAt(j) + " =\n";
      }
    }
  }
  return out;
};
// output the alphabet as it appears in minimal MEME format
Alphabet.prototype.as_meme = function() {
  "use strict";
  function name_as_text(name) {
    var i, c, out;
    out = "\"";
    for (i = 0; i < name.length; i++) {
      c = name.charAt(i);
      if (c == "\"") {
        out += "\\\"";
      } else if (c == "/") {
        out += "\\/";
      } else if (c == "\\") {
        out += "\\\\";
      } else {
        out += c;
      }
    }
    out += "\"";
    return out;
  }
  if (this.equals(AlphStd.DNA)) {
    return "ALPHABET= ACGT\n";
  } else if (this.equals(AlphStd.PROTEIN)) {
    return "ALPHABET= ACDEFGHIKLMNPQRSTVWY\n";
  } else {
    return "ALPHABET" + 
      (this.name != null ? " " + name_as_text(this.name) : "") + 
      (this.like != null ? " " + this.like + "-LIKE" : "") + "\n" +
      this.as_text() + "END ALPHABET\n";
  }
};

// Returns a table showing all the letters in the alphabet
Alphabet.prototype.as_table = function() {
  "use strict";
  var i, j, row, th, td, aliases, equals, sym;
  var table = document.createElement("table");
  // create the core symbol header
  row = table.insertRow(table.rows.length);
  th = document.createElement("th");
  th.appendChild(document.createTextNode("Symbol(s)"));
  row.appendChild(th);
  th = document.createElement("th");
  th.appendChild(document.createTextNode("Name"));
  row.appendChild(th);
  th = document.createElement("th");
  if (this.has_complement()) {
    th.appendChild(document.createTextNode("Complement"));
  }
  row.appendChild(th);
  // list the core symbols
  for (i = 0; i < this.ncore; i++) {
    row = table.insertRow(table.rows.length);
    td = document.createElement("td");
    if (this.symbols[i].colour != null) {
      td.style.color = '#' + this.symbols[i].colour;
    }
    td.appendChild(document.createTextNode(this.symbols[i].symbol));
    aliases = this.get_aliases(i);
    if (aliases.length > 0) {
      td.appendChild(document.createTextNode(' ' + aliases.split('').join(' ')));
    }
    row.appendChild(td);
    td = document.createElement("td");
    if (this.symbols[i].name != null) {
      td.appendChild(document.createTextNode(this.symbols[i].name));
    }
    row.appendChild(td);
    td = document.createElement("td");
    if (this.symbols[i].complement != null) {
      td.style.color = this.get_colour(this.get_index(this.symbols[i].complement));
      td.appendChild(document.createTextNode(this.symbols[i].complement));
    }
    row.appendChild(td);
  }
  // create the ambiguous symbol header
  row = table.insertRow(table.rows.length);
  th = document.createElement("th");
  th.appendChild(document.createTextNode("Symbol(s)"));
  row.appendChild(th);
  th = document.createElement("th");
  th.appendChild(document.createTextNode("Name"));
  row.appendChild(th);
  th = document.createElement("th");
  th.appendChild(document.createTextNode("Matches"));
  row.appendChild(th);
  // list the ambiguous symbols
  for (i = this.ncore; i < this.symbols.length; i++) {
    row = table.insertRow(table.rows.length);
    td = document.createElement("td");
    if (this.symbols[i].colour != null) {
      td.style.color = '#' + this.symbols[i].colour;
    }
    td.appendChild(document.createTextNode(this.symbols[i].symbol));
    aliases = this.get_aliases(i);
    if (aliases.length > 0) {
      td.appendChild(document.createTextNode(' ' + aliases.split('').join(' ')));
    }
    row.appendChild(td);
    td = document.createElement("td");
    if (this.symbols[i].name != null) {
      td.appendChild(document.createTextNode(this.symbols[i].name));
    }
    row.appendChild(td);
    td = document.createElement("td");
    equals = this.symbols[i].equals.split('');
    for (j = 0; j < equals.length; j++) {
      if (j != 0) td.appendChild(document.createTextNode(' '));
      sym = document.createElement("span");
      sym.style.color = this.get_colour(this.get_index(equals[j]));
      sym.appendChild(document.createTextNode(equals[j]));
      td.appendChild(sym);
    }
    row.appendChild(td);
  }
  return table;
};

// returns a dictionary of the colours for EPS
Alphabet.prototype._as_eps_dict = function() {
  "use strict";
  var i, sym, rgb;
  var out = "/fullColourDict <<\n";
  for (i = 0; i < this.ncore; i++) {
    sym = this.get_symbol(i);
    sym = sym.replace(/\\/g, "\\\\");
    sym = sym.replace(/\(/g, "\\(");
    sym = sym.replace(/\)/g, "\\)");
    rgb = this.get_rgb(i);
    out += " (" + sym + ") [" + rgb.red.toFixed(4) + " " + rgb.green.toFixed(4) + " " + rgb.blue.toFixed(4) + "]\n";
  }
  out += ">> def\n";
  out += "/mutedColourDict <<\n";
  for (i = 0; i < this.ncore; i++) {
    sym = this.get_symbol(i);
    sym = sym.replace(/\\/g, "\\\\");
    sym = sym.replace(/\(/g, "\\(");
    sym = sym.replace(/\)/g, "\\)");
    rgb = Alphabet.lighten_colour(this.get_rgb(i));
    out += " (" + sym + ") [" + rgb.red.toFixed(4) + " " + rgb.green.toFixed(4) + " " + rgb.blue.toFixed(4) + "]\n";
  }
  out += ">> def\n";
  return out;
};

// return the alphabet name or a list of primary symbols
Alphabet.prototype.toString = function() {
  "use strict";
  if (this.name != null) {
    return this.name;
  } else {
    return this.get_symbols();
  }
};

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Helper functions
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// Convert a colour specified in RGB colourspace values into LAB colourspace
Alphabet.rgb2lab = function(rgb) {
  "use strict";
  var xyzHelper, labHelper;
  // XYZ helper
  xyzHelper = function(value) {
    if (value > 0.0445) {
      value = (value + 0.055) / 1.055;
      value = Math.pow(value, 2.4);
    } else {
      value /= 12.92;
    }
    value *= 100;
    return value;
  };
  // lab helper
  labHelper = function(value) {
    if (value > 0.008856) {
      value = Math.pow(value, 1.0 / 3.0);
    } else {
      value = (7.787 * value) + (16.0 / 116.0);
    }
    return value;
  };
  // convert into XYZ colourspace
  var c1, c2, c3;
  if (typeof rgb == "number") {
    c1 = xyzHelper(((rgb >> 16) & 0xFF) / 255.0);
    c2 = xyzHelper(((rgb >> 8) & 0xFF) / 255.0);
    c3 = xyzHelper((rgb & 0xFF) / 255.0);
  } else {
    c1 = xyzHelper(rgb.red);
    c2 = xyzHelper(rgb.green);
    c3 = xyzHelper(rgb.blue);
  }
  var x = (c1 * 0.4124) + (c2 * 0.3576) + (c3 * 0.1805);
  var y = (c1 * 0.2126) + (c2 * 0.7152) + (c3 * 0.0722);
  var z = (c1 * 0.0193) + (c2 * 0.1192) + (c3 * 0.9505);
  // convert into Lab colourspace
  c1 = labHelper(x / 95.047);
  c2 = labHelper(y / 100.0);
  c3 = labHelper(z / 108.883);
  var l = (116.0 * c2) - 16;
  var a = 500.0 * (c1 - c2);
  var b = 200.0 * (c2 - c3);
  return {"l": l, "a": a, "b": b};
};

// Convert a colour specified in HSV colourspace into RGB colourspace
Alphabet.hsv2rgb = function(hue, sat, value, output_object) {
  // achromatic (grey)
  var r = value;
  var g = value;
  var b = value;
  if (sat != 0) {
    var h = hue / 60.0;
    var i = Math.floor(h);
    var f = h - i;
    var p = value * (1.0 - sat);
    var q = value * (1.0 - (sat * f));
    var t = value * (1.0 - (sat * (1.0 - f)));
    if (i == 0) {
      r = value;
      g = t;
      b = p;
    } else if (i == 1) {
      r = q;
      g = value;
      b = p;
    } else if (i == 2) {
      r = p;
      g = value;
      b = t;
    } else if (i == 3) {
      r = p;
      g = q;
      b = value;
    } else if (i == 4) {
      r = t;
      g = p;
      b = value;
    } else {
      r = value;
      g = p;
      b = q;
    }
  }
  if (output_object) {
    return {"red": r, "green": g, "blue": b};
  } else {
    return (Math.floor(r * 255) << 15) | (Math.floor(g * 255) << 8) | (Math.floor(b * 255));
  }
};

// Calculate a distance score between two colours in LAB colourspace
Alphabet.lab_dist = function(lab1, lab2) {
  var c1 = Math.sqrt((lab1.l * lab1.l) + (lab1.a * lab1.a));
  var c2 = Math.sqrt((lab2.l * lab2.l) + (lab2.a * lab2.a));
  var dc = c1 - c2;
  var dl = lab1.l - lab2.l;
  var da = lab1.a - lab2.a;
  var db = lab1.b - lab2.b;
  // we don't want NaN due to rounding errors so fudge things a bit...
  var dh = 0;
  var dh_squared = (da * da) + (db * db) - (dc * dc);
  if (dh_squared > 0) {
    dh = Math.sqrt(dh_squared);
  }
  var first = dl;
  var second = dc / (1.0 + (0.045 * c1));
  var third = dh / (1.0 + (0.015 * c1));
  return Math.sqrt((first * first) + (second * second) + (third * third));
};

// convert an RGB value into a HSL value
Alphabet.rgb2hsl = function(rgb) {
  "use strict";
  var min, max, delta, h, s, l, r, g, b;
  if (typeof rgb == "number") {
    r = ((rgb >> 16) & 0xFF) / 255.0;
    g = ((rgb >> 8) & 0xFF) / 255.0;
    b = (rgb & 0xFF) / 255.0;
  } else {
    r = rgb.red;
    g = rgb.green;
    b = rgb.blue;
  }
  min = Math.min(r, g, b);
  max = Math.max(r, g, b);
  delta = max - min;
  l = min + (delta / 2);
  if (max == min) {
    h = 0; // achromatic (grayscale)
    s = 0;
  } else {
    if (l > 0.5) {
      s = delta / (2 - max - min);
    } else {
      s = delta / (max + min);
    }
    if (max == r) {
      h = (g - b) / delta;
      if (g < b) h += 6;
    } else if (max == g) {
      h = ((b - r) / delta) + 2;
    } else {
      h = ((r - g) / delta) + 4;
    }
    h /= 6;
  }
  return {"h": h, "s": s, "l": l};
};

// convert a HSL value into an RGB value
Alphabet.hsl2rgb = function(hsl, output_object) {
  "use strict";
  function _hue(p, q, t) {
    "use strict";
    if (t < 0) t += 1;
    else if (t > 1) t -= 1;
    if (t < (1.0 / 6.0)) {
      return p + ((q - p) * 6.0 * t);
    } else if (t < 0.5) {
      return q;
    } else if (t < (2.0 / 3.0)) {
      return p + ((q - p) * ((2.0 / 3.0) - t) * 6.0);
    } else {
      return p;
    }
  }
  var r, g, b, p, q;
  if (hsl.s == 0) {
    // achromatic (grayscale)
    r = hsl.l;
    g = hsl.l;
    b = hsl.l;
  } else {
    if (hsl.l < 0.5) {
      q = hsl.l * (1 + hsl.s);
    } else {
      q = hsl.l + hsl.s - (hsl.l * hsl.s);
    }
    p = (2 * hsl.l) - q;
    r = _hue(p, q, hsl.h + (1.0 / 3.0));
    g = _hue(p, q, hsl.h);
    b = _hue(p, q, hsl.h - (1.0 / 3.0));
  }
  if (output_object) {
    return {"red": r, "green": g, "blue": b};
  } else {
    return (Math.floor(r * 255) << 15) | (Math.floor(g * 255) << 8) | (Math.floor(b * 255));
  }
};

Alphabet.lighten_colour = function(rgb) {
  "use strict";
  var hsl = Alphabet.rgb2hsl(rgb);
  hsl.l += (1.0 - hsl.l) * 2 / 3;
  return Alphabet.hsl2rgb(hsl, typeof rgb != "number");
};

//======================================================================
// end Alphabet object
//======================================================================

//======================================================================
// start StandardAlphabet object
//======================================================================

// an extension of the alphabet object to support some additional fields 
// only present in standard alphabets.
var StandardAlphabet = function(enum_code, enum_name, alphabet_data) {
  Alphabet.apply(this, [alphabet_data]);
  this.enum_code = enum_code;
  this.enum_name = enum_name;
};
StandardAlphabet.prototype = Alphabet.prototype;
StandardAlphabet.prototype.constructor = StandardAlphabet;

// A unique code for this standard alphabet.
// This code will be a power of 2 to enable creation of bitsets for
// a selection of standard alphabets.
StandardAlphabet.prototype.get_code = function() {
  return this.enum_code;
};

// A unique name for this standard alphabet.
// this name will be all upper case and the same as the property that
// refers to this alphabet in the AlphStd collection.
StandardAlphabet.prototype.get_enum = function() {
  return this.enum_name;
};

//======================================================================
// end StandardAlphabet object
//======================================================================

// A collection of standard alphabets.
var AlphStd = {
  RNA: new StandardAlphabet(1, "RNA", {
    "name": "RNA",
    "like": "RNA",
    "ncore": 4,
    "symbols": [
      {"symbol": "A", "name": "Adenine", "colour": "CC0000"},
      {"symbol": "C", "name": "Cytosine", "colour": "0000CC"},
      {"symbol": "G", "name": "Guanine", "colour": "FFB300"},
      {"symbol": "U", "name": "Uracil", "colour": "008000",
        "aliases": "T"},
      {"symbol": "N", "name": "Any base", "equals": "ACGU", "aliases": "X."},
      {"symbol": "V", "name": "Not U", "equals": "ACG"},
      {"symbol": "H", "name": "Not G", "equals": "ACU"},
      {"symbol": "D", "name": "Not C", "equals": "AGU"},
      {"symbol": "B", "name": "Not A", "equals": "CGU"},
      {"symbol": "M", "name": "Amino", "equals": "AC"},
      {"symbol": "R", "name": "Purine", "equals": "AG"},
      {"symbol": "W", "name": "Weak", "equals": "AU"}, 
      {"symbol": "S", "name": "Strong", "equals": "CG"},
      {"symbol": "Y", "name": "Pyrimidine", "equals": "CU"},
      {"symbol": "K", "name": "Keto", "equals": "GU"}
    ]
  }), 
  DNA: new StandardAlphabet(2, "DNA", {
    "name": "DNA",
    "like": "DNA",
    "ncore": 4,
    "symbols": [
      {"symbol": "A", "name": "Adenine", "colour": "CC0000", "complement": "T"},
      {"symbol": "C", "name": "Cytosine", "colour": "0000CC", "complement": "G"},
      {"symbol": "G", "name": "Guanine", "colour": "FFB300", "complement": "C"},
      {"symbol": "T", "name": "Thymine", "colour": "008000", "complement": "A",
        "aliases": "U"},
      {"symbol": "N", "name": "Any base", "equals": "ACGT", "aliases": "X."},
      {"symbol": "V", "name": "Not T", "equals": "ACG"},
      {"symbol": "H", "name": "Not G", "equals": "ACT"},
      {"symbol": "D", "name": "Not C", "equals": "AGT"},
      {"symbol": "B", "name": "Not A", "equals": "CGT"},
      {"symbol": "M", "name": "Amino", "equals": "AC"},
      {"symbol": "R", "name": "Purine", "equals": "AG"},
      {"symbol": "W", "name": "Weak", "equals": "AT"}, 
      {"symbol": "S", "name": "Strong", "equals": "CG"},
      {"symbol": "Y", "name": "Pyrimidine", "equals": "CT"},
      {"symbol": "K", "name": "Keto", "equals": "GT"}
    ]
  }), 
  PROTEIN: new StandardAlphabet(4, "PROTEIN", {
    "name": "Protein",
    "like": "PROTEIN",
    "ncore": 20,
    "symbols": [
      {"symbol": "A", "name": "Alanine", "colour": "0000CC"},
      {"symbol": "C", "name": "Cysteine", "colour": "0000CC"},
      {"symbol": "D", "name": "Aspartic acid", "colour": "FF00FF"},
      {"symbol": "E", "name": "Glutamic acid", "colour": "FF00FF"},
      {"symbol": "F", "name": "Phenylalanine", "colour": "0000CC"},
      {"symbol": "G", "name": "Glycine", "colour": "FFB300"},
      {"symbol": "H", "name": "Histidine", "colour": "FFCCCC"},
      {"symbol": "I", "name": "Isoleucine", "colour": "0000CC"},
      {"symbol": "K", "name": "Lysine", "colour": "CC0000"},
      {"symbol": "L", "name": "Leucine", "colour": "0000CC"},
      {"symbol": "M", "name": "Methionine", "colour": "0000CC"},
      {"symbol": "N", "name": "Asparagine", "colour": "008000"},
      {"symbol": "P", "name": "Proline", "colour": "FFFF00"},
      {"symbol": "Q", "name": "Glutamine", "colour": "008000"},
      {"symbol": "R", "name": "Arginine", "colour": "CC0000"},
      {"symbol": "S", "name": "Serine", "colour": "008000"},
      {"symbol": "T", "name": "Threonine", "colour": "008000"},
      {"symbol": "V", "name": "Valine", "colour": "0000CC"},
      {"symbol": "W", "name": "Tryptophan", "colour": "0000CC"},
      {"symbol": "Y", "name": "Tyrosine", "colour": "33E6CC"},
      {"symbol": "X", "name": "Any amino acid", "equals": "ACDEFGHIKLMNPQRSTVWY", "aliases": "*."},
      {"symbol": "B", "name": "Asparagine or Aspartic acid", "equals": "DN"}, 
      {"symbol": "Z", "name": "Glutamine or Glutamic acid", "equals": "EQ"}, 
      {"symbol": "J", "name": "Leucine or Isoleucine", "equals": "IL"}
    ]
  })
};

//======================================================================
// start Symbol object
//======================================================================
var Symbol = function(alph_index, scale, alphabet) {
  "use strict";
  //variable prototype
  this.symbol = alphabet.get_symbol(alph_index);
  this.scale = scale;
  this.colour = alphabet.get_colour(alph_index);
};

Symbol.prototype.get_symbol = function() {
  "use strict";
  return this.symbol;
};

Symbol.prototype.get_scale = function() {
  "use strict";
  return this.scale;
};

Symbol.prototype.get_colour = function() {
  "use strict";
  return this.colour;
};

Symbol.prototype.toString = function() {
  "use strict";
  return this.symbol + " " + (Math.round(this.scale*1000)/10) + "%";
};

function compare_symbol(sym1, sym2) {
  "use strict";
  if (sym1.get_scale() < sym2.get_scale()) {
    return -1;
  } else if (sym1.get_scale() > sym2.get_scale()) {
    return 1;
  } else {
    return 0;
  }
}
//======================================================================
// end Symbol object
//======================================================================

//======================================================================
// start Pspm object
//======================================================================
var Pspm = function(matrix, name, ltrim, rtrim, nsites, evalue, pssm, alt, pgm) {
  "use strict";
  var row, col, data, row_sum, delta, evalue_re;
  if (typeof name !== "string") {
    name = "";
  }
  this.name = name;
  //construct
  if (matrix instanceof Pspm) {
    // copy constructor
    this.alph_length = matrix.alph_length;
    this.motif_length = matrix.motif_length;
    this.name = matrix.name;
    this.alt = matrix.alt;
    this.nsites = matrix.nsites;
    this.evalue = matrix.evalue;
    this.ltrim = matrix.ltrim;
    this.rtrim = matrix.rtrim;
    this.pspm = [];
    this.pgm = matrix.pgm;
    for (row = 0; row < matrix.motif_length; row++) {
      this.pspm[row] = [];
      for (col = 0; col < matrix.alph_length; col++) {
        this.pspm[row][col] = matrix.pspm[row][col];
      }
    }
    if (matrix.pssm != null) {
      this.pssm = [];
      for (row = 0; row < matrix.motif_length; row++) {
        this.pspm[row] = [];
        for (col = 0; col < matrix.alph_length; col++) {
          this.pssm[row][col] = matrix.pssm[row][col];
        }
      }
    }
  } else {
    // check parameters
    if (ltrim == null) {
      ltrim = 0;
    } else if (typeof ltrim !== "number" || ltrim % 1 !== 0 || ltrim < 0) {
      throw new Error("ltrim must be a non-negative integer, got: " + ltrim);
    }
    if (rtrim == null) {
      rtrim = 0;
    } else if (typeof rtrim !== "number" || rtrim % 1 !== 0 || rtrim < 0) {
      throw new Error("rtrim must be a non-negative integer, got: " + rtrim);
    }
    if (nsites != null) {
      if (typeof nsites !== "number" || nsites < 0) {
        throw new Error("nsites must be a positive number, got: " + nsites);
      } else if (nsites == 0) {
        nsites = null;
      }
    }
    if (evalue != null) {
      if (typeof evalue === "number") {
        if (evalue < 0) {
          throw new Error("evalue must be a non-negative number, got: " + evalue);
        }
      } else if (typeof evalue === "string") {
        evalue_re = /^((?:[+]?[0-9]*\.?[0-9]+(?:[eE][-+]?[0-9]+)?)|inf)$/;
        if (!evalue_re.test(evalue)) {
          throw new Error("evalue must be a non-negative number, got: " + evalue);
        }
      } else {
        throw new Error("evalue must be a non-negative number, got: " + evalue);
      }
    }
    // set properties
    this.name = name;
    this.alt = alt;
    this.nsites = nsites;
    this.evalue = evalue;
    this.ltrim = ltrim;
    this.rtrim = rtrim;
    this.pgm = pgm;
    if (typeof matrix === "string") {
      // string constructor
      data = parse_pspm_string(matrix);
      this.alph_length = data["alph_length"];
      this.motif_length = data["motif_length"];
      this.pspm = data["pspm"];
      if (this.evalue == null) {
        if (data["evalue"] != null) {
          this.evalue = data["evalue"];
        } else {
          this.evalue = 0;
        }
      }
      if (this.nsites == null) {
        if (typeof data["nsites"] === "number") {
          this.nsites = data["nsites"];
        } else {
          this.nsites = 20;
        }
      }
    } else {
      // assume pspm is a nested array
      this.motif_length = matrix.length;
      this.alph_length = (matrix.length > 0 ? matrix[0].length : 0);
      if (this.nsites == null) {
        this.nsites = 20;
      }
      if (this.evalue == null) {
        this.evalue = 0;
      }
      this.pspm = [];
      // copy pspm and check
      for (row = 0; row < this.motif_length; row++) {
        if (this.alph_length != matrix[row].length) {
          throw new Error("COLUMN_MISMATCH");
        }
        this.pspm[row] = [];
        row_sum = 0;
        for (col = 0; col < this.alph_length; col++) {
          this.pspm[row][col] = matrix[row][col];
          row_sum += this.pspm[row][col];
        }
        delta = 0.1;
        if (isNaN(row_sum) || (row_sum > 1 && (row_sum - 1) > delta) || 
            (row_sum < 1 && (1 - row_sum) > delta)) {
          throw new Error("INVALID_SUM");
        }
      }
      // copy pssm
      if (pssm != null) {
        this.pssm = [];
        for (row = 0; row < this.motif_length; row++) {
          this.pssm[row] = [];
          for (col = 0; col < this.alph_length; col++) {
            this.pssm[row][col] = pssm[row][col];
          }
        }
      }
    }
  }
};

Pspm.prototype.copy = function() {
  "use strict";
  return new Pspm(this);
};

Pspm.prototype.reverse = function() {
  "use strict";
  var x, y, temp, temp_trim;
  //reverse
  x = 0;
  y = this.motif_length-1;
  while (x < y) {
    temp = this.pspm[x];
    this.pspm[x] = this.pspm[y];
    this.pspm[y] = temp;
    x++;
    y--;
  }
  // reverse pssm (if defined)
  if (typeof this.pssm !== "undefined") {
    //reverse
    x = 0;
    y = this.motif_length-1;
    while (x < y) {
      temp = this.pssm[x];
      this.pspm[x] = this.pssm[y];
      this.pssm[y] = temp;
      x++;
      y--;
    }
  }
  //swap triming
  temp_trim = this.ltrim;
  this.ltrim = this.rtrim;
  this.rtrim = temp_trim;
  return this; //allow function chaining...
};

Pspm.prototype.reverse_complement = function(alphabet) {
  "use strict";
  var x, y, temp, i, row, c, temp_trim;
  if (this.alph_length != alphabet.get_size_core()) {
    throw new Error("The alphabet size does not match the size of the pspm.");
  }
  if (!alphabet.has_complement()) {
    throw new Error("The specified alphabet can not be complemented.");
  }
  // reverse motif
  this.reverse();
  //complement
  for (x = 0; x < this.motif_length; x++) {
    row = this.pspm[x];
    for (i = 0; i < row.length; i++) {
      c = alphabet.get_complement(i);
      if (c < i) continue;
      temp = row[i];
      row[i] = row[c];
      row[c] = temp;
    }
  }
  // complement pssm (if defined)
  if (typeof this.pssm !== "undefined") {
    //complement
    for (x = 0; x < this.motif_length; x++) {
      row = this.pssm[x];
      for (i = 0; i < row.length; i++) {
        c = alphabet.get_complement(i);
        if (c < i) continue;
        temp = row[i];
        row[i] = row[c];
        row[c] = temp;
      }
    }
  }
  return this; //allow function chaining...
};

Pspm.prototype.get_stack = function(position, alphabet, ssc) {
  "use strict";
  var row, stack_ic, alphabet_ic, stack, i, sym;
  if (this.alph_length != alphabet.get_size_core()) {
    throw new Error("The alphabet size does not match the size of the pspm.");
  }
  row = this.pspm[position];
  stack_ic = this.get_stack_ic(position, alphabet);
  if (ssc) stack_ic -= this.get_error(alphabet);
  alphabet_ic = alphabet.get_ic();
  stack = [];
  for (i = 0; i < this.alph_length; i++) {
    sym = new Symbol(i, row[i]*stack_ic/alphabet_ic, alphabet);
    if (sym.get_scale() <= 0) {
      continue;
    }
    stack.push(sym);
  }
  stack.sort(compare_symbol);
  return stack;
};

Pspm.prototype.get_stack_ic = function(position, alphabet) {
  "use strict";
  var row, H, i;
  if (this.alph_length != alphabet.get_size_core()) {
    throw new Error("The alphabet size does not match the size fo the pspm.");
  }
  row = this.pspm[position];
  H = 0;
  for (i = 0; i < this.alph_length; i++) {
    if (row[i] === 0) {
      continue;
    }
    H -= (row[i] * (Math.log(row[i]) / Math.LN2));
  }
  return alphabet.get_ic() - H;
};

Pspm.prototype.get_error = function(alphabet) {
  "use strict";
  if (this.nsites === 0) {
    return 0;
  }
  return (alphabet.get_size_core()-1) / (2 * Math.LN2 * this.nsites);
};

Pspm.prototype.get_motif_length = function() {
  "use strict";
  return this.motif_length;
};

Pspm.prototype.get_alph_length = function() {
  "use strict";
  return this.alph_length;
};

Pspm.prototype.get_left_trim = function() {
  "use strict";
  return this.ltrim;
};

Pspm.prototype.get_right_trim = function() {
  "use strict";
  return this.rtrim;
};

Pspm.prototype.as_best_match = function(alphabet) {
  "use strict";
  var match, odds, best_odds, best_index;
  var i, j;
  match = "";
  for (i = 0; i < this.motif_length; i++) {
    best_index = 0;
    best_odds = this.pspm[i][0] / alphabet.get_bg_freq(0);
    for (j = 1; j < this.alph_length; j++) {
      odds = this.pspm[i][j] / alphabet.get_bg_freq(j);
      if (odds > best_odds) {
        best_odds = odds;
        best_index = j;
      }
    }
    match += alphabet.get_symbol(best_index);
  }
  return match;
};

Pspm.prototype.as_count_matrix = function() {
  "use strict";
  var count, count_text, text;
  var i, j;
  text = "";
  for (i = 0; i < this.motif_length; i++) {
    if (i !== 0) {
      text += "\n";
    }
    for (j = 0; j < this.alph_length; j++) {
      if (j !== 0) {
        text += " ";
      }
      count = Math.round(this.nsites * this.pspm[i][j]);
      count_text = "" + count;
      // pad up to length of 4
      if (count_text.length < 4) {
        text += (new Array(5 - count_text.length)).join(" ") + count_text;
      } else {
        text += count_text;
      }
    }
  }
  return text; 
};

Pspm.prototype.as_probability_matrix = function() {
  "use strict";
  var text;
  var i, j;
  text = "";
  for (i = 0; i < this.motif_length; i++) {
    if (i !== 0) {
      text += "\n";
    }
    for (j = 0; j < this.alph_length; j++) {
      if (j !== 0) {
        text += " ";
      }
      text += this.pspm[i][j].toFixed(6);
    }
  }
  return text; 
};

Pspm.prototype.as_score_matrix = function(alphabet, pseudo) {
  "use strict";
  var me, score, out, row, col, score_text;
  me = this;
  if (typeof this.pssm === "undefined") {
    if (!(typeof alphabet === "object" && alphabet != null && alphabet instanceof Alphabet)) {
      throw new Error("The alphabet is required to generate the pssm.");
    }
    if (typeof pseudo === "undefined") {
      pseudo = 0.01;
    } else if (typeof pseudo !== "number" || pseudo < 0) {
      throw new Error("Expected positive number for pseudocount");
    }
    score = function(row, col) {
      "use strict";
      var p, bg, p2;
      p = me.pspm[row][col];
      bg = alphabet.get_bg_freq(col);
      p2 = (p * me.nsites + bg * pseudo) / (me.nsites + pseudo);
      return (p2 > 0 ? Math.round((Math.log(p2 / bg) / Math.LN2) * 100) : -10000);
    };
  } else {
    score = function(row, col) {
      "use strict";
      return me.pssm[row][col];
    };
  }
  out = "";
  for (row = 0; row < this.motif_length; row++) {
    for (col = 0; col < this.alph_length; col++) {
      if (col !== 0) {
        out += " ";
      }
      score_text = "" + score(row, col);
      // pad out to 6 characters
      if (score_text.length < 6) {
        out += (new Array(7 - score_text.length)).join(" ") + score_text;
      } else {
        out += score_text;
      }
    }
    out += "\n";
  }
  return out;
}

Pspm.prototype.as_pspm = function() {
  "use strict";
  return "letter-probability matrix: alength= " + this.alph_length + 
      " w= " + this.motif_length + " nsites= " + this.nsites + 
      (this.pgm === "STREME" ? " P= " : " E= ") + 
          (typeof this.evalue === "number" ? 
          this.evalue.toExponential() : this.evalue) + "\n" +
      this.as_probability_matrix();
};

Pspm.prototype.as_pssm = function(alphabet, pseudo) {
  "use strict";
  return "log-odds matrix: alength= " + this.alph_length + 
      " w= " + this.motif_length + 
      " E= " + (typeof this.evalue == "number" ?
          this.evalue.toExponential() : this.evalue) + "\n" +
      this.as_score_matrix(alphabet, pseudo);
};

Pspm.prototype.as_meme = function(options) {
  var with_header, with_pspm, with_pssm, version, alphabet, bg_source, pseudocount, strands;
  var out, alen, i;
  // get the options
  if (typeof options !== "object" || options === null) {
    options = {};
  }
  with_header = (typeof options["with_header"] === "boolean" ? options["with_header"] : false);
  with_pspm = (typeof options["with_pspm"] === "boolean" ? options["with_pspm"] : false);
  with_pssm = (typeof options["with_pssm"] === "boolean" ? options["with_pssm"] : false);
  if (!with_pspm && !with_pssm) with_pspm = true;
  if (with_header) {
    if (typeof options["version"] === "string" && /^\d+(?:\.\d+){0,2}$/.test(options["version"])) {
      version = options["version"];
    } else if (typeof options["version"] === "number") {
      version = options["version"].toFixed(0);
    } else {
      version = "4";
    }
    if (typeof options["strands"] === "number" && options["strands"] === 1) {
      strands = 1;
    } else {
      strands = 2;
    }
    if (typeof options["bg_source"] === "string") {
      bg_source = options["bg_source"];
    } else {
      bg_source = "unknown source";
    }
    if (typeof options["alphabet"] === "object" && options["alphabet"] != null
        && options["alphabet"] instanceof Alphabet) {
      alphabet = options["alphabet"];
    } else {
      throw new Error("The alphabet is required to generate the header.");
    }
  }
  // now create the output
  out = "";
  if (with_header) {
    out = "MEME version " + version + "\n\n";
    out += alphabet.as_meme() + "\n";
    if (alphabet.has_complement()) { // assume DNA has both strands unless otherwise specified
      out += "strands: " + (strands === 1 ? "+" : "+ -") + "\n\n";
    }
    out += "Background letter frequencies (from " + bg_source + "):\n";
    alen = alphabet.get_size_core();
    for (i = 0; i < alen; i++) {
      if (i !== 0) {
        if (i % 9 === 0) { // maximum of nine entries per line
          out += "\n";
        } else {
          out += " ";
        }
      }
      out += alphabet.get_symbol(i) + " " + alphabet.get_bg_freq(i).toFixed(3);
    }
  }
  out += "\n\n";
  out += "MOTIF " + this.name + (this.alt == null ? "" : " " + this.alt);
  if (with_pssm) {
    out += "\n\n";
    out += this.as_pssm(options["alphabet"], options["pseudocount"]);
  }
  if (with_pspm) {
    out += "\n\n";
    out += this.as_pspm();
  }
  return out;
}

Pspm.prototype.toString = function() {
  "use strict";
  var str, i, row;
  str = "";
  for (i = 0; i < this.pspm.length; i++) {
    row = this.pspm[i];
    str += row.join("\t") + "\n";
  }
  return str;
};

function parse_pspm_properties(str) {
  "use strict";
  var parts, i, eqpos, before, after, properties, prop, num, num_re;
  num_re = /^((?:[+]?[0-9]*\.?[0-9]+(?:[eE][-+]?[0-9]+)?)|inf)$/;
  parts = trim(str).split(/\s+/);
  // split up words containing =
  for (i = 0; i < parts.length;) {
    eqpos = parts[i].indexOf("=");
    if (eqpos != -1) {
      before = parts[i].substr(0, eqpos);
      after = parts[i].substr(eqpos+1);
      if (before.length > 0 && after.length > 0) {
        parts.splice(i, 1, before, "=", after);
        i += 3;
      } else if (before.length > 0) {
        parts.splice(i, 1, before, "=");
        i += 2;
      } else if (after.length > 0) {
        parts.splice(i, 1, "=", after);
        i += 2;
      } else {
        parts.splice(i, 1, "=");
        i++;
      }
    } else {
      i++;
    }
  }
  properties = {};
  for (i = 0; i < parts.length; i += 3) {
    if (parts.length - i < 3) {
      throw new Error("Expected PSPM property was incomplete. "+
          "Remaing parts are: " + parts.slice(i).join(" "));
    }
    if (parts[i+1] !== "=") {
      throw new Error("Expected '=' in PSPM property between key and " +
          "value but got " + parts[i+1]); 
    }
    prop = parts[i].toLowerCase();
    num = parts[i+2];
    if (!num_re.test(num)) {
      throw new Error("Expected numeric value for PSPM property '" + 
          prop + "' but got '" + num + "'");
    }
    properties[prop] = num;
  }
  return properties;
}

function parse_pspm_string(pspm_string) {
  "use strict";
  var header_re, lines, first_line, line_num, col_num, alph_length, 
      motif_length, nsites, evalue, pspm, i, line, match, props, parts,
      j, prob;
  header_re = /^letter-probability\s+matrix:(.*)$/i;
  lines = pspm_string.split(/\n/);
  first_line = true;
  line_num = 0;
  col_num = 0;
  alph_length;
  motif_length;
  nsites;
  evalue;
  pspm = [];
  for (i = 0; i < lines.length; i++) {
    line = trim(lines[i]);
    if (line.length === 0) { 
      continue;
    }
    // check the first line for a header though allow matrices without it
    if (first_line) {
      first_line = false;
      match = header_re.exec(line);
      if (match !== null) {
        props = parse_pspm_properties(match[1]);
        if (props.hasOwnProperty("alength")) {
          alph_length = parseFloat(props["alength"]);
          if (alph_length != 4 && alph_length != 20) {
            throw new Error("PSPM property alength should be 4 or 20" +
                " but got " + alph_length);
          }
        }
        if (props.hasOwnProperty("w")) {
          motif_length = parseFloat(props["w"]);
          if (motif_length % 1 !== 0 || motif_length < 1) {
            throw new Error("PSPM property w should be an integer larger " +
                "than zero but got " + motif_length);
          }
        }
        if (props.hasOwnProperty("nsites")) {
          nsites = parseFloat(props["nsites"]);
          if (nsites <= 0) {
            throw new Error("PSPM property nsites should be larger than " +
                "zero but got " + nsites);
          }
        }
        if (props.hasOwnProperty("e")) {
          evalue = props["e"];
          if (evalue < 0) {
            throw new Error("PSPM property evalue should be " +
                "non-negative but got " + evalue);
          }
        }
        continue;
      }
    }
    pspm[line_num] = [];
    col_num = 0;
    parts = line.split(/\s+/);
    for (j = 0; j < parts.length; j++) {
      prob = parseFloat(parts[j]);
      if (prob != parts[j] || prob < 0 || prob > 1) {
        throw new Error("Expected probability but got '" + parts[j] + "'"); 
      }
      pspm[line_num][col_num] = prob;
      col_num++;
    }
    line_num++;
  }
  if (typeof motif_length === "number") {
    if (pspm.length != motif_length) {
      throw new Error("Expected PSPM to have a motif length of " + 
          motif_length + " but it was actually " + pspm.length);
    }
  } else {
    motif_length = pspm.length;
  }
  if (typeof alph_length !== "number") {
    alph_length = pspm[0].length;
    if (alph_length != 4 && alph_length != 20) {
      throw new Error("Expected length of first row in the PSPM to be " +
          "either 4 or 20 but got " + alph_length);
    }
  }
  for (i = 0; i < pspm.length; i++) {
    if (pspm[i].length != alph_length) {
      throw new Error("Expected PSPM row " + i + " to have a length of " + 
          alph_length + " but the length was " + pspm[i].length);
    }
  }
  return {"pspm": pspm, "motif_length": motif_length, 
    "alph_length": alph_length, "nsites": nsites, "evalue": evalue};
}
//======================================================================
// end Pspm object
//======================================================================

//======================================================================
// start Logo object
//======================================================================

var Logo = function(alphabet, options) {
  "use strict";
  this.alphabet = alphabet;
  this.fine_text = "";
  this.x_axis = 1;
  this.y_axis = true;
  this.xlate_nsyms = 1;
  this.xlate_start = null;
  this.xlate_end = null;
  this.pspm_list = [];
  this.pspm_column = [];
  this.rows = 0;
  this.columns = 0;
  if (typeof options === "string") {
    // the old method signature had fine_text here so we support that
    this.fine_text = options;
  } else if (typeof options === "object" && options != null) {
    this.fine_text = (typeof options.fine_text === "string" ? options.fine_text : "");
    this.x_axis = (typeof options.x_axis === "boolean" ? (options.x_axis ? 1 : 0) : 1);
    if (options.x_axis_hidden != null && options.x_axis_hidden) this.x_axis = -1;
    this.y_axis = (typeof options.y_axis === "boolean" ? options.y_axis : true);
    this.xlate_nsyms = (typeof options.xlate_nsyms === "number" ? options.xlate_nsyms : this.xlate_nsyms);
    this.xlate_start = (typeof options.xlate_start === "number" ? options.xlate_start : this.xlate_start);
    this.xlate_end = (typeof options.xlate_end === "number" ? options.xlate_end : this.xlate_end);
  }
};

Logo.prototype.add_pspm = function(pspm, column) {
  "use strict";
  var col;
  if (typeof column === "undefined") {
    column = 0;
  } else if (column < 0) {
    throw new Error("Column index out of bounds.");
  }
  this.pspm_list[this.rows] = pspm;
  this.pspm_column[this.rows] = column;
  this.rows++;
  col = column + pspm.get_motif_length();
  if (col > this.columns) {
    this.columns = col;
  }
};

Logo.prototype.get_columns = function() {
  "use strict";
  return this.columns;
};

Logo.prototype.get_xlate_nsyms = function() {
  "use strict";
  return this.xlate_nsyms;
};

Logo.prototype.get_xlate_start = function() {
  "use strict";
  return (this.xlate_start != null ? this.xlate_start : 0);
};

Logo.prototype.get_xlate_end = function() {
  "use strict";
  return (this.xlate_end != null ? this.xlate_end : this.columns * this.xlate_nsyms);
};

Logo.prototype.get_xlate_columns = function() {
  "use strict";
  return this.get_xlate_end() - this.get_xlate_start();
};

Logo.prototype.get_rows = function() {
  "use strict";
  return this.rows;
};

Logo.prototype.get_pspm = function(row_index) {
  "use strict";
  if (row_index < 0 || row_index >= this.rows) {
    throw new Error("INDEX_OUT_OF_BOUNDS");
  }
  return this.pspm_list[row_index];
};

Logo.prototype.get_offset = function(row_index) {
  "use strict";
  if (row_index < 0 || row_index >= this.rows) {
    throw new Error("INDEX_OUT_OF_BOUNDS");
  }
  return this.pspm_column[row_index];
};

Logo.prototype._as_eps_data = function(ssc, errbars) {
  var i, j, pos, stack_pos, pspm, stack, sym, out;
  out = "";
  for (i = 0; i < this.rows; i++) {
    out += "\nStartLine\n";
    // Indent
    for (j = 0; j < this.pspm_column[i]; j++) {
      out += "() startstack\nendstack\n\n";
    }
    pspm = this.pspm_list[i];
    if (pspm.get_left_trim() > 0) {
      out += "MuteColour\nDrawTrimEdge\n" + pspm.get_left_trim() + " DrawTrimBg\n";
    }
    for (pos = 0; pos < pspm.get_motif_length(); pos++) {
      if (pos != 0 && pos == pspm.get_left_trim()) { // enable full colour
        out += "DrawTrimEdge\nRestoreColour\n";
      } else if (pos == (pspm.get_motif_length() - pspm.get_right_trim())) {
        out += "MuteColour\n" + pspm.get_right_trim() + " DrawTrimBg\n";
      }
      out += "(" + (pos + 1) + ") startstack\n";
      stack = pspm.get_stack(pos, this.alphabet, ssc);
      for (stack_pos = 0; stack_pos < stack.length; stack_pos++) {
        sym = stack[stack_pos];
        out += " " + (sym.get_scale() * this.alphabet.get_ic()) + " (" + sym.get_symbol() + ") numchar\n";
      }
      if (errbars) {
        out += " " + pspm.get_error(this.alphabet) + " Ibeam\n";
      }
      out += "endstack\n\n";
    }
    if (pspm.get_right_trim() > 0 || pspm.get_left_trim() == pspm.get_motif_length()) {
      out += "RestoreColour\n";
    }
    out += "EndLine\n";
  }
  return out;
};

Logo.prototype.as_eps = function(options) {
  "use strict";
  if (this.xlate_nsyms != 1) throw new Error("Unsupported setting xlate_nsyms for EPS");
  if (this.xlate_start != null) throw new Error("Unsupported setting xlate_start for EPS");
  if (this.xlate_end != null) throw new Error("Unsupported setting xlate_end for EPS");

  var LOGOHEIGHT = 7.5; // default height of line in cm
  var cm2pts, height, width, now, ssc, errbars;
  if (typeof options === "undefined") {
    options = {};
  }
  cm2pts = 72 / 2.54;
  if (typeof options.logo_height == "number") {
    height = options.logo_height;
  } else {
    height = LOGOHEIGHT * this.rows;
  }
  if (typeof options.logo_width == "number") {
    width = options.logo_width;
  } else {
    width = this.columns + 2;
  }
  now = new Date();
  ssc = (typeof options.ssc == "boolean" ? options.ssc : false);
  errbars = (typeof options.show_error_bar == "boolean" ? options.show_error_bar : ssc);
  var values = {
    "LOGOHEIGHT": height,
    "LOGOWIDTH": width,
    "BOUNDINGHEIGHT": Math.round(height * cm2pts),
    "BOUNDINGWIDTH": Math.round(width * cm2pts),
    "LOGOLINEHEIGHT": (height / this.rows),
    "CHARSPERLINE": this.columns,
    "BARBITS": this.alphabet.get_ic(),
    "LOGOTYPE": (this.alphabet.has_complement() ? "NA" : "AA"),
    "CREATIONDATE": now.getDate() + "." + (now.getMonth() + 1) + "." + now.getFullYear() + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds(),
    "ERRORBARFRACTION": (typeof options.error_bar_fraction == "number" ? options.error_bar_fraction : 1.0),
    "TICBITS": (typeof options.ticbits == "number" ? options.ticbits : 1.0),
    "TITLE": (typeof options.title == "string" ? options.title : ""),
    "FINEPRINT": (typeof options.fineprint == "string" ? options.fineprint : this.fine_text),
    "XAXISLABEL": (typeof options.xaxislabel == "string" ? options.xaxislabel : ""),
    "YAXISLABEL": (typeof options.yaxislabel == "string" ? options.yaxislabel : "bits"),
    "SSC": ssc,
    "YAXIS": (typeof options.show_y_axis == "boolean" ? options.show_y_axis : this.y_axis),
    "SHOWENDS": (typeof options.show_ends == "boolean" ? options.show_ends : false),
    "ERRBAR": errbars,
    "OUTLINE": (typeof options.show_outline == "boolean" ? options.show_outline : false),
    "NUMBERING": (typeof options.show_numbering == "boolean" ? options.show_numbering : this.x_axis != 0),
    "SHOWINGBOX": (typeof options.show_box == "boolean" ? options.show_box : false),
    "CREATOR": (typeof options.creator == "string" ? options.creator : "motif_logo.js"),
    "FONTSIZE": (typeof options.label_font_size == "number" ? options.label_font_size : 12),
    "TITLEFONTSIZE": (typeof options.title_font_size == "number" ? options.title_font_size : 12),
    "SMALLFONTSIZE": (typeof options.small_font_size == "number" ? options.small_font_size : 6),
    "TOPMARGIN" : (typeof options.top_margin == "number" ? options.top_margin : 0.9),
    "BOTTOMMARGIN": (typeof options.bottom_margin == "number" ? options.bottom_margin : 0.9),
    "COLORDICT": this.alphabet._as_eps_dict(),
    "DATA": this._as_eps_data(ssc, errbars)
  };
  // now this requires that the script containing the template has been imported!
  return motif_logo_template(values);
};

//======================================================================
// end Logo object
//======================================================================

// calculate the exact size (in pixels) of an object drawn on the
// canvas assuming that the background of the canvas is transparent.
function canvas_bounds(ctx, cwidth, cheight) {
  "use strict";
  var data, r, c, top_line, bottom_line, left_line, right_line, 
      txt_width, txt_height;

  // extract the image data
  data = ctx.getImageData(0, 0, cwidth, cheight).data;

  // set initial values
  top_line = -1; bottom_line = -1; left_line = -1; right_line = -1;
  txt_width = 0; txt_height = 0;

  // Find the top-most line with a non-transparent pixel
  for (r = 0; r < cheight; r++) {
    for (c = 0; c < cwidth; c++) {
      if (data[r * cwidth * 4 + c * 4 + 3]) {
        top_line = r;
        break;
      }
    }
    if (top_line != -1) {
      break;
    }
  }
  
  // Only bother looking if we found at least one set pixel... 
  if (top_line != -1) {

    //find the last line with a non-transparent pixel
    for (r = cheight-1; r >= top_line; r--) {
      for(c = 0; c < cwidth; c++) {
        if(data[r * cwidth * 4 + c * 4 + 3]) {
          bottom_line = r;
          break;
        }
      }
      if (bottom_line != -1) {
        break;
      }
    }
    // calculate height
    txt_height = bottom_line - top_line + 1;

    // Find the left-most line with a non-transparent pixel
    for (c = 0; c < cwidth; c++) {
      for (r = top_line; r <= bottom_line; r++) {
        if (data[r * cwidth * 4 + c * 4 + 3]) {
          left_line = c;
          break;
        }
      }
      if (left_line != -1) {
        break;
      }
    }

    //find the right most line with a non-transparent pixel
    for (c = cwidth-1; c >= left_line; c--) {
      for(r = top_line; r <= bottom_line; r++) {
        if(data[r * cwidth * 4 + c * 4 + 3]) {
          right_line = c;
          break;
        }
      }
      if (right_line != -1) {
        break;
      }
    }
    txt_width = right_line - left_line + 1;
  }

  //return the bounds
  return {bound_top: top_line, bound_bottom: bottom_line, 
    bound_left: left_line, bound_right: right_line, width: txt_width, 
    height: txt_height};
}

//======================================================================
// start RasterizedAlphabet
//======================================================================

// Rasterize Alphabet
// 1) Measure width of text at default font for all symbols in alphabet
// 2) sort in width ascending
// 3) Drop the top and bottom 10% (designed to ignore outliers like 'W' and 'I')
// 4) Calculate the average as the maximum scaling factor (designed to stop I becoming a rectangular blob).
// 5) Assume scale of zero would result in width of zero, interpolate scale required to make perfect width font
// 6) Draw text onto temp canvas at calculated scale
// 7) Find bounds of drawn text
// 8) Paint on to another canvas at the desired height (but only scaling width to fit if larger).
var RasterizedAlphabet = function(alphabet, logo_scale, font, width) {
  "use strict";
  var default_size, safety_pad, canvas, ctx, middle, baseline, widths, sizes,
      i, sym, size, tenpercent, avg_width, scale, 
      target_width, target_height;
  //variable prototypes
  this.alphabet = alphabet;
  this.scale = logo_scale;
  this.sym_cache = {};
  this.stack_num_cache = [];
  this.scale_num_cache = [];
  // size of canvas
  default_size = 60; // size of measuring canvas
  safety_pad = 20; // pixels to pad around so we don't miss the edges
  // create a canvas to do our measuring
  canvas = document.createElement("canvas");
  if (!canvas.getContext) throw new Error("No canvas support");
  canvas.width = default_size + 2 * safety_pad;
  canvas.height = default_size + 2 * safety_pad;
  middle = Math.round(canvas.width / 2);
  baseline = Math.round(canvas.height - safety_pad);
  ctx = canvas.getContext('2d');
  if (!supports_text(ctx)) throw new Error("Canvas does not support text");
  ctx.font = font;
  ctx.textAlign = "center";
  ctx.translate(middle, baseline);
  // list of widths
  widths = [];
  sizes = [];
  //now measure each letter in the alphabet
  for (i = 0; i < alphabet.get_size_core(); ++i) {
    // reset the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = alphabet.get_colour(i);
    // draw the test text
    ctx.fillText(alphabet.get_symbol(i), 0, 0);
    //measure
    size = canvas_bounds(ctx, canvas.width, canvas.height);
    if (size.width === 0) throw new Error("Invisible symbol!");
    widths.push(size.width);
    sizes[i] = size;
  }
  //sort the widths
  widths.sort(function(a,b) {return a - b;});
  //drop 10% of the items off each end
  tenpercent = Math.floor(widths.length / 10);
  for (i = 0; i < tenpercent; ++i) {
    widths.pop();
    widths.shift();
  }
  //calculate average width
  avg_width = 0;
  for (i = 0; i < widths.length; ++i) {
    avg_width += widths[i];
  }
  avg_width /= widths.length;
  // calculate the target width
  target_width = width * this.scale * 2;
  // calculate scales
  for (i = 0; i < alphabet.get_size_core(); ++i) {
    sym = alphabet.get_symbol(i);
    size = sizes[i];
    // calculate scale
    scale = target_width / Math.max(avg_width, size.width);
    // estimate scaled height
    target_height = size.height * scale;
    // create an appropriately sized canvas
    canvas = document.createElement("canvas");
    canvas.width = target_width;
    canvas.height = target_height + safety_pad * 2;
    // calculate the middle
    middle = Math.round(canvas.width / 2);
    // calculate the baseline
    baseline = Math.round(canvas.height - safety_pad);
    // get the context and prepare to draw the rasterized text
    ctx = canvas.getContext('2d');
    ctx.font = font;
    ctx.fillStyle = alphabet.get_colour(i);
    ctx.textAlign = "center";
    ctx.translate(middle, baseline);
    ctx.save();
    ctx.scale(scale, scale);
    // draw the text
    ctx.fillText(sym, 0, 0);
    ctx.restore();
    this.sym_cache[sym] = {"image": canvas, "size": canvas_bounds(ctx, canvas.width, canvas.height)};
  }
};

RasterizedAlphabet.prototype.get_alphabet = function() {
  return this.alphabet;
};

RasterizedAlphabet.prototype.get_scale = function() {
  return this.scale;
};

RasterizedAlphabet.prototype.draw_stack_sym = function(ctx, letter, dx, dy, dWidth, dHeight) {
  "use strict";
  var entry, image, size;
  entry = this.sym_cache[letter];
  image = entry.image;
  size = entry.size;
  ctx.drawImage(image, 0, size.bound_top -1, image.width, size.height+1, dx, dy, dWidth, dHeight);
};

RasterizedAlphabet.prototype.draw_stack_num = function(ctx, font, stack_width, index) {
  var image, image_ctx, text_length;
  if (index >= this.stack_num_cache.length) {
    image = document.createElement("canvas");
    // measure the text
    image_ctx = image.getContext('2d');
    image_ctx.save();
    image_ctx.font = font;
    text_length = image_ctx.measureText("" + (index + 1)).width;
    image_ctx.restore();
    // resize the canvas to fit
    image.width = Math.ceil(stack_width);
    image.height = Math.ceil(text_length);
    // draw the text
    image_ctx = image.getContext('2d');
    image_ctx.translate(Math.round(stack_width / 2), 0);
    image_ctx.font = font;
    image_ctx.textBaseline = "middle";
    image_ctx.textAlign = "right";
    image_ctx.rotate(-(Math.PI / 2));
    image_ctx.fillText("" + (index + 1), 0, 0);
    this.stack_num_cache[index] = image;
  } else {
    image = this.stack_num_cache[index];
  }
  ctx.drawImage(image, 0, 0);
}

RasterizedAlphabet.prototype.draw_scale_num = function(ctx, font, num) {
  var image, image_ctx, text_size, m_length;
  if (num >= this.scale_num_cache.length) {
    image = document.createElement("canvas");
    // measure the text
    image_ctx = image.getContext('2d');
    image_ctx.font = font;
    text_size = image_ctx.measureText("" + num);
    if (text_size.actualBoundingBoxAscent && text_size.actualBoundingBoxDesent) {
      // resize the canvas to fit
      image.width = Math.ceil(text_size.width);
      image.height = Math.ceil(text_size.actualBoundingBoxAscent + text_size.actualBoundingBoxDesent);
      // draw the text
      image_ctx = image.getContext('2d');
      image_ctx.font = font;
      image_ctx.textAlign = "right";
      image_ctx.fillText("" + num, image.width, text_size.actualBoundingBoxAscent);
    } else {
      // measure width of 'm' to approximate height, we double it later anyway
      m_length = image_ctx.measureText("m").width;
      // resize the canvas to fit
      image.width = Math.ceil(text_size.width);
      image.height = Math.ceil(2 * m_length);
      // draw the text
      image_ctx = image.getContext('2d');
      image_ctx.font = font;
      image_ctx.textAlign = "right";
      image_ctx.textBaseline = "middle";
      image_ctx.fillText("" + num, image.width, m_length);
    }
    this.scale_num_cache[num] = image;
  } else {
    image = this.scale_num_cache[num];
  }
  ctx.drawImage(image, -image.width, -Math.round(image.height / 2))
}

//======================================================================
// end RasterizedAlphabet
//======================================================================

//======================================================================
// start LogoMetrics object
//======================================================================

var LogoMetrics = function(ctx, logo_columns, logo_rows, has_names, has_finetext, x_axis, y_axis) {
  "use strict";
  var i, row_height;
  //variable prototypes
  this.pad_top = (has_names ? 5 : 0);
  this.pad_left = (y_axis ? 10 : 0);
  this.pad_right = (has_finetext ? 15 : 0);
  this.pad_bottom = 0;
  this.pad_middle = 20;
  this.name_height = 14;
  this.name_font = "bold " + this.name_height + "px Times, sans-serif";
  this.name_spacer = 0;
  this.y_axis = y_axis;
  this.y_label = "bits";
  this.y_label_height = 12;
  this.y_label_font = "bold " + this.y_label_height + "px Helvetica, sans-serif";
  this.y_label_spacer = 3;
  this.y_num_height = 12;
  this.y_num_width = 0;
  this.y_num_font = "bold " + this.y_num_height + "px Helvetica, sans-serif";
  this.y_tic_width = 5;
  this.stack_pad_left = 0;
  this.stack_font = "bold 25px Helvetica, sans-serif";
  this.stack_height = 90;
  this.stack_width = 26;
  this.stacks_pad_right = 5;
  this.x_axis = x_axis;
  this.x_num_above = 2;
  this.x_num_height = 12;
  this.x_num_width = 0;
  this.x_num_font = "bold " + this.x_num_height + "px Helvetica, sans-serif";
  this.fine_txt_height = 6;
  this.fine_txt_above = 2;
  this.fine_txt_font = "normal " + this.fine_txt_height + "px Helvetica, sans-serif";
  this.letter_metrics = new Array();
  this.summed_width = 0;
  this.summed_height = 0;
  //calculate the width of the y axis numbers
  ctx.font = this.y_num_font;
  for (i = 0; i <= 2; i++) {
    this.y_num_width = Math.max(this.y_num_width, ctx.measureText("" + i).width);
  }
  //calculate the width of the x axis numbers (but they are rotated so it becomes height)
  if (x_axis == 1) {
    ctx.font = this.x_num_font;
    for (i = 1; i <= logo_columns; i++) {
      this.x_num_width = Math.max(this.x_num_width, ctx.measureText("" + i).width);
    }
  } else if (x_axis == 0) {
    this.x_num_height = 4;
    this.x_num_width = 4;
  } else {
    this.x_num_height = 0;
    this.x_num_width = 0;
  }
  
  //calculate how much vertical space we want to draw this
  //first we add the padding at the top and bottom since that's always there
  this.summed_height += this.pad_top + this.pad_bottom;
  //all except the last row have the same amount of space allocated to them
  if (logo_rows > 1) {
    row_height = this.stack_height + this.pad_middle;
    if (has_names) {
      row_height += this.name_height;
      //the label is allowed to overlap into the spacer
      row_height += Math.max(this.y_num_height/2, this.name_spacer); 
      //the label is allowed to overlap the space used by the other label
      row_height += Math.max(this.y_num_height/2, this.x_num_height + this.x_num_above); 
    } else {
      row_height += this.y_num_height/2; 
      //the label is allowed to overlap the space used by the other label
      row_height += Math.max(this.y_num_height/2, this.x_num_height + this.x_num_above); 
    }
    this.summed_height += row_height * (logo_rows - 1);
  }
  //the last row has the name and fine text below it but no padding
  this.summed_height += this.stack_height + (this.y_axis ? this.y_num_height/2 : 0);

  var fine_txt_total = (has_finetext ? this.fine_txt_height + this.fine_txt_above : 0);
  if (has_names) {
    this.summed_height += fine_txt_total + this.name_height;
    this.summed_height += Math.max((this.y_axis ? this.y_num_height/2 : 0), 
        this.x_num_height + this.x_num_above + this.name_spacer);
  } else {
    this.summed_height += Math.max((this.y_axis ? this.y_num_height/2 : 0), 
        this.x_num_height + this.x_num_above + fine_txt_total);
  }

  //calculate how much horizontal space we want to draw this
  //first add the padding at the left and right since that's always there
  this.summed_width += this.pad_left + this.pad_right;
  if (this.y_axis) {
    //add on the space for the y-axis label
    this.summed_width += this.y_label_height + this.y_label_spacer;
    //add on the space for the y-axis
    this.summed_width += this.y_num_width + this.y_tic_width;
  }
  //add on the space for the stacks
  this.summed_width += (this.stack_pad_left + this.stack_width) * logo_columns;
  //add on the padding after the stacks (an offset from the fine text)
  this.summed_width += this.stacks_pad_right;

};

//======================================================================
// end LogoMetrics object
//======================================================================

//found this trick at http://talideon.com/weblog/2005/02/detecting-broken-images-js.cfm
function image_ok(img) {
  "use strict";
  // During the onload event, IE correctly identifies any images that
  // weren't downloaded as not complete. Others should too. Gecko-based
  // browsers act like NS4 in that they report this incorrectly.
  if (!img.complete) {
    return false;
  }
  // However, they do have two very useful properties: naturalWidth and
  // naturalHeight. These give the true size of the image. If it failed
  // to load, either of these should be zero.
  if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
    return false;
  }
  // No other way of checking: assume it's ok.
  return true;
}
  
function supports_text(ctx) {
  "use strict";
  if (!ctx.fillText) {
    return false;
  }
  if (!ctx.measureText) {
    return false;
  }
  return true;
}

//draws the scale, returns the width
function draw_scale(ctx, metrics, alphabet_ic, raster) {
  "use strict";
  var tic_height, i;
  tic_height = metrics.stack_height / alphabet_ic;
  ctx.save();
  ctx.translate(metrics.y_label_height, metrics.y_num_height/2);
  //draw the axis label
  ctx.save();
  ctx.font = metrics.y_label_font;
  ctx.translate(0, metrics.stack_height/2);
  ctx.rotate(-(Math.PI / 2));
  ctx.textAlign = "center";
  ctx.fillText("bits", 0, 0);
  ctx.restore();

  ctx.translate(metrics.y_label_spacer + metrics.y_num_width, 0);

  //draw the axis tics
  ctx.save();
  ctx.translate(0, metrics.stack_height);
  for (i = 0; i <= alphabet_ic; i++) {
    //draw the number
    ctx.save();
    ctx.translate(-1, 0);
    raster.draw_scale_num(ctx, metrics.y_num_font, i);
    ctx.restore();
    //draw the tic
    ctx.fillRect(0, -1, metrics.y_tic_width, 2);
    //prepare for next tic
    ctx.translate(0, -tic_height);
  }
  ctx.restore();

  ctx.fillRect(metrics.y_tic_width - 2, 0, 2, metrics.stack_height)

  ctx.restore();
}

function draw_stack_num(ctx, metrics, row_index, raster) {
  "use strict";
  ctx.save();
  ctx.translate(0, Math.round(metrics.stack_height + metrics.x_num_above));
  if (metrics.x_axis == 1) {
    raster.draw_stack_num(ctx, metrics.x_num_font, metrics.stack_width, row_index);
  } else if (metrics.x_axis == 0) {
    // draw dots instead of the numbers (good for small logos)
    ctx.beginPath();
    var radius = Math.round(metrics.x_num_height / 2);
    ctx.arc(Math.round(metrics.stack_width / 2), radius, radius, 0, 2 * Math.PI, false);
    ctx.fill();
  }
  ctx.restore();
}

function draw_stack(ctx, metrics, symbols, raster) {
  "use strict";
  var preferred_pad, sym_min, i, sym, sym_height, pad;
  preferred_pad = 0;
  sym_min = 5;

  ctx.save();//1
  ctx.translate(0, metrics.stack_height);
  for (i = 0; i < symbols.length; i++) {
    sym = symbols[i];
    sym_height = metrics.stack_height * sym.get_scale();
    
    pad = preferred_pad;
    if (sym_height - pad < sym_min) {
      pad = Math.min(pad, Math.max(0, sym_height - sym_min));
    }
    sym_height -= pad;

    //translate to the correct position
    ctx.translate(0, -(pad/2 + sym_height));

    //draw
    raster.draw_stack_sym(ctx, sym.get_symbol(), 0, 0, metrics.stack_width, sym_height);
    //translate past the padding
    ctx.translate(0, -(pad/2));
  }
  ctx.restore();//1
}

function draw_dashed_line(ctx, pattern, start, x1, y1, x2, y2) {
  "use strict";
  var x, y, len, i, dx, dy, tlen, theta, mulx, muly, lx, ly;
  dx = x2 - x1;
  dy = y2 - y1;
  tlen = Math.pow(dx*dx + dy*dy, 0.5);
  theta = Math.atan2(dy,dx);
  mulx = Math.cos(theta);
  muly = Math.sin(theta);
  lx = [];
  ly = [];
  for (i = 0; i < pattern; ++i) {
    lx.push(pattern[i] * mulx);
    ly.push(pattern[i] * muly);
  }
  i = start;
  x = x1;
  y = y1;
  len = 0;
  ctx.beginPath();
  while (len + pattern[i] < tlen) {
    ctx.moveTo(x, y);
    x += lx[i];
    y += ly[i];
    ctx.lineTo(x, y);
    len += pattern[i];
    i = (i + 1) % pattern.length;
    x += lx[i];
    y += ly[i];
    len += pattern[i];
    i = (i + 1) % pattern.length;
  }
  if (len < tlen) {
    ctx.moveTo(x, y);
    x += mulx * (tlen - len);
    y += muly * (tlen - len);
    ctx.lineTo(x, y);
  }
  ctx.stroke();
}

function draw_trim_background(ctx, metrics, left_start, left_end, left_divider, right_start, right_end, right_divider) {
  "use strict";
  var left_size = left_end - left_start;
  var right_size = right_end - right_start;
  var line_x;

  ctx.save();//s8
  ctx.fillStyle = "rgb(240, 240, 240)";
  if (left_size > 0) {
    ctx.fillRect(left_start * metrics.stack_width, 0, left_size * metrics.stack_width, metrics.stack_height);
  }
  if (right_size > 0) {
    ctx.fillRect(right_start * metrics.stack_width, 0, right_size * metrics.stack_width, metrics.stack_height);
  }
  ctx.fillStyle = "rgb(51, 51, 51)";
  if (left_size > 0 && left_divider) {
    line_x = (left_end * metrics.stack_width) - 0.5;
    draw_dashed_line(ctx, [3], 0, line_x, 0, line_x, metrics.stack_height);
  }
  if (right_size > 0 && right_divider) {
    line_x = (right_start * metrics.stack_width) + 0.5;
    draw_dashed_line(ctx, [3], 0, line_x, 0, line_x, metrics.stack_height);
  }
  ctx.restore();//s8
}

function size_logo_on_canvas(logo, canvas, show_names, scale) {
  "use strict";
  var draw_name, draw_finetext, metrics;
  draw_name = (typeof show_names === "boolean" ? show_names : (logo.get_rows() > 1));
  draw_finetext = (logo.fine_text.length > 0);
  if (canvas.width !== 0 && canvas.height !== 0) {
    return;
  }
  metrics = new LogoMetrics(canvas.getContext('2d'), 
      logo.get_xlate_columns(), logo.get_rows(), draw_name, draw_finetext, logo.x_axis, logo.y_axis);
  if (typeof scale == "number") {
    //resize the canvas to fit the scaled logo
    canvas.width = metrics.summed_width * scale;
    canvas.height = metrics.summed_height * scale;
  } else {
    if (canvas.width === 0 && canvas.height === 0) {
      canvas.width = metrics.summed_width;
      canvas.height = metrics.summed_height;
    } else if (canvas.width === 0) {
      canvas.width = metrics.summed_width * (canvas.height / metrics.summed_height);
    } else if (canvas.height === 0) {
      canvas.height = metrics.summed_height * (canvas.width / metrics.summed_width);
    }
  }
}

function draw_logo_on_canvas(logo, canvas, show_names, scale) {
  "use strict";
  var i, draw_name, draw_finetext, ctx, metrics, raster, pspm_i, pspm, 
      offset, col_index, motif_position, ssc;
  ssc = false;
  draw_name = (typeof show_names === "boolean" ? show_names : (logo.get_rows() > 1));
  draw_finetext = (logo.fine_text.length > 0);
  ctx = canvas.getContext('2d');
  //assume that the user wants the canvas scaled equally so calculate what the best width for this image should be
  metrics = new LogoMetrics(ctx, logo.get_xlate_columns(), logo.get_rows(), draw_name, draw_finetext, logo.x_axis, logo.y_axis);
  if (typeof scale == "number") {
    //resize the canvas to fit the scaled logo
    canvas.width = metrics.summed_width * scale;
    canvas.height = metrics.summed_height * scale;
  } else {
    if (canvas.width === 0 && canvas.height === 0) {
      scale = 1;
      canvas.width = metrics.summed_width;
      canvas.height = metrics.summed_height;
    } else if (canvas.width === 0) {
      scale = canvas.height / metrics.summed_height;
      canvas.width = metrics.summed_width * scale;
    } else if (canvas.height === 0) {
      scale = canvas.width / metrics.summed_width;
      canvas.height = metrics.summed_height * scale;
    } else {
      scale = Math.min(canvas.width / metrics.summed_width, canvas.height / metrics.summed_height);
    }
  }
  // cache the raster based on the assumption that we will be drawing a lot
  // of logos the same size and alphabet
  if (typeof draw_logo_on_canvas.raster_cache === "undefined") {
    draw_logo_on_canvas.raster_cache = [];
  }
  for (i = 0; i < draw_logo_on_canvas.raster_cache.length; i++) {
    raster = draw_logo_on_canvas.raster_cache[i];
    if (raster.get_alphabet().equals(logo.alphabet) &&
        Math.abs(raster.get_scale() - scale) < 0.1) break;
    raster = null;
  }
  if (raster == null) {
    raster = new RasterizedAlphabet(logo.alphabet, scale, metrics.stack_font, metrics.stack_width);
    draw_logo_on_canvas.raster_cache.push(raster);
  }
  ctx = canvas.getContext('2d');
  ctx.save();//s1
  ctx.scale(scale, scale);
  ctx.save();//s2
  ctx.save();//s7
  //create margin
  ctx.translate(Math.round(metrics.pad_left), Math.round(metrics.pad_top));
  for (pspm_i = 0; pspm_i < logo.get_rows(); ++pspm_i) {
    pspm = logo.get_pspm(pspm_i);
    offset = logo.get_offset(pspm_i);
    //optionally draw name if this isn't the last row or is the only row 
    if (draw_name && (logo.get_rows() == 1 || pspm_i != (logo.get_rows()-1))) {
      ctx.save();//s4
      ctx.translate(Math.round(metrics.summed_width/2), Math.round(metrics.name_height));
      ctx.font = metrics.name_font;
      ctx.textAlign = "center";
      ctx.fillText(pspm.name, 0, 0);
      ctx.restore();//s4
      ctx.translate(0, Math.round(metrics.name_height + 
          Math.min(0, metrics.name_spacer - metrics.y_num_height/2)));
    }
    //draw scale
    if (logo.y_axis) draw_scale(ctx, metrics, logo.alphabet.get_ic(), raster);
    ctx.save();//s5
    //translate across past the scale
    if (logo.y_axis) {
      ctx.translate(Math.round(metrics.y_label_height + metrics.y_label_spacer + 
        metrics.y_num_width + metrics.y_tic_width), Math.round(metrics.y_num_height / 2));
    }
    //draw the trimming background
    if (pspm.get_left_trim() > 0 || pspm.get_right_trim() > 0) {
      var left_start = offset * logo.get_xlate_nsyms();
      var left_end = (offset + pspm.get_left_trim()) * logo.get_xlate_nsyms();
      var left_divider = true;
      if (left_end < logo.get_xlate_start() || left_start > logo.get_xlate_end()) {
        // no overlap
        left_start = 0;
        left_end = 0;
        left_divider = false;
      } else {
        if (left_start < logo.get_xlate_start()) {
          left_start = logo.get_xlate_start();
        }
        if (left_end > logo.get_xlate_end()) {
          left_end = logo.get_xlate_end();
          left_divider = false;
        }
        left_start -= logo.get_xlate_start();
        left_end -= logo.get_xlate_start();
        if (left_end < left_start) {
          left_start = 0;
          left_end = 0;
          left_divider = false;
        }
      }
      var right_end = (offset + pspm.get_motif_length()) * logo.get_xlate_nsyms();
      //var right_start = right_end - (pspm.get_left_trim() * logo.get_xlate_nsyms());
      var right_start = right_end - (pspm.get_right_trim() * logo.get_xlate_nsyms());
      var right_divider = true;
      if (right_end < logo.get_xlate_start() || right_start > logo.get_xlate_end()) {
        // no overlap
        right_start = 0;
        right_end = 0;
        right_divider = false;
      } else {
        if (right_start < logo.get_xlate_start()) {
          right_start = logo.get_xlate_start();
          right_divider = false;
        }
        if (right_end > logo.get_xlate_end()) {
          right_end = logo.get_xlate_end();
        }
        right_start -= logo.get_xlate_start();
        right_end -= logo.get_xlate_start();
        if (right_end < right_start) {
          right_start = 0;
          right_end = 0;
          right_divider = false;
        }
      }
      draw_trim_background(ctx, metrics, left_start, left_end, left_divider, right_start, right_end, right_divider);
    }
    //draw letters
    var xlate_col;
    for (xlate_col = logo.get_xlate_start(); xlate_col < logo.get_xlate_end(); xlate_col++) {
      ctx.translate(metrics.stack_pad_left,0);
      col_index = Math.floor(xlate_col / logo.get_xlate_nsyms());
      if (xlate_col % logo.get_xlate_nsyms() == 0) {
        if (col_index >= offset && col_index < (offset + pspm.get_motif_length())) {
          motif_position = col_index - offset;
          draw_stack_num(ctx, metrics, motif_position, raster);
          draw_stack(ctx, metrics, pspm.get_stack(motif_position, logo.alphabet, ssc), raster);
        }
      } else {
        if (col_index >= offset && col_index < (offset + pspm.get_motif_length())) {
          ctx.save();// s5.1
          ctx.translate(0, Math.round(metrics.stack_height));
          // TODO draw a dot or dash or something to indicate continuity of the motif
          ctx.restore(); //s5.1
        }
      }
      ctx.translate(Math.round(metrics.stack_width), 0);
    }
    ctx.restore();//s5
    ////optionally draw name if this is the last row but isn't the only row 
    if (draw_name && (logo.get_rows() != 1 && pspm_i == (logo.get_rows()-1))) {
      //translate vertically past the stack and axis's        
      ctx.translate(0, metrics.y_num_height/2 + metrics.stack_height + 
          Math.max(metrics.y_num_height/2, metrics.x_num_above + metrics.x_num_width + metrics.name_spacer));

      ctx.save();//s6
      ctx.translate(metrics.summed_width/2, metrics.name_height);
      ctx.font = metrics.name_font;
      ctx.textAlign = "center";
      ctx.fillText(pspm.name, 0, 0);
      ctx.restore();//s6
      ctx.translate(0, metrics.name_height);
    } else {
      //translate vertically past the stack and axis's        
      ctx.translate(0, metrics.y_num_height/2 + metrics.stack_height + 
          Math.max(metrics.y_num_height/2, metrics.x_num_above + metrics.x_num_width));
    }
    //if not the last row then add middle padding
    if (pspm_i != (logo.get_rows() -1)) {
      ctx.translate(0, metrics.pad_middle);
    }
  }
  ctx.restore();//s7
  if (logo.fine_text.length > 0) {
    ctx.translate(metrics.summed_width - metrics.pad_right, metrics.summed_height - metrics.pad_bottom);
    ctx.font = metrics.fine_txt_font;
    ctx.textAlign = "right";
    ctx.fillText(logo.fine_text, 0,0);
  }
  ctx.restore();//s2
  ctx.restore();//s1
}

function create_canvas(c_width, c_height, c_id, c_title, c_display) {
  "use strict";
  var canvas = document.createElement("canvas");
  //check for canvas support before attempting anything
  if (!canvas.getContext) {
    return null;
  }
  var ctx = canvas.getContext('2d');
  //check for html5 text drawing support
  if (!supports_text(ctx)) {
    return null;
  }
  //size the canvas
  canvas.width = c_width;
  canvas.height = c_height;
  canvas.id = c_id;
  canvas.title = c_title;
  canvas.style.display = c_display;
  return canvas;
}

function logo_1(alphabet, fine_text, pspm) {
  "use strict";
  var logo = new Logo(alphabet, fine_text);
  logo.add_pspm(pspm);
  return logo;
}

function logo_2(alphabet, fine_text, target, query, query_offset) {
  "use strict";
  var logo = new Logo(alphabet, fine_text);
  if (query_offset < 0) {
    logo.add_pspm(target, -query_offset);
    logo.add_pspm(query);
  } else {
    logo.add_pspm(target);
    logo.add_pspm(query, query_offset);
  }      
  return logo;
}

/*
 * Specifies an alternate source for an image.
 * If the image with the image_id specified has
 * not loaded then a generated logo will be used 
 * to replace it.
 *
 * Note that the image must either have dimensions
 * or a scale must be set.
 */
function alternate_logo(logo, image_id, scale) {
  "use strict";
  var image = document.getElementById(image_id);
  if (!image) {
    alert("Can't find specified image id (" +  image_id + ")");
    return;
  }
  //if the image has loaded then there is no reason to use the canvas
  if (image_ok(image)) {
    return;
  }
  //the image has failed to load so replace it with a canvas if we can.
  var canvas = create_canvas(image.width, image.height, image_id, image.title, image.style.display);
  if (canvas === null) {
    return;
  }
  //draw the logo on the canvas
  draw_logo_on_canvas(logo, canvas, null, scale);
  //replace the image with the canvas
  image.parentNode.replaceChild(canvas, image);
}

/*
 * Specifies that the element with the specified id
 * should be replaced with a generated logo.
 */
function replace_logo(logo, replace_id, scale, title_txt, display_style) {
  "use strict";
  var element = document.getElementById(replace_id);
  if (!replace_id) {
    alert("Can't find specified id (" + replace_id + ")");
    return;
  }
  //found the element!
  var canvas = create_canvas(50, 120, replace_id, title_txt, display_style);
  if (canvas === null) {
    return;
  }
  //draw the logo on the canvas
  draw_logo_on_canvas(logo, canvas, null, scale);
  //replace the element with the canvas
  element.parentNode.replaceChild(canvas, element);
}

/*
 * Fast string trimming implementation found at
 * http://blog.stevenlevithan.com/archives/faster-trim-javascript
 *
 * Note that regex is good at removing leading space but
 * bad at removing trailing space as it has to first go through
 * the whole string.
 */
function trim (str) {
  "use strict";
  var ws, i;
  str = str.replace(/^\s\s*/, '');
  ws = /\s/; i = str.length;
  while (ws.test(str.charAt(--i)));
  return str.slice(0, i + 1);
}

//
// Delay drawing a logo
//
var DelayLogoTask = function(logo, canvas) {
  "use strict";
  canvas.width = canvas.width; // clear canvas
  this.logo = logo;
  this.canvas = canvas;
};

DelayLogoTask.prototype.run = function () {
  "use strict";
  this.canvas.width = this.canvas.width; // clear canvas
  draw_logo_on_canvas(this.logo, this.canvas, false);
};

/*
 * Make a canvas with the motif logo drawn on it.
 */
function make_logo(alphabet, pspm, height, rc, offset, className) {
  if (rc) pspm = pspm.copy().reverse_complement(alphabet);
  var logo = new Logo(alphabet);
  logo.add_pspm(pspm, offset);
  var canvas = document.createElement('canvas');
  var sizeit = (height < 0);
  canvas.height = (sizeit ? -height : height); 
  canvas.width = 0;
  canvas.className = className;
  if (sizeit) size_logo_on_canvas(logo, canvas, false);
  add_draw_task(canvas, new DelayLogoTask(logo, canvas));
  return canvas;
}
</script>
    <script>

// PRIVATE GLOBAL (uhoh)
var _block_colour_lookup = {};

function block_colour(index) {
  function hsl2rgb(hue, saturation, lightness) {
    "use strict";
    function _hue(p, q, t) {
      "use strict";
      if (t < 0) t += 1;
      else if (t > 1) t -= 1;
      if (t < (1.0 / 6.0)) {
        return p + ((q - p) * 6.0 * t);
      } else if (t < 0.5) {
        return q;
      } else if (t < (2.0 / 3.0)) {
        return p + ((q - p) * ((2.0 / 3.0) - t) * 6.0);
      } else {
        return p;
      }
    }
    function _pad_hex(value) {
      var hex = Math.round(value * 255).toString(16);
      if (hex.length < 2) hex = "0" + hex;
      return hex;
    }
    var r, g, b, p, q;
    if (saturation == 0) {
      // achromatic (grayscale)
      r = lightness;
      g = lightness;
      b = lightness;
    } else {
      if (lightness < 0.5) {
        q = lightness * (1 + saturation);
      } else {
        q = lightness + saturation - (lightness * saturation);
      }
      p = (2 * lightness) - q;
      r = _hue(p, q, hue + (1.0 / 3.0));
      g = _hue(p, q, hue);
      b = _hue(p, q, hue - (1.0 / 3.0));
    }
    return "#" + _pad_hex(r) + _pad_hex(g) + _pad_hex(b);
  }
  if (typeof index !== "number" || index % 1 !== 0 || index < 0) return "#000000";
  // check for override
  if (_block_colour_lookup[index] == null) {
    var start = 0; //red
    var sat = 100;
    var light = 50;
    var divisions = 1 << Math.ceil(Math.log(index + 1) / Math.LN2);
    hue = start + (360 / divisions) * ((index - (divisions >> 1)) * 2 + 1);
    // colour input fields only support values in the form #RRGGBB
    _block_colour_lookup[index] = hsl2rgb(hue / 360, sat / 100, light / 100);
  }
  return _block_colour_lookup[index];
}

function set_block_colour(index, new_colour) {
  _block_colour_lookup[index] = new_colour;
  var blocks = document.querySelectorAll("div.block_motif[data-colour-index=\"" + index + "\"]");
  var i;
  for (i = 0; i < blocks.length; i++) {
    blocks[i].style.backgroundColor = new_colour;
  }
  var swatches = document.querySelectorAll("div.legend_swatch[data-colour-index=\"" + index + "\"]");
  var picker;
  for (i = 0; i < swatches.length; i++) {
    swatches[i].style.backgroundColor = new_colour;
    picker = swatches[i].querySelector("input[type=\"color\"]");
    if (picker != null) picker.value = new_colour;
  }
}

function make_block_legend_entry(motif_name, motif_colour_index) {
  if (typeof make_block_legend_entry.has_colour_picker !== "boolean") {
    // test if colour picker is supported, based off Modernizer
    // see http://stackoverflow.com/a/7787648/66387
    make_block_legend_entry.has_colour_picker = (function() {
      var doc_ele = document.documentElement;
      // We first check to see if the type we give it sticks..
      var input_ele = document.createElement('input');
      input_ele.setAttribute('type', 'color');
      var value_ok = input_ele.type !== 'text';
      if (value_ok) {
        // If the type does, we feed it a textual value, which shouldn't be valid.
        // If the value doesn't stick, we know there's input sanitization which infers a custom UI
        var smile = ':)';
        input_ele.value = smile;
        input_ele.style.cssText = 'position:absolute;visibility:hidden;';
        // chuck into DOM and force reflow for Opera bug in 11.00
        // github.com/Modernizr/Modernizr/issues#issue/159
        doc_ele.appendChild(input_ele);
        doc_ele.offsetWidth;
        value_ok = input_ele.value != smile;
        doc_ele.removeChild(input_ele);
      }
      return value_ok;
    })();
  }
  var entry = document.createElement("div");
  entry.className = "legend_entry";
  var swatch;
  swatch = document.createElement("div");
  swatch.className = "legend_swatch";
  swatch.setAttribute("data-colour-index", motif_colour_index);
  swatch.style.backgroundColor = block_colour(motif_colour_index);
  if (make_block_legend_entry.has_colour_picker) {
    var picker = document.createElement("input");
    picker.type = "color";
    picker.value = block_colour(motif_colour_index);
    picker.addEventListener("change", function(e) {
      set_block_colour(motif_colour_index, picker.value);
    }, false);
    swatch.addEventListener("click", function(e) {
      picker.click();
    }, false);
    swatch.appendChild(picker);
  }
  entry.appendChild(swatch);
  var name = document.createElement("div");
  name.className = "legend_text";
  name.appendChild(document.createTextNode(motif_name));
  entry.appendChild(name);
  return entry;
}

function make_block_ruler(max_len) {
  var container = document.createElement("div");
  container.className = "block_container";
  var step;
  if (max_len < 50) {
    step = 1;
  } else if (max_len < 100) {
    step = 2;
  } else if (max_len < 200) {
    step = 4;
  } else if (max_len < 500) {
    step = 10;
  } else if (max_len < 1000) {
    step = 20;
  } else if (max_len < 2000) {
    step = 40;
  } else if (max_len < 5000) {
    step = 100;
  } else if (max_len < 10000) {
    step = 200;
  } else if (max_len < 20000) {
    step = 400;
  } else {
    step = Math.floor(max_len / 20000) * 400;
  }
  var peroid;
  if (max_len < 10) {
    peroid = 1;
  } else if (max_len < 20) {
    peroid = 2;
  } else {
    peroid = 5;
  }
  var i, cycle, offset, tic, label;
  for (i = 0, cycle = 0; i < max_len; i += step, cycle = (cycle + 1) % peroid) {
    offset = "" + ((i / max_len) * 100) + "%";
    tic = document.createElement("div");
    tic.style.left = offset;
    tic.className = (cycle == 0 ? "tic_major" : "tic_minor");
    container.appendChild(tic);
    if (cycle == 0) {
      label = document.createElement("div");
      label.className = "tic_label";
      label.style.left = offset;
      label.appendChild(document.createTextNode(i));
      container.appendChild(label);
    }
  }
  return container;
}

function _calculate_block_needle_drag_pos(e, data) {
  var mouse;
  e = e || window.event;
  if (e.pageX || ev.pageY) {
    mouse = {"x": e.pageX, "y": e.pageY};
  } else {
    mouse = {
      x:e.clientX + document.body.scrollLeft - document.body.clientLeft, 
      y:e.clientY + document.body.scrollTop  - document.body.clientTop 
    };
  }
  var cont = data.container;
  var dragable_length = cont.clientWidth - 
    (cont.style.paddingLeft ? cont.style.paddingLeft : 0) -
    (cont.style.paddingRight ? cont.style.paddingRight : 0);
  //I believe that the offset parent is the body
  //otherwise I would need to make this recursive
  //maybe clientLeft would work, but the explanation of
  //it is hard to understand and it apparently doesn't work
  //in firefox 2.
  var diff = mouse.x - cont.offsetLeft;
  if (diff < 0) diff = 0;
  if (diff > dragable_length) diff = dragable_length;
  var pos = Math.round(diff / dragable_length * data.max);
  if (pos > data.len) pos = data.len;
  return pos;
}

function _update_block_needle_drag(e, data, done) {
  "use strict";
  var pos = _calculate_block_needle_drag_pos(e, data);
  // read the needle positions
  var left = parseInt(data.llabel.textContent, 10) - data.off - 1;
  var right = parseInt(data.rlabel.textContent, 10) - data.off;
  // validate needle positions
  if (left >= data.len) left = data.len - 1;
  if (left < 0) left = 0;
  if (right > data.len) right = data.len;
  if (right <= left) right = left + 1;
  // calculate the new needle positions
  if (data.moveboth) {
    var size = right - left;
    if (data.isleft) {
      if ((pos + size) > data.len) pos = data.len - size;
      left = pos;
      right = pos + size;
    } else {
      if ((pos - size) < 0) pos = size;
      left = pos - size;
      right = pos;
    }
  } else {
    if (data.isleft) {
      if (pos >= right) pos = right - 1;
      left = pos;
    } else {
      if (pos <= left) pos = left + 1;
      right = pos;
    }
  }
  // update the needle positions
  data.lneedle.style.left = "" + (left / data.max * 100) + "%";
  data.llabel.textContent = "" + (left + data.off + 1);
  data.rneedle.style.left = "" + (right / data.max * 100) + "%";
  data.rlabel.textContent = "" + (right + data.off);
  data.handler(left, right, done);
}

function _make_block_needle_drag_start_handler(isleft, data) {
  return function (e) {
    data.isleft = isleft;
    data.moveboth = !(e.shiftKey);
    document.addEventListener("mousemove", data.drag_during, false);
    document.addEventListener("mouseup", data.drag_end, false);
  };
}

function _make_block_needle_drag_end_handler(data) {
  return function (e) {
    document.removeEventListener("mousemove", data.drag_during, false);
    document.removeEventListener("mouseup", data.drag_end, false);
    _update_block_needle_drag(e, data, true);
  };
}

function _make_block_needle_drag_during_handler(data) {
  return function (e) {
    _update_block_needle_drag(e, data, false);
  };
}

// private function used by make_block_container
function _make_block_needle(isleft, value, data) {
  var vbar = document.createElement('div');
  vbar.className = "block_needle " + (isleft ? "left" : "right");
  vbar.style.left = "" + (value / data.max * 100)+ "%";
  var label = document.createElement('div');
  label.className = "block_handle " + (isleft ? "left" : "right");
  // The needles sit between the sequence positions, so the left one sits at the
  // start and the right at the end. This is why 1 is added to the displayed
  // value for a left handle as the user doesn't need to know about this detail
  label.textContent = "" + (isleft ? value + data.off + 1 : value + data.off);
  label.unselectable = "on"; // so IE and Opera don't select the text, others are done in css
  label.title = "Drag to move the displayed range. Hold shift and drag to change " + (isleft ? "lower" : "upper") + " bound of the range.";
  vbar.appendChild(label);
  if (isleft) {
    data.lneedle = vbar;
    data.llabel = label;
  } else {
    data.rneedle = vbar;
    data.rlabel = label;
  }
  label.addEventListener("mousedown", _make_block_needle_drag_start_handler(isleft, data), false);
  return vbar;
}

function make_block_container(is_stranded, has_both_strands, max_len, show_len, offset, range_handler) {
  offset = (offset != null ? offset : 0);
  // make the container for the block diagram
  var container = document.createElement("div");
  container.className = "block_container";
  container.setAttribute("data-max", max_len);
  container.setAttribute("data-off", offset);
  if (is_stranded) {
    var plus = document.createElement("div");
    plus.appendChild(document.createTextNode("+"));
    plus.className = "block_plus_sym";
    container.appendChild(plus);
    if (has_both_strands) {
      var minus = document.createElement("div");
      minus.appendChild(document.createTextNode("-"));
      minus.className = "block_minus_sym";
      container.appendChild(minus);
    }
  }
  var rule = document.createElement("div");
  rule.className = "block_rule";
  rule.style.width = ((show_len / max_len) * 100) + "%";
  container.appendChild(rule);
  if (range_handler != null) {
    var range_data = {
      "max": max_len,
      "len": show_len,
      "off": offset,
      "handler": range_handler,
      "container": container,
      "lneedle": null, "llabel": null,
      "rneedle": null, "rlabel": null,
      "isleft": false, "moveboth" : false
    };
    range_data.drag_during = _make_block_needle_drag_during_handler(range_data);
    range_data.drag_end = _make_block_needle_drag_end_handler(range_data);
    container.appendChild(_make_block_needle(false, 1, range_data)); // add right first so z-index works
    container.appendChild(_make_block_needle(true, 0, range_data));
  }
  return container;
}

function make_block_label(container, max_len, pos, length, message) {
  "use strict";
  var label = document.createElement("div");
  label.className = "block_label";
  label.style.left = (((pos + (length / 2)) / max_len) * 100) + "%";
  label.appendChild(document.createTextNode(message));
  container.appendChild(label);
}

function make_block(container, max_len,
    site_pos, site_len, site_pvalue, site_rc, site_colour_index, site_secondary) {
  "use strict";
  var block_height, block, block_region1, block_region2;
  var max_block_height = 12;
  var max_pvalue = 1e-10;
  // calculate the height of the block
  block_height = (site_pvalue < max_pvalue ? max_block_height : 
      (Math.log(site_pvalue) / Math.log(max_pvalue)) * max_block_height);
  if (block_height < 1) block_height = 1;
  // create a block to represent the motif
  block = document.createElement("div");
  block.className = "block_motif" + (site_secondary ? " scanned_site" : "") + (site_rc ? " bottom" : " top");
  block.style.left = ((site_pos / max_len) * 100) + "%";
  block.style.top = (!site_rc ? max_block_height - block_height : 
      max_block_height + 1) + "px";
  block.style.width = ((site_len / max_len) * 100) + "%";
  block.style.height = block_height + "px";
  block.style.backgroundColor = block_colour(site_colour_index);
  block.setAttribute("data-colour-index", site_colour_index);
  // add to container
  container.appendChild(block);
  var activator = function (e) {
    toggle_class(block, "active", true);
    var new_e = new e.constructor(e.type, e);
    block.dispatchEvent(new_e);
  };
  var deactivator = function (e) {
    toggle_class(block, "active", false);
    var new_e = new e.constructor(e.type, e);
    block.dispatchEvent(new_e);
  }
  // create a larger region to detect mouseover for the block
  block_region1 = document.createElement("div");
  block_region1.className = "block_region top" + 
    (site_secondary ? " scanned_site" : "") + (site_rc ? "" : " main");
  block_region1.style.left = block.style.left;
  block_region1.style.width = block.style.width;
  block_region1.addEventListener('mouseover', activator, false);
  block_region1.addEventListener('mouseout', deactivator, false);
  container.appendChild(block_region1);
  block_region2 = document.createElement("div");
  block_region2.className = "block_region bottom" + 
    (site_secondary ? " scanned_site" : "") + (site_rc ? " main" : "");
  block_region2.style.left = block.style.left;
  block_region2.style.width = block.style.width;
  block_region2.addEventListener('mouseover', activator, false);
  block_region2.addEventListener('mouseout', deactivator, false);
  container.appendChild(block_region2);
  return block;
}

function set_block_needle_positions(containingNode, start, end) {
  var container, lneedle, llabel, rneedle, rlabel, max, off, left, right;
  container = (/\bblock_container\b/.test(containingNode.className) ? containingNode : containingNode.querySelector(".block_container"));
  max = parseInt(container.getAttribute("data-max"), 10);
  off = parseInt(container.getAttribute("data-off"), 10);
  left = start - off;
  right = end - off;
  lneedle = containingNode.querySelector(".block_needle.left");
  llabel = lneedle.querySelector(".block_handle.left");
  rneedle = containingNode.querySelector(".block_needle.right");
  rlabel = rneedle.querySelector(".block_handle.right");
  // update the needle positions
  lneedle.style.left = "" + (left / max * 100) + "%";
  llabel.textContent = "" + (left + off + 1);
  rneedle.style.left = "" + (right / max * 100) + "%";
  rlabel.textContent = "" + (right + off);
}

function get_block_needle_positions(containingNode) {
  var container, llabel, rlabel, max, off, left, right;
  container = (/\bblock_container\b/.test(containingNode.className) ? containingNode : containingNode.querySelector(".block_container"));
  max = parseInt(container.getAttribute("data-max"), 10);
  off = parseInt(container.getAttribute("data-off"), 10);
  llabel = containingNode.querySelector(".block_needle.left > .block_handle.left");
  rlabel = containingNode.querySelector(".block_needle.right > .block_handle.right");
  left = parseInt(llabel.textContent, 10) - off - 1;
  right = parseInt(rlabel.textContent, 10) - off;
  return {"start": left + off, "end": right + off};
}
</script>
    <script>
function make_alpha_bg_table(alph, freqs) {
  function colour_symbol(index) {
    var span = document.createElement("span");
    span.appendChild(document.createTextNode(alph.get_symbol(index)));
    span.style.color = alph.get_colour(index);
    span.className = "alpha_symbol";
    return span;
  }
  var table, thead, tbody, row, th, span, i;
  // create table
  table = document.createElement("table");
  table.className = "alpha_bg_table";
  // create header
  thead = document.createElement("thead");
  table.appendChild(thead);
  row = thead.insertRow(thead.rows.length);
  if (alph.has_complement()) {
    add_text_header_cell(row, "Name", "pop_alph_name");
    if (freqs != null) add_text_header_cell(row, "Freq.", "pop_alph_freq");
    if (alph.has_bg()) add_text_header_cell(row, "Bg.", "pop_alph_bg");
    add_text_header_cell(row, "");
    add_text_header_cell(row, "");
    add_text_header_cell(row, "");
    if (alph.has_bg()) add_text_header_cell(row, "Bg.", "pop_alph_bg");
    if (freqs != null) add_text_header_cell(row, "Freq.", "pop_alph_freq");
    add_text_header_cell(row, "Name", "pop_alph_name");
  } else {
    add_text_header_cell(row, "");
    add_text_header_cell(row, "Name", "pop_alph_name");
    if (freqs != null) add_text_header_cell(row, "Freq.", "pop_alph_freq");
    if (alph.has_bg()) add_text_header_cell(row, "Bg.", "pop_alph_bg");
  }
  // add alphabet entries
  tbody = document.createElement("tbody");
  table.appendChild(tbody);
  if (alph.has_complement()) {
    for (i = 0; i < alph.get_size_core(); i++) {
      var c = alph.get_complement(i);
      if (i > c) continue;
      row = tbody.insertRow(tbody.rows.length);
      add_text_cell(row, alph.get_name(i));
      if (freqs != null) add_text_cell(row, "" + freqs[i]);
      if (alph.has_bg()) add_text_cell(row, "" + alph.get_bg_freq(i));
      add_cell(row, colour_symbol(i)); 
      add_text_cell(row, "~");
      add_cell(row, colour_symbol(c)); 
      if (alph.has_bg()) add_text_cell(row, "" + alph.get_bg_freq(c));
      if (freqs != null) add_text_cell(row, "" + freqs[c]);
      add_text_cell(row, alph.get_name(c));
    }
  } else {
    for (i = 0; i < alph.get_size_core(); i++) {
      row = tbody.insertRow(tbody.rows.length);
      add_cell(row, colour_symbol(i)); 
      add_text_cell(row, alph.get_name(i));
      if (freqs != null) add_text_cell(row, "" + freqs[i]);
      if (alph.has_bg()) add_text_cell(row, "" + alph.get_bg_freq(i));
    }
  }
  return table;
}

</script>
    <script>
//
// simple-shared-doc.js
//

//
// Function to redirect to appropriate doc file.
//
function get_doc_text(pgm, doc_type, extra, extra2) {
  switch (pgm) {
    case 'shared':
      return(get_shared_doc_text(doc_type, extra, extra2));
    case 'ame':
      return(get_ame_doc_text(doc_type, extra, extra2));
    case 'centrimo':
      return(get_centrimo_doc_text(doc_type, extra, extra2));
    case 'discovery':
      return(get_discovery_doc_text(doc_type, extra, extra2));
    case 'fimo':
      return(get_fimo_doc_text(doc_type, extra, extra2));
    case 'gomo':
      return(get_gomo_doc_text(doc_type, extra, extra2));
    case 'mcast':
      return(get_mcast_doc_text(doc_type, extra, extra2));
    case 'meme-chip':
      return(get_meme_chip_doc_text(doc_type, extra, extra2));
    case 'momo':
      return(get_momo_doc_text(doc_type, extra, extra2));
    case 'sea':
      return(get_sea_doc_text(doc_type, extra, extra2));
    case 'spamo':
      return(get_spamo_doc_text(doc_type, extra, extra2));
    case 'streme':
      return(get_streme_doc_text(doc_type, extra, extra2));
    case 'tgene':
      return(get_tgene_doc_text(doc_type, extra, extra2));
    case 'tomtom':
      return(get_tomtom_doc_text(doc_type, extra, extra2));
    case 'xstreme':
      return(get_xstreme_doc_text(doc_type, extra, extra2));
    default:
      return("<b>Unknown program type: <font color=red>" + pgm + "</font></b>");
  }
} // get_doc_text

//
// Function to replace the innerHTML of element "id" with the HTML indicated by "doc_type".
// Easier to read and update than the more flexible approach in shared-doc.js. 
//
function print_doc(id, pgm, doc_type, extra) {
  document.getElementById(id).insertAdjacentHTML('beforeend', get_doc_text(pgm, doc_type, extra));
} // print_doc

//
// Function to replace the innerHTML of element "id" with an HTML paragraph
// containing the text for 'pgm' and 'doc_type'.
// This function can be used in help pop-ups.
//
function print_doc_para(id, pgm, doc_type, extra, extra2) {
  html = "<p>" + get_doc_text(pgm, doc_type, extra, extra2) + "</p>"; 
  document.getElementById(id).insertAdjacentHTML('beforeend', html);
} // print_doc_para

//
// Function to return the Shared HTML text of a given type.
// This function can be used directly to document the output format (xx-output-format.html)
// and indirectly via print_doc_para for help pop-ups in the actual output HTML,
// to prevent duplication of documentation.
//
function get_shared_doc_text(doc_type, extra, extra2) {
  if (extra == undefined) {extra = ""};
  if (extra2 == undefined) {extra2 = ""};
  switch (doc_type) {
    case 'fasta-coordinates-name':
      return(`
        The sequence IDs in the FASTA header lines are used as the source of sequence names. 
        The sequence ID is the string following the initial '>' up to the first white space character. 
        If the sequence ID is in an accepted <a href="` + site_url + `/doc/fasta-coordinates-format.html">FASTA Coordinates Format</a>
        (e.g., UCSC or Galaxy format), and you did NOT specify the <code>` + extra + `-no-pgc</code> option, 
        then the coordinates are removed from the sequence ID to create the sequence name.
      `);
    case 'fasta-coordinates-brief':
      return(`
        The sequence IDs in the FASTA header lines are used as the source of sequence names. 
        The sequence ID is the string following the initial '>' up to the first white space character. 
        If the sequence ID is in an accepted <a href="` + site_url + `/doc/fasta-coordinates-format.html">FASTA Coordinates Format</a>
        (e.g., UCSC or Galaxy format), and you did NOT specify the <code>` + extra + `-no-pgc</code> option, 
        then the coordinates are removed from the sequence ID to create the sequence name,
	and the starting coordinate given in the sequence ID will be used as the 
        coordinate of the first position of the sequence. 
        Otherwise, the coordinate of the first position of the sequence is taken as 1 and the entire
	sequence ID is used as the sequence name. 
      `);
    case 'fasta-coordinates':
      return(`
	For sequence coordinates embedded in FASTA sequence headers to be parsed 
        correctly by MEME Suite programs, the sequence ID in the FASTA header should have one of the two
	following formats:

	<h4>UCSC Format</h4>
	<div style='margin: 5px 0'>
	  &gt;<span class='pdat'>sequence name</span>:<span class='pdat'
	  >starting position</span>-<span class='pdat'>ending position</span>
	</div>
	where
	<ul style='margin-top: 0; margin-bottom: 5px'>
	  <li><span class='pdat'>sequence name</span> is the name of the genomic sequence,</li>
	  <li><span class='pdat'>starting position</span> is the genomic position of the first base and</li>
	  <li><span class='pdat'>ending position</span> is the genomic position of the final base.</li>
	</ul>
        <b>Example:</b> <span class="pdata">chr1:156887119-156887619</span>

	<h4>Galaxy Format</h4>
	<div style='margin: 5px 0'>
	  &gt;<span class='pdat'>assembly name</span>_<span class='pdat'
	  >sequence name</span>_<span class='pdat'
	  >starting position</span>_<span class='pdat'
	  >ending position</span>_<span class='pdat'
	  >strand</span>
	</div>
	where
	<ul style='margin-top: 0; margin-bottom: 5px'>
	  <li><span class='pdat'>assembly name</span> is the name of the genomic assembly,</li>
	  <li><span class='pdat'>sequence name</span> is the name of the genomic sequence,</li>
	  <li><span class='pdat'>starting position</span> is the genomic position of the first base and</li>
	  <li><span class='pdat'>ending position</span> is the genomic position of the final base.</li>
	</ul>
        <b>Example:</b> <span class="pdata">>mm9_chr18_75759530_7575972_-</span>

	<p>	
	For both formats, the following rules also apply:
        <ul>
	  <li>The the coordinates are 1-start, fully-closed.  This means
	  that the first base of the chromosome is position "1", and the bases at the
	  first and last positions of the given range are included.</li>
	  <li>The <span class='pdat'>sequence name</span> may not contain any white space.</li>
	  <li>The <span class='pdat'>assembly name</span> is not optional.</li>
	  <li>The <span class='pdat'>strand</span> is ignored.</li>
	  <li>When no valid genomic coordinates are found in a FASTA sequence header, the starting
	  position of the sequence is taken to be position 1.</li>
        </ul>
        </p>
      `);
    case 'motif-db':
      return(`
	The name of ` + extra2 + ` a file of motifs ("motif database file") that contains ` + extra + `
      `);
    case 'motif-id':
      return(`
	The name of the ` + extra + ` motif, which is unique ` + extra2 + ` in the motif database file.
      `);
    case 'motif-alt-id':
      return(`
	An alternate name for the ` + extra + ` motif that may be provided ` + extra2 + ` in the motif database file.
      `);
    case 'motif-width':
      return(`
	The width of the motif. No gaps are allowed in motifs supplied to ` + extra + `
        as it only works for motifs of a fixed width.
      `);
    case 'motif-cons':
      return(`
	A consensus sequence computed from the ` + extra + ` motif (as described <a href="#consensus_doc">below</a>).
      `);
    case 'motif-match-score':
     return(`
	` + extra2 + ` The motif match score of a position in a sequence is
	computed by summing the appropriate entry from each column of the
	position-dependent scoring matrix that represents the motif. ` + extra + `
     `);
    case 'motif-match-p-value':
      return(`
	The <i>p</i>-value of a motif match is the probability of a single random
	subsequence of the length of the motif <a href="javascript:help_refine('pop_motif_match_score')">scoring</a>
	at least as well as the observed match.
      `);
    case 'bh-q-value':
      if (extra2 == "") extra2 = "match";
      return(`
	The q-value is the minimum False Discovery Rate (FDR) required to consider this
        ` + extra2 + ` significant.</br>` +
        get_shared_doc_text('bh-q-value-method', extra, extra2) + `
      `);
    case 'bh-q-value-method':
      return(`
        <br>` + extra + ` estimates q-values from all the ` + extra2 + ` <i>p</i>-values 
	using the method proposed by Benjamini & Hochberg (<i>Journal of the Royal Statistical Society B</i>, 57:289-300, 1995).
	See also Storey JD, Tibshirani R. Statistical significance for
	genome-wide studies, <i>Proc. Natl. Acad. Sci. USA</i> (2003) <b>100</b>:9440&ndash;9445.
      `);
    case 'sdb-name':
      return(`
	The name of the (FASTA) sequence database file.
      `);
    case 'sdb-psp':
      return(`
	The name of the position specific priors (PSP) file.
      `);
    case 'sdb-dist':
      return(`
	The name of the binned distribution of priors file.
      `);
    case 'sdb-count':
      return(`
	The number of sequences in the database.
      `);
    case 'sdb-letters':
      return(`
	The number of letters in the sequence database.
      `);
    case 'lastmod':
      return(`
	The date of the last modification to the ` + extra + ` database.
      `);
    case 'sequence-id':
      return(`
        The identifier of the sequence (from the FASTA sequence header line)` + extra + `
      `);
    case 'sequence-desc':
      return(`
        The description appearing after the identifier of the sequence in the FASTA header line.
      `);
    case 'alph-name':
      return(`
	The name of the alphabet symbol.
      `);
    case 'alph-bg':
      return(`
	The frequency of the alphabet symbol as defined by the background model.
      `);
    case 'match-start':
      return(`
	The start position of the ` + extra + `.
      `);
    case 'match-stop':
      return(`
	The end position of the ` + extra + `.
      `);
    case 'match-start-seq':
      return(`
	The start position of the ` + extra + `; 1-based sequence coordinates.
      `);
    case 'match-stop-seq':
      return(`
	The end position of the ` + extra + `; 1-based sequence coordinates.
      `);
    case 'match-start-genomic':
      return(`
	The start position of the ` + extra + `; genomic coordinates.
      `);
    case 'match-stop-genomic':
      return(`
	The end position of the ` + extra + `; genomic coordinates.
      `);
    case 'motif-consensus':
      return(`
        <p id="consensus_doc">
           A <b>consensus sequence</b> is constructed from each column in a
           motif's frequency matrix using the <b>"50% rule"</b>
           as follows:
        </p>
        <ol>
          <li>The letter frequencies in the column are sorted in decreasing order.</li>
          <li>Letters with frequency less 50% of the maximum are discarded.</li>
          <li>The letter used in this position in the consensus sequence is determined
          by the first rule below that applies:</li>
          <ul>
            <li>If there is only one letter left, or if the remaining letters exactly match
            an ambiguous symbol in the alphabet, the <b>letter</b> or <b>ambiguous symbol</b>,
            respectively, is used.</li>
            <li>Otherwise, if the remaining set contains at least 50% of the core
            symbols in the alphabet, the alphabet's <b>wildcard</b>
            (e.g., "N" for DNA or RNA, and "X" for protein) is used.</li>
            <li>Otherwise, the letter with the <b>maximum frequency</b> is used.</li>
          </ul>
        </ol>
      `);
    default:
      return("Error--Unrecognized shared doc_type: " + doc_type);
  }
} // get_shared_doc_text
</script>
    <script>
//
// discovery_doc.js
// Documentation common to motif discovery tools.
//

//
// Function to return the HTML text of a given type.
// This function can be used directly to document the output format (xx-output-format.html)
// and indirectly via print_doc_para for help pop-ups in the actual output HTML,
// to prevent duplication of documentation.
//
function get_discovery_doc_text(doc_type, extra, extra2) {
  if (extra == undefined) {extra = ""};
  if (extra2 == undefined) {extra2 = ""};

  switch (doc_type) {
    case 'motif_logo':
      return(`
	The sequence logo of the motif.
	  The rules for construction logos are given in
	  the <i>Description</i> section of the documentation for the MEME Suite utility
          <a href="` + extra + `/doc/ceqlogo.html#description">ceqlogo</a>.
      `);
    case 'motif_rc_logo':
      return(`
	The sequence logo of the reverse complement motif.
	  The rules for construction logos are given in
	  the <i>Description</i> section of the documentation for the MEME Suite utility
          <a href="` + extra + `/doc/ceqlogo.html#description">ceqlogo</a>.
      `);
    case 'more':
      return(`
	Click on the blue symbol below to reveal detailed information about the motif.
      `);
    case 'submit_dl':
      return(`
	Click on the blue symbol below to reveal options allowing you
	  to submit this motif to another MEME Suite motif analysis program, to download this
	  motif in various text formats, or to download a sequence "logo" of
	  this motif PNG or EPS format.</p>
	  <h5>Supported Programs</h5>
	  <dl>
	    <dt>Tomtom</dt>
	    <dd>Tomtom is a tool for searching for similar known motifs.
	      [<a href="` + extra + `/doc/tomtom.html?man_type=web">manual</a>]</dd>
	    <dt>MAST</dt>
	    <dd>MAST is a tool for searching biological sequence databases for
	      sequences that contain one or more of a group of known motifs.
	      [<a href="` + extra + `/doc/mast.html?man_type=web">manual</a>]</dd>
	    <dt>FIMO</dt>
	    <dd>FIMO is a tool for searching biological sequence databases for
	      sequences that contain one or more known motifs.
	      [<a href="` + extra + `/doc/fimo.html?man_type=web">manual</a>]</dd>
	    <dt>GOMo</dt>
	    <dd>GOMo is a tool for identifying possible roles (Gene Ontology
	      terms) for DNA binding motifs.
	      [<a href="` + extra + `/doc/gomo.html?man_type=web">manual</a>]</dd>
	    <dt>SpaMo</dt>
	    <dd>SpaMo is a tool for inferring possible transcription factor
	      complexes by finding motifs with enriched spacings.
	      [<a href="` + extra + `/doc/spamo.html?man_type=web">manual</a>]</dd>
	  </dl>
      `);
    case 'site_distr':
      return(`
        This plot shows the positional distribution of the best match to the motif in the ` +
        extra + ` sequences. 
        Only matches with scores at least the ` +
        extra2 + ` score threshold are considered.
        The plot is smoothed with a triangular function whose width is 5% of the maximum ` +
	extra + ` sequence length.
        The position of the dotted vertical line indicates whether the sequences were
	aligned on their left ends, centers, or right ends, respectively.  
      `);
    case 'site_hist':
      return(`
        This histogram shows the distribution of the <b>number</b> of matches to the motif in the ` +
        extra + ` sequences with at least one match.
        Only matches with scores at least the ` +
        extra2 + ` score threshold are considered.
      `);
    default:
      return("Error--Unrecognized discovery doc_type: " + doc_type);
  }
} // get_discovery_doc_text
</script>
    <script>
//
// submit_or_download_motif.js
//

function make_submit_or_download_motif_form(id, site_url, program) {
  var html = `
    <div class="popup_wrapper">
      <div class="popup" style="display:none; top: -150px;" id="download">
	<div>
	  <div style="float:right; ">
	    <div id="outpop_close" class="close" tabindex="0">x</div>
	  </div>
	  <h2 class="mainh" style="margin:0; padding:0;">Submit or Download</h2>
	  <div style="clear:both"></div>
	</div>
	<div style="height:100px">
	  <div style="float:right; width: 30px;">
	    <div id="outpop_prev" class="navarrow" tabindex="0">
	      <span class="inactive">&#8679;</span><span class="active">&#11014;</span>
	    </div>
	    <div id="outpop_num" class="navnum"></div>
	    <div id="outpop_next" class="navarrow" tabindex="0">
	      <span class="inactive">&#8681;</span><span class="active">&#11015;</span>
	    </div>
	  </div>
	  <div id="logo_box" style="height: 100px; margin-right: 40px;">
	    <canvas id="outpop_logo" height="100" width="250"></canvas>
	    <canvas id="outpop_logo_rc" height="100" width="250"></canvas>
	  </div>
	</div>
	<!-- tabs start -->
	<div class="tabArea top">
	  <span id="outpop_tab_1" class="tab">Submit Motif</span><span
	    id="outpop_tab_2" class="tab middle">Download Motif</span><span
	    id="outpop_tab_3" class="tab middle">Download Logo</span>
	</div>
	<div class="tabMain top">
	  <!-- Submit to another program -->
	  <div id="outpop_pnl_1">
	    <h4 class="compact">Submit to program</h4>
	    <table id="programs" class="programs">
	      <tr>
		<td><input type="radio" name="program" value="tomtom" id="submit_tomtom"></td>
		<td><label for="submit_tomtom">Tomtom</label></td>
		<td><label for="submit_tomtom">Find similar motifs in
		    published libraries or a library you supply.</label></td>
	      </tr>
	      <tr>
		<td><input type="radio" name="program" value="fimo" id="submit_fimo"></td>
		<td><label for="submit_fimo">FIMO</label></td>
		<td><label for="submit_fimo">Find motif occurrences in
		    sequence data.</label></td>
	      </tr>
	      <tr>
		<td><input type="radio" name="program" value="mast" id="submit_mast"></td>
		<td><label for="submit_mast">MAST</label></td>
		<td><label for="submit_mast">Rank sequences by affinity to
		    groups of motifs.</label></td>
	      </tr>
	      <tr class="dna_only">
		<td><input type="radio" name="program" value="gomo" id="submit_gomo"></td>
		<td><label for="submit_gomo">GOMo</label></td>
		<td><label for="submit_gomo">Identify possible roles (Gene
		    Ontology terms) for motifs.</label></td>
	      </tr>
	      <tr class="dna_only">
		<td><input type="radio" name="program" value="spamo" id="submit_spamo"></td>
		<td><label for="submit_spamo">SpaMo</label></td>
		<td><label for="submit_spamo">Find other motifs that are
		    enriched at specific close spacings which might imply the existence of a complex.</label></td>
	      </tr>
	    </table>
	  </div>
	  <!-- download text format  -->
	  <div id="outpop_pnl_2">
	    <div>
	      <label for="text_format">Format:</label>
	      <select id="text_format">
		<option value="0">Count Matrix</option>
		<option value="1">Probability Matrix</option>
		<option value="2">Minimal MEME</option> ` + 
		(program == "MEME" ? `
		<option value="3">FASTA</option>
		<option value="4">Raw</option> ` : ``) + `
	      </select>
	    </div>
	    <textarea id="outpop_text" name="content"
	      style="width:99%; white-space: pre; word-wrap: normal; overflow-x: scroll;"
	      rows="8" readonly="readonly" wrap="off"></textarea>
	    <a id="outpop_text_dl" download="meme.txt" href=""></a>
	  </div>
	  <!-- download logo format -->
	  <div id="outpop_pnl_3">
	    <form id="logo_form" method="post" action="">
	      <input type="hidden" name="program" value=" ` + program + `"/>
	      <input type="hidden" id="logo_motifs" name="motifs" value=""/>
	      <input type="hidden" id="logo_id1" name="id1" value=""/>
	      <table>
		<tr>
		  <td><label for="logo_format">Format:</label></td>
		  <td>
		    <select id="logo_format" name="png">
		      <option value="1">PNG (for web)</option>
		      <option value="0">EPS (for publication)</option>
		    </select>
		  </td>
		</tr>
		<tr>
		  <td><label for="logo_rc">Orientation:</label></td>
		  <td>
		    <select id="logo_rc" name="rc1">
		      <option value="0">Normal</option>
		      <option value="1" id="logo_rc_option">Reverse Complement</option>
		    </select>
		  </td>
		</tr>
		<tr>
		  <td><label for="logo_ssc">Small Sample Correction:</label></td>
		  <td>
		    <input type="hidden" id="logo_err" name="errbars" value="0"/>
		    <select id="logo_ssc" name="ssc">
		      <option value="0">Off</option>
		      <option value="1">On</option>
		    </select>
		  </td>
		</tr>
		<tr>
		  <td><label for="logo_width">Width:</label></td>
		  <td>
		    <input type="text" id="logo_width" size="4" placeholder="default" name="width"/>&nbsp;cm
		  </td>
		</tr>
		<tr>
		  <td><label for="logo_height">Height:</label></td>
		  <td>
		    <input type="text" id="logo_height" size="4" placeholder="default" name="height"/>&nbsp;cm
		  </td>
		</tr>
	      </table>
	    </form>
	  </div>
	  <!-- Buttons -->
	  <div>
	    <div style="float:left;">
	      <input type="button" id="outpop_do" value="Submit" />
	    </div>
	    <div style="float:right;">
	      <input id="outpop_cancel" type="button" value="Cancel" />
	    </div>
	    <div style="clear:both;"></div>
	  </div>
	</div>
      </div>
    </div>
  `;
  document.getElementById(id).insertAdjacentHTML('beforeend', html);
  $("logo_form").action = site_url + "/utilities/generate_logo";
} // make_submit_or_download_motif_form

//
// Functions to update the submit_or_download_motif form.
//

//
// Initialise and display the download popup.
//
function action_show_outpop(e, ordinal) {
  "use strict";
  function init() {
    "use strict";
    var close_btn, next_btn, prev_btn, cancel_btn, do_btn;
    var tab1, tab2, tab3;
    var pnl1, pnl2, pnl3;
    var format_list;
    var tbl_submit, inputs, i, default_prog;
    close_btn = $("outpop_close");
    close_btn.addEventListener("click", action_hide_outpop, false);
    close_btn.addEventListener("keydown", action_hide_outpop, false);
    next_btn = $("outpop_next");
    next_btn.addEventListener("click", action_outpop_next, false);
    next_btn.addEventListener("keydown", action_outpop_next, false);
    prev_btn = $("outpop_prev");
    prev_btn.addEventListener("click", action_outpop_prev, false);
    prev_btn.addEventListener("keydown", action_outpop_prev, false);
    cancel_btn = $("outpop_cancel");
    cancel_btn.addEventListener("click", action_hide_outpop, false);
    do_btn = $("outpop_do");
    do_btn.addEventListener("click", action_outpop_submit, false);
    tab1 = $("outpop_tab_1");
    tab1.tabIndex = 0;
    tab1.addEventListener("click", action_outpop_tab, false);
    tab1.addEventListener("keydown", action_outpop_tab, false);
    tab2 = $("outpop_tab_2");
    tab2.tabIndex = 0;
    tab2.addEventListener("click", action_outpop_tab, false);
    tab2.addEventListener("keydown", action_outpop_tab, false);
    tab3 = $("outpop_tab_3");
    tab3.tabIndex = 0;
    tab3.addEventListener("click", action_outpop_tab, false);
    tab3.addEventListener("keydown", action_outpop_tab, false);
    pnl1 = $("outpop_pnl_1");
    pnl2 = $("outpop_pnl_2");
    pnl3 = $("outpop_pnl_3");
    toggle_class(tab1, "activeTab", true);
    toggle_class(tab2, "activeTab", false);
    toggle_class(tab3, "activeTab", false);
    pnl1.style.display = "block";
    pnl2.style.display = "none";
    pnl3.style.display = "none";
    format_list = $("text_format");
    format_list.addEventListener("change", action_outpop_format, false);
    // setup program selection
    tbl_submit = $("programs");
    // when not dna, hide the inputs for programs that require dna motifs
    toggle_class(tbl_submit, "alphabet_dna", current_alphabet.has_complement());//TODO alphabet_dna is a bad name for a field when allowing custom alphabets
    // add a click listener for the radio buttons
    inputs = tbl_submit.querySelectorAll("input[type='radio']");
    for (i = 0; i < inputs.length; i++) {
      inputs[i].addEventListener("click", action_outpop_program, false);
    }
    // ensure that a default program option is selected for DNA and Protein
    default_prog = document.getElementById(current_alphabet.has_complement() ? "submit_tomtom" : "submit_fimo"); //TODO Tomtom might require a more strict definition of DNA
    default_prog.checked = true;
    action_outpop_program.call(default_prog);
    // disable reverse-complement when not DNA
    $("logo_rc_option").disabled = !current_alphabet.has_complement();
    // set errorbars on when ssc is on
    $("logo_ssc").addEventListener("change", action_outpop_ssc, false);
  }
  // store the focused element
  action_hide_outpop.last_active = document.activeElement;
  if (!e) e = window.event;
  if (e.type === "keydown") {
    if (e.keyCode !== 13 && e.keyCode !== 32) {
      return;
    }
    // stop a submit or something like that
    e.preventDefault();
  }
  // hide the help popup
  help_popup();
  // on first load initilize the popup
  if (!action_show_outpop.ready) {
    init();
    action_show_outpop.ready = true;
  }
  update_outpop_motif(ordinal - 1);
  // display the download popup
  $("grey_out_page").style.display = "block";
  $("download").style.display = "block";
  $("outpop_close").focus();
} // action_show_output

//
// Hide the submit or download popup.
//
function action_hide_outpop(e) {
  if (!e) e = window.event;
  if (e.type === "keydown") {
    if (e.keyCode !== 13 && e.keyCode !== 32) {
      return;
    }
    // stop a submit or something like that
    e.preventDefault();
  }
  $("download").style.display = "none";
  $("grey_out_page").style.display = "none";
  if (typeof action_hide_outpop.last_active !== "undefined") {
    action_hide_outpop.last_active.focus();
  }
} // action_hide_outpop

/*
 * Show the next motif in the download popup.
 */
function action_outpop_next(e) {
  if (!e) e = window.event;
  if (e.type === "keydown") {
    if (e.keyCode !== 13 && e.keyCode !== 32) {
      return;
    }
    // stop a submit or something like that
    e.preventDefault();
  }
  update_outpop_motif(current_motif + 1);
} // action_outpop_next

/*
 * Show the previous motif in the download popup.
 */
function action_outpop_prev(e) {
  if (!e) e = window.event;
  if (e.type === "keydown") {
    if (e.keyCode !== 13 && e.keyCode !== 32) {
      return;
    }
    // stop a submit or something like that
    e.preventDefault();
  }
  update_outpop_motif(current_motif - 1);
} // action_outpop_prev

/*
 * Highlight the selected row in the program list.
 */
function action_outpop_program() {
  "use strict";
  var table, tr, rows, i;
  tr = find_parent_tag(this, "TR");
  table = find_parent_tag(tr, "TABLE");
  rows = table.querySelectorAll("tr");
  for (i = 0; i < rows.length; i++) {
    toggle_class(rows[i], "selected", rows[i] === tr);
  }
} // action_outpop_program

/*
 * Submit the motif to the selected program.
 */
function action_outpop_submit(e) {
  "use strict";
  var form, input, program, motifs;
  // find out which program is selected
  var radios, i;
  radios = document.getElementsByName("program");
  program = "fimo"; // default to fimo, since it works with all alphabet types
  for (i = 0; i < radios.length; i++) {
    if (radios[i].checked) program = radios[i].value;
  }

  motifs = motif_minimal_meme(data.motifs[current_motif]);
  form = document.createElement("form");
  form.setAttribute("method", "post");
  form.setAttribute("action", site_url + "/tools/" + program);

  input = document.createElement("input");
  input.setAttribute("type", "hidden");
  input.setAttribute("name", "motifs_embed");
  input.setAttribute("value", motifs);
  form.appendChild(input);

  var current_file = location.pathname.substring(location.pathname.lastIndexOf('/')+1);
  input = document.createElement("input");
  input.setAttribute("type", "hidden");
  input.setAttribute("name", "motifs_name");
  input.setAttribute("value", "motif number " + (current_motif+1) + " from " + current_file);
  form.appendChild(input);

  document.body.appendChild(form);
  form.submit();
  document.body.removeChild(form);
} // action_outpop_submit(e)

/*
 * Enable error bars when small sample correction is enabled.
 */
function action_outpop_ssc() {
  "use strict";
  $("logo_err").value = $("logo_ssc").value;
} // action_outpop_ssc

//
// Update the motif logos and format download text in the popup.
// This is called whenever the current motif changes.
// 
function update_outpop_motif(index) {
  "use strict";
  var motifs, motif, pspm, logo, canvas, num;
  motifs = data["motifs"];
  if (index < 0 || index >= motifs.length) {return;}
  current_motif = index;
  motif = motifs[index];
  pspm = new Pspm(motif["pwm"]);
  logo = new Logo(current_alphabet, "");
  logo.add_pspm(pspm, 0);
  canvas = $("outpop_logo");
  canvas.width = canvas.width; // clear canvas
  draw_logo_on_canvas(logo, canvas, false);
  canvas = $("outpop_logo_rc");
  canvas.width = canvas.width; // clear rc canvas
  if (data.options.strands === "both" || data.options.revcomp) {
    pspm.reverse_complement(current_alphabet);
    logo = new Logo(current_alphabet, "");
    logo.add_pspm(pspm, 0);
    draw_logo_on_canvas(logo, canvas, false);
  }
  num = $("outpop_num");
  num.innerHTML = "";
  num.appendChild(document.createTextNode("" + (index + 1)));
  update_outpop_format(index);
} // action_outpop_motif

//
// Create the download menu.
//
function update_outpop_format(index) {
  var motif = data.motifs[index];
  var fn = [motif_count_matrix, motif_prob_matrix, motif_minimal_meme, motif_fasta, motif_raw];
  var suffix = ["_counts.txt", "_freqs.txt", ".meme", "_fasta.txt", "_raw.txt"];
  var format = parseInt($("text_format").value);
  var text = fn[format](motif);
  prepare_download(text, "text/plain", motif.id + suffix[format], $("outpop_text_dl"));
  $("outpop_text").value = text;
} // update_outpop_format

/*
 * Update the text in the download format popup.
 */
function action_outpop_format() {
  update_outpop_format(current_motif);
} // action_outpop_format

/*
 * Download the format text.
 * Wire the link containing the data URI text to a download button so it looks
 * the same as the server submit stuff.
 */
function action_outpop_download_motif(e) {
  $("outpop_text_dl").click();
} // action_outpop_download_motif

/*
 * Download the motif logo.
 * The EPS format can be calculated locally in Javascript
 */
function action_outpop_download_logo(e) {
  "use strict";
  var motif = data.motifs[current_motif];
  if ($("logo_format").value === "0") { // EPS
    var pspm, logo, eps;
    var logo_rc, logo_ssc, logo_width, logo_height;
    logo_rc = ($("logo_rc").value === "1");
    logo_ssc = ($("logo_ssc").value === "1");
    logo_width = parseFloat($("logo_width").value);
    if (isNaN(logo_width) || !isFinite(logo_width) || logo_width <= 0) logo_width = null;
    logo_height = parseFloat($("logo_height").value);
    if (isNaN(logo_height) || !isFinite(logo_height) || logo_height <= 0) logo_height = null;
    // create a PSPM from the motif
    pspm = motif_pspm(motif);
    if (logo_rc) pspm.reverse_complement(current_alphabet);
    logo = new Logo(current_alphabet);
    logo.add_pspm(pspm, 0);
    eps = logo.as_eps({"ssc": logo_ssc, "logo_width": logo_width, "logo_height": logo_height});
    prepare_download(eps, "application/postscript", motif.id + (logo_rc ? "_rc" : "") + ".eps");
  } else {
    $("logo_motifs").value = motif_minimal_meme(motif);
    $("logo_id1").value = motif.id;
    $("logo_form").submit();
  }
} // action_outpop_download_logo

/*
 * Change the selected tab in the download popup.
 */
function action_outpop_tab(e) {
  "use strict";
  var tab1, tab2, tab3, pnl1, pnl2, pnl3, do_btn;
  if (!e) e = window.event;
  if (e.type === "keydown") {
    if (e.keyCode !== 13 && e.keyCode !== 32) {
      return;
    }
    // stop a submit or something like that
    e.preventDefault();
  }
  tab1 = $("outpop_tab_1");
  tab2 = $("outpop_tab_2");
  tab3 = $("outpop_tab_3");
  pnl1 = $("outpop_pnl_1");
  pnl2 = $("outpop_pnl_2");
  pnl3 = $("outpop_pnl_3");
  do_btn = $("outpop_do");

  toggle_class(tab1, "activeTab", (this === tab1));
  toggle_class(tab2, "activeTab", (this === tab2));
  toggle_class(tab3, "activeTab", (this === tab3));
  pnl1.style.display = ((this === tab1) ? "block" : "none");
  pnl2.style.display = ((this === tab2) ? "block" : "none");
  pnl3.style.display = ((this === tab3) ? "block" : "none");
  do_btn.value = ((this === tab1) ? "Submit" : "Download");
  do_btn.removeEventListener("click", action_outpop_submit, false);
  do_btn.removeEventListener("click", action_outpop_download_logo, false);
  do_btn.removeEventListener("click", action_outpop_download_motif, false);
  if (this === tab1) {
    do_btn.addEventListener("click", action_outpop_submit, false);
  } else if (this === tab2) {
    do_btn.addEventListener("click", action_outpop_download_motif, false);
  } else {
    do_btn.addEventListener("click", action_outpop_download_logo, false);
  }
} // action_outpop_tab

function motif_fasta(motif) {
  "use strict";
  var sites, site, seq, sequences, sequence, i, num, counter, out;
  counter = {};
  sequences = data["sequence_db"]["sequences"];
  sites = motif["sites"];
  out = "";
  for (i = 0; i < sites.length; i++) {
    site = sites[i];
    seq = site["seq"];
    sequence = sequences[seq];
    counter[seq] = (num = counter[seq]) ? (++num) : (num = 1); // inc counter
    if (i !== 0) {out += "\n";}
    out += ">" + sequence["name"] + "_site_" + num + " offset= " + site["pos"] +
      (site["rc"] ? " RC\n" : "\n");
    out += site["match"];
  }
  return out;
} // motif_fasta

function motif_raw(motif) {
  "use strict";
  var sites, i, out;
  sites = motif["sites"];
  out = "";
  for (i = 0; i < sites.length; i++) {
    if (i !== 0) {out += "\n";}
    out += sites[i]["match"];
  }
  return out;
} // motif_raw

/*
 * Create a pspm for the given motif data
 */
function motif_pspm(motif) {
  var pwm = motif.pwm;
  var name = motif.id;
  var ltrim = 0;
  var rtrim = 0;
  var nsites = motif.nsites;
  var sig = (current_program === "STREME" ? motif.test_pvalue : motif.evalue);
  return new Pspm(pwm, name, ltrim, rtrim, nsites, sig, null, motif.alt, current_program);
} // motif_pspm

/*
 * Create a count matrix from the given motif data
 */
function motif_count_matrix(motif) {
  return motif_pspm(motif).as_count_matrix();
} // motif_count_matrix

/*
 * Create a probablity matrix from the given motif data
 */
function motif_prob_matrix(motif) {
  return motif_pspm(motif).as_probability_matrix();
} // motif_prob_matrix

function motif_minimal_meme(motif) {
  var strands;
  if (current_program === "STREME") {
    strands = (data.options.strands === "both" ? 2 : 1);
  } else {
    strands = (data.options.revcomp ? 2 : 1);
  }
  return motif_pspm(motif).as_meme({
    "with_header": true,
    "with_pspm": true,
    "with_pssm": (current_program === "MEME" ? true : false),
    "version": data["version"],
    "alphabet": current_alphabet,
    "strands": strands
  });
}
</script>
    <script>
var current_program = "MEME";
var current_alphabet = new Alphabet(data.alphabet, data.background.freqs);
var current_motif = 0;
//var new_icon_src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQCAMAAAAyEe/dAAAACVBMVEX//wAAAAD////s2cV/AAAAdUlEQVQYlXVRBxLAIAhL+P+jC2HZhXcBZEWEldDsZcLIcAhHWWnK8SDcWQhMFUHdAQ1CqQ5+CWPmlHojl+nCJNRtzu4qRc3IUzmTVpXYK0nox0z0PI1stgchdK7lEv7ekhvalw8WW547Gyzedt/2/gLx8WXjXF/1AYFriNAWAAAAAElFTkSuQmCC";

var DelayLogoTask = function(logo, canvas) {
  this.logo = logo;
  this.canvas = canvas;
};

DelayLogoTask.prototype.run = function () {
  draw_logo_on_canvas(this.logo, this.canvas, false);
};

function clone_template(template) {
  "use strict";
  var node, help_btns, i, button;
  node = $(template).cloneNode(true);
  toggle_class(node, "template", false);
  node.id = "";
  help_btns = node.querySelectorAll(".help");
  for (i = 0; i < help_btns.length; i++) {
    button = help_btns[i];
    if (button.hasAttribute("data-topic")) {
      button.tabIndex = "0";
      button.addEventListener("click", __toggle_help, false);
      button.addEventListener("keydown", __toggle_help, false);
    }
  }
  return node;
}

function make_small_logo(alphabet, pspm, options) {
  if (typeof options === "undefined") options = {};
  if (options.rc) pspm = pspm.copy().reverse_complement(alphabet);
  var logo = new Logo(alphabet, {x_axis: false, y_axis: false});
  logo.add_pspm(pspm, (typeof options.offset === "number" ? options.offset : 0));
  var canvas = document.createElement('canvas');
  if (typeof options.className === "string") canvas.className = options.className;
  if (typeof options.width === "number" && options.width > 0) {
    canvas.height = 0;
    canvas.width = options.width;
    draw_logo_on_canvas(logo, canvas, false);
  } else {
    draw_logo_on_canvas(logo, canvas, false, 1/3);
  }
  return canvas;
}

function make_large_logo(alphabet, pspm, rc, offset, className) {
  if (rc) pspm = pspm.copy().reverse_complement(alphabet);
  var logo = new Logo(alphabet, "");
  logo.add_pspm(pspm, offset);
  var canvas = document.createElement('canvas');
  canvas.height = 200;
  canvas.width = 0;
  canvas.className = className;
  size_logo_on_canvas(logo, canvas, false);
  add_draw_task(canvas, new DelayLogoTask(logo, canvas));
  return canvas;
}

function make_sym_btn(symbol, title, action) {
  var box;
  box = document.createElement("div");
  box.tabIndex = 0;
  box.className = "sym_btn";
  box.appendChild(document.createTextNode(symbol));
  box.title = title;
  box.addEventListener('click', action, false);
  box.addEventListener('keydown', action, false);
  return box;
}

function make_seq(alphabet, seq) {
  var i, j, letter, lbox, sbox;
  sbox = document.createElement("span");
  for (i = 0; i < seq.length; i = j) {
    letter = seq.charAt(i);
    for (j = i+1; j < seq.length; j++) {
      if (seq.charAt(j) !== letter) {
        break;
      }
    }
    lbox = document.createElement("span");
    lbox.style.color = alphabet.get_colour(alphabet.get_index(letter));
    lbox.appendChild(document.createTextNode(seq.substring(i, j)));
    sbox.appendChild(lbox);
  }
  return sbox;
}

//
// make_pv_text
//
// Returns the string p-value, with the p italicised.
///
function make_pv_text() {
  var pv_text = document.createElement("span");
  var pv_italic_text = document.createElement("span");
  pv_italic_text.appendChild(document.createTextNode("p"));
  pv_italic_text.style.fontStyle = "italic";
  pv_text.appendChild(pv_italic_text);
  pv_text.appendChild(document.createTextNode("-value"));
  return pv_text;
}

function append_site_entries(tbody, motif, site_index, count) {
  "use strict";
  var i, end;
  var sites, site, sequences, sequence;
  var rbody;
  if (typeof count !== "number") {
    count = 20;
  }
  sequences = data["sequence_db"]["sequences"];
  sites = motif["sites"];
  end = Math.min(site_index + count, sites.length);
  for (i = site_index; i < end; i++) {
    site = sites[i];
    sequence = sequences[site["seq"]];

    rbody = tbody.insertRow(tbody.rows.length);
    add_text_cell(rbody, "" + (site["seq"] + 1) + ".", "site_num");
    add_text_cell(rbody, sequence["name"], "site_name");
    add_text_cell(rbody, site["rc"] ? "-" : "+", "site_strand");
    add_text_cell(rbody, site["pos"] + 1, "site_start");
    add_text_cell(rbody, site["pvalue"].toExponential(2), "site_pvalue");
    add_text_cell(rbody, site["lflank"], "site lflank");
    add_cell(rbody, make_seq(current_alphabet, site["match"]), "site match");
    add_text_cell(rbody, site["rflank"], "site rflank");
  }
  return i;
}

function make_site_entries() {
  "use strict";
  var region;
  region = this;
  if (region.data_site_index >= region.data_motif["sites"].length) {
    // all sites created
    region.removeEventListener('scroll', make_site_entries, false);
    return;
  }
  // if there's still 100 pixels to scroll than don't do anything yet
  if (region.scrollHeight - (region.scrollTop + region.offsetHeight) > 100) {
    return;
  }

  region.data_site_index = append_site_entries(
      find_child(region, "sites_tbl").tBodies[0], 
      region.data_motif, region.data_site_index, 20
    ); 
}

function make_sites(motif) {
  "use strict";
  function add_site_header(row, title, nopad, help_topic, tag_class) {
    var div, divcp, th;
    th = document.createElement("th");
    div = document.createElement("div");
    div.className = "sites_th_inner";
    if (typeof title !== "object") {
      title = document.createTextNode("" + title);
    }
    div.appendChild(title);
    if (help_topic) {
      div.appendChild(document.createTextNode("\xA0"));
      div.appendChild(help_button(help_topic));
    }
    divcp = div.cloneNode(true);
    divcp.className = "sites_th_hidden";
    th.appendChild(div);
    th.appendChild(divcp);
    if (nopad) {
      th.className = "nopad";
    }
    if (tag_class) {
      th.className += " " + tag_class;
    }
    row.appendChild(th);
  }
  var outer_tbl, inner_tbl, tbl, thead, tbody, rhead;

  outer_tbl = document.createElement("div");
  outer_tbl.className = "sites_outer";

  inner_tbl = document.createElement("div");
  inner_tbl.className = "sites_inner";
  outer_tbl.appendChild(inner_tbl);

  tbl = document.createElement("table");
  tbl.className = "sites_tbl";
  inner_tbl.appendChild(tbl);

  thead = document.createElement("thead");
  tbl.appendChild(thead);
  tbody = document.createElement("tbody");
  tbl.appendChild(tbody);

  rhead = thead.insertRow(thead.rows.length);
  add_site_header(rhead, "", true);
  add_site_header(rhead, "Name", false, "pop_seq_name");
  add_site_header(rhead, "Strand", false, "pop_site_strand", "site_strand_title");
  add_site_header(rhead, "Start", false, "pop_site_start");
  add_site_header(rhead, make_pv_text(), false, "pop_site_pvalue");
  add_site_header(rhead, "", false);
  add_site_header(rhead, "Sites", true, "pop_site_match");
  add_site_header(rhead, "", false);

  inner_tbl.data_motif = motif;
  inner_tbl.data_site_index = append_site_entries(tbody, motif, 0, 20);
  if (inner_tbl.data_site_index < motif["sites"].length) {
    inner_tbl.addEventListener('scroll', make_site_entries, false);
  }
  return outer_tbl;
}

function make_motif_table_entry(row, alphabet, ordinal, motif, colw) {
  "use strict";
  function ev_sig(evalue_str) {
    "use strict";
    var ev_re, match, sig, exp, num;
    ev_re = /^(.*)e(.*)$/;
    if (match = ev_re.exec(evalue_str)) {
      sig = parseFloat(match[1]);
      exp = parseInt(match[2]);
      if (exp >= 0) {
        return false;
      } else if (exp <= -3) {
        return true;
      } else {
        return sig * Math.pow(10, exp) <= 0.05;
      }
    }
    return true;
  }
  function make_preview(alphabet, motif) {
    "use strict";
    var pspm, preview, preview_rc;
    var box, btn_box, logo_box, btn_plus, btn_minus;
    if (motif["preview_logo"]) {
      preview = motif["preview_logo"];
      preview_rc = motif["preview_logo_rc"];
    } else {
      pspm = new Pspm(motif["pwm"]);
      preview = make_logo(alphabet, pspm, 50, false, 0);
      motif["preview_logo"] = preview;
      if (alphabet.has_complement()) {
        preview_rc = make_logo(alphabet, pspm, 50, true, 0, "logo_rc");
        motif["preview_logo_rc"] = preview_rc;
      }
    }
    if (preview_rc) {
      btn_plus = document.createElement("div");
      btn_plus.appendChild(document.createTextNode("+"));
      btn_plus.className = "preview_btn plus";
      btn_plus.tabIndex = "0";
      btn_plus.addEventListener("click", action_btn_rc, false);
      btn_plus.addEventListener("keydown", action_btn_rc, false);
      btn_minus = document.createElement("div");
      btn_minus.appendChild(document.createTextNode("-"));
      btn_minus.className = "preview_btn minus";
      btn_minus.tabIndex = "0";
      btn_minus.addEventListener("click", action_btn_rc, false);
      btn_minus.addEventListener("keydown", action_btn_rc, false);
      btn_box = document.createElement("div");
      btn_box.className = "preview_btn_box";
      btn_box.appendChild(btn_plus);
      btn_box.appendChild(btn_minus);
    }
    logo_box = document.createElement("div");
    logo_box.className = "preview_logo_box";
    logo_box.appendChild(preview);
    if (preview_rc) logo_box.appendChild(preview_rc);
    box = document.createElement("div");
    box.className = "preview_box";
    if (preview_rc) box.appendChild(btn_box);
    box.appendChild(logo_box);
    if (preview_rc) {
      if (motif["rc"]) {
        btn_minus.className += " active";
        logo_box.className += " show_rc_logo";
      } else {
        btn_plus.className += " active";
      }
    }
    return box;
  }
  var pspm, preview, preview_rc, c;
  row.data_motif = motif;
  row.id = motif["alt"];
  row.data_ordinal = ordinal;
  if (!ev_sig(motif["evalue"])) {
    row.style.opacity = 0.4;
  }
  add_text_cell(row, "" + ordinal + ".", "motif_ordinal");
  add_cell(row, make_preview(alphabet, motif), "motif_logo");
  add_text_cell(row, motif["evalue"], "motif_evalue");
  add_text_cell(row, motif["nsites"], "motif_nsites");
  add_text_cell(row, motif["len"], "motif_width");
  add_cell(row, make_sym_btn("\u21A7", "Show more information.", 
    action_show_more), "motif_more");
  add_cell(row, make_sym_btn("\u21E2", "Submit the motif to another MEME Suite program or download it.", function(e) { action_show_outpop(e, ordinal); }), "motif_submit");
  if (colw) {
    for (c = 0; c < row.cells.length; c++) {
      row.cells[c].style.minWidth = colw[c] + "px";
    }
  }
}

function make_motifs_table(alphabet, start_ordinal, motifs, colw, stop_reason) {
  var i, j;
  var tbl, thead, tbody, tfoot, row, preview;
  var motif, pspm;

  tbl = document.createElement("table");
  
  thead = document.createElement("thead");
  tbl.appendChild(thead);
  tbody = document.createElement("tbody");
  tbl.appendChild(tbody);
  tfoot = document.createElement("tfoot");
  tbl.appendChild(tfoot);

  row = thead.insertRow(thead.rows.length);
  add_text_header_cell(row, "", "", "motif_ordinal");
  add_text_header_cell(row, "Logo", "pop_logo", "motif_logo");
  add_text_header_cell(row, "E-value", "pop_ev", "motif_evalue");
  add_text_header_cell(row, "Sites", "pop_sites", "motif_nsites");
  add_text_header_cell(row, "Width", "pop_width", "motif_width");
  add_text_header_cell(row, "More", "pop_more", "motif_more");
  add_text_header_cell(row, "Submit/Download", "pop_submit_dl", "motif_submit");

  for (i = 0; i < motifs.length; i++) {
    row = tbody.insertRow(tbody.rows.length);
    make_motif_table_entry(row, alphabet, start_ordinal + i, motifs[i], colw);
  }

  row = tfoot.insertRow(tfoot.rows.length);
  add_text_header_cell(row, stop_reason, "", "stop_reason", "", 6);

  return tbl;
}

function make_expanded_motif(alphabet, ordinal, motif, less_x, submit_x) {
  "use strict";
  var box, pspm, logo_box, large_logo, large_logo_rc, tab_logo, tab_logo_rc;
  var btn, offset, norc;

  box = clone_template("tmpl_motif_expanded");
  box.data_motif = motif;
  box.data_ordinal = ordinal;

  pspm = new Pspm(motif["pwm"]);
  if (typeof motif["rc"] !== "boolean") {
    motif["rc"] = false;
  }
  if (motif["large_logo"]) {
    large_logo = motif["large_logo"];
    large_logo_rc = motif["large_logo_rc"];
  } else {
    large_logo = make_large_logo(alphabet, pspm, false, 0);
    motif["large_logo"] = large_logo;
    if (alphabet.has_complement()) {
      large_logo_rc = make_large_logo(alphabet, pspm, true, 0, "logo_rc");
      motif["large_logo_rc"] = large_logo_rc;
    }
  }
  norc = (large_logo_rc == null);
  toggle_class(box, "norc", norc);

  logo_box = find_child(box, "tvar_logo");
  logo_box.appendChild(large_logo);
  if (large_logo_rc) logo_box.appendChild(large_logo_rc);
  toggle_class(logo_box, "show_rc_logo", motif["rc"]);

  tab_logo = find_child(box, "tvar_tab");
  tab_logo_rc = find_child(box, "tvar_tab_rc");

  toggle_class(tab_logo, "activeTab", !motif["rc"]);
  toggle_class(tab_logo_rc, "activeTab", motif["rc"]);

  tab_logo.addEventListener('click', action_rc_tab, false);
  tab_logo.addEventListener('keydown', action_rc_tab, false);
  tab_logo_rc.addEventListener('click', action_rc_tab, false);
  tab_logo_rc.addEventListener('keydown', action_rc_tab, false);

  set_tvar(box, "tvar_ordinal", ordinal); 
  set_tvar(box, "tvar_evalue", motif["evalue"]);
  set_tvar(box, "tvar_width", motif["len"]);
  set_tvar(box, "tvar_site_count", motif["nsites"]);
  set_tvar(box, "tvar_llr", motif["llr"]);
  set_tvar(box, "tvar_ic", motif["ic"]);
  set_tvar(box, "tvar_re", motif["re"]);
  set_tvar(box, "tvar_bt", motif["bt"]);
  if (data.sequence_db.primary_count > data.options.brief) {
    if (data.options.brief == 1000) {
      set_tvar(box, "tvar_sites", "Output of sites suppressed because there were more than 1000 (primary) sequences.");
    } else {
      set_tvar(box, "tvar_sites", "Output of sites suppressed by -brief option.");
    }
  } else {
    set_tvar(box, "tvar_sites", make_sites(motif));
  }

  offset = 32; // 1* 5px padding + 2 * 10px padding + 2 * 2px border + 3px ??

  btn = find_child(box, "tvar_less");
  btn.style.left = (less_x - offset) + "px";
  btn.addEventListener('click', action_show_less, false);
  btn.addEventListener('keydown', action_show_less, false);
  btn = find_child(box, "tvar_submit");
  btn.style.left = (submit_x - offset) + "px";
  btn.addEventListener('click', action_show_outpop, false);
  btn.addEventListener('keydown', action_show_outpop, false);
  return box;
}

//
//
//
function make_motifs() {
  "use strict";
  function pixel_value(str_in) {
    "use strict";
    var px_re, match;
    px_re = /^(\d+)px$/;
    if (match = px_re.exec(str_in)) {
      return parseInt(match[1], 10);
    }
    return 0;
  }
  var container, tbl;
  var colw, r, row, c, cell, cell_style, pad_left, pad_right;

  // make the motifs table
  container = $("motifs");
  container.innerHTML = ""; // clear content

  tbl = make_motifs_table(current_alphabet, 1, data["motifs"], colw, data["stop_reason"]);
  container.appendChild(tbl);

  // measure table column widths
  colw = [];
  row = tbl.tBodies[0].rows[0];
  for (c = 0; c < row.cells.length; c++) {
    var padLeft, padRight;
    cell = row.cells[c];
    cell_style = window.getComputedStyle(cell, null);
    pad_left = pixel_value(cell_style.getPropertyValue("padding-left"));
    pad_right = pixel_value(cell_style.getPropertyValue("padding-right"));
    colw[c] = cell.clientWidth - pad_left - pad_right;
    if (typeof colw[c] !== "number" || colw[c] < 0) {
      colw[c] = 1;
    }
  }

  // set minimum table column widths on each row so later when we remove rows it still aligns
  for (r = 0; r < tbl.tBodies[0].rows.length; r++) {
    row = tbl.tBodies[0].rows[r];
    for (c = 0; c < row.cells.length; c++) {
      row.cells[c].style.minWidth = colw[c] + "px";
    }
  }

  // store the table column widths so we can create rows latter with the same minimums
  container.data_colw = colw;

  // calculate the x offset for the buttons
  row = tbl.tBodies[0].rows[0];
  container.data_more_x = coords(find_child(find_child(row, "motif_more"), "sym_btn"))[0];
  container.data_submit_x = coords(find_child(find_child(row, "motif_submit"), "sym_btn"))[0];

  draw_on_screen();
}

function make_meme_block(container, max_seq_len, is_scan, site) {
  "use strict";
  var motif = data.motifs[site.motif];
  var block = make_block(container, max_seq_len, site.pos, motif.len,
      site.pvalue, site.rc, site.motif, is_scan);
  var handler = (is_scan ?
      make_scan_popup(site, motif, block) :
      make_block_popup(site, motif, block));
  block.addEventListener("mouseover", handler, false);
  block.addEventListener("mouseout", handler, false);
}

function append_blocks_entries(tbody, seq_index, count) {
  "use strict";
  var i, end, j;
  var max_pvalue, max_block_height, max_seq_len, sequences;
  var sequence, sites, scans, scan;
  var container, plus, minus, rule, row;
  // define some constants
  max_seq_len = data.sequence_db.max_length;
  // determine how many to load
  end = Math.min(seq_index + count, data.sequence_db.sequences.length);
  for (i = seq_index; i < end; i++) {
    // get the sequence
    sequence = data.sequence_db.sequences[i];
    // make the containers for the block diagram
    container = make_block_container(current_alphabet.has_complement(),
        data.options.revcomp, max_seq_len, sequence.length);
    // create blocks for the motif sites
    sites = sequence["sites"];
    for (j = 0; j < sites.length; j++)
      make_meme_block(container, max_seq_len, false, sites[j]);
    // create blocks for the scanned sites
    scan = data.scan[i];
    for (j = 0; j < scan.sites.length; j++)
      make_meme_block(container, max_seq_len, true, scan.sites[j]);
    // create a row for the sequence
    row = tbody.insertRow(tbody.rows.length);
    toggle_class(row, "empty_seq", sites.length == 0 && scan.sites.length == 0);
    toggle_class(row, "only_scan", sites.length == 0 && scan.sites.length > 0);
    add_text_cell(row, (i + 1) + ".", "blockdiag_num");
    add_text_cell(row, sequence["name"], "blockdiag_name");
    add_text_cell(row, scan["pvalue"].toExponential(2), "blockdiag_pvalue");
    add_cell(row, container, "block_td"); 
  }
  return end;
}

function make_blocks_entries() {
  "use strict";
  var region;
  region = this;
  if (region.data_blocks_index >= data["sequence_db"]["sequences"].length) {
    // all sites created
    region.removeEventListener('scroll', make_blocks_entries, false);
    return;
  }
  // if there's still 100 pixels to scroll then don't do anything yet
  if (region.scrollHeight - (region.scrollTop + region.offsetHeight) > 100) {
    return;
  }

  region.data_blocks_index = append_blocks_entries(
      find_child(region, "blocks_tbl").tBodies[0], 
      region.data_blocks_index, 20
    ); 
}

// Apply opacity alpha to color rgb with backrgound bkg.
function RGBAtoRGB(rgb, bkg, opacity) {
  var i;
  var rgb_new = [];
  for (i=0; i<3; i++) {
    rgb_new[i] = Math.round(((1-opacity) * bkg[i]) + (opacity * rgb[i]));
  }
  return rgb_new;
}

// Function to measure the size of text on a canvas.
var MeasureText = function(font, text) {
  var image = document.createElement("canvas");
  var image_ctx = image.getContext('2d');
  image_ctx.save();
  image_ctx.font = font;
  var text_length = image_ctx.measureText(text).width;
  image.remove();
  return text_length;
} // MeasureText

// Functions to download the motif block diagram as a PDF or SVG file.
function download_PDF_block_diagram() {
  downloadBlockDiagram(true, 'bitbucket');
}
function download_SVG_block_diagram() {
  downloadBlockDiagram(false, 'bitbucket');
}

// Helper function to create a script element for downloading javascript.
function createScriptElement(url, file, integrity)
{
  console.log('Downloading ' + file + ' from ' + url + '.');
  const script = document.createElement('script');
  script.setAttribute('src', url + '/' + file);
  if (integrity) script.setAttribute('integrity', integrity);
  script.setAttribute('crossorigin', 'anonymous');
  script.setAttribute('async', '');
  document.head.appendChild(script);
}

// Helper function to download the motif block diagram as a PDF or SVG file.
var downloadBlockDiagram = function(
  make_pdf,
  next_source
) {
  var script_file, integrity_key;
  // Check if necessary javascript has been loaded.
  if ( (make_pdf && typeof jsPDF === 'undefined') ||
    (!make_pdf && typeof d3 === 'undefined') ) {
    if (next_source === 'bitbucket') {
      if (make_pdf) {
        script_file = 'jspdf.min.js';
      } else {
        script_file = 'd3.v5.min.js';
      }
      createScriptElement('https://memesuite.bitbucket.io/javascript', script_file);
      // Wait 3 seconds and then try to create the diagram.
      setTimeout(downloadBlockDiagram, 3000, make_pdf, 'cloudflare');
    } else if (next_source === 'cloudflare') {
      if (make_pdf) {
        script_file = 'jspdf/1.5.3/jspdf.min.js';
        integrity_key = 'sha512-ToRWKKOvhBSS8EtqSflysM/S7v9bB9V0X3B1+E7xo7XZBEZCPL3VX5SFIp8zxY19r7Sz0svqQVbAOx+QcLQSAQ=='
      } else {
        script_file = 'd3/5.16.0/d3.min.js';
        integrity_key = 'sha512-FHsFVKQ/T1KWJDGSbrUhTJyS1ph3eRrxI228ND0EGaEp6v4a/vGwPWd3Dtd/+9cI7ccofZvl/wulICEurHN1pg==';
      }
      createScriptElement('https://cdnjs.cloudflare.com/ajax/libs', script_file, integrity_key);
      // Wait 3 seconds and then try to create the diagram.
      setTimeout(downloadBlockDiagram, 3000, make_pdf, 'none');
    } else {
      // No more sources for javascript.  Call so error message will be shown.
      downloadBlockDiagramMain(make_pdf);
    }
  } else {
    // Create the diagram.
    downloadBlockDiagramMain(make_pdf);
  }
}

// Main function to download the motif block diagram as a PDF or SVG file.
var downloadBlockDiagramMain= function(
  make_pdf
) {
  // Check that necessary javascript was downloaded.
  if ( (make_pdf && typeof jsPDF === 'undefined') ||
    (!make_pdf && typeof d3 === 'undefined') ) {
    var id = make_pdf ? $("pdfButton") : $("svgButton");
    help_popup(id, "pop_offline");
    return;
  }

  // Determine which lines are visible in the HTML inner scroll window.
  var inner_tbl = $("blocks_scroll");
  var pix_per_sequence = 27;		// (vertical) pixels per sequence diagram line
  var first = Math.round(inner_tbl.scrollTop / pix_per_sequence) + 1;
  var last = first + Math.round(inner_tbl.offsetHeight / pix_per_sequence) - 1;

  // Get the contents of the HTML inner scroll window while saving the sequences to be printed.
  var numbers = document.getElementsByClassName("blockdiag_num");
  var bars = {};
  var visible_motifs = {};
  var seq_index = 0;
  var rgb;
  for (var i=0; i<numbers.length && seq_index < last; i++) {
    var row_node = numbers[i].parentNode;
    // Check if the sequence is displayed in the outer scrolling window.
    var seq_name = numbers[i].nextSibling.innerHTML;
    if (
      ($("rdo_sites_only").checked && row_node.getAttribute("class").includes("only_scan"))
      || 
      (! $("rdo_all_seqs").checked && row_node.getAttribute("class").includes("empty_seq"))
    ) { continue; }
    seq_index++;

    if (seq_index < first) { continue; }		// sequence not in HTML inner scrolling window 

    var pvalue = numbers[i].nextSibling.nextSibling.innerHTML;
    var far = numbers[i].nextSibling.nextSibling.nextSibling.children[0].children;
    var seq_length = data.sequence_db.sequences[i].length;

    var seqObj = [];
    seqObj["length"] = seq_length;
    seqObj["pvalue"] = pvalue;
    seqObj["pn"] = [];
    seqObj["width"] = [];
    seqObj["left"] = [];
    seqObj["height"] = [];
    seqObj["color"] = [];
    seqObj["opacity"] = [];
    for (var x = 0; x < far.length; x++) {
      if ((far[x].getAttribute("style") != null)
        && (
          ( $("rdo_sites_only").checked && ! far[x].getAttribute("class").includes("scanned"))
          || ( $("rdo_sites_and_scan").checked || $("rdo_all_seqs").checked )
        )
      ) {
        if (far[x].getAttribute("style").includes("rgb")) {
          var compStyles = far[x].style;
	  // Make scanned sites get displayed first so they will not "cover" regular sites.
	  var site_pn = far[x].getAttribute("class").includes("top") ? "+" : "-";
	  var site_width = parseFloat(compStyles.width.slice(0, -1));
	  var site_left = parseFloat(compStyles.left.slice(0, -1));
	  var site_height = parseFloat(compStyles.height.slice(0, -2));
	  var site_color = compStyles.backgroundColor.slice(4, -1).replace(/ /g, "");
          if (far[x].getAttribute("class").includes("scanned")) {
	    seqObj["pn"].unshift(site_pn);
	    seqObj["width"].unshift(site_width);
	    seqObj["left"].unshift(site_left);
	    seqObj["height"].unshift(site_height);
	    seqObj["color"].unshift(site_color);
            seqObj["opacity"].unshift(0.3);
          } else {
	    seqObj["pn"].push(site_pn);
	    seqObj["width"].push(site_width);
	    seqObj["left"].push(site_left);
	    seqObj["height"].push(site_height);
	    seqObj["color"].push(site_color);
            seqObj["opacity"].push(1);
          }
	  visible_motifs[far[x].getAttribute("data-colour-index")] = site_color;
        }
      }
    }
    // Save the sequence data if it has motifs (or rdo_all_seqs is checked)
    if ($("rdo_all_seqs").checked || seqObj["width"].length > 0) { 
      bars[seq_name] = seqObj; 
    }
  }

  // jsPDF coordinates are always in points.
  var font_size = 13;
  var nbars = Object.keys(bars).length;
  var legend_font_size = 0.8 * font_size;

  // Initialize field widths in points by measuring header text.
  var font = "bold " + font_size + "pt Helvetica, sans-serif";
  var max_name_width = MeasureText(font, "Name");
  var max_pvalue_width = MeasureText(font, "p-value");

  var max_seq_length = 0;		// in characters
  var has_complement = current_alphabet.has_complement();
  var revcomp = data.options["revcomp"];

  // Measure text of numbers, names and p-values, convert to points and save the max.
  font = font_size + "pt Helvetica, sans-serif";
  var seq_name;
  for (seq_name in bars) {
    var seq_name_width = MeasureText(font, seq_name);
    var pvalue_width = MeasureText(font, pvalue);
    var seq_length = bars[seq_name]["length"];
    if (seq_length > max_seq_length) { max_seq_length = seq_length; }
    if (seq_name_width > max_name_width) { max_name_width = seq_name_width; }
    if (pvalue_width > max_pvalue_width) { max_pvalue_width = pvalue_width; }
  }

  // Get the length in characters of the longest visible motif.
  var max_motif_length = 0;
  var motif_index, motif_length;
  for (motif_index in visible_motifs) {
    motif_length = data.motifs[motif_index].len;
    if (motif_length > max_motif_length) { max_motif_length = motif_length; }
  }

  // Sort the motif indices.
  var motif_indices = [];
  var sorted_motif_indices = [];
  for (motif_index in visible_motifs) {
    motif_indices.push(Number(motif_index));
  }
  sorted_motif_indices = motif_indices.sort(function(a, b){return a-b;});

  // Set up values for main section.
  var height = (nbars+1) * (2.6*font_size);
  var nmotifs = Object.keys(visible_motifs).length;
  var name_field_width = max_name_width + font_size;
  var pvalue_field_width = max_pvalue_width + font_size;
  var plus_minus_field_width = has_complement ? 2*font_size : font_size;
  var non_diagram_width = name_field_width + pvalue_field_width + plus_minus_field_width;
  var diagram_width = 47 * font_size;
  var pix_per_char = diagram_width/max_seq_length;
  var x_scale_factor = data.sequence_db.max_length/100;	// Scale factor comes from function make_block().
  var diagram_line_height = (height-2*font_size)/nbars; 
  var doc_width = diagram_width + non_diagram_width + 2*font_size;
  var doc_height = height + 0.5*font_size;

  // Set up values for the legend.
  var tmp_font = legend_font_size + "pt Courier, normal";
  var courier_width = MeasureText(tmp_font, "A");

  var legend_line_height = 1.2 * legend_font_size;
  var index_field_width = 3 * legend_font_size;
  var symbol_field_width = 5 * legend_font_size;
  var legend_non_consensus_width = index_field_width + symbol_field_width + 3*legend_font_size;
  var legend_hdr_font = legend_font_size + "pt Helvetica, sans-serif";
  var consensus_hdr_width = MeasureText(legend_hdr_font, "Motif Consensus");
  var consensus_field_width = doc_width - legend_non_consensus_width - legend_font_size;
  // Get number of characters that will fit in legend consensus field.
  var legend_split_length = Math.floor(consensus_field_width/courier_width);
  // Get number of lines in legend.
  var n_legend_lines = 0;
  for (motif_index in visible_motifs) {
    motif_length = data.motifs[motif_index].len;
    n_legend_lines += Math.ceil(motif_length/legend_split_length);
  }
  if (n_legend_lines > 0) { n_legend_lines += 3; }	// header line + 2*space
  var legend_width = legend_non_consensus_width + Math.min(legend_split_length, max_motif_length)*courier_width;
  var legend_height = n_legend_lines * legend_line_height;
  doc_height += legend_height + 1*font_size;

  if (make_pdf) {
    // Now create the PDF document.
    // This next line is necessary because jsPDF silently swaps width and height.
    var orient = doc_width > doc_height ? 'landscape' : 'portrait';
    doc = new jsPDF(
      {
	orientation: orient,
	unit: 'pt',
	format: [doc_width, doc_height]
      }
    );

    // Set the font size for the PDF.
    doc.setFontSize(1.33*font_size);

    // Create the header.
    var offset = font_size;
    var liney = 1.5*font_size;
    // .. Name hdr ..
    doc.setFont("Helvetica", "bold");
    doc.text("Name", offset, liney);
    offset += name_field_width;

    // p-value hdr
    doc.setFont("Helvetica", "bolditalic");
    doc.text("p", offset + font_size, liney);
    doc.setFont("Helvetica", "bold");
    doc.text("-value", offset + 2*font_size, liney);
    offset += pvalue_field_width + plus_minus_field_width;

    // Motif Location hdr
    doc.text("Motif Locations", offset, liney);

    // Generate the data object for the PDF.
    liney -= 0.5*font_size;
    var dy = font_size/3.5;
    for (var seq_name in bars) {
      liney += diagram_line_height;
      offset = font_size;

      //
      // Generate the text fields.
      //
      doc.setFont("Helvetica", "normal");

      // Sequence name text
      doc.text(seq_name, offset, liney + dy);
      offset += name_field_width;

      // p-value text
      doc.text(bars[seq_name]["pvalue"], offset + pvalue_field_width, liney + dy, {align: "right"});
      offset += pvalue_field_width;

      // +/- text (optional)
      if (has_complement) {
	doc.text("+", offset+font_size, liney + dy - font_size/2);
	if (revcomp) {
	  doc.text("-", offset+1.15*font_size, liney + dy + font_size/2);
	}
      }
      offset += plus_minus_field_width;

      // Generate the base line.
      doc.setLineWidth(0.35);
      doc.line(offset, liney, offset + (bars[seq_name]["length"] * pix_per_char), liney);

      // Generate the blocks.
      for (var i = 0; i < bars[seq_name]["width"].length; i++) {
	if (bars[seq_name]["pn"][i] == undefined) { continue; }
	rgb = bars[seq_name]["color"][i].split(",").map(Number);
	var opacity =  bars[seq_name]["opacity"][i]; 
	if (opacity != 1) { rgb = RGBAtoRGB(rgb, [255,255,255], opacity); }
	var bar_x = offset + (bars[seq_name]["left"][i] * x_scale_factor * pix_per_char);
	var bar_y = (bars[seq_name]["pn"][i] == "+") ? (liney - 0.1*font_size*bars[seq_name]["height"][i]) : liney;
	doc.setFillColor(rgb[0], rgb[1], rgb[2]);
	doc.rect(bar_x, bar_y, bars[seq_name]["width"][i] * x_scale_factor * pix_per_char, 0.1*font_size*bars[seq_name]["height"][i], 'FD');
      }
    }

    //
    // Generate the legend.
    //
    if (n_legend_lines > 0) {
      doc.setFontSize(1.33*legend_font_size);
      dy = 0.8 * legend_font_size;

      // The legend header.
      var legend_top = liney + 2*legend_font_size;
      liney += 4.5*legend_font_size;
      offset = legend_font_size;
      doc.setFont("Helvetica", "bold");
      doc.text("Motif", offset, liney);
      offset += index_field_width + legend_font_size;
      doc.text("Symbol", offset, liney);
      offset += symbol_field_width + legend_font_size;
      doc.text("Motif Consensus", offset, liney);
      liney -= 0.5*legend_font_size;
      liney += legend_line_height;

      for (var i=0; i<motif_indices.length; i++) {
	motif_index = sorted_motif_indices[i];
	offset = legend_font_size;

	// Motif Name
	doc.setFont("Helvetica", "normal");
	var motif_index_string = (motif_index+1).toString();
	motif_index_string = motif_index_string + ".";
	var dx = 3 * legend_font_size;
	doc.text(motif_index_string, offset+dx, liney+dy, {align: "right"});
	offset += index_field_width + legend_font_size;

	// Motif Symbol
	motif_length = data.motifs[motif_index].len;
	rgb = visible_motifs[motif_index].split(",").map(Number);
	var bar_x = offset;
	var bar_y = liney;
	doc.setFillColor(rgb[0], rgb[1], rgb[2]);
	doc.rect(bar_x, bar_y, symbol_field_width*(motif_length/max_motif_length), legend_font_size, 'FD');
	offset += symbol_field_width + legend_font_size;

	// Motif Consensus Sequence
	doc.setFont("Courier", "normal");
	var motif_consensus = data.motifs[motif_index].id;
	doc.text(motif_consensus, offset, liney+dy, {maxWidth: legend_split_length*courier_width});
	liney += Math.ceil(motif_length/legend_split_length) * legend_line_height;
      }

      // Draw box around legend.
      doc.rect(
	0.5*legend_font_size, 
	legend_top + 0.5*legend_font_size, 
	Math.max(legend_width, legend_non_consensus_width + consensus_hdr_width + courier_width),
	legend_height
      );
    } // legend

    doc.save('motif_locations.pdf');

  } else {
    // Download an SVG document.
    var body = d3.select("#blocks").append("svg")
      .attr("width", (diagram_width + non_diagram_width) + "pt")
      .attr("height", (doc_height+legend_font_size).toString())
      .attr("background-color", "lightgrey")
      .attr("id", "memeSVG")
      .attr("xmlns", "http://www.w3.org/2000/svg");

    // Create the header.
    var x = 0;
    var offset = font_size;
    var liney = 1.5*font_size;

    // .. Name hdr ..
    body.append("text")
      .attr("x", offset)
      .attr("y", liney)
      .attr("font-family", "Helvetica, sans-serif")
      .attr("font-size", font_size+"pt")
      .attr("font-weight", "bold")
      .text("Name");
      offset += name_field_width;

    // p-value hdr
    body.append("text")
      .attr("x", offset + 2*font_size)
      .attr("y", liney)
      .attr("font-family", "Helvetica, sans-serif")
      .attr("font-size", font_size+"pt")
      .attr("font-weight", "bold")
      .attr("font-style", "italic")
      .text("p");
    body.append("text")
      .attr("x", offset + 3*font_size)
      .attr("y", liney)
      .attr("font-family", "Helvetica, sans-serif")
      .attr("font-size", font_size+"pt")
      .attr("font-weight", "bold")
      .text("-value");
    offset += pvalue_field_width + plus_minus_field_width + font_size;

    // Motif Location hdr
    body.append("text")
      .attr("x", offset)
      .attr("y", liney)
      .attr("font-family", "Helvetica, sans-serif")
      .attr("font-size", font_size+"pt")
      .attr("font-weight", "bold")
      .text("Motif Locations");

    // Generate the data for the SVG.
    liney -= 0.5*font_size;
    var dy = font_size/3.5;
    for (var seq_name in bars) {
      liney += diagram_line_height;
      offset = font_size;

      //
      // Generate the text fields.
      //

      // Sequence name text
      body.append("text")
	.attr("x", offset)
	.attr("y", liney + dy)
	.attr("font-family", "Helvetica, sans-serif")
	.attr("font-size", font_size+"pt")
	.text(seq_name);
      offset += name_field_width;

      // p-value text
      body.append("text")
	.attr("x", offset + font_size+ pvalue_field_width)
	.attr("y", liney + dy)
	.attr("font-family", "Helvetica, sans-serif")
	.attr("font-size", font_size+"pt")
	.attr("text-anchor", "end")
	.text(bars[seq_name]["pvalue"]);
      offset += pvalue_field_width + font_size;

      // +/- text (optional)
      if (has_complement) {
	body.append("text")
	  .attr("x", offset+font_size)
	  .attr("y", liney + dy - font_size/2)
	  .attr("font-family", "Helvetica, sans-serif")
	  .attr("font-size", font_size+"pt")
	  .text("+");
	if (revcomp) {
	  body.append("text")
	    .attr("x", offset+1.15*font_size)
	    .attr("y", liney + dy + font_size/2)
	    .attr("font-family", "Helvetica, sans-serif")
	    .attr("font-size", font_size+"pt")
	    .text("-");
	}
      }
      offset += plus_minus_field_width;

      // Generate the base line.
      body.append("line")
	.attr("x1", offset)
	.attr("x2", offset + (bars[seq_name]["length"] * pix_per_char))
	.attr("y1", liney)
	.attr("y2", liney)
	.attr("stroke-width", 0.5)
	.attr("stroke","black");

      // Generate the blocks.
      for (var i = 0; i < bars[seq_name]["width"].length; i++) {
	if (bars[seq_name]["pn"][i] == undefined) { continue; }
	body.append("rect")
	  .attr("x", offset + (bars[seq_name]["left"][i] * x_scale_factor * pix_per_char) )
	  .attr("y", (bars[seq_name]["pn"][i] == "+") ? (liney - 0.1*font_size*bars[seq_name]["height"][i]) : liney)
	  .attr("width", bars[seq_name]["width"][i] * x_scale_factor * pix_per_char) 
	  .attr("height", 0.1*font_size*bars[seq_name]["height"][i])
	  .attr("fill", "rgb("+bars[seq_name]["color"][i] + ")")
	  .attr("fill-opacity", bars[seq_name]["opacity"][i])
	  .attr("stroke-width", 0.5)
	  .attr("stroke","black");
      }
    }
    
    //
    // Generate the legend.
    //
    if (n_legend_lines > 0) {
      dy = 0.8 * legend_font_size;

      // The legend header.
      var legend_top = liney + 2*legend_font_size;
      liney += 4.5*legend_font_size;
      offset = legend_font_size;
      body.append("text")
	.attr("x", offset)
	.attr("y", liney)
	.attr("font-family", "Helvetica, sans-serif")
	.attr("font-size", legend_font_size+"pt")
        .attr("font-weight", "bold")
	.text("Motif");
      offset += index_field_width + legend_font_size;
      body.append("text")
	.attr("x", offset)
	.attr("y", liney)
	.attr("font-family", "Helvetica, sans-serif")
	.attr("font-size", legend_font_size+"pt")
        .attr("font-weight", "bold")
	.text("Symbol");
      offset += symbol_field_width + legend_font_size;
      body.append("text")
	.attr("x", offset)
	.attr("y", liney)
	.attr("font-family", "Helvetica, sans-serif")
	.attr("font-size", legend_font_size+"pt")
        .attr("font-weight", "bold")
	.text("Motif Consensus");
      liney -= 0.5*legend_font_size;
      liney += legend_line_height;

      for (var i=0; i<motif_indices.length; i++) {
	motif_index = sorted_motif_indices[i];
	offset = legend_font_size;

	// Motif Name
	var motif_index_string = (motif_index+1).toString();
	motif_index_string = motif_index_string + ".";
	var dx = 3.3 * legend_font_size;
	body.append("text")
	  .attr("x", offset+dx)
	  .attr("y", liney+dy)
	  .attr("font-family", "Helvetica, sans-serif")
	  .attr("font-size", legend_font_size+"pt")
	  .attr("text-anchor", "end")
	  .text(motif_index_string);
	offset += index_field_width + legend_font_size;

	// Motif Symbol
	motif_length = data.motifs[motif_index].len;
	var bar_x = offset;
	var bar_y = liney;
	body.append("rect")
	  .attr("x", bar_x )
	  .attr("y", liney)
	  .attr("width", symbol_field_width*(motif_length/max_motif_length)) 
	  .attr("height", legend_font_size)
	  .attr("fill", "rgb("+ visible_motifs[motif_index] + ")")
	  .attr("stroke-width", 0.5)
	  .attr("stroke","black");
	offset += symbol_field_width + legend_font_size;

	// Motif Consensus Sequence
	var motif_consensus = data.motifs[motif_index].id;
	var cons_length = motif_consensus.length;
        var start_index = 0;
        while (start_index < cons_length) {
	  body.append("text")
	    .attr("x", offset)
	    .attr("y", liney+dy)
	    .attr("font-family", "Courier")
	    .attr("font-size", legend_font_size+"pt")
	    .text(motif_consensus.slice(start_index, Math.min(cons_length, start_index+legend_split_length)))
	  liney += legend_line_height;
	  start_index += legend_split_length;
        }
      }

      // Draw box around legend.
      body.append("rect")
	.attr("x", 0.5*legend_font_size)
	.attr("y", legend_top + 0.5*legend_font_size)
	.attr("width", Math.max(legend_width, legend_non_consensus_width + consensus_hdr_width + courier_width))
	.attr("height", legend_height)
	.attr("fill", "none")
	.attr("stroke-width", 1)
	.attr("stroke", "black");

    } // legend

    var svg = document.getElementsByTagName("svg")[0].outerHTML;
    var svgBlob = new Blob([svg], {type:"image/svg+xml;charset=utf-8"});
    var svgUrl = URL.createObjectURL(svgBlob);
    var downloadLink = document.createElement("a");
    downloadLink.href = svgUrl;
    downloadLink.download = "meme-motif-locations.svg";
    document.getElementById("sites_sec").appendChild(downloadLink);
    downloadLink.click();
    downloadLink.remove();
    document.getElementById("memeSVG").remove();

  } // SVG

};

function make_blocks() {
  "use strict";
  function add_seqs_filter(container, id, checked, label_text, help_topic) {
    "use strict";
    var label, radio;
    radio = document.createElement("input");
    radio.type = "radio";
    radio.name = "seqs_display";
    radio.id = id;
    radio.checked = checked;
    radio.addEventListener('click', action_seqs_filter, false);
    label = document.createElement("label");
    label.appendChild(document.createTextNode(label_text));
    label.htmlFor = id;
    container.appendChild(radio);
    container.appendChild(label);
    if (help_topic) {
      container.appendChild(document.createTextNode("\xA0"));
      container.appendChild(help_button(help_topic));
    }
  }
  function add_block_diagram_button(container, id, buttonText, help_topic) {
    var button, label;
    button = document.createElement("button");
    button.id = id;
    label = document.createTextNode(buttonText);
    button.appendChild(label);
    button.onclick = (id === "pdfButton") ? download_PDF_block_diagram : download_SVG_block_diagram;
    container.appendChild(document.createTextNode("  "));
    container.appendChild(button);
    if (help_topic) {
      container.appendChild(document.createTextNode("\xA0"));
      container.appendChild(help_button(help_topic));
    }
    //var new_icon = document.createElement("img");
    //new_icon.src = new_icon_src;
    //new_icon.alt = "NEW";
    //container.appendChild(document.createTextNode("  "));
    //container.appendChild(new_icon);
  }
  function add_blocks_header(row, title, nopad, help_topic) {
    "use strict";
    var div, divcp, th;
    th = document.createElement("th");
    div = document.createElement("div");
    div.className = "blocks_th_inner";
    if (typeof title !== "object") {
      title = document.createTextNode("" + title);
    }
    div.appendChild(title);
    if (help_topic) {
      div.appendChild(document.createTextNode("\xA0"));
      div.appendChild(help_button(help_topic));
    }
    divcp = div.cloneNode(true);
    divcp.className = "blocks_th_hidden";
    th.appendChild(div);
    th.appendChild(divcp);
    if (nopad) {
      th.className = "nopad";
    }
    row.appendChild(th);
  }
  var container;
  var page, view_height, outer_tbl, inner_tbl, tbl, thead, tbody, rhead;
  var in_view, i, seq_count;
  
  page = (document.compatMode === "CSS1Compat") ? document.documentElement : document.body;
  view_height = Math.max(page.clientHeight - 300, 300);

  container = $("blocks");
  toggle_class(container, "hide_empty_seqs", true);
  toggle_class(container, "hide_only_scan", true);
  container.innerHTML = "";
  add_seqs_filter(container, "rdo_sites_only", true, "Only Motif Sites", "pop_motif_sites");
  add_seqs_filter(container, "rdo_sites_and_scan", false, "Motif Sites+Scanned Sites", "pop_scanned_sites");
  add_seqs_filter(container, "rdo_all_seqs", false, "All Sequences", "pop_all_sequences");
  add_block_diagram_button(container, "pdfButton", "Download PDF", "pop_download_pdf_motif_locations");
  add_block_diagram_button(container, "svgButton", "Download SVG", "pop_download_svg_motif_locations");

  outer_tbl = document.createElement("div");
  outer_tbl.className = "blocks_outer";

  inner_tbl = document.createElement("div");
  inner_tbl.id = "blocks_scroll";
  inner_tbl.className = "blocks_inner";
  inner_tbl.style.maxHeight = view_height + "px";
  outer_tbl.appendChild(inner_tbl);

  tbl = document.createElement("table");
  tbl.className = "blocks_tbl";
  inner_tbl.appendChild(tbl);

  thead = document.createElement("thead");
  tbl.appendChild(thead);
  tbody = document.createElement("tbody");
  tbl.appendChild(tbody);

  rhead = thead.insertRow(thead.rows.length);
  add_blocks_header(rhead, "", true);
  add_blocks_header(rhead, "Name", false, "pop_seq_name");
  add_blocks_header(rhead, make_pv_text(), false, "pop_seq_pvalue");
  add_blocks_header(rhead, "Motif Locations", false, "pop_motif_location");

  container.appendChild(outer_tbl);

  seq_count = data["sequence_db"]["sequences"].length;
  in_view = Math.max(Math.ceil(view_height / 25), 1);
  i = append_blocks_entries(tbody, 0, in_view);

  while (i < seq_count && inner_tbl.scrollHeight - (inner_tbl.scrollTop + inner_tbl.offsetHeight) < 400) {
    i = append_blocks_entries(tbody, i, 20);
  }
  inner_tbl.data_blocks_index = i;
  if (i < seq_count) {
    inner_tbl.addEventListener('scroll', make_blocks_entries, false);
  }
}

function make_scan_popup(site, motif) {
  return function (e) {
    "use strict";
    var pop, xy, padding, edge_padding, pop_left, pop_top, page_width;
    var lflank, match, rflank, pspm;
    if (!e) var e = window.event;
    pop = make_scan_popup.pop;
    if (e.type === "mouseover") {
      if (pop) return;
      pop = clone_template("tmpl_scan_info");
      pspm = new Pspm(motif.pwm);
      if (site.rc) pspm.reverse_complement(current_alphabet);
      set_tvar(pop, "tvar_logo", make_small_logo(current_alphabet, pspm, {"className": "scan_logo"}));
      set_tvar(pop, "tvar_motif", motif.id);
      set_tvar(pop, "tvar_pvalue", site.pvalue.toExponential(2));
      set_tvar(pop, "tvar_start", site.pos + 1);
      set_tvar(pop, "tvar_end", site.pos + motif.len);

      document.body.appendChild(pop);
      position_popup(this, pop);
      make_scan_popup.pop = pop;
    } else if (e.type === "mouseout") {
      if (pop) {
        pop.parentNode.removeChild(pop);
        make_scan_popup.pop = null;
      }
    }
  };
}

function make_block_popup(site, motif, block) {
  return function (e) {
    "use strict";
    var pop;
    var lflank, match, rflank, pspm, ruler, match_seq, match_width;
    if (!e) var e = window.event;
    pop = make_block_popup.pop;
    if (e.type === "mouseover") {
      if (pop) return;
      pop = clone_template("tmpl_block_info");
      pspm = new Pspm(motif.pwm);
      if (site.rc) { // must be dna
        pspm.reverse_complement(current_alphabet);
        lflank = current_alphabet.invcomp_seq(site.rflank);
        match = current_alphabet.invcomp_seq(site.match);
        rflank = current_alphabet.invcomp_seq(site.lflank);
      } else {
        lflank = site.lflank;
        match = site.match;
        rflank = site.rflank;
      }
      ruler = document.getElementById("measure_match");
      match_seq = make_seq(current_alphabet, match);
      ruler.innerHTML = "";
      ruler.appendChild(match_seq);
      match_width = ruler.clientWidth;
      ruler.removeChild(match_seq);
      set_tvar(pop, "tvar_lflank", lflank);
      set_tvar(pop, "tvar_match", match_seq);
      set_tvar(pop, "tvar_rflank", rflank);
      set_tvar(pop, "tvar_logo_pad", lflank);
      set_tvar(pop, "tvar_logo", make_small_logo(current_alphabet, pspm, {"width": match_width}));
      set_tvar(pop, "tvar_motif", motif.id);
      set_tvar(pop, "tvar_pvalue", site.pvalue.toExponential(2));
      set_tvar(pop, "tvar_start", site.pos + 1);
      set_tvar(pop, "tvar_end", site.pos + motif.len);

      document.body.appendChild(pop);
      position_popup(block, pop);
      make_block_popup.pop = pop;
    } else if (e.type === "mouseout") {
      if (pop) {
        pop.parentNode.removeChild(pop);
        make_block_popup.pop = null;
      }
    }
  };
}

//
// action_show_more
//
// Show more information on the motif.
///
function action_show_more(e) {
  var node, tr, tbody, table, container, motif, ordinal;
  var expanded_motif;
  if (!e) e = window.event;
  if (e.type === "keydown") {
    if (e.keyCode !== 13 && e.keyCode !== 32) {
      return;
    }
    // stop a submit or something like that
    e.preventDefault();
  }
  // find the row that contains the cell
  node = this;
  do {
    if (node.tagName === "TR") break;
  } while (node = node.parentNode);
  if (!node) throw new Error("Expected to find row!?");
  tr = node;
  // get info
  motif = tr.data_motif;
  ordinal = tr.data_ordinal;
  // find tbody
  do {
    if (node.tagName === "TBODY") break;
  } while (node = node.parentNode);
  if (!node) throw new Error("Expected to find tbody!?");
  tbody = node;
  // find table
  do {
    if (node.tagName === "TABLE") break;
  } while (node = node.parentNode);
  if (!node) throw new Error("Expected to find table!?");
  table = node;
  // find container
  container = node.parentNode;
  // make a expanded motif
  motif["expanded"] = true;
  expanded_motif = make_expanded_motif(current_alphabet, ordinal, motif, 
      container.data_more_x, container.data_submit_x);
  // now determine how to place it
  if (tbody.rows.length === 1) {
    // only us in the table so the table can be replaced
    container.replaceChild(expanded_motif, table);
  } else if (tbody.rows[0] === tr) {
    // first row, so remove and insert an expanded motif before
    table.deleteRow(tr.rowIndex);
    container.insertBefore(expanded_motif, table);
  } else if (tbody.rows[tbody.rows.length - 1] === tr) {
    // last row, so remove and insert an expanded motif after
    table.deleteRow(tr.rowIndex);
    container.insertBefore(expanded_motif, table.nextSibling);
  } else {
    var table2, tbody2;
    table2 = table.cloneNode(false);
    table2.appendChild(table.tHead.cloneNode(true));
    tbody2 = table.tBodies[0].cloneNode(false);
    table2.appendChild(tbody2);
    container.insertBefore(table2, table.nextSibling);
    for (i = tbody.rows.length - 1; i >= 0; i--) {
      row = tbody.rows[i];
      row.parentNode.removeChild(row);
      if (row === tr) {
        break;
      }
      tbody2.insertBefore(row, tbody2.rows[0]);
    }
    container.insertBefore(expanded_motif, table2);
  }
  find_child(expanded_motif, "tvar_less").focus();
}

//
// action_show_less
//
// Show less information on the motif.
///
function action_show_less(e) {
  var btn;
  var expanded_motif, container, motif, ordinal, colw, focus_target;
  var table, tbody, tbody2, row, table_before, table_after;
  if (!e) e = window.event;
  if (e.type === "keydown") {
    if (e.keyCode !== 13 && e.keyCode !== 32) {
      return;
    }
    // stop a submit or something like that
    e.preventDefault();
  }
  btn = this;
  // find expanded motif
  expanded_motif = find_parent(btn, "expanded_motif");
  if (!expanded_motif) throw new Error("Expected expanded motif.");
  // find the container
  container = expanded_motif.parentNode;
  // get data
  motif = expanded_motif.data_motif;
  ordinal = expanded_motif.data_ordinal;
  colw = container.data_colw;
  // get the table before
  table_before = expanded_motif.previousSibling;
  if (table_before && table_before.tagName !== "TABLE") {
    table_before = null;
  }
  // get the table after
  table_after = expanded_motif.nextSibling;
  if (table_after && table_after.tagName !== "TABLE") {
    table_after = null;
  }
  // see if there is a table below or above that we can put this in.
  // if there is a table both below and above then add this motif and
  // all ones below to the above table
  motif["expanded"] = false;
  if (table_before && table_after) {
    tbody = table_before.tBodies[0];
    row = tbody.insertRow(tbody.rows.length);
    make_motif_table_entry(row, current_alphabet, ordinal, motif, colw);
    focus_target = find_child(row.cells[5], "sym_btn");
    container.removeChild(expanded_motif);
    tbody2 = table_after.tBodies[0];
    while (tbody2.rows.length > 0) {
      row = tbody2.rows[0];
      row.parentNode.removeChild(row);
      tbody.appendChild(row);
    }
    container.removeChild(table_after);
  } else if (table_before) {
    tbody = table_before.tBodies[0];
    row = tbody.insertRow(tbody.rows.length);
    make_motif_table_entry(row, current_alphabet, ordinal, motif, colw);
    focus_target = find_child(row.cells[5], "sym_btn");
    container.removeChild(expanded_motif);
  } else if (table_after) {
    tbody = table_after.tBodies[0];
    row = tbody.insertRow(0);
    make_motif_table_entry(row, current_alphabet, ordinal, motif, colw);
    focus_target = find_child(row.cells[5], "sym_btn");
    container.removeChild(expanded_motif);
  } else {
    //no table above or below!
    // make a new table
    table = make_motifs_table(current_alphabet, ordinal, [motif], colw, data["stop_reason"]);
    focus_target = find_child(table.tBodies[0].rows[0].cells[5], "sym_btn");
    container.replaceChild(table, expanded_motif);
  }
  focus_target.focus();
}

//TODO -- can we delete this junk?
//function action_show_outpop(e) {
function fred_action_show_outpop(e) {
  "use strict";
  function init() {
    "use strict";
    var close_btn, next_btn, prev_btn, cancel_btn, do_btn;
    var tab1, tab2, tab3;
    var pnl1, pnl2, pnl3;
    var format_list;
    var tbl_submit, inputs, i, default_prog;
    close_btn = $("outpop_close");
    close_btn.addEventListener("click", action_hide_outpop, false);
    close_btn.addEventListener("keydown", action_hide_outpop, false);
    next_btn = $("outpop_next");
    next_btn.addEventListener("click", action_outpop_next, false);
    next_btn.addEventListener("keydown", action_outpop_next, false);
    prev_btn = $("outpop_prev");
    prev_btn.addEventListener("click", action_outpop_prev, false);
    prev_btn.addEventListener("keydown", action_outpop_prev, false);
    cancel_btn = $("outpop_cancel");
    cancel_btn.addEventListener("click", action_hide_outpop, false);
    do_btn = $("outpop_do");
    do_btn.addEventListener("click", action_outpop_submit, false);
    tab1 = $("outpop_tab_1");
    tab1.tabIndex = 0;
    tab1.addEventListener("click", action_outpop_tab, false);
    tab1.addEventListener("keydown", action_outpop_tab, false);
    tab2 = $("outpop_tab_2");
    tab2.tabIndex = 0;
    tab2.addEventListener("click", action_outpop_tab, false);
    tab2.addEventListener("keydown", action_outpop_tab, false);
    tab3 = $("outpop_tab_3");
    tab3.tabIndex = 0;
    tab3.addEventListener("click", action_outpop_tab, false);
    tab3.addEventListener("keydown", action_outpop_tab, false);
    pnl1 = $("outpop_pnl_1");
    pnl2 = $("outpop_pnl_2");
    pnl3 = $("outpop_pnl_3");
    toggle_class(tab1, "activeTab", true);
    toggle_class(tab2, "activeTab", false);
    toggle_class(tab3, "activeTab", false);
    pnl1.style.display = "block";
    pnl2.style.display = "none";
    pnl3.style.display = "none";
    format_list = $("text_format");
    format_list.addEventListener("change", action_outpop_format, false);
    // setup program selection
    tbl_submit = $("programs");
    // when not dna, hide the inputs for programs that require dna motifs
    toggle_class(tbl_submit, "alphabet_dna", current_alphabet.has_complement());//TODO alphabet_dna is a bad name for a field when allowing custom alphabets
    // add a click listener for the radio buttons
    inputs = tbl_submit.querySelectorAll("input[type='radio']");
    for (i = 0; i < inputs.length; i++) {
      inputs[i].addEventListener("click", action_outpop_program, false);
    }
    // ensure that a default program option is selected for DNA and Protein
    default_prog = document.getElementById(current_alphabet.has_complement() ? "submit_tomtom" : "submit_fimo"); //TODO Tomtom might require a more strict definition of DNA
    default_prog.checked = true;
    action_outpop_program.call(default_prog);
    // disable reverse-complement when not DNA
    $("logo_rc_option").disabled = !current_alphabet.has_complement(); 
    // set errorbars on when ssc is on
    $("logo_ssc").addEventListener("change", action_outpop_ssc, false);
  }
  var node;
  // store the focused element
  action_hide_outpop.last_active = document.activeElement;
  if (!e) e = window.event;
  if (e.type === "keydown") {
    if (e.keyCode !== 13 && e.keyCode !== 32) {
      return;
    }
    // stop a submit or something like that
    e.preventDefault();
  }
  // hide the help popup
  help_popup();
  // on first load initilize the popup
  if (!action_show_outpop.ready) {
    init();
    action_show_outpop.ready = true;
  }
  // load the motif logo
  node = this;
  do {
    if (/\bexpanded_motif\b/.test(node.className) || node.tagName === "TR") break;
  } while (node = node.parentNode);
  if (node === null) throw new Error("Expected node!");
  update_outpop_motif(node.data_ordinal - 1);
  // display the download popup
  $("grey_out_page").style.display = "block";
  $("download").style.display = "block";
  $("outpop_close").focus();
} // fred_action_show_outpop

function action_btn_rc(e) {
  "use strict";
  var node, tr, motif, box, logo_box, tab_st, tab_rc, rc;
  if (!e) e = window.event;
  if (e.type === "keydown") {
    if (e.keyCode !== 13 && e.keyCode !== 32) {
      return;
    }
    // stop a submit or something like that
    e.preventDefault();
  }
  node = this;
  do {
    if (node.tagName === "TR") break;
  } while (node = node.parentNode);
  if (!node) throw new Error("Expected to find row!?");
  tr = node;
  // get info
  motif = tr.data_motif;
  box = find_parent(this, "preview_box");
  logo_box = find_child(box, "preview_logo_box");
  tab_st = find_child(box, "plus");
  tab_rc = find_child(box, "minus");
  rc = (this === tab_rc);
  motif["rc"] = rc;
  toggle_class(logo_box, "show_rc_logo", rc);
  toggle_class(tab_st, "active", !rc);
  toggle_class(tab_rc, "active", rc);
}

function action_rc_tab(e) {
  "use strict";
  var box, logo_box, tab_st, tab_rc, rc;
  if (!e) e = window.event;
  if (e.type === "keydown") {
    if (e.keyCode !== 13 && e.keyCode !== 32) {
      return;
    }
    // stop a submit or something like that
    e.preventDefault();
  }
  box = find_parent(this, "expanded_motif");
  logo_box = find_child(box, "tvar_logo");
  tab_st = find_child(box, "tvar_tab");
  tab_rc = find_child(box, "tvar_tab_rc");
  rc = (this === tab_rc);
  box.data_motif["rc"] = rc;
  toggle_class(logo_box, "show_rc_logo", rc);
  toggle_class(tab_st, "activeTab", !rc);
  toggle_class(tab_rc, "activeTab", rc);
}

function action_seqs_filter() {
  "use strict";
  var block_container;
  block_container = $("blocks");
  if ($("rdo_all_seqs").checked) {
    toggle_class(block_container, "hide_empty_seqs", false);
    toggle_class(block_container, "hide_only_scan", false);
  } else if ($("rdo_sites_and_scan").checked) {
    toggle_class(block_container, "hide_empty_seqs", true);
    toggle_class(block_container, "hide_only_scan", false);
  } else if ($("rdo_sites_only").checked) {
    toggle_class(block_container, "hide_empty_seqs", true);
    toggle_class(block_container, "hide_only_scan", true);
  }
}

//
// page_loaded
//
// Called when the page has loaded for the first time.
///
function page_loaded() {
  post_load_setup();
}

//
// page_loaded
//
// Called when a cached page is reshown.
///
function page_shown(e) {
  if (e.persisted) post_load_setup();
}

//
// page_loaded
//
// Called when the page is resized
///
function page_resized() {
  var page, blocks_scroll;
  update_scroll_pad();
  page = (document.compatMode === "CSS1Compat") ? document.documentElement : document.body;
  blocks_scroll = $("blocks_scroll");
  if (blocks_scroll) {
    blocks_scroll.style.maxHeight = Math.max(page.clientHeight - 300, 300) + "px";
  }
}

//
// pre_load_setup
//
// Run before the page is displayed
///
function pre_load_setup() {
  var start, hue, sat, light, divisions;
  var i, j, motifs, motif, sites, site, sequences, sequence;
  var max_seq_len;
  motifs = data["motifs"];
  sequences = data["sequence_db"]["sequences"];
  max_seq_len = 1;
  if (sequences) {		// no sequences if -brief
    for (i = 0; i < sequences.length; i++) {
      sequence = sequences[i];
      sequence["sites"] = [];
      if (sequence["length"] > max_seq_len) {
	max_seq_len = sequence["length"];
      }
   }
  }
  data["sequence_db"]["max_length"] = max_seq_len;
  // use hsl colours
  start = 0; //red
  sat = 100;
  light = 50;
  for (i = 0; i < motifs.length; i++) {
    motif = motifs[i];
    // give the motif a colour
    divisions = 1 << Math.ceil(Math.log(i + 1) / Math.LN2);
    hue = start + (360 / divisions) * ((i - (divisions >> 1)) * 2 + 1);
    motif["colour"] = "hsl(" + hue + ", " + sat + "%, " + light + "%)";
    // associate sites with sequences as well 
    // to make generating the block diagram easier
    sites = motif["sites"];
    for (j = 0; j < sites.length; j++) {
      site = sites[j];
      sequence = sequences[site["seq"]];
      // record the motif index
      site["motif"] = i;
      // add the site to the sequence
      sequence["sites"].push(site);
    }
  }
}

//
// post_load_setup
//
// Run when the page has loaded, or been reloaded.
//
function post_load_setup() {
  update_scroll_pad();
  if (data["motifs"].length > 0) {
    make_motifs();
    if (data.sequence_db.primary_count > data.options.brief) {
      if (data.options.brief == 1000) {
        $("blocks").innerHTML = "<p>Output of sites suppressed because there were more than 1000 (primary) sequences.</p>";
      } else {
        $("blocks").innerHTML = "<p>Output of motif locations suppressed by -brief option.</p>";
      }
    } else {
      make_blocks();
    }
  } else {
    $("motifs").innerHTML = "<p>No significant motifs found!</p>"; // clear content
    $("motifs").innerHTML += "<p><b>" + data["stop_reason"] + "</b></p>";
    $("blocks").innerHTML = "<p>No significant motifs found!</p>";
  }
}

pre_load_setup();
</script>
    <script>
//
// template.js
//

/*
 * Fill in a template variable
 */
function set_tvar(template, tvar, value) {
  var node;
  node = find_child(template, tvar);
  if (node === null) {
    throw new Error("Template does not contain variable " + tvar);
  }
  node.innerHTML = "";
  if (typeof value !== "object") {
    node.appendChild(document.createTextNode(value));
  } else {
    node.appendChild(value);
  }
} // set_tvar

/*
 * Get the text contained within the element.
 */
function elem_text(elem, separator) {
  if (separator === undefined) separator = '';
  return text_nodes(elem).map(node_text).join(separator);
}

/*
 * Get the text out of a specific text node.
 */
function node_text(node) {
  if (node === undefined) {
    return '';
  } else if (node.textContent) {
    return node.textContent;
  } else if (node.innerText) {
    return node.innerText;
  } else {
    return '';
  }
}

/*
 * Find all text nodes in the given container.
 */
function text_nodes(container) {
  var textNodes = [];
  var stack = [container];
  // depth first search to maintain ordering when flattened
  while (stack.length > 0) {
    var node = stack.pop();
    if (node.nodeType == Node.TEXT_NODE) {
      textNodes.push(node);
    } else {
      for (var i = node.childNodes.length-1; i >= 0; i--) {
        stack.push(node.childNodes[i]);
      }
    }
  }
  return textNodes;
}

/*
 * Create a button designed to contain a single symbol
 */
function make_sym_btn(symbol, title, action) {
  var box, sbox;
  box = document.createElement("div");
  box.tabIndex = 0;
  box.className = "sym_btn";
  sbox = document.createElement("span");
  if (typeof symbol === "string") {
    sbox.appendChild(document.createTextNode(symbol));
  } else {
    sbox.appendChild(symbol);
  }
  box.appendChild(sbox);
  box.title = title;
  box.addEventListener('click', action, false);
  box.addEventListener('keydown', action, false);
  return box;
}

/*
 * Create a pair of text spans with different classes.
 * This is useful when using CSS to only display one of them.
 */
function text_pair(txt1, cls1, txt2, cls2) {
  var container, part1, part2;
  container = document.createElement("span");
  part1 = document.createElement("span");
  part1.appendChild(document.createTextNode(txt1));
  part1.className = cls1;
  container.appendChild(part1);
  part2 = document.createElement("span");
  part2.appendChild(document.createTextNode(txt2));
  part2.className = cls2;
  container.appendChild(part2);
  return container;
}
</script>
    <script>
//
// citation.js
//
function get_citation_text(doc_type, extra) {
  var html;

  switch (doc_type) {
    case 'AMA':
      return(get_citation_text("GOMo", extra));
    case 'AME':
      return(extra + `
        <span class="citation">
          Robert C. McLeay and Timothy L. Bailey,
          &quot;Motif Enrichment Analysis: a unified framework and an evaluation on ChIP data&quot;,
          <i>BMC Bioinformatics</i>, <b>11</b>:165, 2010.
          <a href="http://www.biomedcentral.com/1471-2105/11/165">[full text]</a>
        </span>
      `);
    case 'CentriMo':
      return(extra + `
        <span class="citation">
          Timothy L. Bailey and Philip Machanick,
          &quot;Inferring direct DNA binding from ChIP-seq&quot;,
          <i>Nucleic Acids Research</i>, <b>40</b>:e128, 2012.
          <a href="http://nar.oxfordjournals.org/content/40/17/e128">[Full Text]</a>
        </span>
      `);
    case 'DREME':
      return(extra + `
        <span class="citation">
          Timothy L. Bailey,
          &quot;DREME: Motif discovery in transcription factor ChIP-seq data&quot;,
          <i>Bioinformatics</i>, <b>27</b>(12):1653-1659, 2011.
          <a href="http://bioinformatics.oxfordjournals.org/content/27/12/1653">[full text]</a>
        </span>
      `);
    case 'FIMO':
      return(extra + `
        <span class="citation">
          Charles E. Grant, Timothy L. Bailey and William Stafford Noble,
          &quot;FIMO: Scanning for occurrences of a given motif&quot;,
          <i>Bioinformatics</i> <b>27</b>(7):1017-1018, 2011.
          <a href="http://bioinformatics.oxfordjournals.org/content/27/7/1017">[full text]</a>
        </span>
      `);
    case 'GLAM2':
    case 'GLAM2SCAN':
      return(extra + `
        <span class="citation">
          Martin C. Frith, Neil F. W. Saunders, Bostjan Kobe and Timothy L. Bailey,
          &quot;Discovering sequence motifs with arbitrary insertions and deletions&quot;,
          <i>PLoS Computational Biology</i>, <b>4</b>(5):e1000071, 2008.
          <a href="https://journals.plos.org/ploscompbiol/article?id=10.1371/journal.pcbi.1000071">[full text]</a>
        </span>
      `);
    case 'GOMo':
      return(extra + `
        <span class="citation">
          Fabian A. Buske, Mikael Bod&eacute;n, Denis C. Bauer and Timothy L. Bailey,
          &quot;Assigning roles to DNA regulatory motifs using comparative genomics&quot;,
          <i>Bioinformatics</i>, <b>26</b>(7), 860-866, 2010.
          <a href="http://bioinformatics.oxfordjournals.org/cgi/content/full/26/7/860">[full text]</a>
        </span>
      `);
    case 'MAST':
      return(extra + `
        <span class="citation">
          Timothy L. Bailey and Michael Gribskov,
          &quot;Combining evidence using p-values: application to sequence homology searches&quot;,
          <i>Bioinformatics</i>, <b>14</b>(1):48-54, 1998.
          <a href="http://bioinformatics.oxfordjournals.org/content/14/1/48">[full text]</a>
        </span>
      `);
    case 'MCAST':
      return(extra + `
        <span class="citation">
          Timothy Bailey and William Stafford Noble,
          &quot;Searching for statistically significant regulatory modules&quot;,
          <i>Bioinformatics (Proceedings of the European Conference on Computational Biology)</i>,
          <b>19</b>(Suppl. 2):ii16-ii25, 2003.
          <a href="http://bioinformatics.oxfordjournals.org/cgi/content/abstract/19/suppl_2/ii16">[full text]</a>
        </span>
      `);
    case 'Meta-MEME':
      return(extra + `
        <span class="citation">
	  William N. Grundy, Timothy L. Bailey, Charles P. Elkan and Michael E. Baker.
	  &quot;Meta-MEME: Motif-based Hidden Markov Models of Protein Families&quot;
	  <i>Computer Applications in the Biological Sciences (CABIOS)</i>,
	  <b>13</b>(4):397-406, 1997.
	  <a href="http://bioinformatics.oxfordjournals.org/content/13/4/397">[full text]</a>
        </span>
      `);
    case 'MEME':
      return(extra + `
        <span class="citation">
          Timothy L. Bailey and Charles Elkan,
          &quot;Fitting a mixture model by expectation maximization to
          discover motifs in biopolymers&quot;,
          <em>Proceedings of the Second International Conference on Intelligent Systems
          for Molecular Biology</em>, pp. 28-36, AAAI Press, Menlo Park, California, 1994.
          <a href="http://www.aaai.org/Papers/ISMB/1994/ISMB94-004.pdf">[full text]</a>
        </span>
      `);
    case 'MEME-ChIP':
      return(extra + `
        <span class="citation">
          Philip Machanick and Timothy L. Bailey,
          &quot;MEME-ChIP: motif analysis of large DNA datasets&quot;,
          <i>Bioinformatics</i> <b>27</b>(12):1696-1697, 2011.
        <a href="http://bioinformatics.oxfordjournals.org/content/27/12/1696.full">[full text]</a>
        </span>
      `);
    case 'MEME_SUITE':
      return(extra + `
        <span class="citation">
          Timothy L. Bailey, James Johnson, Charles E. Grant, William S. Noble,
          &quot;The MEME Suite&quot;,
          <i>Nucleic Acids Research</i>, <b>43</b>(W1):W39-W49, 2015.
          <a href="https://academic.oup.com/nar/article/43/W1/W39/2467905">[full text]</a>
        </span>
      `);
    case 'MoMo':
      return(extra + `
        <span class="citation">
          Alice Cheng, Charles Grant, Timothy L. Bailey and William Noble,
          &quot;MoMo: Discovery of statistically significant post-translational modification motifs&quot;, 
          <i>Bioinformatics</i>, <b>35</b>(16):2774-2782, 2018.
          <a href="https://doi.org/10.1093/bioinformatics/bty1058">[full text]</a>
        </span>
      `);
    case 'PSPs':
      return(extra + `
        <span class="citation">
          Timothy L. Bailey, Mikael Bod&eacute;n, Tom Whitington and Philip Machanick,
          &quot;The value of position-specific priors in motif discovery using MEME&quot;,
          <i>BMC Bioinformatics</i>, <b>11</b>(1):179, 2010.
          <a href="http://www.biomedcentral.com/1471-2105/11/179">[full text]</a>
        </span>
      `);
    case 'SEA':
      return(extra + `
        <span class="citation">
          Timothy L. Bailey and Charles E. Grant, &quot;SEA: Simple Enrichment Analysis of motifs&quot;,
          <i>BioRxiv</i>, August 24, 2021.
          <a href="https://www.biorxiv.org/content/10.1101/2021.08.23.457422v1">[full text]</a>
        </span>
      `);
    case 'SpaMo':
      return(extra + `
        <span class="citation">
          Tom Whitington, Martin C. Frith, James Johnson and Timothy L. Bailey
          &quot;Inferring transcription factor complexes from ChIP-seq data&quot;,
          <i>Nucleic Acids Res.</i> <b>39</b>(15):e98, 2011.
          <a href="http://nar.oxfordjournals.org/content/39/15/e98">[full text]</a>
        </span>
      `);
    case 'STREME':
      return(extra + `
        <span class="citation">
          Timothy L. Bailey,
          &quot;STREME: accurate and versatile sequence motif discovery&quot;,
          <i>Bioinformatics</i>, Mar. 24, 2021.
          <a href="https://academic.oup.com/bioinformatics/advance-article-abstract/doi/10.1093/bioinformatics/btab203/6184861" >[full text]</a>
        </span>
      `);
    case 'Tomtom':
      return(extra + `
        <span class="citation">
          Shobhit Gupta, JA Stamatoyannopolous, Timothy Bailey and William Stafford Noble,
          &quot;Quantifying similarity between motifs&quot;,
          <i>Genome Biology</i>, <b>8</b>(2):R24, 2007.
          <a href="http://genomebiology.com/2007/8/2/R24">[full text]</a>
        </span>
      `);
    case 'T-Gene':
      return(extra + `
        <span class="citation">
          Timothy O'Connor, Charles E. Grant, Mikael Bod&eacute;n, Timothy L. Bailey,
          &quot;T-Gene: Improved target gene prediction&quot;,
            <i>Bioinformatics</i>, <b>36</b>(12):3902-3904, 2020.
          <a href="https://academic.oup.com/bioinformatics/article/36/12/3902/5815978?guestAccessKey=aa625a49-a2aa-4d7a-858e-8bc82867a534">[Full Text]</a>
        </span>
      `);
    case 'XSTREME':
      return(extra + `
        <span class="citation">
          Charles E. Grant and Timothy L. Bailey, &quot;XSTREME: comprehensive motif analysis of biological sequence datasets&quot;,
          <i>BioRxiv</i>, September 3, 2021.
          <a href="https://www.biorxiv.org/content/10.1101/2021.09.02.458722v1">[full text]</a>
        </span>
      `);
    default:
      return("Unknown program: " + doc_type);
  }
} // get_citation_text

//
// Function to replace the innerHTML of element "id" with an HTML paragraph
// containing the text for 'program', which is known to function get_citation_text.
// If "id" is either "citation" or "reference" some extra text is printed.
//
function print_citation(id, program) {
  var extra;
  switch (id) {
    case 'citation':
      extra = "If you use " + program + " in your research, please cite the following paper:<br>";
      break;
    case 'reference':
      extra = "<h5>Reference</h5>";
      break;
    default:
      extra = "";
      break;
  };
  var html = get_citation_text(program, extra);
  document.getElementById(id).insertAdjacentHTML('beforeend', html);
} // print_citation

// 
// Function to convert a citation for a program to a C #define statement.
//
function print_citation_define(lang, pgm) {
  var citation = get_citation_text(pgm, '');
  citation = citation.replace(/<[^>]*>/g, '');
  citation = citation.replace(/\[.*\]/g, '');
  citation = citation.replace(/\n\s*/g, '\\n');
  citation = citation.replace(/&quot;/g, '\\"');
  citation = citation.replace(/&eacute;/g, 'e');
  citation = citation.replace(/^\\n/, '');
  pgm = pgm.replace(/-/, '');
  citation = "If you use this program in your research, please cite:\\n\\n" + citation;
  if (lang == "C") {
    citation = "#define " + pgm + '_CITE "' + citation + '"';
  } else if (lang == "perl") {
    citation = '"' + pgm + '" => "' + citation + '",';
  }
  return(citation);
} // print_citation_define

//
// Main program (for use with nodejs "node" javascript engine)
// to create citation.js.h and citation.pm from citation.js.
// The command line:
//   node citation.js C > citation.js.h
// will output the C #define statements for each of the
// programs listed below, defining macros <program>_CITE.
// The command line:
//   node citation.js perl > citation.js.pm
// will output perl hash <program> => text
//
//
if (typeof process !== 'undefined') {
  var lang = process.argv[2];
  var programs = ['AMA', 'AME', 'CentriMo', 'DREME', 'FIMO', 'GLAM2', 
    'GLAM2SCAN', 'GOMo', 'MAST', 'MCAST', 'Meta-MEME', 'MEME',
    'MEME-ChIP', 'MEME_SUITE', 'MoMo', 'PSPs', 'SEA', 'SpaMo',
    'STREME', 'Tomtom', 'T-Gene', 'XSTREME'];

  if (lang == "C") {
    console.log("// Do not edit this file.  It is created from etc/citation.js.");
    console.log("#ifndef citation_js_h\n#define citation_js_h\n");
    for (var i=0; i<programs.length; i++) {
      console.log(print_citation_define(lang, programs[i]));
    }
    console.log("\n#endif");
  } else if (lang == "perl") {
    console.log("# Do not edit this file.  It is created from etc/citation.js.");
    console.log("package Citation;");
    console.log("sub cite {\n  my ($pgm) = @_;\n  return $citation{$pgm};\n}");
    console.log("%citation = (");
    for (var i=0; i<programs.length; i++) {
      console.log(print_citation_define(lang, programs[i]));
    }
    console.log(");");
  }
}
</script>
    <style>
/* The following is the content of meme.css */
body { background-color:white; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif;}

div.help {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  width: 12px;
  height: 13px;
  cursor: pointer;
  background-image: url(data:image/gif;base64,R0lGODlhDAANAIABANR0AP///yH5BAEAAAEALAAAAAAMAA0AAAIdhI8Xy22MIFgv1DttrrJ7mlGNNo4c+aFg6SQuUAAAOw==);
}

div.help:hover {
  background-image: url(data:image/gif;base64,R0lGODlhDAANAKEAANR0AP///9R0ANR0ACH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEAAAIALAAAAAAMAA0AAAIdDGynCe3PgoxONntvwqz2/z2K2ImjR0KhmSIZUgAAOw==);
}

p.spaced { line-height: 1.8em;}

span.citation { font-family: "Book Antiqua", "Palatino Linotype", serif; color: #004a4d;}

p.pad { padding-left: 30px; padding-top: 5px; padding-bottom: 10px;}

td.jump { font-size: 13px; color: #ffffff; background-color: #00666a;
  font-family: Georgia, "Times New Roman", Times, serif;}

a.jump { margin: 15px 0 0; font-style: normal; font-variant: small-caps;
  font-weight: bolder; font-family: Georgia, "Times New Roman", Times, serif;}

h2.mainh {font-size: 1.5em; font-style: normal; margin: 15px 0 0;
  font-variant: small-caps; font-family: Georgia, "Times New Roman", Times, serif;}

h2.line {border-bottom: 1px solid #CCCCCC; font-size: 1.5em; font-style: normal;
  margin: 15px 0 0; padding-bottom: 3px; font-variant: small-caps;
  font-family: Georgia, "Times New Roman", Times, serif;}

h4 {border-bottom: 1px solid #CCCCCC; font-size: 1.2em; font-style: normal;
  margin: 10px 0 0; padding-bottom: 3px; font-family: Georgia, "Times New Roman", Times, serif;}

h5 {margin: 0px}

a.help { font-size: 9px; font-style: normal; text-transform: uppercase;
  font-family: Georgia, "Times New Roman", Times, serif;}

div.pad { padding-left: 30px; padding-top: 5px; padding-bottom: 10px;}

div.pad1 { margin: 10px 5px;}

div.pad2 { margin: 25px 5px 5px;}
h2.pad2 { padding: 25px 5px 5px;}

div.pad3 { padding: 5px 0px 10px 30px;}

div.box { border: 2px solid #CCCCCC; padding:10px; overflow: hidden;}

div.bar { border-left: 7px solid #00666a; padding:5px; margin-top:25px; }

div.subsection {margin:25px 0px;}

img {border:0px none;}

th.majorth {text-align:left;}
th.minorth {font-weight:normal; text-align:left; width:8em; padding: 3px 0px;}
th.actionth {font-weight:normal; text-align:left;}

.explain h5 {font-size:1em; margin-left: 1em;}

div.doc {margin-left: 2em; margin-bottom: 3em;}

th.trainingset {
  border-bottom: thin dashed black; 
  font-weight:normal; 
  padding:0px 10px;
}
div.pop_content {
  position:absolute;
  z-index:50;
  width:300px;
  padding: 5px;
  background: #E4ECEC;
  font-size: 12px;
  font-family: Arial;
  border-style: double;
  border-width: 3px;
  border-color: #AA2244;
  display:none;
}
div.pop_content_wide {
  position:absolute;
  z-index:1;
  width:700px;
  padding: 5px;
  background: #E4ECEC;
  font-size: 12px;
  font-family: Arial;
  border-style: double;
  border-width: 3px;
  border-color: #AA2244;
  display:none;
}

div.pop_content > *:first-child {
  margin-top: 0px;
}

div.pop_content h1, div.pop_content h2, div.pop_content h3, div.pop_content h4, 
div.pop_content h5, div.pop_content h6, div.pop_content p {
  margin: 0px;
}

div.pop_content p + h1, div.pop_content p + h2, div.pop_content p + h3, 
div.pop_content p + h4, div.pop_content p + h5, div.pop_content p + h6 {
  margin-top: 5px;
}

div.pop_content p + p {
  margin-top: 5px;
}

div.pop_content > *:last-child {
  margin-bottom: 0px;
}

div.pop_content div.pop_close {
  /* old definition */
  float:right;
  bottom: 0;
}

div.pop_content span.pop_close, div.pop_content span.pop_back {
  display: inline-block;
  border: 2px outset #661429;
  background-color: #CCC;
  padding-left: 1px;
  padding-right: 1px;
  padding-top: 0px;
  padding-bottom: 0px;
  cursor: pointer;
  color: #AA2244; /*#661429;*/
  font-weight: bold;
}

div.pop_content span.pop_close:active, div.pop_content span.pop_back:active {
  border-style: inset;
}

div.pop_content span.pop_close {
  float:right;
  /*border: 2px outset #AA002B;*/
  /*color: #AA2244;*/
}

div.pop_content:not(.nested) .nested_only {
  display: none;
}

div.pop_back_sec {
  margin-bottom: 5px;
}

div.pop_close_sec {
  margin-top: 5px;
}

table.hide_advanced tr.advanced {
  display: none;
}
span.show_more {
  display: none;
}
table.hide_advanced span.show_more {
  display: inline;
}
table.hide_advanced span.show_less {
  display: none;
}


/*****************************************************************************
 * Program logo styling
 ****************************************************************************/
div.prog_logo {
  border-bottom: 0.25em solid #0f5f60;
  height: 4.5em;
  width: 25em;
  display:inline-block;
}
div.prog_logo img {
  float:left;
  width: 4em;
  border-style: none;
  margin-right: 0.2em;
}
div.prog_logo h1, div.prog_logo h1:hover, div.prog_logo h1:active, div.prog_logo h1:visited {
  margin:0;
  padding:0;
  font-family: Arial, Helvetica,  sans-serif;
  font-size: 3.2em;
  line-height: 1em;
  vertical-align: top;
  display: block;
  color: #026666;
  letter-spacing: -0.06em;
  text-shadow: 0.04em 0.06em 0.05em #666;
}
div.prog_logo h2, div.prog_logo h2:hover, div.prog_logo h2:active, div.prog_logo h2:visited {
  display: block;
  margin:0;
  padding:0;
  font-family: Helvetica, sans-serif;
  font-size: 0.9em;
  line-height: 1em;
  letter-spacing: -0.06em;
  color: black;
}
div.prog_logo h3, div.prog_logo h3:hover, div.prog_logo h3:active, div.prog_logo h3:visited {
  display: block;
  margin:0;
  padding:0;
  font-family: Helvetica, sans-serif;
  font-size: 0.9em;
  line-height: 1.5em;
  letter-spacing: -0.06em;
  color: black;
}

div.big.prog_logo {
  font-size: 18px;
}

/* These are for centered columns in tables */
td.ctr {
  text-align: center;
}

/* These are for the navigation bars at the top of outputs. */
table.navigation {
  margin-top: 0px;
  border-collapse:collapse;
}
table.navigation * td
{
  padding-left: 0px;
  padding-right: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
}
</style>
    <style>
.block_td {
  height:25px;
}
.block_container {
  position:relative;
  box-sizing: border-box;
  height: 25px;
  padding: 0px;
  margin: 0px;
  margin-left: 1em;
}
.block_label {
  position: absolute; 
  display: inline-block;
  padding: 3px;
  z-index: 4;
  top: 6px;
  height: 12px;
  line-height: 12px;
  font-size: 12px;
  background-color: white;
  border: 1px solid black;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  transform: translateX(-50%);
}
.block_motif {
  position: absolute; 
  z-index: 3;
  top: 0px;
  box-sizing: border-box;
  border: 1px solid black;
  height: 12px;
  background-color: cyan;
}
.block_motif.top {
  border-bottom-width: 0;
}
.block_motif.bottom {
  border-top-width: 0;
}
.block_motif.scanned_site {
  opacity: 0.3;
}
.block_motif.scanned_site.active {
  opacity: 0.9;
}
.block_region {
  position:absolute; 
  z-index:6; 
  height:25px; 
  top:0px; 
}
.block_region.main {
  z-index:8;
}
.block_region.scanned_site {
  z-index:5;
}
.block_region.scanned_site.main {
  z-index:7;
}
.block_region.top {
  height:13px;
}
.block_region.bottom {
  height:13px;
  top:12px;
}
.block_rule {
  position:absolute;
  z-index:2;
  width:100%;
  height:1px;
  top:12px;
  left:0px;
  background-color:gray;
}
.block_plus_sym {
  position:absolute;
  z-index:4;
  line-height:12px;
  top:0px;
  left:-1em;
}
.block_minus_sym {
  position:absolute;
  z-index:4;
  line-height:12px;
  top:13px;
  left:-1em;
}

.tic_major {
  position:absolute;
  top:0em;
  height:0.5em;
  width: 2px;
  margin-left: -1px;
  background-color: blue;
}
.tic_minor {
  position:absolute;
  top:0em;
  height:0.2em;
  width: 1px;
  margin-left: -0.5px;
  background-color: blue;
}
.tic_label {
  position:absolute;
  display: inline-block;
  top:0.5em;
  height: 1em;
  color: blue;
  transform: translateX(-50%);
}

.block_needle {
  position:absolute;
  z-index:4;
  height:30px; 
  width:1px; 
  top:-2px; 
  background-color:gray;
}
.block_needle.right {
  height: 60px;
}
.block_handle {
  position: absolute; 
  display: inline-block;
  z-index: 5; 
  top: 27px; 
  min-width: 3ex;
  text-align: center;
  font-size: 12px;
  line-height: 12px;
  transform: translateX(-50%);
  background-color: LightGrey; 
  border:3px outset grey;
  cursor: pointer;
  -webkit-user-select: none; /* Chrome/Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  /* Rules below not implemented in browsers yet */
  -o-user-select: none;
  user-select: none;
}
.block_handle.right {
  top: 47px;
}

.legend_container {
  text-align: right;
}
.legend_entry {
  display: inline-block;
  padding: 5px;
}
div.legend_swatch {
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  border: 1px solid black;
  background-color: cyan;
  float: left;
}
div.legend_swatch input {
  display: none;
}
.legend_text {
  line-height: 15px;
  margin-left: 20px;
}
</style>
    <style>
/* meme output specific css */

div.pop_block {
  position:absolute;
  z-index:5;
  padding: 5px;
  border: 1px solid black;
  display: inline-block;
  background-color: white;
}

#measure_match {
  position: absolute;
  visibility: hidden;
  height: auto;
  width: auto;
  white-space: nowrap;
}

div.template {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  visibility: hidden;
}

table.block_information {
  margin-left: auto;
  margin-right: auto;
}

table.block_information * th {
  text-align: right;
}

*.hide_empty_seqs * tr.empty_seq {
  display: none;
}

*.hide_only_scan * tr.only_scan {
  display: none;
}

*.hide_only_scan * div.scanned_site {
  display: none;
}

td.symaction {
  text-align: center;
  text-decoration: underline;
  font-size: 20px;
  cursor: pointer;
}
div.sym_btn {
  display:inline-block;
  text-decoration: underline;
  cursor: pointer;
  font-size: 20px;
  line-height:20px; 
  text-align: center;
  width: 20px;
  height: 20px;
  color: blue;
}
div.sym_btn:hover {
  color: white;
  background-color: blue;
}

div.sym_btn.positioned {
  position: absolute;
  top: 0px;
}

div.actionbutton { 
  display:inline-block;
  cursor: pointer;
  font-size: 18px;
  line-height:20px; 
  padding: 5px; 
  margin: 10px 0; 
  border: 1px solid black;
}

div.actionbutton:hover {
  color:#FFF;
  background-color:#000;
}

div.param_box {
  display: inline-block;
  margin-right: 20px;
}

span.param {
  font-weight: bold;
}

div.box + div.box {
  margin-top: 5px;
}

div.sites_outer {
  position: relative;
  padding-top: 20px; /* height of header */
  display: inline-block;
}

div.sites_inner {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 200px;
}
table.sites_tbl {
  border-collapse: collapse;
}

div.sites_th_inner {
  position: absolute;
  top: 0;
  line-height: 20px; /* height of header */
  text-align: left;
  padding-left: 5px;
}
th.nopad div.sites_th_inner {
  padding-left: 0;
}
div.sites_th_hidden {
  visibility: hidden;
  height: 0;
  padding: 0 10px;
}
th.nopad div.sites_th_hidden {
  padding: 0;
}
div.sites_inner * th {
  height: 0;
}

table.sites_tbl {
  overflow-x: hidden;
  overflow-y: auto;
}

.site_num {
  text-align: right;
}
.site_name {
  padding:0px 5px; 
  text-align:left;
}
.site_strand {
  padding:0px 5px; 
  text-align:center;
}
.norc .site_strand, .norc .site_strand_title {
  display: none;
}
.site_start {
  padding:0px 15px; 
  text-align: right;
}
.site_pvalue {
  text-align:center; 
  padding:0px 15px; 
  text-align:right;
  white-space: nowrap;
}
.lflank, .rflank, .match, .alpha_symbol {
  font-weight:bold; 
  font-size:15px; 
  font-family: 'Courier New', Courier, monospace;
  color:gray; 
}

.site.lflank {
  text-align:right; 
  padding-right:5px; 
  color:gray;
}
.site.match {
  text-align:center; 
}
.site.rflank {
  text-align:left; 
  padding-left:5px; 
  padding-right: 20px;
}

th.stop_reason {
  text-align: left;
  padding-right: 10px;
}

th.motif_ordinal {

}
td.motif_ordinal {
  text-align: right;
  padding-right: 10px;
}
th.motif_logo {
  padding-right: 10px;
}
td.motif_logo {
  padding-right: 10px;
}
th.motif_evalue {
  text-align:right;
  padding-right: 10px;
}
td.motif_evalue {
  text-align: right;
  white-space: nowrap;
  padding-right: 20px;
}
th.motif_nsites {
  text-align: right;
  padding-right: 10px;
}
td.motif_nsites {
  text-align: right;
  padding-right: 20px;
}
th.motif_width {
  text-align: right;
  padding-right: 5px;
}
td.motif_width {
  text-align: right;
  padding-right: 15px;
}
th.motif_more {
  padding: 0 5px;
}
td.motif_more {
  text-align: center;
  padding: 0 5px;
}
th.motif_submit {
  padding: 0 5px;
}
td.motif_submit {
  text-align: center;
  padding: 0 5px;
}
th.motif_download {
  padding-left: 5px;
}
td.motif_download {
  text-align: center;
  padding-left: 5px;
}


div.tabArea {
  font-size: 80%;
  font-weight: bold;
}

.norc div.tabArea {
  display: none;
}

span.tab, span.tab:visited {
  cursor: pointer;
  color: #888;
  background-color: #ddd;
  border: 2px solid #ccc;
  padding: 2px 1em;
  text-decoration: none;
}
span.tab.middle {
  border-left-width: 0px;
}
div.tabArea.base span.tab {
  border-top-width: 0px;
}
div.tabArea.top span.tab {
  border-bottom-width: 0px;
}

span.tab:hover {
  background-color: #bbb;
  border-color: #bbb;
  color: #666;
}
span.tab.activeTab, span.tab.activeTab:hover, span.tab.activeTab:visited {
  background-color: white;
  color: black;
  cursor: default;
}
div.tabMain {
  border: 2px solid #ccc;
  background-color: white;
  padding: 10px;
}
div.tabMain.base {
  margin-top: 5px;
  display: inline-block;
  max-width: 98%;
}

div.tabMain.top {
  margin-bottom: 5px;
}

div.tabCenter {
  max-width: 100%;
  overflow-x: auto;
  height: 200px;
  overflow-y: hidden;
}

canvas.logo_rc {
  display:none;
}
.show_rc_logo > canvas {
  display: none;
}
.show_rc_logo > canvas.logo_rc {
  display: block;
}

canvas.scan_logo {
  margin-left: 10px;
}

div.blocks_outer {
  position: relative;
  padding-top: 20px; /* height of header */
}

div.blocks_inner {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 200px;
}
table.blocks_tbl {
  border-collapse: collapse;
  width: 100%;
}

table.blocks_tbl .blockdiag_name {
  white-space: nowrap
}

div.blocks_th_inner {
  position: absolute;
  top: 0;
  line-height: 20px; /* height of header */
  text-align: left;
  padding-left: 5px;
}
th.nopad div.blocks_th_inner {
  padding-left: 0;
}
div.blocks_th_hidden {
  visibility: hidden;
  height: 0;
  padding: 0 10px;
}
th.nopad div.blocks_th_hidden {
  padding: 0;
}
div.blocks_inner * th {
  height: 0;
}

table.blocks_tbl {
  overflow-x: hidden;
  overflow-y: auto;
}
td.block_td {
  width: 99%;
}

*.blockdiag_num {
  text-align: right;
}

td.blockdiag_name {
  text-align: left;
  padding:0px 10px; 
}

td.blockdiag_pvalue {
  padding:0px 10px; 
  text-align:right;
  white-space: nowrap;
}

div.preview_btn {
  border: 2px solid white;
  height: 16px;
  width: 16px;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
}
div.preview_btn + div.preview_btn {
  margin-top: 3px;
}

div.preview_btn.active {
  border: 2px solid black;
  cursor: default;
}

div.preview_btn:hover {
  background-color: black;
  color: white;
  border-color: black;
}

div.preview_btn.active:hover {
  background-color: white;
  color: black;
  border-color: black;
}


div.preview_btn_box {
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 3px;
}

div.preview_logo_box {
  height: 50px;
  overflow-y: hidden;
}

div.preview_btn_box + div.preview_logo_box {
  margin-left: 25px;
}

div.preview_box {
  position: relative;
}

div.grey_background {
  position:fixed; 
  z-index: 8;
  background-color: #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: 0.5;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

div.popup_wrapper {
  position:fixed; 
  z-index:9;
  width:100%; 
  height:0; 
  top:50%; 
  left:0;
}

div.popup {
  width: 600px; 
  z-index:9;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  background-color: #FFF;
  border-style: double;
  border-width: 5px;
  border-color: #00666a;
  position:relative; 
}
div.close {
  cursor: pointer;
  border: 1px solid black; 
  width:15px; 
  height:15px; 
  line-height:15px; /* this causes vertical centering */
  text-align:center; 
  background-color:#FFF; 
  color:#000; 
  font-size:15px;
  font-family:monospace;
}

div.close:hover {
  color:#FFF;
  background-color:#000; 
}

div.navnum {
  width:100%; 
  height:20px; 
  line-height:20px; 
  text-align:center; 
  font-size:medium;
}

div.navarrow {
  font-size: 30px;
  text-decoration:none;
  cursor: pointer;
  -moz-user-select: none;  
  -webkit-user-select: none;  
  -ms-user-select: none;
}

div.navarrow > span.inactive {
  display: inline;
}
div.navarrow > span.active {
  display: none;
}

div.navarrow:hover > span.active {
  display: inline;
}
div.navarrow:hover > span.inactive {
  display: none;
}

table.programs {
  width: 100%;
}

table.programs tr {
  background-color: #EFE;
}

table.programs tr.selected {
  background-color: #262;
  color: #FFF;
}

table.programs tr.dna_only {
  display: none;
}

table.programs.alphabet_dna tr.dna_only {
  display: table-row;
}

div.programs_scroll {
  width: 100%; 
  height: 90px; 
  overflow-y: auto; 
  overflow-x: hidden;
  margin: 0 auto; 
}
table.inputs, table.alpha_bg_table {
  margin-top: 20px;
  border-collapse:collapse;
}
table.inputs * td, table.inputs * th, table.alpha_bg_table * td, table.alpha_bg_table * th {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 1px;
  padding-bottom: 1px;
}

table.hide_psp td.col_psp, table.hide_psp th.col_psp {
  display: none;
}

table.hide_control td.col_control, table.hide_control th.col_control {
  display: none;
}

/* program settings */
span.mod_oops, span.mod_zoops, span.mod_anr {
  display: none;
}
td.oops span.mod_oops,td.zoops span.mod_zoops, td.anr span.mod_anr  {
  display: inline;
}
span.strand_none, span.strand_given, span.strand_both {
  display: none;
}
td.none span.strand_none, td.given span.strand_given, td.both span.strand_both {
  display: inline;
}
span.spmap_uni, span.spmap_pam {
  display: none;
}
td.uni span.spmap_uni, td.pam span.spmap_pam {
  display: inline;
}
span.prior_dirichlet, span.prior_dmix, span.prior_mega, span.prior_megap, span.prior_addone {
  display: none;
}
td.dirichlet span.prior_dirichlet, td.dmix span.prior_dmix, td.mega span.prior_mega,
td.megap span.prior_megap, td.addone span.prior_addone {
  display: inline;
}
span.noendgaps_on, span.noendgaps_off {
  display: none;
}
td.on span.noendgaps_on, td.off span.noendgaps_off {
  display: inline;
}
span.substring_on, span.substring_off {
  display: none;
}
td.on span.substring_on, td.off span.substring_off {
  display: inline;
}
</style>
  </head>
  <body onload="page_loaded()" onpageshow="page_shown(event)" onresize="page_resized()">
    <!--  -->
    <div id="grey_out_page" class="grey_background" style="display:none;">
    </div>
    <!-- Help popups -->
    <div class="pop_content" id="pop_results_txt">
      <p>MEME results in plain text format.</p>
      <div style="float:right; bottom:0px;">[
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_results_xml">
      <p>MEME results in XML format.</p>
      <div style="float:right; bottom:0px;">[
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_">
      <p>Help poup.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_logo">
      <script>print_doc_para("pop_logo", "discovery", "motif_logo", site_url);</script>
      Click on the "+" or "-" buttons to the left of the motif to see
      the forward or reverse complement of the motif if available.
      <div class="pop_close">[<a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_ev">
      <p>The statistical significance of the motif. MEME usually finds the most
      statistically significant (low E-value) motifs first. It is unusual to
      consider a motif with an E-value larger than 0.05 significant so, as an
      additional indicator, MEME displays these greyed out.</p> 
      <p>The E-value of a motif is based on its log likelihood ratio, width,
      sites, the background letter frequencies (given in the command line
      summary), and the size of the training set.</p>
      <p>The E-value is an estimate of the expected number of motifs with the
      given log likelihood ratio (or higher), and with the same width and site
      count, that one would find in a similarly sized set of random
      sequences (sequences where each position is independent and letters are
      chosen according to the background letter frequencies).</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_sites">
      <p>The number of sites contributing to the construction of the motif.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_width">
      <p>The width of the motif. Each motif describes a pattern of a fixed
      width, as no gaps are allowed in MEME motifs.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_more">
      <script>print_doc_para("pop_more", "discovery", "more");</script>
      <div class="pop_close">[<a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_submit_dl">
      <script>print_doc_para("pop_submit_dl", "discovery", "submit_dl", "https://meme-suite.org/meme");</script>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_llr">
      <p>The log likelihood ratio of the motif. The log likelihood ratio is the 
      logarithm of the ratio of the probability of the occurrences of the motif
      given the motif model (likelihood given the motif) versus their
      probability given the background model (likelihood given the null model).
      (Normally the background model is a 0-order Markov model using the
      background letter frequencies, but higher order Markov models may be
      specified via the -bfile option to MEME.).</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_ic">
      <p>The information content of the motif in bits. It is equal to the sum
      of the uncorrected information content, R(), in the columns of the motif.
      This is equal relative entropy of the motif relative to a uniform
      background frequency model.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_re">
      <p>The relative entropy of the motif.</p>

      <p style="font-family: monospace;">re = llr / (sites * ln(2))</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_bt">
      <p>The Bayes Threshold.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_site_strand">
      <p>The strand used for the motif site.</p>
      <dl>
        <dt>+</dt>
        <dd>The motif site was found in the sequence as it was supplied.</dd>
        <dt>-</dt>
        <dd>The motif site was found in the reverse complement of the supplied sequence.</dd>
      </dl>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_site_start">
      <p>The position in the sequence where the motif site starts. If a motif
      started right at the beginning of a sequence it would be described as
      starting at position 1.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_site_pvalue">
      <p>The probability that an equal or better site would be found in a
      random sequence of the same length conforming to the background letter
      frequencies.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_site_match">
      <p>A motif site with the 10 flanking letters on either side.</p> 
      <p>When the site is not on the given strand then the site
      and both flanks are reverse complemented so they align.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>

    <div class="pop_content" id="pop_seq_name">
      <p>The name of the sequences as given in the FASTA file.</p>
      <p>The number to the left of the sequence name is the position
      of the sequence in the input sequence file.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>

    <div class="pop_content" id="pop_motif_sites">
      <p>These are the motif sites predicted by MEME and used to build the motif.</p>
      <p>These sites are shown in solid color and hovering the cursor
      over a site will reveal details about the site.  Only sequences
      that contain a motif site are shown.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>

    <div class="pop_content" id="pop_scanned_sites">
      <p>These are the motif sites predicted by MEME plus
      any additional sites detected using a motif scanning
      algorithm.</p>
      <p>These MEME sites are shown in solid color and 
      additional scanned sites are shown greyed out.
      Hovering the cursor over a site will reveal details about the site.
      Only sequences containing a predicted or scanned motif site are shown.</p>
      <p>The scanned sites are predicted using a
      log-odds scoring matrix constructed from the MEME sites.
      Only scanned sites with position <i>p</i>-values less
      than 0.0001 are shown.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>

    <div class="pop_content" id="pop_all_sequences">
      <p>These are the same sites as shown by selecting the
      "Motif Sites + Scanned Sites" button except that all
      sequences, including those with no sites, are included
      in the diagram.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>

    <div class="pop_content" id="pop_seq_pvalue">
      <p>This is the combined match <i>p</i>-value.</p>
      <p>The combined match <i>p</i>-value is defined as the probability that a
      random sequence (with the same length and conforming to the background) 
      would have position <i>p</i>-values such that the product is smaller
      or equal to the value calculated for the sequence under test.</p>
      <p>The position <i>p</i>-value is defined as the probability that a
      random sequence (with the same length and conforming to the background)
      would have a match to the motif under test with a score greater or equal
      to the largest found in the sequence under test.</p>
      <p>Hovering your mouse over a motif site in the motif location 
      block diagram will show its position <i>p</i>-value and other information
      about the site.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>

    <div class="pop_content" id="pop_download_pdf_motif_locations">
      <p>Use this button to download the "Motif Locations" block diagrams
	as a PDF image suitable for publication.
      </p>
      <p>
	Only the block diagrams currently visible in the inner scrolling 
	window (below) will be included in the image, and the numbers to
	the left of each sequence name will not be included in the image.
	You can change the size of the inner scrolling by moving the bottom
	of the main document window up and down.  You can display more
	diagrams by making your browser's font size smaller.
      </p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>

    <div class="pop_content" id="pop_download_svg_motif_locations">
      <p>Use this button to download the "Motif Locations" block diagrams
	as a SVG image use in HTML documents.
      </p>
      <p>
	Only the block diagrams currently visible in the inner scrolling 
	window (below) will be included in the image, and the numbers to
	the left of each sequence name will not be included in the image.
	You can change the size of the inner scrolling by moving the bottom
	of the main document window up and down.  You can display more
	diagrams by making your browser's font size smaller.
      </p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>

    <div class="pop_content" id="pop_offline">
      <p>
        This button will only function if your browser was
	connected to the internet when you loaded this page.
      </p>
      <p>
	To use this button, make sure your browser is connected to the internet
	and then reload this page.  (You may need to do a "hard refresh" to clear the cache.
	On Mac, hold down the Shift key and click the Reload button.
	On Windows/Linux, hold down Ctrl and press F5.)
      </p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>

    <div class="pop_content" id="pop_motif_location">
      <p>This diagram shows the location of motif sites.</p>
      <p>Each block shows the position and strength of a motif
      site.  The height of a block gives an indication of the 
      significance of the site as taller blocks are more significant. 
      The height is calculated to be proportional to the negative 
      logarithm of the <i>p</i>-value of the site, truncated at 
      the height for a <i>p</i>-value of 1e-10.</p>
      <p>For complementable alphabets (like DNA), sites on the 
      positive strand are shown above the line,
      sites on the negative strand are shown below.</p>
      <p>Placing the cursor
      over a motif site will reveal more information about the site
      including its position <i>p</i>-value.  (See the help
      for the <i>p</i>-value column for an explanation of position 
      <i>p</i>-values.)</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>

    <div class="pop_content" id="pop_seq_source">
      <p>The name of the file(s) of sequences input to MEME.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_psp_source">
      <p>The position specific priors file used by MEME to find the motifs.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_seq_alph">
      <p>The alphabet used by the sequences.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_seq_count">
      <p>The number of FASTA sequences provided in this input file.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_num_positions">
      <p>The number of characters in the sequences provided in this FASTA input file.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>

    <div class="pop_content" id="pop_alph_name">
      <p>The name of the alphabet symbol.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_alph_freq">
      <p>The frequency of the alphabet symbol in the dataset.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>
    <div class="pop_content" id="pop_alph_bg">
      <p>The frequency of the alphabet symbol as defined by the background model.</p>
      <div style="float:right; bottom:0px;">[ 
        <a href="javascript:help_popup()">close</a> ]</div>
    </div>

    <!-- templates -->
    <div id="measure_match" class="match"></div>
    <div class="template pop_block" id="tmpl_block_info">
      <div>
        <span class="tvar_logo_pad lflank" style="visibility:hidden;"></span>
        <span class="tvar_logo"></span>
      </div>
      <div class="block_sequence_fragment">
        <span class="tvar_lflank lflank"></span>
        <span class="tvar_match match"></span>
        <span class="tvar_rflank rflank"></span>
      </div>
      <table class="block_information">
        <tr><th>Motif</th><td class="tvar_motif">1</td></tr>
        <tr><th><i>p</i>-value</th><td class="tvar_pvalue">8.23e-7</td></tr>
        <tr><th>Start</th><td class="tvar_start">23</td></tr>
        <tr><th>End</th><td class="tvar_end">33</td></tr>
      </table>
    </div>

    <div class="template pop_block" id="tmpl_scan_info">
      <h5>Scanned Site</h5>
      <div class="tvar_logo"></div>
      <table class="block_information">
        <tr><th>Motif</th><td class="tvar_motif">1</td></tr>
        <tr><th><i>p</i>-value</th><td class="tvar_pvalue">8.23e-7</td></tr>
        <tr><th>Start</th><td class="tvar_start">23</td></tr>
        <tr><th>End</th><td class="tvar_end">33</td></tr>
      </table>
    </div>

    <div class="template box expanded_motif" id="tmpl_motif_expanded">
      <div style="position: relative; min-height: 20px">
        <div class="param_box">
          <span class="param"><span class="tvar_ordinal"></span>.</span>
        </div>
        <div class="sym_btn positioned tvar_less" tabindex="0" 
          title="Show less information.">&#8613;</div>
        <div class="sym_btn positioned tvar_submit" tabindex="0"
          title="Submit the motif to another MEME Suite program or download it.">&#8674;</div>
      </div>
      <div>
        <div class="param_box">
          <span class="param"><i>E</i>-value:</span>
          <span class="tvar_evalue"></span>
          <div class="help" data-topic="pop_ev"></div>
        </div>
        <div class="param_box">
          <span class="param">Site Count:</span>
          <span class="tvar_site_count"></span>
          <div class="help" data-topic="pop_sites"></div>
        </div>
        <div class="param_box">
          <span class="param">Width:</span>
          <span class="tvar_width"></span>
          <div class="help" data-topic="pop_width"></div>
        </div>
      </div>
      <div class="tabMain base">
        <div class="tabCenter tvar_logo"></div>
      </div>
      <div class="tabArea base">
        <span class="tvar_tab tab" tabindex="0">Standard</span><span 
          class="tvar_tab_rc tab middle" tabindex="0">Reverse 
          Complement</span>
      </div>
      <div style="padding: 10px 0">
        <div class="param_box">
          <span class="param">Log Likelihood Ratio:</span>
          <span class="tvar_llr"></span>
          <div class="help" data-topic="pop_llr"></div>
        </div>
        <div class="param_box">
          <span class="param">Information Content:</span>
          <span class="tvar_ic"></span>
          <div class="help" data-topic="pop_ic"></div>
        </div>
        <div class="param_box">
          <span class="param">Relative Entropy:</span>
          <span class="tvar_re"></span>
          <div class="help" data-topic="pop_re"></div>
        </div>
        <div class="param_box">
          <span class="param">Bayes Threshold:</span>
          <span class="tvar_bt"></span>
          <div class="help" data-topic="pop_bt"></div>
        </div>
      </div>
      <div class="tvar_sites"></div>
    </div>

    <div id="tab_submit_or_download_motif"></div>
    <script> make_submit_or_download_motif_form("tab_submit_or_download_motif", site_url, "MEME"); </script>

    <!-- Page starts here -->
    <div id="top" class="pad1">
      <div class="prog_logo big">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAABGCAYAAACUsCfoAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9wLHAInL7an9JAAAA8eSURBVHja7ZpZbxv3ucZ/s3AZ7qQkypZELZS3WHKiRJbTFnHqOjZcGzCQBf0A7cUB8glOb89dz30vChRp7xK0aZo4TYq6dtKqSew6iuJWpmPJlrVFFCmKI+7LLJw5F81MFZyec5rTILJaP8AAnAty+Pzf933ebeAhHuIhHuIhHmJPo6TpaeGLfimTydhLS0sUCgWazSbVahXDMOh0Ong8HiKRCAMDAxw+fJhHH31UeFDJ/91/bHp62r558ya6rmOaJuvr6+TzeYrFIoZhAOD1epFlmWAwSDqdZnR0lCNHjjA+Ps7+/fuFPUU8k8nYV69epVKpEA6HuXPnDrOzs7RaLbxeL93d3fj9foLBIB6Ph0ajQaVSAUBRFNLpNI888ggHDhzg3Llzwp4g/vbbb9szMzPE43FyuRwffPAB2WyWnp4ehoaGiMVi2LZNvV6n3W7j8/mIRqN4vV4ajQa1Wo2trS0OHTqEaZo89dRTfO973xMeaOKvvfaaffv2bcLhMCsrK/z+979HVVWOHz/O0NAQxWIRVVVRVRW/348oihiGgSiKxGIxurq6CAQCBINB3n//fcbGxiiXyxw7dowXX3yx1Nvbm3igiBcKhY9u3rw5OTMzQzgc5vbt23zwwQfIsszExAS2bZPP55EkiVAoRCQSIRwOI8sy5XKZ7e1tWq0WnU6HTqfD4OAggUAAVVXpdDo0m01GRkb44Q9/KDxQxH/729/as7Oz+Hw+Pv30U37zm9/g9Xrp6emht7eXYDCI3+/H6/UiCALtdhvLsuh0OkiSRCAQQJZl6vU65XKZ1dVV+vv7SSQS5PN5vF4vhUKBgwcP8qMf/WjXyIs7b+7cuWMvLi4iCAL1ep133nkHXdcZHh4mlUoRDofp7+8nHo9jGAaCIBCPx+nr6yOdTtPX14fH40HTNGRZpqenh76+PrLZLMVikYGBARRFwTRN5ubm+PGPf2zvFnF5583c3BzlchlZlrl16xa1Wo2xsTGi0SiDg4OutUzTJBKJIIoiXq+XQCBAIpEgFAphmiaqqlIoFKjVaoyOjhKJRFhfXycajRKNRunp6WFhYYG33nqLQqHwUTKZPP5VE5ecD5cvX7bv37+Poijkcjl++ctfMjo6ytDQEMlkEo/HQ7lcpt1u4/F4kGUZQRDw+Xz09fVx4MABRkZGSKVSdHV10el0KJVK1Ot14vE4kiRRKpVQFIV4PI5t23z66ad0Op2+K1eu/MeuWVxVVUzTRNd17t27RzKZJJFIEI1GEUWRdruNaZqIoogkSYiiiCiK+P1+AoEA0WiUQ4cOCQCbm5vb5XI5Xi6XWVtbw7ZtZFnG7/e7D1YUhWAwSLVaJZvN2v39/cJXHuOLi4t2sVhEEAS2t7eZn59n//79JBIJwuEwlmXRbDbRdR1BEBAEAcuysCwL2/5LmIriX+Wit7c3EY/HSSQSeDweDMPA4/EQCoWwbRvbtgmFQoTDYUqlErlcbnfE7f79+64gbWxs0G63icViRCIRBEHANE0Mw0CSJLxer0vSUfVKpUKxWGRtbc12UmKr1cI0TQD3t4PBoHtwgUAAv99Ps9kkn8/vjrjlcjlkWabdbrO8vEx3dzfhcJhoNEq9XkfTNERRxOfz4fV6sW0bSZJcBS+VSqytrdFqtbh+/bq9sLBALpdje3sbXddd4jutLwh/8WzLslBVdXeI12o1RFFkc3PTLTFjsRixWAxVVbEsC1mWkSTJdVXnMgyDarWKrusUi0X8fj+WZVGtVimXyxiGgW3bblh4PB78fj/tdhvbthFF0a3tv3Liuq4jiiKFQgFZlolEInR3d6MoConEXytLp1Bx0Ol0sG0bXdfRdZ1arYYgCNi2jaZptFot1zOcQ3LSnxMGzsHvCnHH/RqNBtFoFEmSCIfDAAwNDWFZFu12m0ajgaZpWJbl/oDH4/ncoTii5xBz1N+2bTqdDrIs4/P53MxgWRaapu2exQOBgHsAnU6HdrvN5uYmgUCASCRCJBIhkUhgmibNZpNarUaj0XAt71jfET1RFN1YliTJfUa73SaZTLK1tUWtVkPTNKampnaHuFNGyrKM1+t141bTNGq1GrVazS1EIpEI8XjcLWJqtdrnYthNF58pv23beL1eJEly1VzXder1Oq1Wi2AwiK7ru0PcSSs73bBYLBIMBpEkCdM0qVQq6LpOq9UiHA673Vmn08E0TfdyRM85CNM08Xq9bkoMhULugRqGgd/v3z1Xl2X5c24aDodRVZV4PO7W406/raoqtVqNYDCIz+dDURQ3vp3LuXeEz4nlTqdDOBxG13U3TBRF2b0mJRAI0Gg0EAQBTdPw+/2Uy2VXoJzRkkPEifNWq0UgEHCLEsedLcty1X1nzIdCIRRFoVQqUSqVsCyLYDBIPB7fncotlUq5JaWu6xiGgWmabG1tuanINE0EQXAPwSlk6vU6zWaTdruNpmnud3eWsk6fnkwmMU2Tzc1NVFVFURSi0SjpdHp3iB89ehRRFOnt7XWHCNFolFwu58ar08AYhuEWNH6/H4/H8zlL71R4J5XJskwgECAWi5HP51lZWaHVajE8PEw8Hufw4cO7Q3zfvn0C4E5MNU2jq6uLarVKPp//nPA5hYgzcYlEIoRCIfcQHLd3SDvEPR4PHo+HfD5PPp9HEARGRkYIhUIMDQ0Ju0Ic4NixY3g8Hnp7e8lms8RiMcLhMNlsFk3TXHW3bZtgMOjmfScEvF6vW8s7qczxgGazSSAQ4M9//jOqqlKpVHj88cfx+XyMjY3t7ujp1KlTQrlcdicupVKJkZER1tbWuHfvHqqqEolEiMVitNtt6vW6q+iNRoNms4kkSfh8PtfC0WgURVHo7+9nc3OTjY0N3n33XQYGBkilUiSTSU6ePCnsKnGA559/nkqlwtGjR8nn8/j9fh5//HEsy+LWrVvMz8+j6zqhUAifz4dhGG7z0mq1UFUVXdeJRCIEg0F32loqlbh37x53796lq6sLRVGIRCJMTEzs2pT1c8Qfe+wxYWpqyv1j2WyWVCpFIpGgUqkwNzfHnTt33JTnDCUlSaK7u5v+/n66u7vxeDxun16r1SgUCly/fp3bt29z+vRpBgcHqdVqRKPRB2uh8LOf/cyemZlhYWGBYDBIJBIBoFgs0mw2CYfDxONxfD4fg4ODros7vXWhUKDT6bg5/v3332dlZYWhoSHS6TSnTp1i3759VKtVzpw5w1c9dvpfNymvvPKKff36dbLZLIqiuBVWs9mk0WhgWZbbn4fDYURRRNM0AoEAvb29+Hw+Go0Gly9fZmNjg4mJCcbGxti/f787mJyfn6darTI5OcmJEyeEB4J4sVj8wfT09L/Pzs6SzWbdpWEikXBJGoZBs9kkGo0iyzKmabrLhtXVVTKZDJubm5w9e5YjR44wMDDAd7/7XWF2dtZeXFzkyJEj7pZm//79pFIpenp6vhIP+D8f8NZbb9nr6+ssLy+ztbXl1t5er9fdhxeLRSRJoquri0qlQiaTYXt7m0gkwpkzZ5BlmbGxMV544QX3eR9//LE9Pz/PsWPHuHHjBouLi0iSxMDAAMePH2dqakrYVeIAKysr9u3bt1leXnZn65qmoeu6W9AYhkGj0aBYLGKaJocOHeLRRx8lkUgwOTnpjp4d5HI5++OPP6ZcLjM+Ps61a9dYWFig2Wzi9Xp5/vnnOX36tLCrxHfi1q1b9tLSkuv+9XrdbTEVRSEWi5FMJhkdHWV4eJiDBw/+j8/Y2tr6+WuvvfYdwzBIpVJIkoSqqszPz1Ov17lw4QJf+9rXziYSiau7TvxvoVQqpUul0n2n2/oibz+899579k9/+lPC4TCnTp3i61//Orlcjp/85CdomsbTTz/NiRMn/pvH/CMotrQfyF/GD8Xj8aX/7yEePnx4dnx8fPJ3v/sdiqIwODjI5OSkcOPGDfvNN9/kypUr5PN5MpmMPT4+/qWQ71Z835fZZSSTyeMrKyt2vV7n7t27vPrqq1y7ds1+8sknhT/+8Y/2pUuXuHnzJs1mk6WlJTudTn8p5EUeAAwPDwvPPfccBw4cYHV1lc+KJ3t0dPTVixcvcvDgQebn53n55ZeZmZn5h1fLalv/twfqTaRMJmP/4he/YH19nSNHjnDhwgVisRj37t3jnXfeYWFhgQMHDnD+/HmeeuopYc9b3MH4+LjwrW99C0EQuHXrFtPT09RqNfr7+zlx4gTpdJqNjQ3efPNN3njjDbtYLP5gV1X9y8bly5ft119/nUqlwsmTJzl9+jQej4ePPvqITz75hLW1NYLBIJOTk5w7d46+vr4vzEN+EImfO3dOuHr1qv3666/z3nvvoWkaZ8+e5YknnnBXU5qmcfPmTQzDYG1tzR4cHBT2vMUdTE9P25cuXaJQKDA5OcmFCxfQdZ3Z2VkWFhbY2NhAURRSqRTPPvssY2Njwp62uINvfvObwp/+9Cf7V7/6FTdu3KDT6XD+/HmmpqbcoaaqqszOzmIYxhfK9Q80cYCJiQlhbm7OFgSBubk5vF4vzzzzDBMTE+7CMRgMsrCwwEsvvcS1a9fsb3zjG8KedvWd+OSTT+y3336bubk5JicnOXnyJJZl8eGHH7K2tkahUKDRaLBv3z4uXrzI2bNnhT1tcQdHjx4VMpmM3el0WFxcJBQKMTU1xbFjx6hWqwC0221WVlb49a9/zY0bN+wnn3xS2BN5/O/J88899xzDw8NkMhnm5uaIx+M8/fTT9PT0YFkWg4ODrK6u8sorrzA/P2/veVffidXVVfvdd99lenqa8+fPMzo6iqZp/OEPf2BhYYFWq4Usy4yMjHDx4kX+luXlvUh8aGhImJmZsS3L4vr165imSSqVYt++fbTbbWq1GtVqlWq1yt27d7l//749Ojoq7HniAFNTU8LS0pJdLpe5e/cu6+vrRCIRhoeHqVarrK6uous66+vrZLNZSqVS+rP2eW8TB0in00I2m3XVHqCvr49YLEYikXBfRiqXy+Ryufs7Q1tkj6O/v1/49re/zTPPPIMgCMzPz7sraJ/Ph9/vd/d3pVIp/U9hcQdOnX7p0iU7k8kgiqK76lIUxX19dKerC/wTYXt7+8zm5uaV5eVlNjY2iMfj+P1+hoeH6enpmd35evg/FXEHm1uF7ZXltXgg6EcSPSR7u/+zO9H1ff6VsFWq/pyHeIiHeIh/FfwXjVDdIW9O2PAAAAAASUVORK5CYII=" alt="MEME Logo">
        <h1>MEME</h1>
        <h2>Multiple Em for Motif Elicitation</h2>
      </div>
      <p>
        For further information on how to interpret these results please access
        <a href="https://meme-suite.org/meme/doc/meme.html">https://meme-suite.org/meme/doc/meme.html</a>. <br />
        To get a copy of the MEME software please access 
        <a href="https://meme-suite.org">https://meme-suite.org</a>. 
      </p>
      <p id="citation"> <script>print_citation("citation", "MEME");</script></p>
    </div>
    <!-- navigation -->
    <div class="pad2">
      <a class="jump" href="#motifs_sec">Discovered Motifs</a>
      &nbsp;&nbsp;|&nbsp;&nbsp;
      <a class="jump" href="#sites_sec">Motif Locations</a>
      &nbsp;&nbsp;|&nbsp;&nbsp;
      <a class="jump" href="#inputs_sec">Inputs &amp; Settings</a>
      &nbsp;&nbsp;|&nbsp;&nbsp;
      <a class="jump" href="#info_sec">Program Information</a>
      &nbsp;&nbsp;|&nbsp;&nbsp;
      <a class="jump" href="meme.txt">Results in Text Format</a>&nbsp;<span id="results_txt_help"></span>
      &nbsp;&nbsp;|&nbsp;&nbsp;
      <a class="jump" href="meme.xml">Results in XML Format</a>&nbsp;<span id="results_xml_help"></span>
      <script>
        make_help_button($("results_txt_help"), "pop_results_txt");
        make_help_button($("results_xml_help"), "pop_results_xml");
      </script>
    </div>
    <!-- alert the user when their browser is not up to the task -->
    <noscript><h1 style="color:red">Javascript is required to view these results!</h1></noscript>
    <h1 id="html5_warning" style="color:red; display:none;">Your browser does not support canvas!</h1>
    <script>
      if (!window.HTMLCanvasElement) $("html5_warning").style.display = "block";
    </script>
    <h2 class="mainh pad2" id="motifs_sec">Discovered Motifs</h2>
    <div id="motifs" class="box">
      <p>Please wait... Loading...</p>
      <p>If the page has fully loaded and this message does not disappear then an error may have occurred.</p>
    </div>
    <h2 class="mainh pad2" id="sites_sec">Motif Locations</h2>
    <div id="blocks" class="box">
      <p>Please wait... Loading...</p>
      <p>If the page has fully loaded and this message does not disappear then an error may have occurred.</p>
    </div>
    <h2 class="mainh pad2" id="inputs_sec">Inputs &amp; Settings</h2>
    <div class="box">
      <h4>Sequences</h4>
      <table id="seq_info" class="inputs">
        <tr>
          <th>Role <div class="help" data-topic="pop_seq_role"></div></th>
          <th>Source <div class="help" data-topic="pop_seq_source"></div></th>
          <th class="col_psp">PSP Source <div class="help" data-topic="pop_psp_source"></div></th>
          <th>Alphabet <div class="help" data-topic="pop_seq_alph"></div></th>
          <th>Sequence Count <div class="help" data-topic="pop_seq_count"></div></th>
          <th>Total Size <div class="help" data-topic="pop_num_positions"></div></th>
        </tr>
        <tr>
          <td>Primary Sequences</td>
          <td id="ins_seq_source"></td>
          <td id="ins_seq_psp" class="col_psp"></td>
          <td id="ins_seq_alphabet"></td>
          <td id="ins_seq_count"></td>
          <td id="ins_num_positions"></td>
        </tr>
        <tr class="col_control">
          <td class="col_control">Control Sequences</td>
          <td id="ins_control_source" class="col_control"></td>
          <td id="ins_control_psp" class="col_control col_psp"></td>
          <td id="ins_control_alphabet" class="col_control"></td>
          <td id="ins_control_count" class="col_control"></td>
          <td id="ins_control_positions" class="col_control"></td>
        </tr>
      </table>
      <script>
      {
        var db = data.sequence_db;
        $("ins_seq_source").innerHTML = db.primary_source;
        $("ins_seq_alphabet").innerHTML = current_alphabet.get_alphabet_name();
        $("ins_seq_count").innerHTML = db.primary_count;
        $("ins_num_positions").innerHTML = db.primary_positions;
        $("ins_control_source").innerHTML = db.control_source;
        $("ins_control_alphabet").innerHTML = current_alphabet.get_alphabet_name();
        $("ins_control_count").innerHTML = db.control_count;
        $("ins_control_positions").innerHTML = db.control_positions;
        if (db.psp_source) {
          $("ins_seq_psp").innerHTML = db.psp_source;
        }
        toggle_class($("seq_info"), "hide_psp", !(db.psp_source));
        toggle_class($("seq_info"), "hide_control", (db.control_source == "--none--"));
      }
      </script>
      <h4>Background Model</h4>
      <span id="bg_source"></span>
      <span id="bg_order"></span>
      <span id="alpha_bg"></span>
      <script>
      {
        $("bg_source").appendChild(make_background_source("Source", data.background.source, false));
        $("bg_order").innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;<b>Order:</b> " + data.background.order +
          (data.background.order>0 ? " (only order-0 shown)" : "");
        $("alpha_bg").appendChild(make_alpha_bg_table(current_alphabet, data.sequence_db.freqs));
      }
      </script>
      <h4>Other Settings</h4>
      <table id="tbl_settings" class="inputs hide_advanced">
        <tr>
          <th>Motif Site Distribution</th>
          <td id="opt_mod">
            <span class="mod_zoops">ZOOPS: Zero or one site per sequence</span>
            <span class="mod_oops">OOPS: Exactly one site per sequence</span>
            <span class="mod_anr">ANR: Any number of sites per sequence</span>
          </td>
        </tr>
        <tr>
          <th>Objective Function</th>
          <td id=opt_objfun></td>
        </tr>
        <tr>
          <th>Starting Point Function</th>
          <td id=opt_spfun></td>
        </tr>
        <tr>
          <th>Site Strand Handling</th>
          <td id="opt_strand">
            <span class="strand_none">This alphabet only has one strand</span>
            <span class="strand_given">Sites must be on the given strand</span>
            <span class="strand_both">Sites may be on either strand</span>
          </td>
        </tr>
        <tr>
          <th>Maximum Number of Motifs</th>
          <td id="opt_nmotifs"></td>
        </tr>
        <tr>
          <th>Motif E-value Threshold</th>
          <td id="opt_evt"></td>
        </tr>
        <tr>
          <th>Minimum Motif Width</th>
          <td id="opt_minw"></td>
        </tr>
        <tr>
          <th>Maximum Motif Width</th>
          <td id="opt_maxw"></td>
        </tr>
        <tr>
          <th>Minimum Sites per Motif</th>
          <td id="opt_minsites"></td>
        </tr>
        <tr>
          <th>Maximum Sites per Motif</th>
          <td id="opt_maxsites"></td>
        </tr>
        <tr class="advanced">
          <th>Bias on Number of Sites</th>
          <td id="opt_wnsites"></td>
        </tr>
        <tr class="advanced">
          <th>Sequence Prior</th>
          <td id="opt_prior">
            <span class="prior_dirichlet">Simple Dirichlet</span>
            <span class="prior_dmix">Dirichlet Mixture</span>
            <span class="prior_mega">Mega-weight Dirichlet Mixture</span>
            <span class="prior_megap">Mega-weight Dirichlet Mixture Plus</span>
            <span class="prior_addone">Add One</span>
          </td>
        </tr>
        <tr class="advanced">
          <th>Sequence Prior Source</th>
	  <td id="opt_prior_source"></td>
        </tr>
        <tr class="advanced">
          <th>Sequence Prior Strength</th>
          <td id="opt_b"></td>
        </tr>
        <tr class="advanced">
          <th>EM Starting Point Source</th>
          <td id="opt_substring">
            <span class="substring_on">From substrings in input sequences</span>
            <span class="substring_off">From strings on command line (-cons)</span>
          </td>
        </tr>
        <tr class="advanced">
          <th>EM Starting Point Map Type</th>
          <td id="opt_spmap">
            <span class="spmap_uni">Uniform</span>
            <span class="spmap_pam">Point Accepted Mutation</span>
          </td>
        </tr>
        <tr class="advanced">
          <th>EM Starting Point Fuzz</th>
          <td id="opt_spfuzz"></td>
        </tr>
        <tr class="advanced">
          <th>EM Maximum Iterations</th>
          <td id="opt_maxiter"></td>
        </tr>
        <tr class="advanced">
          <th>EM Improvement Threshold</th>
          <td id="opt_distance"></td>
        </tr>
        <tr class="advanced">
          <th>Maximum Search Size</th>
          <td id="opt_searchsize"></td>
        </tr>
        <tr class="advanced">
          <th>Maximum Number of Sites for E-values</th>
          <td id="opt_csites"></td>
        </tr>
        <tr class="advanced">
          <th>Trim Gap Open Cost</th>
          <td id="opt_wg"></td>
        </tr>
        <tr class="advanced">
          <th>Trim Gap Extend Cost</th>
          <td id="opt_ws"></td>
        </tr>
        <tr class="advanced">
          <th>End Gap Treatment</th>
          <td id="opt_noendgaps">
            <span class="noendgaps_on">No cost</span>
            <span class="noendgaps_off">Same cost as other gaps</span>
          </td>
        </tr>
        <tr>
          <td colspan="2" style="text-align: center">
            <a href="javascript:toggle_class(document.getElementById('tbl_settings'), 'hide_advanced')">
              <span class="show_more">Show Advanced Settings</span>
              <span class="show_less">Hide Advanced Settings</span>
            </a>
          </td>
        </tr>
      </table>
      <script>
      {
        $("opt_mod").className = data.options.mod;
        $("opt_objfun").textContent = data.options.objfun;
        $("opt_spfun").textContent = data.options.spfun;