Mercurial > repos > xuebing > sharplabtool

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DREME</title>
<style type="text/css">

    /* START INCLUDED FILE "meme.css" */
        /* 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("help.gif");
          background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAANAQMAAACn5x0BAAAAAXNSR0IArs4c6QAAAAZQTFRFAAAAnp6eqp814gAAAAF0Uk5TAEDm2GYAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH2gMJBQgGYqhNZQAAACZJREFUCNdj+P+BoUGAoV+AYeYEEGoWYGgTYGgRAAm2gRGQ8f8DAOnhC2lYnqs6AAAAAElFTkSuQmCC");
        }

        div.help2 {
          color: #999;
          display: inline-block;
          width: 12px;
          height: 12px;
          border: 1px solid #999;
          font-size: 13px;
          line-height:12px;
          font-family: Helvetica, sans-serif;
          font-weight: bold;
          font-style: normal;
          cursor: pointer;
        }
        div.help2:hover {
          color: #000;
          border-color: #000;
        }

        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;}

        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;}

        .strand_name {text-align:left;}
        .strand_side {padding:0px 10px;}
        .strand_start {padding:0px 10px;}
        .strand_pvalue {text-align:center; padding:0px 10px;}
        .strand_lflank {text-align:right; padding-right:5px; font-weight:bold; font-size:large; font-family: 'Courier New', Courier, monospace; color:gray;}
        .strand_seq {text-align:center; font-weight:bold; font-size:large; font-family: 'Courier New', Courier, monospace;}
        .strand_rflank {text-align:left; padding-left:5px; font-weight:bold; font-size:large; font-family: 'Courier New', Courier, monospace; color:gray;}

        .block_td {height:25px;}
        .block_container {position:relative; width:99%; height:25px; padding:0px; margin:0px;}
        .block_motif {position:absolute; z-index:3; height:12px; top:0px; text-align:center; vertical-align:middle; background-color:cyan;}
        .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; width:12px; height:12px; top:0px; left:0px; color:gray;}
        .block_minus_sym {position:absolute; z-index:4; width:12px; height:12px; top:13px; left:0px; color:gray;}

        .tic_major {position:absolute; border-left:2px solid blue; height:0.5em; top:0em;}
        .tic_minor {position:absolute; border-left:1px solid blue; height:0.2em; top:0em;}
        .tic_label {position:absolute; top:0.5em;  height: 1em; text-align:center; vertical-align:middle}

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

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

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

        a.tab {
          background-color: #ddddff;
          border: 1px solid #000000;
          padding: 2px 1em 2px 1em;
          text-decoration: none;
        }
        div.tabArea.base a.tab {
          border-top-width: 0px;
        }
        div.tabArea.top a.tab {
          border-bottom-width: 0px;
        }

        a.tab, a.tab:visited {
          color: #808080;
        }

        a.tab:hover {
          background-color: #d0d0d0;
          color: #606060;
        }
        a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
          background-color: #f0f0f0;
          color: #000000;
        }
        div.tabMain {
          border: 1px solid #000000;
          background-color: #ffffff;
          padding: 5px;
          margin-right: 5px;
        }
        th.trainingset {
          border-bottom: thin dashed black;
          font-weight:normal;
          padding:0px 10px;
        }
        .dnaseq {
          font-weight: bold;
          font-size: large;
          font-family: 'Courier New', Courier, monospace;
        }
        .dna_A {
          color: rgb(204,0,0);
        }
        .dna_C {
          color: rgb(0,0,204);
        }
        .dna_G {
          color: rgb(255,179,0);
        }
        .dna_T {
          color: rgb(0,128,0);
        }
    /* END INCLUDED FILE "meme.css" */


    /* START INCLUDED FILE "dreme-to-html.css" */
      table.dreme_motifs tr th, table.dreme_motifs tr td {
        padding: 0px 10px;
      }

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

      div.popup {
        width: 400px;
        z-index:2;
        margin-left: auto;
        margin-right: auto;
        padding: 5px;
        background: #FFF;
        border-style: double;
        border-width: 5px;
        border-color: #00666a;
        position:relative;
      }

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

      }
      td.symaction {
        text-align: center;
      }
      *.symaction {
        font-size: 20px;
      }

      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;
      }

      a.navarrow {
        font-size: 30px;
        text-decoration:none;
      }

      a.inactive {
        color:#CCC;
      }

      div.actionbutton {
        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.pop_content {
        position:absolute;
        z-index:1;
        width:300px;
        padding: 5px;
        background: #E4ECEC;
        font-size: 12px;
        font-family: Arial;
        border-style: double;
        border-width: 3px;
        border-color: #AA2244;
        display:none;
      }
      span.sort_dir {
        text-decoration: none;
      }

      div.section_title {
        font-weight: bold;
        cursor: pointer;
      }

      div.section_title.inactive {
        color: #000;
      }

      div.section_title.inactive:hover {
        color: #000;
        text-decoration:underline;
      }

      div.section_title label {
        cursor: pointer;
      }

      span.ellipsis {
        display: inline-block;
        border: 1px solid black;
        padding: 0 2px;
        margin: 0 2px;
      }

      div.section_title.inactive:hover span.ellipsis {
        color: #FFF;
        background-color: #000;
      }

      div.section_title.inactive span.toggle {
        color: #000;
      }

      div.section_data {
        margin-left: 20px;
      }
      tr.rule td, tr.rule th {
        border-bottom: 1px solid #CCC;
      }

      h1.compact, h2.compact, h3.compact, h4.compact, h5.compact, h6.compact {
        margin:0;
        padding:0;
      }

      ul.programs {
        margin-top: 0;
        padding-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        margin-left: 0;
        padding-left: 0;
        list-style: none;
        border-bottom: 1px solid black;
      }

      ul.programs li {
        border: 1px solid black;
        border-bottom-width: 0;
        background-color: #EFE;
        cursor: default;
      }

      ul.programs li.active {
        background-color: #CFC;
      }

      ul.programs li.selected {
        background-color: #262;
        color: #FFF;
      }

      div.programs_scroll {
        width: 100%;
        height: 90px;
        overflow-y: auto;
        overflow-x: hidden;
        margin: 0 auto;
      }
    /* END INCLUDED FILE "dreme-to-html.css" */

  </style>
<script type="text/javascript">
      var pos_count = 3;
      var neg_count = 3;
      var motif_seqs = [];


    /* START INCLUDED FILE "delay_draw.js" */
      //
      // Functions to measure the position of page elements relative to the size of the page
      //

      // gets the offset of the top of the page due to scrolling
      // from: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
      function get_scroll_xy() {
        var scrOfX = 0, scrOfY = 0;
        if( typeof( window.pageYOffset ) == 'number' ) {
          //Netscape compliant
          scrOfY = window.pageYOffset;
          scrOfX = window.pageXOffset;
        } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
          //DOM compliant
          scrOfY = document.body.scrollTop;
          scrOfX = document.body.scrollLeft;
        } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
          //IE6 standards compliant mode
          scrOfY = document.documentElement.scrollTop;
          scrOfX = document.documentElement.scrollLeft;
        }
        return [ scrOfX, scrOfY ];
      }

      // gets the width and height of the visible page
      // from: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
      function get_page_size() {
        var myWidth = 0, myHeight = 0;
        if( typeof( window.innerWidth ) == 'number' ) {
          //Non-IE
          myWidth = window.innerWidth;
          myHeight = window.innerHeight;
        } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
          //IE 6+ in 'standards compliant mode'
          myWidth = document.documentElement.clientWidth;
          myHeight = document.documentElement.clientHeight;
        } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
          //IE 4 compatible
          myWidth = document.body.clientWidth;
          myHeight = document.body.clientHeight;
        }
        return [myWidth, myHeight];
      }

      // gets the x and y offset of an element
      // from http://www.quirksmode.org/js/findpos.html
      function get_elem_xy(elem) {
        var myX = myY = 0;
        if (elem.offsetParent) {
          do {
            myX += elem.offsetLeft;
            myY += elem.offsetTop;
          } while (elem = elem.offsetParent);
        }
        return [myX, myY];
      }

      //
      // 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 = 2000;
      // 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
      //
      function Drawable(elem, task) {
        this.elem = elem;
        this.task = task;
        this.is_visible = Drawable_is_visible;
      }

      //
      // Drawable_is_visible
      //
      // Determines if the drawable object is in the visible part of the page.
      //
      // page_top - the distance to the top of the page for the visible region
      // page_height - the height of the visible region
      function Drawable_is_visible(page_top, page_height) {
        var elem_top = get_elem_xy(this.elem)[1];
        var elem_height = this.elem.height;
        if (typeof (elem_height) != 'number') elem_height = 1;
        return ((elem_top + elem_height) >= page_top && elem_top <= (page_top + page_height));
      }

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

      //
      // process_draw_tasks
      //
      // Called on a delay to process the next avaliable
      // 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()", draw_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) {
        var page_top = get_scroll_xy()[1];
        var page_height = get_page_size()[1];
        drawable = new Drawable(elem, task);
        if (drawable.is_visible(page_top, page_height)) {
          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);
        }
      }

    /* END INCLUDED FILE "delay_draw.js" */


    /* START INCLUDED FILE "motif_logo.js" */
    //======================================================================
    // start Alphabet object
    //======================================================================
    function Alphabet(alphabet, bg) {
      //variable prototype
      this.freqs = new Array();
      this.alphabet = new Array();
      this.letter_count = 0;
      //method prototype
      this.get_ic = Alphabet_get_ic;
      this.get_size = Alphabet_get_size;
      this.get_index = Alphabet_get_index;
      this.get_letter = Alphabet_get_letter;
      this.get_colour = Alphabet_get_colour;
      this.get_bg_freq = Alphabet_get_bg_freq;
      this.is_nucleotide = Alphabet_is_nucleotide;
      this.is_ambig = Alphabet_is_ambig;
      this.toString = Alphabet_to_string;
      //construct
      var is_letter = /^\w$/;
      var is_prob = /^((1(\.0+)?)|(0(\.\d+)?))$/;
      for (var pos = 0; pos < alphabet.length; pos++) {
        var letter = alphabet.charAt(pos);
        if (is_letter.test(letter)) {
          this.alphabet[this.letter_count] = letter.toUpperCase();
          this.freqs[this.letter_count] = -1;
          this.letter_count++;
        }
      }
      if (!(bg === undefined)) {
        var parts = bg.split(/\s+/);
        for (var i = 0, pos = 0; (i + 1) < parts.length; i += 2) {
          var letter = parts[i];
          var freq = parts[i+1];
          if (is_letter.test(letter) && is_prob.test(freq)) {
            letter = letter.toUpperCase();          //find the letter it matches
            for (;pos < this.letter_count; pos++) {
              if (this.alphabet[pos] == letter) break;
            }
            if (pos >= this.letter_count) throw "NOT_IN_ALPHABET";
            this.freqs[pos] = (+freq);
          }
        }
      } else {
        //assume uniform background
        var freq = 1.0 / this.letter_count;
        for (var pos = 0; pos < this.letter_count; pos++) {
          this.freqs[pos] = freq;
        }
      }
    }


    function Alphabet_get_ic() {
      if (this.is_nucleotide()) {
        return 2;
      } else {
        return Math.log(20) / Math.LN2;
      }
    }

    function Alphabet_get_size() {
      return this.letter_count;
    }

    function Alphabet_get_letter(alph_index) {
      if (alph_index < 0 || alph_index >= this.letter_count) {
        throw "BAD_ALPHABET_INDEX";
      }
      return this.alphabet[alph_index];
    }

    function Alphabet_get_bg_freq(alph_index) {
      if (alph_index < 0 || alph_index >= this.letter_count) {
        throw "BAD_ALPHABET_INDEX";
      }
      if (this.freqs[alph_index] == -1) throw "BG_FREQ_NOT_SET";
      return this.freqs[alph_index];
    }

    function Alphabet_get_colour(alph_index) {
      var red = "rgb(204,0,0)";
      var blue = "rgb(0,0,204)";
      var orange = "rgb(255,179,0)";
      var green = "rgb(0,128,0)";
      var yellow = "rgb(255,255,0)";
      var purple = "rgb(204,0,204)";
      var magenta = "rgb(255,0,255)";
      var pink = "rgb(255,204,204)";
      var turquoise = "rgb(51,230,204)";
      if (alph_index < 0 || alph_index >= this.letter_count) {
        throw "BAD_ALPHABET_INDEX";
      }
      if (this.is_nucleotide()) {
        switch (this.alphabet[alph_index]) {
          case "A":
            return red;
          case "C":
            return blue;
          case "G":
            return orange;
          case "T":
            return green;
        }
      } else {
        switch (this.alphabet[alph_index]) {
          case "A":
          case "C":
          case "F":
          case "I":
          case "L":
          case "V":
          case "W":
          case "M":
            return blue;
          case "N":
          case "Q":
          case "S":
          case "T":
            return green;
          case "D":
          case "E":
            return magenta;
          case "K":
          case "R":
            return red;
          case "H":
            return pink;
          case "G":
            return orange;
          case "P":
            return yellow;
          case "Y":
            return turquoise;
        }
      }
      return "black";
    }

    function Alphabet_is_ambig(alph_index) {
      if (alph_index < 0 || alph_index >= this.letter_count) {
        throw "BAD_ALPHABET_INDEX";
      }
      if (this.is_nucleotide()) {
        return ("ACGT".indexOf(this.alphabet[alph_index]) == -1);
      } else {
        return ("ACDEFGHIKLMNPQRSTVWY".indexOf(this.alphabet[alph_index]) == -1);
      }
    }

    function Alphabet_get_index(letter) {
      for (i = 0; i < this.letter_count; i++) {
        if (this.alphabet[i] == letter.toUpperCase()) return i;
      }
      throw "UNKNOWN_LETTER";
    }

    function Alphabet_is_nucleotide() {
      //TODO basic method, make better
      if (this.letter_count < 20) return true;
      return false;
    }

    function Alphabet_to_string() {
      return (this.is_nucleotide() ? "Nucleotide" : "Protein") + " Alphabet " + (this.alphabet.join(""));
    }

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

    //======================================================================
    // start Symbol object
    //======================================================================
    function Symbol(alph_index, scale, alphabet) {
      //variable prototype
      this.symbol = alphabet.get_letter(alph_index);
      this.scale = scale;
      this.colour = alphabet.get_colour(alph_index);
      //function prototype
      this.get_symbol = Symbol_get_symbol;
      this.get_scale = Symbol_get_scale;
      this.get_colour = Symbol_get_colour;
      this.toString = Symbol_to_string;
    }

    function Symbol_get_symbol() {
      return this.symbol;
    }

    function Symbol_get_scale() {
      return this.scale;
    }

    function Symbol_get_colour() {
      return this.colour;
    }

    function Symbol_to_string() {
      return this.symbol + " " + (Math.round(this.scale*1000)/10) + "%";
    }

    function compare_symbol(sym1, sym2) {
      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
    //======================================================================
    function Pspm(pspm, name, ltrim, rtrim, nsites, evalue) {
      if (ltrim === undefined) ltrim = 0;
      if (rtrim === undefined) rtrim = 0;
      if (nsites === undefined) nsites = 0;
      if (evalue === undefined) evalue = 0;
      //variable prototype
      this.alph_length = 0;
      this.motif_length = 0;
      this.pspm = null;
      this.name = (typeof name == "string" ? name : "");
      this.nsites = nsites;
      this.evalue = evalue;
      this.ltrim = ltrim;
      this.rtrim = rtrim;
      //function prototype
      this.copy = Pspm_copy;
      this.reverse_complement = Pspm_reverse_complement;
      this.get_stack = Pspm_get_stack;
      this.get_stack_ic = Pspm_get_stack_ic;
      this.get_motif_length = Pspm_get_motif_length;
      this.get_alph_length = Pspm_get_alph_length;
      this.get_left_trim = Pspm_get_left_trim;
      this.get_right_trim = Pspm_get_right_trim;
      this.as_pspm = Pspm_as_pspm;
      this.as_pssm = Pspm_as_pssm;
      this.toString = Pspm_to_string;
      //construct
      if (typeof pspm == "string") {
        var pspm_header = /letter-probability matrix:\s+alength=\s+(\d+)\s+w=\s+(\d+)(\s+nsites=\s+(\S+))?(\s+E=\s+(\S+))?\s*/;
        var lines = pspm.split(/\n/);
        var read_pspm = false;
        var line_num = 0;
        var col_num = 0;
        this.pspm = new Array();
        for (line_index in lines) {
          //exclude inherited properties and undefined properties
          if (!lines.hasOwnProperty(line_index) || lines[line_index] === undefined) continue;

          var line = trim(lines[line_index]);
          if (line == '') {
            continue;
          }
          if (!read_pspm) {
            var header_match = pspm_header.exec(line);
            if (header_match != null) {
              read_pspm = true;
              this.alph_length = (+header_match[1]);
              this.motif_length = (+header_match[2]);
              if (header_match[4]) this.nsites = parseFloat(header_match[4]);//not always an integer
              if (header_match[6]) this.evalue = parseFloat(header_match[6]);
              this.pspm = new Array(this.motif_length);
            }
            continue;
          }
          if (line_num >= this.motif_length) {
            throw "TOO_MANY_ROWS";
          }
          this.pspm[line_num] = new Array(this.alph_length);
          col_num = 0;
          var parts = line.split(/\s+/);
          for (part_index in parts) {
            //exclude inherited properties and undefined properties
            if (!parts.hasOwnProperty(part_index) || parts[part_index] === undefined) continue;

            var prob = parts[part_index];
            if (col_num >= this.alph_length) {
              throw "TOO_MANY_COLS";
            }
            this.pspm[line_num][col_num] = (+prob);
            //check the probability is within bounds
            if (this.pspm[line_num][col_num] > 1 || this.pspm[line_num][col_num] < 0) {
              throw "NUM_NOT_PROB";
            }
            col_num++;
          }
          if (col_num != this.alph_length) {
            throw "TOO_FEW_COLS";
          }
        line_num++;
        }
        if (line_num != this.motif_length) {
          throw "TOO_FEW_ROWS";
        }
      } else {
        // assume pspm is a nested array
        this.motif_length = pspm.length;
        this.alpha_length = (pspm.length > 0 ? pspm[0].length : 0);
        this.pspm = new Array(this.motif_length);
        // copy pspm and check
        for (var row = 0; row < this.motif_length; row++) {
          if (this.alpha_length != pspm[row].length) throw "COLUMN_MISMATCH";
          this.pspm[row] = new Array(this.alpha_length);
          var row_sum = 0;
          for (var col = 0; col < this.alpha_length; col++) {
            row_sum += this.pspm[row][col];
            this.pspm[row][col] = 0 + pspm[row][col];
          }
          var delta = 0.1
          if ((row_sum > 1 && (row_sum - 1) > delta) ||
              (row_sum < 1 && (1 - row_sum) > delta)) {
            throw "INVALID_SUM";
          }
        }
      }
    }

    function Clone() {}

    function Pspm_copy() {
      Clone.prototype = this;
      var clone = new Clone();
      //so far only a shallow copy, need to copy everything
      clone.alph_length = (0+this.alph_length);
      clone.motif_length = (0+this.motif_length);
      clone.name = (""+this.name);
      clone.nsites = (0+this.nsites);
      clone.evalue = (0+this.evalue);
      clone.ltrim = (0+this.ltrim);
      clone.rtrim = (0+this.rtrim);
      clone.pspm = new Array(this.motif_length);
      for (row = 0; row < this.motif_length; row++) {
        clone.pspm[row] = new Array(this.alph_length);
        for (col = 0; col < this.alph_length; col++) {
          clone.pspm[row][col] = (0+this.pspm[row][col]);
        }
      }
      return clone;
    }

    function Pspm_reverse_complement(alphabet) {
      if (this.alph_length != alphabet.get_size()) {
        throw "ALPHABET_MISMATCH";
      }
      if (!alphabet.is_nucleotide()) {
        throw "NO_PROTEIN_RC";
      }
      //reverse
      var x = 0;
      var y = this.motif_length-1;
      while (x < y) {
        var temp = this.pspm[x];
        this.pspm[x] = this.pspm[y];
        this.pspm[y] = temp;
        x++;
        y--;
      }
      //complement
      var a_index = alphabet.get_index("A");
      var c_index = alphabet.get_index("C");
      var g_index = alphabet.get_index("G");
      var t_index = alphabet.get_index("T");
      for (i = 0; i < this.motif_length; i++) {
        var row = this.pspm[i];
        //swap A and T
        var temp = row[a_index];
        row[a_index] = row[t_index];
        row[t_index] = temp;
        //swap C and G
        temp = row[c_index];
        row[c_index] = row[g_index];
        row[g_index] = temp;
      }
      //swap triming
      var temp_trim = this.ltrim;
      this.ltrim = this.rtrim;
      this.rtrim = temp_trim;
      //note that ambigs are ignored because they don't effect motifs
      return this; //allow function chaining...
    }

    function Pspm_get_stack(position, alphabet) {
      if (this.alph_length != alphabet.get_size()) {
        throw "ALPHABET_MISMATCH";
      }
      var row = this.pspm[position];
      var stack_ic = this.get_stack_ic(position, alphabet);
      var alphabet_ic = alphabet.get_ic();
      var stack = new Array();
      for (i = 0; i < this.alph_length; i++) {
        if (alphabet.is_ambig(i)) continue;
        var 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;
    }

    function Pspm_get_stack_ic(position, alphabet) {
      if (this.alph_length != alphabet.get_size()) {
        throw "ALPHABET_MISMATCH";
      }
      var row = this.pspm[position];
      var H = 0;
      for (var i = 0; i < this.alph_length; i++) {
        if (alphabet.is_ambig(i)) continue;
        if (row[i] == 0) continue;
        H -= (row[i] * (Math.log(row[i]) / Math.LN2));
      }
      return alphabet.get_ic() - H;
    }

    function Pspm_get_error(alphabet) {
      var asize;
      if (this.nsites == 0) return 0;
      if (alphabet.is_nucleotide()) {
        asize = 4;
      } else {
        asize = 20;
      }
      return (asize-1) / (2 * Math.log(2)*this.nsites);
    }

    function Pspm_get_motif_length() {
      return this.motif_length;
    }

    function Pspm_get_alph_length() {
      return this.alph_length;
    }

    function Pspm_get_left_trim() {
      return this.ltrim;
    }

    function Pspm_get_right_trim() {
      return this.rtrim;
    }

    function Pspm_as_pspm() {
      var out = "letter-probability matrix: alength= " + this.alph_length +
          " w= " + this.motif_length + " nsites= " + this.nsites +
          " E= " + this.evalue.toExponential() + "\n";
      for (var row = 0; row < this.motif_length; row++) {
        for (var col = 0; col < this.alph_length; col++) {
          if (col != 0) out += " ";
          out += this.pspm[row][col].toFixed(6);
        }
        out += "\n";
      }
      return out;
    }

    function Pspm_as_pssm(alphabet, pseudo) {
      if (typeof pseudo != "number") pseudo = 0.1;
      var out = "log-odds matrix: alength= " + this.alph_length +
          " w= " + this.motif_length +
          " E= " + this.evalue.toExponential() + "\n";
      var log2 = Math.log(2);
      var total = this.nsites + pseudo;
      for (var row = 0; row < this.motif_length; row++) {
        for (var col = 0; col < this.alph_length; col++) {
          if (col != 0) out += " ";
          var p = this.pspm[row][col];
          // to avoid log of zero we add a pseudo count
          var bg = alphabet.get_bg_freq(col);
          var p2 = (p * this.nsites + bg * pseudo) / total;
          // now calculate the score
          var score = -10000;
          if (p2 > 0) {
            score = Math.round((Math.log(p2 / bg) / log2) * 100)
          }
          out += score;
        }
        out += "\n";
      }
      return out;
    }

    function Pspm_to_string() {
      var str = "";
      for (row_index in this.pspm) {
        //exclude inherited properties and undefined properties
        if (!this.pspm.hasOwnProperty(row_index) || this.pspm[row_index] === undefined) continue;

        var row = this.pspm[row_index];
        str += row.join("\t") + "\n";
      }
      return str;
    }
    //======================================================================
    // end Pspm object
    //======================================================================

    //======================================================================
    // start Logo object
    //======================================================================
    function Logo(alphabet, fine_text) {
      this.alphabet = alphabet;
      this.fine_text = fine_text;
      this.pspm_list = [];
      this.pspm_column = [];
      this.rows = 0;
      this.columns = 0;

      //functions
      this.add_pspm = Logo_add_pspm;
      this.get_columns = Logo_get_columns;
      this.get_rows = Logo_get_rows;
      this.get_pspm = Logo_get_pspm;
      this.get_offset = Logo_get_offset;
    }

    function Logo_add_pspm(pspm, column) {
      if (column === undefined) column = 0;
      else if (column < 0) throw "COLUMN_OUT_OF_BOUNDS";
      this.pspm_list[this.rows] = pspm;
      this.pspm_column[this.rows] = column;
      this.rows++;
      var col = column + pspm.get_motif_length();
      if (col > this.columns) this.columns = col;
    }

    function Logo_get_columns() {
      return this.columns;
    }

    function Logo_get_rows() {
      return this.rows;
    }

    function Logo_get_pspm(row_index) {
      if (row_index < 0 || row_index >= this.rows) throw "INDEX_OUT_OF_BOUNDS";
      return this.pspm_list[row_index];
    }

    function Logo_get_offset(row_index) {
      if (row_index < 0 || row_index >= this.rows) throw "INDEX_OUT_OF_BOUNDS";
      return this.pspm_column[row_index];
    }

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

    //======================================================================
    // 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).
    function RasterizedAlphabet(alphabet, font, target_width) {
      //variable prototypes
      this.lookup = []; //a map of letter to index
      this.rasters = []; //a list of rasters
      this.dimensions = []; //a list of dimensions

      //function prototypes
      this.draw = RasterizedAlphabet_draw;

      //construct
      var default_size = 60; // size of square to assume as the default width
      var safety_pad = 20; // pixels to pad around so we don't miss the edges
      // create a canvas to do our rasterizing on
      var canvas = document.createElement("canvas");
      // assume the default font would fit in a canvas of 100 by 100
      canvas.width = default_size + 2 * safety_pad;
      canvas.height = default_size + 2 * safety_pad;
      // check for canvas support before attempting anything
      if (!canvas.getContext) throw "NO_CANVAS_SUPPORT";
      var ctx = canvas.getContext('2d');
      // check for html5 text drawing support
      if (!supports_text(ctx)) throw "NO_CANVAS_TEXT_SUPPORT";
      // calculate the middle
      var middle = Math.round(canvas.width / 2);
      // calculate the baseline
      var baseline = Math.round(canvas.height - safety_pad);
      // list of widths
      var widths = [];
      var count = 0;
      var letters = [];
      //now measure each letter in the alphabet
      for (var i = 0; i < alphabet.get_size(); ++i) {
        if (alphabet.is_ambig(i)) continue; //skip ambigs as they're never rendered
        var letter = alphabet.get_letter(i);
        letters.push(letter);
        var pos = count++;
        this.lookup[letter] = pos;
        //clear the canvas
        canvas.width = canvas.width;
        // get the context and prepare to draw our width test
        var ctx = canvas.getContext('2d');
        ctx.font = font;
        ctx.fillStyle = alphabet.get_colour(i);
        ctx.textAlign = "center";
        ctx.translate(middle, baseline);
        // draw the test text
        ctx.fillText(letter, 0, 0);
        //measure
        var size = RasterizedAlphabet_measure(ctx, canvas.width, canvas.height);
        if (size.width == 0) throw "INVISIBLE_LETTER"; //maybe the fill was white on white?
        widths.push(size.width);
        this.dimensions[pos] = size;
      }
      //sort the widths
      widths.sort(function(a,b) {return a - b;});
      //drop 10% of the items off each end
      var tenpercent = Math.floor(widths.length / 10);
      for (var i = 0; i < tenpercent; ++i) {
        widths.pop();
        widths.shift();
      }
      //calculate average width
      var avg_width = 0;
      for (var i = 0; i < widths.length; ++i) avg_width += widths[i];
      avg_width /= widths.length;
      // calculate scales
      for (var i = 0; i < this.dimensions.length; ++i) {
        var size = this.dimensions[i];
        // calculate scale
        var scale = target_width / Math.max(avg_width, size.width);
        // estimate scaled height
        var target_height = size.height * scale;
        // create an approprately sized canvas
        var raster = document.createElement("canvas");
        raster.width = target_width; // if it goes over the edge too bad...
        raster.height = target_height + safety_pad * 2;
        // calculate the middle
        middle = Math.round(raster.width / 2);
        // calculate the baseline
        baseline = Math.round(raster.height - safety_pad);
        // get the context and prepare to draw the rasterized text
        ctx = raster.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 rasterized text
        ctx.fillText(letters[i], 0, 0);
        ctx.restore();
        this.rasters[i] = raster;
        this.dimensions[i] = RasterizedAlphabet_measure(ctx, raster.width, raster.height);
      }
    }

    function RasterizedAlphabet_measure(ctx, cwidth, cheight) {
      var data = ctx.getImageData(0, 0, cwidth, cheight).data;
      var r = 0, c = 0;// r: row, c: column
      var top_line = -1, bottom_line = -1, left_line = -1, right_line = -1;
      var txt_width = 0, txt_height = 0;
      // Find the top-most line with a non-white 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;
      }

      //find the last line with a non-white pixel
      if (top_line != -1) {
        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;
        }
        txt_height = bottom_line - top_line + 1;
      }

      // Find the left-most line with a non-white pixel
      for (c = 0; c < cwidth; c++) {
        for (r = 0; r < cheight; 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-white pixel
      if (left_line != -1) {
        for (c = cwidth-1; c >= left_line; c--) {
          for(r = 0; r < cheight; 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};
    }

    function RasterizedAlphabet_draw(ctx, letter, dx, dy, dWidth, dHeight) {
      var index = this.lookup[letter];
      var raster = this.rasters[index];
      var size = this.dimensions[index];
      ctx.drawImage(raster, 0, size.bound_top -1, raster.width, size.height+1, dx, dy, dWidth, dHeight);
    }

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

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

    function LogoMetrics(ctx, canvas_width, canvas_height, logo_columns, logo_rows, allow_space_for_names) {
      if (allow_space_for_names === undefined) allow_space_for_names = false;
      //variable prototypes
      this.canvas_width = canvas_width;
      this.canvas_height = canvas_height;
      this.scale_x = 1;
      this.scale_y = 1;
      this.pad_top = 5;
      this.pad_left = 10;
      this.pad_right = 5;
      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_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_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;
      //function prototypes
      //none
      //calculate the width of the y axis numbers
      ctx.font = this.y_num_font;
      for (var 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)
      ctx.font = this.x_num_font;
      for (var i = 1; i <= logo_columns; i++) {
        this.x_num_width = Math.max(this.x_num_width, ctx.measureText("" + i).width);
      }

      //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) {
        var row_height = this.stack_height + this.pad_middle;
        if (allow_space_for_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_num_height/2;
      if (allow_space_for_names) {
        this.summed_height += this.fine_txt_height + this.fine_txt_above + this.name_height;
        this.summed_height += Math.max(this.y_num_height/2, this.x_num_height + this.x_num_above + this.name_spacer);
      } else {
        this.summed_height += Math.max(this.y_num_height/2, this.x_num_height + this.x_num_above + this.fine_txt_height + this.fine_txt_above);
      }

      //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;
      //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;

      //calculate scaling factors
      this.scale_y = this.canvas_height / this.summed_height;
      this.scale_x = this.canvas_width / this.summed_width;

      //maintain aspect ratio
      if (this.scale_y > this.scale_x) {
        this.scale_y = this.scale_x;
      } else {
        this.scale_x = this.scale_y;
      }


    }

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


    //found this trick at http://talideon.com/weblog/2005/02/detecting-broken-images-js.cfm
    function image_ok(img) {
      // 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) {
      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) {
      var tic_height = metrics.stack_height / alphabet_ic;
      ctx.save();
      ctx.lineWidth = 1.5;
      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.save();
      ctx.rotate(-(Math.PI / 2));
      ctx.textAlign = "center";
      ctx.fillText("bits", 0, 0);
      ctx.restore();
      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);
      ctx.font = metrics.y_num_font;
      ctx.textAlign = "right";
      ctx.textBaseline = "middle";
      for (var i = 0; i <= alphabet_ic; i++) {
        //draw the number
        ctx.fillText("" + i, 0, 0);
        //draw the tic
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(metrics.y_tic_width, 0);
        ctx.stroke();
        //prepare for next tic
        ctx.translate(0, -tic_height);
      }
      ctx.restore();

      ctx.translate(metrics.y_tic_width, 0);

      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(0, metrics.stack_height);
      ctx.stroke();

      ctx.restore();
    }

    function draw_stack_num(ctx, metrics, row_index) {
      ctx.save();
      ctx.font = metrics.x_num_font;
      ctx.translate(metrics.stack_width / 2, metrics.stack_height + metrics.x_num_above);
      ctx.save();
      ctx.rotate(-(Math.PI / 2));
      ctx.textBaseline = "middle"
      ctx.textAlign = "right"
      ctx.fillText("" + (row_index + 1), 0, 0);
      ctx.restore();
      ctx.restore();
    }

    function draw_stack(ctx, metrics, symbols, raster) {
      var preferred_pad = 0;
      var sym_min = 5;

      ctx.save();//1
      ctx.translate(0, metrics.stack_height);
      for (var i in symbols) {
        //exclude inherited properties and undefined properties
        if (!symbols.hasOwnProperty(i) || symbols[i] === undefined) continue;

        var sym = symbols[i];
        var sym_height = metrics.stack_height * sym.get_scale();

        var 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(ctx, sym.get_symbol(), 0, 0, metrics.stack_width, sym_height);
        //translate past the padding
        ctx.translate(0, -(pad/2));
      }
      ctx.restore();//1
    }

    //draws a stack of symbols
    function draw_stack_old(ctx, metrics, symbols) {
      var lpad = 2;
      var sym_min = 5;
      var pos = metrics.stack_height;
      for (var i in symbols) {
        //exclude inherited properties and undefined properties
        if (!symbols.hasOwnProperty(i) || symbols[i] === undefined) continue;

        var sym = symbols[i];
        var sym_height = metrics.stack_height*sym.get_scale();
        var letter = metrics.get_letter_metrics(sym.get_symbol());
        //attempting to draw something smaller than a pixel causes display corruption
        if (sym_height >= 1) {
          //it's better to see the letter than to pad it
          var pad = lpad;
          if (sym_height - pad < sym_min) {
            pad = Math.min(pad, Math.max(0, sym_height - sym_min));
          }
          //move to the correct drawing position
          ctx.save();//s1
          ctx.translate(0, pos);
          //create a clipping rectangle to ensure the letter doesn't overlap when it's distorted
          ctx.save();//s2
          //ctx.beginPath(); //disabled clipping because after the improvements in the text metrics it looks better without
          //ctx.moveTo(-metrics.stack_width/2,0);
          //ctx.lineTo(metrics.stack_width/2, 0);
          //ctx.lineTo(metrics.stack_width/2, -sym_height);
          //ctx.lineTo(-metrics.stack_width/2, -sym_height);
          //ctx.lineTo(-metrics.stack_width/2,0);
          //ctx.clip();
          //now draw
          ctx.translate(0, -(pad/2));
          ctx.translate(0, -letter.get_descent(sym_height - pad));
          ctx.fillStyle = sym.get_colour();
          ctx.textAlign = "center";
          ctx.save();//s3
          ctx.scale(letter.wscale, letter.get_hscale(sym_height - pad));
          ctx.fillText(sym.get_symbol(), 0, 0);
          ctx.restore();//s3

          ctx.restore();//s2
          ctx.restore();//s1
        }

        pos = pos - sym_height;
      }
    }

    function draw_dashed_line(ctx, pattern, start, x1, y1, x2, y2) {
        var x, y, len, i;
        var dx = x2 - x1;
        var dy = y2 - y1;
        var tlen = Math.pow(dx*dx + dy*dy, 0.5);
        var theta = Math.atan2(dy,dx);
        var mulx = Math.cos(theta);
        var muly = Math.sin(theta);
        var lx = [];
        var 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, pspm, offset) {
      var lwidth = metrics.stack_width * pspm.get_left_trim();
      var rwidth = metrics.stack_width * pspm.get_right_trim();
      var mwidth = metrics.stack_width * pspm.get_motif_length();
      var rstart = mwidth - rwidth;
      ctx.save();//s8
      ctx.translate(offset * metrics.stack_width, 0);
      ctx.fillStyle = "rgb(240, 240, 240)";
      if (pspm.get_left_trim() > 0) ctx.fillRect(0, 0, lwidth, metrics.stack_height);
      if (pspm.get_right_trim() > 0) ctx.fillRect(rstart, 0, rwidth, metrics.stack_height);
      ctx.fillStyle = "rgb(51, 51, 51)";
      if (pspm.get_left_trim() > 0) draw_dashed_line(ctx, [3], 0, lwidth-0.5, 0, lwidth-0.5,  metrics.stack_height);
      if (pspm.get_right_trim() > 0) draw_dashed_line(ctx, [3], 0, rstart+0.5, 0, rstart+0.5,  metrics.stack_height);
      ctx.restore();//s8
    }

    function draw_logo_on_canvas(logo, canvas, show_names, scale) {
      var draw_name = (typeof show_names == "boolean" ? show_names : (logo.get_rows() > 1));
      var cwidth = canvas.width;
      var cheight = canvas.height;
      //need a minimum 46 x 120 canvas to draw the font size checks on
      if (canvas.width < 46) canvas.width = 46;
      if (canvas.height < 120) canvas.height = 120;
      var ctx = canvas.getContext('2d');
      //assume that the user wants the canvas scaled equally so calculate what the best width for this image should be
      var metrics = new LogoMetrics(ctx, canvas.width, canvas.height, logo.get_columns(), logo.get_rows(), draw_name);
      ctx.save();//s1
      if (typeof scale == "number") {
        //resize the canvas to fit the scaled logo
        cwidth = metrics.summed_width * scale;
        cheight = metrics.summed_height * scale;
      } else {
        if (cwidth == 0 && cheight == 0) {
          throw "CANVAS_MUST_HAVE_DIMENSIONS";
        } else if (cwidth == 0) {
          scale = cheight / metrics.summed_height;
          cwidth = metrics.summed_width * scale;
        } else if (cheight == 0) {
          scale = cwidth / metrics.summed_width;
          cheight = metrics.summed_height * scale;
        } else {
          scale = Math.min(cwidth / metrics.summed_width, cheight / metrics.summed_height);
        }
      }
      var raster = new RasterizedAlphabet(logo.alphabet, metrics.stack_font, metrics.stack_width * scale * 2);
      if (cwidth != canvas.width || cheight != canvas.height) {
        canvas.width = cwidth;
        canvas.height = cheight;
        //as the canvas has been resized the context is now out of date
        ctx = canvas.getContext('2d');
      }
      ctx.scale(scale, scale);
      ctx.save();//s2
      ctx.save();//s7
      //create margin
      ctx.translate(metrics.pad_left, metrics.pad_top);
      for (var pspm_i = 0; pspm_i < logo.get_rows(); ++pspm_i) {
        var pspm = logo.get_pspm(pspm_i);
        var 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(metrics.summed_width/2, metrics.name_height);
          ctx.font = metrics.name_font;
          ctx.textAlign = "center";
          ctx.fillText(pspm.name, 0, 0);
          ctx.restore();//s4
          ctx.translate(0, metrics.name_height + Math.min(0, metrics.name_spacer - metrics.y_num_height/2));
        }
        //draw scale
        draw_scale(ctx, metrics, logo.alphabet.get_ic());
        ctx.save();//s5
        //translate across past the scale
        ctx.translate(metrics.y_label_height + metrics.y_label_spacer +
            metrics.y_num_width + metrics.y_tic_width, 0);
        //draw the trimming background
        if (pspm.get_left_trim() > 0 || pspm.get_right_trim() > 0) {
          draw_trim_background(ctx, metrics, pspm, offset);
        }
        //draw letters
        ctx.translate(0, metrics.y_num_height / 2);
        for (var col_index = 0; col_index < logo.get_columns(); col_index++) {
          ctx.translate(metrics.stack_pad_left,0);
          if (col_index >= offset && col_index < (offset + pspm.get_motif_length())) {
            var motif_position = col_index - offset;
            draw_stack_num(ctx, metrics, motif_position);
            draw_stack(ctx, metrics, pspm.get_stack(motif_position, logo.alphabet), raster);
          }
          ctx.translate(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
      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) {
      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) {
      var logo = new Logo(alphabet, fine_text);
      logo.add_pspm(pspm);
      return logo;
    }

    function logo_2(alphabet, fine_text, target, query, query_offset) {
      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) {
      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, undefined, scale);
      //replace the image with the canvas
      image.parentNode.replaceChild(canvas, image);
    }

    /*
     * Specifes 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) {
      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, undefined, 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) {
      str = str.replace(/^\s\s*/, '');
      var ws = /\s/, i = str.length;
      while (ws.test(str.charAt(--i)));
      return str.slice(0, i + 1);
    }
    /* END INCLUDED FILE "motif_logo.js" */


    /* START INCLUDED FILE "dreme-to-html.js" */
      var expansion_lookup = [];

      /*
       * show_hidden
       *
       * Looks for specially named elements and switches to the shown view
       */
      function show_hidden(prefix) {
        document.getElementById(prefix + '_activator').style.display = 'none';
        document.getElementById(prefix + '_deactivator').style.display = 'block';
        document.getElementById(prefix + '_data').style.display = 'block';
      }
      /*
       * hide_shown
       *
       * Looks for specially named elements and switches to the hidden view
       */
      function hide_shown(prefix) {
        document.getElementById(prefix + '_activator').style.display = 'block';
        document.getElementById(prefix + '_deactivator').style.display = 'none';
        document.getElementById(prefix + '_data').style.display = 'none';
      }

      function click_download_tab(tab) {
        document.getElementById("download_tab_num").value = tab;
        for (var i = 1; i <= 3; i++) {
          document.getElementById('download_tab_'+i).className = "tab" + (i==tab ? " activeTab" : "");
          document.getElementById('download_pnl_'+i).style.display = (i==tab ? "block" : "none");
        }
        document.getElementById('download_button').style.visibility = (tab==3 ? "visible" : "hidden");
      }


      /*
       * searches child nodes in depth first order and returns the
       * first it finds with the className specified.
       */
      function find_child_element_by_class(node, className) {
        var patt = new RegExp("\\b" + className + "\\b");

        if (node.nodeType == Node.ELEMENT_NODE &&
            patt.test(node.className)) {
          return node;
        } else {
          var result = null;
          for (var i = 0; i < node.childNodes.length; i++) {
            result = find_child_element_by_class(node.childNodes[i], className);
            if (result != null) break;
          }
          return result;
        }
      }

      function find_parent_element_by_class(node, className) {
        var patt = new RegExp("\\b" + className + "\\b");
        if (node.nodeType == Node.ELEMENT_NODE &&
            patt.test(node.className)) {
          return node;
        } else if (node.parentNode != null) {
          return find_parent_element_by_class(node.parentNode, className);
        }
        return null;
      }

      /*
       * expand
       *
       * Expand the extra data section for a motif.
       */
      function expand(num) {
        // get motif data
        var motif_info = motif_seqs[num];
        var motif_id = motif_info[0];
        var seq = motif_info[1];
        var rcseq = motif_info[2];
        var length = motif_info[3];
        var nsites = motif_info[4];
        var p_hits = motif_info[5];
        var n_hits = motif_info[6];
        var pvalue = motif_info[7];
        var evalue = motif_info[8];
        var uevalue = motif_info[9];
        var matches = motif_info[10];
        // find the location to insert the expanded motif data
        var table = document.getElementById('dreme_motifs');
        var motif_row = document.getElementById('motif_row_' + num);
        var exp_row = table.insertRow(motif_row.rowIndex + 1);
        exp_row.id = 'exp_row_' + num;
        var cell = exp_row.insertCell(0);
        cell.colSpan = 9;
        // create the DOM to insert
        var exp = document.getElementById('expanded_motif').firstChild.cloneNode(true);
        // update fields
        set_content_to_text(find_child_element_by_class(exp, 'name'), seq);
        set_content_to_text(find_child_element_by_class(exp, 'num'), num);
        var img = find_child_element_by_class(exp, 'img_nc');
        img.src = motif_id + "nc_" + seq + ".png";
        var imgrc = find_child_element_by_class(exp, 'img_rc');
        imgrc.src = motif_id + "rc_" + rcseq + ".png";
        // fill in the details
        var details = find_child_element_by_class(exp, 'details');
        set_content_to_text(find_child_element_by_class(details, 'positives'), p_hits);
        set_content_to_text(find_child_element_by_class(details, 'negatives'), n_hits);
        set_content_to_text(find_child_element_by_class(details, 'pvalue'), pvalue);
        set_content_to_text(find_child_element_by_class(details, 'evalue'), evalue);
        set_content_to_text(find_child_element_by_class(details, 'uevalue'), uevalue);

        // fill in match table
        var match_row = find_child_element_by_class(exp, 'match');
        var tbody = match_row.parentNode;
        for (var i = 0; i < matches.length; i++) {
          var match = matches[i];
          var cseq = match[0];
          var cpos = match[1];
          var cneg = match[2];
          var cpval = match[3].toExponential(1);
          var ceval = match[4].toExponential(1);
          var row = match_row.cloneNode(true);
          var td_cseq = find_child_element_by_class(row, 'dnaseq');
          set_content_to_text(td_cseq, cseq);
          colour_dna_seq(td_cseq);
          set_content_to_text(find_child_element_by_class(row, 'positives'), cpos);
          set_content_to_text(find_child_element_by_class(row, 'negatives'), cneg);
          set_content_to_text(find_child_element_by_class(row, 'pvalue'), cpval);
          set_content_to_text(find_child_element_by_class(row, 'evalue'), ceval);
          tbody.appendChild(row);
        }
        tbody.removeChild(match_row);
        // append the expanded information
        cell.appendChild(exp);
        // hide the old row
        motif_row.style.display = 'none';
        update_headers();
      }

      function expanded_num(elem) {
        var exp = find_parent_element_by_class(elem, 'expanded_motif');
        var num = parseInt(nodes_text(text_nodes(find_child_element_by_class(exp, 'num'))));
        return num;
      }

      function contract(contained_node) {
        var table = document.getElementById('dreme_motifs');
        var num = expanded_num(contained_node);
        var motif_row = document.getElementById('motif_row_' + num);
        var exp_row = document.getElementById('exp_row_' + num);

        motif_row.style.display = 'table-row';
        table.deleteRow(exp_row.rowIndex);
        update_headers();
      }

      function update_headers() {
        var motif_row_patt = new RegExp("\\bmotif_row\\b");
        var motif_head_patt = new RegExp("\\bmotif_head\\b");
        var table = document.getElementById('dreme_motifs');
        var header = table.tHead.getElementsByTagName('tr')[0];
        header.style.display = 'none';
        var trs = table.tBodies[0].getElementsByTagName('tr');
        var needHeader = true;
        for (var i = 0; i < trs.length; i++) {
          var row = trs[i];
          if (row.style.display == 'none') continue;
          if (motif_row_patt.test(row.className)) {
            if (needHeader) {
              var dupHeader = header.cloneNode(true);
              dupHeader.style.display = 'table-row';
              row.parentNode.insertBefore(dupHeader, row);
              needHeader = false;
              i++;
            }
          } else if (motif_head_patt.test(row.className)) {
            table.deleteRow(row.rowIndex);
            i--;
          } else {
            needHeader = true;
          }
        }
      }

      function set_content_to_text(ele, text) {
        while(ele.hasChildNodes()) {
          ele.removeChild(ele.firstChild);
        }
        ele.appendChild(document.createTextNode(text));
      }

      function both_setup(pos) {
        // get the total number of motifs
        var nmotifs = parseInt(document.getElementById('nmotifs').value, 10);
        // set the motif that we're submitting
        document.getElementById('submit_motif').value = (pos == 0 ? 'all' : pos);
        document.getElementById('send_to_selector').style.display = (pos == 0 ? 'none' : 'block');
        document.getElementById('send_to_title_1').style.display = (pos == 0 ? 'none' : 'block');
        document.getElementById('send_to_title_2').style.display = (pos == 0 ? 'block' : 'none');

        if (pos != 0) {
          // get the information for the position
          var motif_seq = motif_seqs[pos];
          var motif_id = motif_seq[0];
          var seq = motif_seq[1];
          var rcseq = motif_seq[2];
          // set the motif number
          // set the titles of both popups
          set_content_to_text(document.getElementById('send_to_name'), seq);
          set_content_to_text(document.getElementById('download_name'), seq);
          // set the images
          var nc_img = "" + motif_id + "nc_" + seq + ".png";
          var rc_img = "" + motif_id + "rc_" + rcseq + ".png";
          var img;
          img = document.getElementById('send_to_img');
          img.src = nc_img;
          img.style.display = "inline";
          img = document.getElementById('send_to_rcimg');
          img.src = rc_img;
          img.style.display = "inline";
          img = document.getElementById('download_img');
          img.src = nc_img;
          img.style.display = "inline";
          img = document.getElementById('download_rcimg');
          img.src = rc_img;
          img.style.display = "inline";
          // hide the canvas
          document.getElementById('send_to_can').style.display = "none";
          document.getElementById('send_to_rccan').style.display = "none";
          document.getElementById('download_can').style.display = "none";
          document.getElementById('download_rccan').style.display = "none";
          // get some motif details
          var pspm_text = document.getElementById("pspm"+ pos).value;
          var pspm = new Pspm(pspm_text);
          var alpha = new Alphabet(document.getElementById("alphabet").value,
              document.getElementById("bgfreq").value);
          document.getElementById('download_pspm').value = pspm.as_pspm();
          document.getElementById('download_pssm').value = pspm.as_pssm(alpha);
          // set the width and height defaults
          document.getElementById('logo_width').value = pspm.get_motif_length();
          document.getElementById('logo_height').value = 7.5;
          // hide and show the arrows
          var prevclass = (pos == 1 ? "navarrow inactive" : "navarrow");
          var nextclass = (pos == nmotifs ? "navarrow inactive" : "navarrow");
          document.getElementById('prev_arrow_1').className = prevclass;
          document.getElementById('prev_arrow_2').className = prevclass;
          document.getElementById('next_arrow_1').className = nextclass;
          document.getElementById('next_arrow_2').className = nextclass;
          set_content_to_text(document.getElementById('pop_num_1'), pos);
          set_content_to_text(document.getElementById('pop_num_2'), pos);
        }
      }

      function both_change(inc) {
        var motif_num = parseInt(document.getElementById('submit_motif').value, 10);
        var nmotifs = parseInt(document.getElementById('nmotifs').value, 10);
        var orig = motif_num;
        motif_num += inc;
        if (motif_num > nmotifs) motif_num = nmotifs;
        else if (motif_num < 1) motif_num = 1;
        if (orig != motif_num) both_setup(motif_num);
      }

      function both_hide() {
        document.getElementById('grey_out_page').style.display = 'none';
        document.getElementById('download').style.display = 'none';
        document.getElementById('send_to').style.display = 'none';
      }

      /*
       * lookup the information on a motif and prepare the
       * popup for sending it to another program
       */
      function send_to_popup(pos) {
        both_setup(pos);
        var program = find_child_element_by_class(document.getElementById('programs'), 'selected').id;
        var task = highlight_submit_task(null, submit_programs[program]);
        highlight_submit_program(program, submit_tasks[task]);
        update_submit_text(task, program);
        // show the send to page
        var grey_out = document.getElementById('grey_out_page');
        grey_out.style.display = 'block';
        var send_to_pop = document.getElementById('send_to');
        send_to_pop.style.display = 'block';
      }

      function send_to_popup2(elem) {
        send_to_popup(expanded_num(elem));
      }

      function send_to_submit() {
        var program = find_child_element_by_class(document.getElementById('programs'), 'selected').id;
        // set the hidden fields on the form
        document.getElementById('submit_program').value = program;
        // send the form
        document.getElementById('submit_form').submit();
        both_hide();
      }

      function download_popup(pos) {
        both_setup(pos);
        click_download_tab(document.getElementById("download_tab_num").value);
        document.getElementById('submit_program').value = "LOGO";
        // show the download page
        var grey_out = document.getElementById('grey_out_page');
        grey_out.style.display = 'block';
        var download_pop = document.getElementById('download');
        download_pop.style.display = 'block';
      }

      function download_popup2(elem) {
        download_popup(expanded_num(elem));
      }

      function download_submit() {
        var format = document.getElementById('logo_format').value;
        var orient = document.getElementById('logo_rc').value;
        var ssc = document.getElementById('logo_ssc').value;
        var width = document.getElementById('logo_width').value;
        var height = document.getElementById('logo_height').value;
        document.getElementById('submit_format').value = format;
        document.getElementById('submit_rc').value = orient;
        document.getElementById('submit_ssc').value = ssc;
        document.getElementById('submit_width').value = width;
        document.getElementById('submit_height').value = height;
        document.getElementById('submit_form').submit();
        both_hide();
      }

      function FixLogoTask(num, rc) {
        this.num = num;
        this.rc = rc;
        this.run = FixLogoTask_run;
      }

      function FixLogoTask_run() {
        var pspm_text = document.getElementById("pspm" + this.num).value;
        var alpha = new Alphabet("ACGT");
        var pspm = new Pspm(pspm_text);
        if (this.rc) pspm = pspm.reverse_complement(alpha);
        var imgid = "small_" + (this.rc ? "rc_" : "") + "logo_" + this.num;

        var image = document.getElementById(imgid);

        var canvas = create_canvas(pspm.get_motif_length() *15, 50, image.id,
            image.title, image.style.display);
        if (canvas == null) return;

        var logo = logo_1(alpha, "DREME", pspm);
        draw_logo_on_canvas(logo, canvas);
        image.parentNode.replaceChild(canvas, image);
      }

      function fix_popup_logo(image, canvasid, rc) {
        var motif_num = parseInt(document.getElementById('submit_motif').value, 10);
        var pspm_text = document.getElementById("pspm" + motif_num).value;
        var alpha = new Alphabet("ACGT");
        var pspm = new Pspm(pspm_text);
        if (rc) pspm = pspm.reverse_complement(alpha);
        image.style.display = "none";
        //check for canvas support before attempting anything
        var canvas = document.getElementById(canvasid);
        if (!canvas.getContext) return;
        if (!supports_text(canvas.getContext('2d'))) return;
        canvas.height = 90;
        canvas.width = 170;
        canvas.style.display = "inline";
        var logo = logo_1(alpha, "DREME", pspm);
        draw_logo_on_canvas(logo, canvas, false);
      }

      function fix_expanded_logo(image, rc) {
        var motif_num = expanded_num(image);
        var pspm_text = document.getElementById("pspm" + motif_num).value;
        var alpha = new Alphabet("ACGT");
        var pspm = new Pspm(pspm_text);
        if (rc) pspm = pspm.reverse_complement(alpha);
        //check for canvas support before attempting anything
        var canvas = document.createElement('canvas');
        if (!canvas.getContext) return;
        if (!supports_text(canvas.getContext('2d'))) return;
        canvas.height = 150;
        canvas.width = 0;
        draw_logo_on_canvas(logo_1(alpha, "DREME", pspm), canvas, false);
        image.parentNode.replaceChild(canvas, image);
      }

      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;
      }

      function node_text(node) {
        if (node === undefined) {
          return '';
        } else if (node.textContent) {
          return node.textContent;
        } else if (node.innerText) {
          return node.innerText;
        } else {
          return '';
        }
      }

      function nodes_text(nodes, separator) {
        if (separator === undefined) separator = '';
        var text = '';
        if (nodes.length > 0) {
          text += node_text(nodes[0]);
        }
        for (var i = 1; i < nodes.length; i++) {
          text += separator + node_text(nodes[i]);
        }
        return text;
      }

      function colour_dna_seq(container) {
        var textnodes = text_nodes(container);
        for (var i = 0; i < textnodes.length; i++) {
          var node = textnodes[i];
          container.replaceChild(create_dna_seq(node_text(node)), node);
        }
      }

      function create_dna_seq(seq) {
        var out = document.createElement('span');
        var last = 0;
        for (var i = 0; i < seq.length; i++) {
          var letter = seq.charAt(i);
          if (letter == 'A' || letter == 'C' || letter == 'G' || letter == 'T') {
            if (last < i) {
              out.appendChild(document.createTextNode(seq.substring(last, i)));
            }
            var coloured_letter = document.createElement('span');
            coloured_letter.className = "dna_" + letter;
            coloured_letter.appendChild(document.createTextNode(letter));
            out.appendChild(coloured_letter);
            last = i + 1;
          }
        }
        if (last < seq.length) {
          out.appendChild(document.createTextNode(seq.substring(last)));
        }
        return out;
      }

      function sort_table(colEle, compare_function) {
        //find the parent of colEle that is either a td or th
        var cell = colEle;
        while (true) {
          if (cell == null) return;
          if (cell.nodeType == Node.ELEMENT_NODE &&
              (cell.tagName.toLowerCase() == "td" || cell.tagName.toLowerCase() == "th")) {
            break;
          }
          cell = cell.parentNode;
        }
        //find the parent of cell that is a tr
        var row = cell;
        while (true) {
          if (row == null) return;
          if (row.nodeType == Node.ELEMENT_NODE && row.tagName.toLowerCase() == "tr") {
            break;
          }
          row = row.parentNode;
        }
        //find the parent of row that is a table
        var table = row;
        while (true) {
          if (table == null) return;
          if (table.nodeType == Node.ELEMENT_NODE && table.tagName.toLowerCase() == "table") {
            break;
          }
          table = table.parentNode;
        }
        var column_index = cell.cellIndex;
        // do a bubble sort, because the tables are so small it doesn't matter
        var change;
        var trs = table.tBodies[0].getElementsByTagName('tr');
        var already_sorted = true;
        var reverse = false;
        while (true) {
          do {
            change = false;
            for (var i = 0; i < trs.length -1; i++) {
              var v1 = nodes_text(text_nodes(trs[i].cells[column_index]));
              var v2 = nodes_text(text_nodes(trs[i+1].cells[column_index]));
              if (reverse) {
                var tmp = v1;
                v1 = v2;
                v2 = tmp;
              }
              if (compare_function(v1, v2) > 0) {
                exchange(trs[i], trs[i+1], table);
                change = true;
                already_sorted = false;
                trs = table.tBodies[0].getElementsByTagName('tr');
              }
            }
          } while (change);
          if (reverse) break;// we've sorted twice so exit
          if (!already_sorted) break;// sort did something so exit
          // when it's sorted one way already then sort the opposite way
          reverse = true;
        }
        update_sort_arrows(row, column_index, reverse);
      }

      function update_sort_arrows(row, column_index, reverse) {
        var ascending = "\u25BC";
        var descending = "\u25B2";
        var dir = (reverse ? descending : ascending);
        for (var i = 0; i < row.cells.length; i++) {
          var arrow = find_child_element_by_class(row.cells[i], "sort_dir");
          if (arrow == null) continue;
          if (i == column_index) {
            set_content_to_text(arrow, dir);
          } else {
            set_content_to_text(arrow, "");
          }
        }
      }

      function exchange(oRowI, oRowJ, oTable) {
        var i = oRowI.rowIndex;
        var j = oRowJ.rowIndex;
         if (i == j+1) {
          oTable.tBodies[0].insertBefore(oRowI, oRowJ);
        } if (j == i+1) {
          oTable.tBodies[0].insertBefore(oRowJ, oRowI);
        } else {
            var tmpNode = oTable.tBodies[0].replaceChild(oRowI, oRowJ);
            if(typeof(oRowI) != "undefined") {
              oTable.tBodies[0].insertBefore(tmpNode, oRowI);
            } else {
              oTable.appendChild(tmpNode);
            }
        }
      }

      function compare_numbers(v1, v2) {
        var f1 = parseFloat(v1);
        var f2 = parseFloat(v2);
        if (f1 < f2) {
          return -1;
        } else if (f1 > f2) {
          return 1;
        } else {
          return 0;
        }
      }

      function compare_counts(v1, v2) {
        var re = /(\d+)\/\d+/;
        var m1 = re.exec(v1);
        var m2 = re.exec(v2);
        if (m1 == null && m2 == null) return 0;
        if (m1 == null) return -1;
        if (m2 == null) return 1;
        return compare_numbers(m1[1], m2[1]);
      }

      function compare_strings(v1, v2) {
        return v1.localeCompare(v2);
      }
      /*
       * help
       *
       * Moves around help pop-ups so they appear
       * below an activator.
       */
      function help(activator, popup_id) {
        if (help.popup === undefined) {
          help.popup = null;
        }
        if (help.activator === undefined) {
          help.activator = null;
        }

        if (typeof(activator) == 'undefined') { // no activator so hide
          help.popup.style.display = 'none';
          help.popup = null;
          return;
        }
        var pop = document.getElementById(popup_id);
        if (pop == help.popup) {
          if (activator == help.activator) {
            //hide popup (as we've already shown it for the current help button)
            help.popup.style.display = 'none';
            help.popup = null;
            return; // toggling complete!
          }
        } else if (help.popup != null) {
          //activating different popup so hide current one
          help.popup.style.display = 'none';
        }
        help.popup = pop;
        help.activator = activator;

        //must make the popup visible to measure it or it has zero width
        pop.style.display = 'block';
        var xy = get_elem_xy(activator);
        var padding = 10;
        var edge_padding = 15;
        var scroll_padding = 15;

        var pop_left = (xy[0] + (activator.offsetWidth / 2)  - (pop.offsetWidth / 2));
        var pop_top = (xy[1] + activator.offsetHeight + padding);

        // ensure the box is not past the top or left of the page
        if (pop_left < 0) pop_left = edge_padding;
        if (pop_top < 0) pop_top = edge_padding;
        // ensure the box does not cause horizontal scroll bars
        var page_width = null;
        if (window.innerWidth) {
          page_width = window.innerWidth;
        } else if (document.body) {
          page_width = document.body.clientWidth;
        }
        if (page_width) {
          if (pop_left + pop.offsetWidth > page_width) {
            pop_left = page_width - pop.offsetWidth - edge_padding - scroll_padding; //account for scrollbars
          }
        }

        pop.style.left = pop_left + "px";
        pop.style.top = pop_top + "px";
      }

      var submit_tasks = [];
      submit_tasks['search_motifs'] = ['TOMTOM'];
      submit_tasks['search_sequences'] = ['FIMO'];
      submit_tasks['rank_sequences'] = ['MAST'];
      submit_tasks['predict_go'] = ['GOMO'];
      submit_tasks['infer_tf'] = ['SPAMO'];
      var submit_programs = [];
      submit_programs['TOMTOM'] = ['search_motifs'];
      submit_programs['FIMO'] = ['search_sequences'];
      submit_programs['MAST'] = ['rank_sequences'];
      submit_programs['GOMO'] = ['predict_go'];
      submit_programs['SPAMO'] = ['infer_tf'];
      var submit_descriptions = [];
      submit_descriptions['TOMTOM'] = "Find similar motifs in published " +
          "libraries or a library you supply.";
      submit_descriptions['FIMO'] = "Find motif occurences in sequence data.";
      submit_descriptions['MAST'] = "Rank sequences by affinity to groups " +
          "of motifs.";
      submit_descriptions['GOMO'] = "Identify possible roles (Gene Ontology " +
          "terms) for motifs.";
      submit_descriptions['SPAMO'] = "Find other motifs that are enriched at " +
          "specific close spacings which might imply the existance of a complex.";


      function click_submit_task(ele) {
        var task = ele.id;
        var program = highlight_submit_program(null, submit_tasks[task]);
        highlight_submit_task(task, submit_programs[program]);
        update_submit_text(task, program);
      }

      function click_submit_program(ele) {
        var program = ele.id;
        var task = highlight_submit_task(null, submit_programs[program]);
        highlight_submit_program(program, submit_tasks[task]);
        update_submit_text(task, program);
      }

      function update_submit_text(task, program) {
        var task_ele = document.getElementById(task);
        var program_ele = document.getElementById(program);
        set_content_to_text(document.getElementById('program_action'),
            nodes_text(text_nodes(task_ele)));
        set_content_to_text(document.getElementById('program_name'),
            nodes_text(text_nodes(program_ele)));
        set_content_to_text(document.getElementById('program_desc'),
            submit_descriptions[program]);
      }

      function highlight_submit_task(select, highlights) {
        var tasks_ul = document.getElementById('tasks');
        var all_tasks = tasks_ul.getElementsByTagName('li');
        var li;
        var originally_selected = null;
        // deselect everything in the tasks list
        for (var i = 0; i < all_tasks.length; i++) {
          li = all_tasks[i];
          if (li.className == "selected") {
            originally_selected = li;
          }
          li.className = "";
        }
        // highlight everything in the highlights list
        for (var i = 0; i < highlights.length; i++) {
          var li = document.getElementById(highlights[i]);
          li.className = "active";
        }
        // check if we're setting the selected item specifically
        if (select != null) {
          li = document.getElementById(select);
          li.className = "selected";
          return select;
        } else {
          // if the originally selected item is allowed then keep it
          // otherwise move to the first element of the highlight list
          if (originally_selected != null &&
              originally_selected.className == "active") {
            originally_selected.className = "selected";
            return originally_selected.id;
          } else if (highlights.length > 0) {
            li = document.getElementById(highlights[0]);
            li.className = "selected";
            return highlights[0];
          }
          return null;
        }
      }


      function highlight_submit_program(select, highlights) {
        var programs_ul = document.getElementById('programs');
        var all_programs = programs_ul.getElementsByTagName('li');
        var li;
        var originally_selected = null;
        // deselect everything in the programs list
        for (var i = 0; i < all_programs.length; i++) {
          li = all_programs[i];
          if (li.className == "selected") {
            originally_selected = li;
          }
          li.className = "";
        }
        // highlight everything in the highlights list
        for (var i = 0; i < highlights.length; i++) {
          var li = document.getElementById(highlights[i]);
          li.className = "active";
        }
        // check if we're setting the selected item specifically
        if (select != null) {
          li = document.getElementById(select);
          li.className = "selected";
          return select;
        } else {
          // if the originally selected item is allowed then keep it
          // otherwise move to the first element of the highlight list
          if (originally_selected != null &&
              originally_selected.className == "active") {
            originally_selected.className = "selected";
            return originally_selected.id;
          } else if (highlights.length > 0) {
            li = document.getElementById(highlights[0]);
            li.className = "selected";
            return highlights[0];
          }
          return null;
        }
      }
    /* END INCLUDED FILE "dreme-to-html.js" */

  </script>
</head>
<body>
<form id="submit_form" method="post" action="http://Sharplab-G4-1.local/meme/cgi-bin/meme_request.cgi" target="_blank">
<!--+++++++++++++++START DATA+++++++++++++++-->
<input type="hidden" name="version" value="MEME version 4.7.0">
<input type="hidden" name="alphabet" id="alphabet" value="ACGT">
<input type="hidden" name="strands" value="+ -">
<input type="hidden" name="bgsrc" value="dataset">
<input type="hidden" name="bgfreq" id="bgfreq" value="A 0.243 C 0.270 G 0.243 T 0.243">
<input type="hidden" name="name" value="test">
<input type="hidden" name="nmotifs" id="nmotifs" value="0">
<!--+++++++++++++++FINISHED DATA++++++++++++-->
<input type="hidden" name="program" id="submit_program" value="TOMTOM"><input type="hidden" name="motif" id="submit_motif" value="all"><input type="hidden" name="logoformat" id="submit_format" value="png"><input type="hidden" name="logorc" id="submit_rc" value="false"><input type="hidden" name="logossc" id="submit_ssc" value="false"><input type="hidden" name="logowidth" id="submit_width" value=""><input type="hidden" name="logoheight" id="submit_height" value="7.5">
</form>
<div class="pop_content" id="pop_motifs_name">
<p>
        The name of the motif uses the IUPAC codes for nucleotides which has
        a different letter to represent each of the 15 possible combinations.
      </p>
<p>
        The name is itself a representation of the motif though the position
        weight matrix is not directly equalivant as it is generated from the
        sites found that matched the letters given in the name.
      </p>
<p><a href="http://meme.nbcr.net/meme/doc/alphabets.html">
        Read more about the MEME suite's use of the IUPAC alphabets.
        </a></p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_motifs_logo">
<p>The logo of the motif.</p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_motifs_rc_logo">
<p>The logo of the reverse complement motif.</p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_motifs_evalue">
<p>The E-value is the enrichment p-value times the number of candidate
        motifs tested.</p>
<p>The enrichment p-value is calculated using the Fisher Exact Test for
        enrichment of the motif in the positive sequences.</p>
<p>Note that the counts used in the Fisher Exact Test are made after
        erasing sites that match previously found motifs.</p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_motifs_uevalue">
<p>The E-value of the motif calculated without erasing the sites of
        previously found motifs.</p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_more">
<p>Show more information on the motif.</p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_submit">
<p>Submit your motif to another MEME Suite program.</p>
<h5>Supported Programs</h5>
<dl>
<dt>Tomtom</dt>
<dd>Tomtom is a tool for searching for similar known motifs.
          [<a href="http://meme.nbcr.net/meme/tomtom-intro.html">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="http://meme.nbcr.net/meme/mast-intro.html">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="http://meme.nbcr.net/meme/fimo-intro.html">manual</a>]</dd>
<dt>GOMO</dt>
<dd>GOMO is a tool for identifying possible roles (Gene Ontology
          terms) for DNA binding motifs.
          [<a href="http://meme.nbcr.net/meme/gomo-intro.html">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="http://meme.nbcr.net/meme/spamo-intro.html">manual</a>]</dd>
</dl>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_download">
<p>Download your motif as a position weight matrix or a custom logo.</p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_motif_positives">
<p># positive sequences matching the motif / # positive sequences.</p>
<p>Note these counts are made after erasing sites that match previously
        found motifs.</p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_motif_negatives">
<p># negative sequences matching the motif / # negative sequences.</p>
<p>Note these counts are made after erasing sites that match previously
        found motifs.</p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_motif_pvalue">
<p>The p-value of the Fisher Exact Test for enrichment of the motif in
        the positive sequences.</p>
<p>Note that the counts used in the Fisher Exact Test are made after
        erasing sites that match previously found motifs.</p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_motif_evalue">
<p>The E-value is the motif p-value times the number of candidate motifs
        tested.</p>
<p>Note that the p-value was calculated with counts made after
        erasing sites that match previously found motifs.</p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_motif_uevalue">
<p>The E-value of the motif calculated without erasing the sites of
        previously found motifs.</p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_match_word">
<p>All words matching the motif whose uncorrected p-value is less than
        0.01.</p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_match_pos">
<p># positive sequences with matches to the word / # positive sequences.</p>
<p>Note these counts are made after erasing sites that match previously
        found motifs.</p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_match_neg">
<p># negative sequences with matches to the word / # negative sequences.</p>
<p>Note these counts are made after erasing sites that match previously
        found motifs.</p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_match_pval">
<p>The p-value of the Fisher Exact Test for enrichment of the word in
        the positive sequences.</p>
<p>Note that the counts used in the Fisher Exact Test are made after
        erasing sites that match previously found motifs.</p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div class="pop_content" id="pop_match_eval">
<p>The word p-value times the number of candidates tested.</p>
<p>Note that the p-value was calculated with counts made after
        erasing sites that match previously found motifs.</p>
<div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
</div>
<div id="expanded_motif" style="display:none"><div class="box expanded_motif" style="margin-bottom:5px;">
<div>
<div style="float:left"><h2 class="mainh" style="margin:0; padding:0;">
<span class="num"></span>.
              <span class="name"></span>
</h2></div>
<div style="float:right; "><div class="close" onclick="contract(this);" title="Show less information.">↥</div></div>
<div style="clear:both"></div>
</div>
<div style="padding:0 5px;">
<div style="float:left;">
<img class="img_nc" onerror="fix_expanded_logo(this, false)"><img class="img_rc" onerror="fix_expanded_logo(this, true)">
</div>
<div style="float:right; height:100px;">
<div onclick="send_to_popup2(this);" class="actionbutton" title="Submit this motif to another MEME Suite program.">
<div style="float:left; margin-right:1em;">Submit</div>
<div style="float:right">⇢</div>
<div style="clear:both;"></div>
</div>
<div onclick="download_popup2(this);" class="actionbutton" title="Download this motif as a position weight matrix or a custom logo.">
<div style="float:left; margin-right:1em;">Download</div>
<div style="float:right">⟱</div>
<div style="clear:both;"></div>
</div>
</div>
<div style="clear:both;"></div>
</div>
<h4>Details</h4>
<table class="details">
<thead><tr>
<th>Positives <div class="help2" onclick="help(this,'pop_motif_positives')">?</div>
</th>
<th>Negatives <div class="help2" onclick="help(this,'pop_motif_negatives')">?</div>
</th>
<th>P-value <div class="help2" onclick="help(this,'pop_motif_pvalue')">?</div>
</th>
<th>E-value <div class="help2" onclick="help(this,'pop_motif_evalue')">?</div>
</th>
<th>Unerased E-value <div class="help2" onclick="help(this,'pop_motif_uevalue')">?</div>
</th>
</tr></thead>
<tbody><tr>
<td>
<span class="positives"></span>/3</td>
<td>
<span class="negatives"></span>/3</td>
<td class="pvalue"></td>
<td class="evalue"></td>
<td class="uevalue"></td>
</tr></tbody>
</table>
<h4>Enriched Matching Words</h4>
<table>
<thead><tr>
<th>
<a href="javascript:;" onclick="sort_table(this, compare_strings)"><span class="sort_dir"></span>Word</a>
                <div class="help2" onclick="help(this,'pop_match_word')">?</div>
</th>
<th>
<a href="javascript:;" onclick="sort_table(this, compare_counts)"><span class="sort_dir"></span>Positives</a>
                <div class="help2" onclick="help(this,'pop_match_pos')">?</div>
</th>
<th>
<a href="javascript:;" onclick="sort_table(this, compare_counts)"><span class="sort_dir"></span>Negatives</a>
                <div class="help2" onclick="help(this,'pop_match_neg')">?</div>
</th>
<th>
<a href="javascript:;" onclick="sort_table(this, compare_numbers)"><span class="sort_dir"></span>P-value</a>
                <div class="help2" onclick="help(this,'pop_match_pval')">?</div>
</th>
<th>
<a href="javascript:;" onclick="sort_table(this, compare_numbers)"><span class="sort_dir">▼</span>E-value</a>
                <div class="help2" onclick="help(this,'pop_match_eval')">?</div>
</th>
</tr></thead>
<tbody><tr class="match">
<td class="dnaseq"></td>
<td>
<span class="positives"></span>/3</td>
<td>
<span class="negatives"></span>/3</td>
<td class="pvalue"></td>
<td class="evalue"></td>
</tr></tbody>
</table>
</div></div>
<div id="grey_out_page" class="grey_background" style="display:none;"></div>
<div class="popup_wrapper"><div id="send_to" class="popup" style="top:-150px; display:none">
<div>
<div style="float:left" id="send_to_title_1"><h2 class="mainh compact">Submit "<span id="send_to_name"></span>"</h2></div>
<div style="float:left" id="send_to_title_2"><h2 class="mainh compact">Submit All Motifs</h2></div>
<div style="float:right; "><div class="close" onclick="both_hide();">x</div></div>
<div style="clear:both"></div>
</div>
<div style="padding:0 5px 5px 5px;">
<div id="send_to_selector" style="height:100px;">
<img id="send_to_img" height="90" style="max-width:170px;" onerror="fix_popup_logo(this, 'send_to_can', false)"><canvas id="send_to_can" width="10" height="100" style="display:none;"></canvas><img id="send_to_rcimg" height="90" style="max-width:170px;" onerror="fix_popup_logo(this, 'send_to_rccan', true);"><canvas id="send_to_rccan" width="10" height="100" style="display:none"></canvas><div style="float:right;">
<a id="prev_arrow_2" href="javascript:both_change(-1)" class="navarrow">⇧</a><div id="pop_num_2" class="navnum"></div>
<a id="next_arrow_2" href="javascript:both_change(1)" class="navarrow">⇩</a>
</div>
</div>
<form>
<div style="">
<div style="float:left;">
<h4 class="compact">Select what you want to do</h4>
<div class="programs_scroll"><ul id="tasks" class="programs">
<li id="search_motifs" onclick="click_submit_task(this)" class="selected">Search Motifs</li>
<li id="search_sequences" onclick="click_submit_task(this)">Search Sequences</li>
<li id="rank_sequences" onclick="click_submit_task(this)">Rank Sequences</li>
<li id="predict_go" onclick="click_submit_task(this)">Predict Gene Ontology terms</li>
<li id="infer_tf" onclick="click_submit_task(this)">Infer TF Complexes</li>
</ul></div>
</div>
<div style="float:right;">
<h4 class="compact">Select a program</h4>
<div class="programs_scroll"><ul id="programs" class="programs">
<li id="TOMTOM" onclick="click_submit_program(this)" class="selected">Tomtom</li>
<li id="FIMO" onclick="click_submit_program(this)">FIMO</li>
<li id="MAST" onclick="click_submit_program(this)">MAST</li>
<li id="GOMO" onclick="click_submit_program(this)">GOMO</li>
<li id="SPAMO" onclick="click_submit_program(this)">SpaMo</li>
</ul></div>
</div>
<div style="font-weight:bold; display:inline-block; text-align:center; width:60px; height:100px; line-height:100px">Or</div>
<div style="clear:both;"></div>
</div>
<h4>
<span id="program_action">Search Motifs</span> with <span id="program_name">Tomtom</span>
</h4>
<p><span id="program_desc">Find similar motifs in published
                libraries or a library you supply.</span></p>
<div style="margin-top:10px; height: 2em;">
<div style="float:left;"><input type="button" value="Send" onclick="javascript:send_to_submit()"></div>
<div style="float:right;"><input type="button" value="Cancel" onclick="javascript:both_hide()"></div>
</div>
</form>
</div>
</div></div>
<div class="popup_wrapper"><div id="download" class="popup" style="top:-150px; display:none">
<div>
<div style="float:left"><h2 class="mainh" style="margin:0; padding:0;">Download "<span id="download_name"></span>"</h2></div>
<div style="float:right; "><div class="close" onclick="both_hide();">x</div></div>
<div style="clear:both"></div>
</div>
<div style="padding:0 5px 5px 5px;">
<div style="height:100px">
<img id="download_img" height="90" style="max-width:170px;" onerror="fix_popup_logo(this, 'download_can', false)"><canvas id="download_can" width="10" height="100" style="display:none;"></canvas><img id="download_rcimg" height="90" style="max-width:170px;" onerror="fix_popup_logo(this, 'download_rccan', true)"><canvas id="download_rccan" width="10" height="100" style="display:none;"></canvas><div style="float:right;">
<a id="prev_arrow_1" href="javascript:both_change(-1)" class="navarrow">⇧</a><div id="pop_num_1" class="navnum"></div>
<a id="next_arrow_1" href="javascript:both_change(1)" class="navarrow">⇩</a>
</div>
</div>
<form>
<input type="hidden" id="download_tab_num" value="1"><div style="padding:5px 0;">
<div class="tabArea top">
<a id="download_tab_1" href="javascript:click_download_tab(1)" class="tab activeTab">PSPM Format</a><a id="download_tab_2" href="javascript:click_download_tab(2)" class="tab">PSSM Format</a><a id="download_tab_3" href="javascript:click_download_tab(3)" class="tab">Logo</a>
</div>
<div class="tabMain">
<div id="download_pnl_1"><textarea id="download_pspm" style="width:99%" rows="10" readonly></textarea></div>
<div id="download_pnl_2"><textarea id="download_pssm" style="width:99%" rows="10" readonly></textarea></div>
<div id="download_pnl_3"><table>
<tr>
<td><label for="logo_format">Format:</label></td>
<td><select id="logo_format"><option value="png">PNG (for web)</option>
<option value="eps">EPS (for publication)</option></select></td>
</tr>
<tr>
<td><label for="logo_rc">Orientation:</label></td>
<td><select id="logo_rc"><option value="false">Normal</option>
<option value="true">Reverse Complement</option></select></td>
</tr>
<tr>
<td><label for="logo_ssc">Small Sample Correction:</label></td>
<td><select id="logo_ssc"><option value="false">Off</option>
<option value="true">On</option></select></td>
</tr>
<tr>
<td><label for="logo_width">Width:</label></td>
<td>
<input type="text" id="logo_width" size="4"> cm
                      </td>
</tr>
<tr>
<td><label for="logo_height">Height:</label></td>
<td>
<input type="text" id="logo_height" size="4"> cm
                      </td>
</tr>
</table></div>
<div style="margin-top:10px;">
<div style="float:left;"><input type="button" id="download_button" value="Download" style="visibility:hidden;" onclick="javascript:download_submit()"></div>
<div style="float:right;"><input type="button" value="Cancel" onclick="javascript:both_hide()"></div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</form>
</div>
</div></div>
<a name="top"></a><div class="pad1">
<h1><img src="http://Sharplab-G4-1.local/meme/doc/images/dreme_logo.png" alt="Discriminative Regular Expression Motif Elicitation (DREME)"></h1>
<p class="spaced">
        For further information on how to interpret these results or to get a
        copy of the MEME software please access
        <a href="http://meme.nbcr.net/">http://meme.nbcr.net</a>.
      </p>
<p>
        If you use DREME in your research please cite the following paper:<br><span class="citation">
          Timothy L. Bailey, "DREME: Motif discovery in transcription factor ChIP-seq data", <i>Bioinformatics</i>, <b>27</b>(12):1653-1659, 2011.
        </span></p>
</div>
<div class="pad2">
<a class="jump" href="#description">Description</a>  |  <a class="jump" href="#motifs">Discovered motifs</a>  |  <a class="jump" href="#program">Program information</a>
</div>
<a name="description"></a><table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#FFFFFF"><tr>
<td><h2 class="mainh">Description</h2></td>
<td align="right" valign="bottom">
<a href="#motifs">Next</a> <a href="#top">Top</a>
</td>
</tr></table>
<div class="box"><p>xxxx</p></div>
<a name="motifs"></a><table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#FFFFFF"><tr>
<td><h2 class="mainh">Discovered Motifs</h2></td>
<td align="right" valign="bottom">
<a href="#description">Previous</a> <a href="#program">Next</a> <a href="#top">Top</a>
</td>
</tr></table>
<div class="box">
<p><b>Click on the ↧</b> under the <b>More</b> column to show more
        information about the motif.<br><b>Click on the ⇢</b> under the <b>Submit</b> column to send the
        motif to another MEME suite program. Eg. Tomtom<br><b>Click on the ⟱</b> under the <b>Download</b> column to get
        the position weight matrix of a motif or to download the logo image with
        your chosen options.
      </p>
<table id="dreme_motifs" class="dreme_motifs">
<thead><tr class="motif_head">
<td> </td>
<th>Motif <div class="help2" onclick="help(this,'pop_motifs_name')">?</div>
</th>
<th>Logo <div class="help2" onclick="help(this,'pop_motifs_logo')">?</div>
</th>
<th>RC Logo <div class="help2" onclick="help(this,'pop_motifs_rc_logo')">?</div>
</th>
<th>E-value <div class="help2" onclick="help(this,'pop_motifs_evalue')">?</div>
</th>
<th>Unerased E-value <div class="help2" onclick="help(this,'pop_motifs_uevalue')">?</div>
</th>
<th>More <div class="help2" onclick="help(this,'pop_more')">?</div>
</th>
<th>Submit <div class="help2" onclick="help(this,'pop_submit')">?</div>
</th>
<th>Download <div class="help2" onclick="help(this,'pop_download')">?</div>
</th>
</tr></thead>
<tbody></tbody>
<tfoot><tr class="rule">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr></tfoot>
</table>
<div style="float:left"><div onclick="send_to_popup(0);" class="actionbutton" title="Submit all motifs to another program.">
<div style="float:left; margin-right:1em;">Submit All</div>
<div style="float:right">⇢</div>
<div style="clear:both;"></div>
</div></div>
<div style="clear:both;"></div>
</div>
<a name="program"></a><div class="bar">
<div style="text-align:right;">
<a href="#motifs">Previous</a> <a href="#top">Top</a>
</div>
<div class="subsection">
<a name="version"></a><h5>DREME version</h5>4.7.0 (Release date: Wed Sep 28 17:30:10 EST 2011)
      </div>
<div class="subsection">
<a name="reference"></a><h5>Reference</h5>
<span class="citation">
          Timothy L. Bailey, "DREME: Motif discovery in transcription factor ChIP-seq data", <i>Bioinformatics</i>, <b>27</b>(12):1653-1659, 2011.
        </span>
</div>
<div class="subsection">
<a name="command"></a><h5>Command line summary</h5>
<textarea rows="1" style="width:100%;" readonly>dreme -p test.fa -desc xxxx</textarea><br>Result calculation took 0.01 seconds<br>
</div>
<a href="javascript:show_hidden('model')" id="model_activator">show model parameters...</a><div class="subsection" id="model_data" style="display:none;">
<h5>Model parameters</h5>
<textarea style="width:100%;" rows="10" readonly>
positives             = name: "test", count: "3", file: "test.fa", last_mod_date: "Sat Dec 10 12:52:18 EST 2011"
negatives             = name: "shuffled positive sequences", count: "3", from: "shuffled"
background            = type: "dna", A: "0.243", C: "0.270", G: "0.243", T: "0.243", from: "dataset"
stop                  = evalue: "0.05"
ngen                  = 100
add_pv_thresh         = 0.01
seed                  = 1
host                  = SHARPLAB.MIT.EDU
when                  = Sun Dec 11 09:26:43 EST 2011
</textarea>
</div>
<a href="javascript:hide_shown('model')" style="display:none;" id="model_deactivator">hide model parameters...</a>
</div>
</body>
</html>
author	xuebing
date	Fri, 09 Mar 2012 19:45:15 -0500
parents	9071e359b9a3
children