JSDraw

 Example:
 <div id='div1'>
 <script type="text/javascript">
     scilligence.ready(function () {
     });
 </script>
 

 Example:
    var input = scilligence.Utils.createElement(document.body, "input");
    var ac = new scilligence.AutoComplete(element, "http://server/ajax.ashx?cmd=autocomplete");
 

 Example:
        scilligence.BarcodePrinter.show({barcode: "B39493243"});
 

 Example:
    var dt = scilligence.BusinessDay.addBusinessDays(new Date(), 20);
    var f = scilligence.BusinessDay.isWorkday(new Date());
    var days = scilligence.BusinessDay.getBusinessDays(new Date(2015, 5, 1), new Date(2015, 7, 12));
 

 Example:
 <div id='div1'>
 <script type="text/javascript">
     scilligence.ready(function () {
         new scilligence.Calendar("div1", { events: [{ date: "2015-5-28", time: "8:00", title: "See Doctor" },
             { date: "2015-5-28", time: "12:00", title: "See Doctor" },
             { date: "2015-5-18", time: "8:00", title: "See Doctor"}],
             ondblclick: function (date) {
                 alert(date);
             }
         });
     });
 </script>
 

 For scilligence.Page.addForm() method, please use *block* for Block display, and *table* for Table display 
 Example 1:
    <div id="div1"></div>
    <div id="div2"></div>
    <script type="text/javascript">
        scilligence.ready(function () {
            var rows = [
                { src: "img/hazard-CompressedGas.png", id: 1, molid: "SCI-32423942394", purity: "98%", project: "NVS-34234" },
                { src: "img/hazard-CompressedGas.png", id: 2, molid: "SCI-32423942394", purity: "98%" },
                { src: "img/hazard-CompressedGas.png", id: 3, molid: "SCI-32423942394", purity: "98%", project: "NVS-34234" },
                { src: "img/hazard-CompressedGas.png", id: 4, molid: "SCI-32423942394", purity: "98%", project: "NVS-34234", project2: "NVS-34234" }];



            var options = {
                imgkey: "src", imgwidth: 300, imgheight: 100, viewonly: true, columns: {
                    src: { type: "hidden" },
                    id: { label: "ID", width: 100 },
                    molid: { label: "Mol ID", width: 200 },
                    purity: { label: "Purity", width: 100 }
                }
            };
            var table = new scilligence.Table(options);
            table.render("div1", options.columns);
            table.setData(rows);

            var blocks = new scilligence.CardView(options, options.columns);
            blocks.render("div2");
            blocks.setData(rows);
        });
    </script>
 

 Example 1:
    <script type="text/javascript">
        scilligence.ready(function () {
            new scilligence.Chart('div1', { type: "bar", width: 800, height: 300,
                ajax: { url: "service.aspx?cmd=datasource&source=bug" }
            });
        });
    </script>

 Example 2:
    <script type="text/javascript">
        scilligence.ready(function () {
            new scilligence.Chart('div1', { type: "bar", width: 800, height: 300,
                series: [
                    { label: "Series 1", data: { A: 10000, B: 9200, C: 11811, D: 12000, E: 7662, F: 13887} },
                    { label: "Series 2", data: { A: 3000, B: 12000, D: 12783} }
                ]
            });
        });
    </script>

 Example 3:
    <script type="text/javascript">
        scilligence.ready(function () {
            new scilligence.Chart('div1', { type: "bar", width: 800, height: 300,
                xlabels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
                series: [
                    { label: "Series 1", data: [10000, 9200, 11811, 12000, 7662, 13887] }
                ]
            });
        });
    </script>

 Example 4:
    <script type="text/javascript">
        new scilligence.Chart('container', { type: "bubble", width: 800, height: 300, xmin: 0, ymin: 0, xmax: 8, ymax: 20, ytitle: "Bubble",
            series: [
                    { label: "Series 1", data: [
                    { x: 1, y: 12.45, size: 1, color: 'red' },
                     { x: 2, y: 15.45, size: 2, color: "green" },
                     { x: 3, y: 2, size: 1.5 },
                     { x: 4, y: 7, size: 3.5 },
                     { x: 5, y: 12, size: 1.5 },
                     { x: 6, y: 7, size: 4.5 }
                     ]
                    }
                ]
        });
    });
    </script>
 

 Example:
    <button onclick='test()'>Choose Color</button>
    <script type="text/javascript">
        function test() {
            scilligence.ColorPicker.show(function (color) { alert(color); });
        }
    </script>
 

 Example:
    scilligence.ready(function () {
        var input = scilligence.Utils.createElement(document.body, "input");
        new scilligence.ColorPicker2(input);
    });
 

 Example:
    var callback = function (key, obj) {
        alert( key + " clicked");
    };

    var items = [{ caption: "Color", key: "x", callback: function (key) { alert("Color: " + key);  }, children: ["Red", "Blue"] },
            "Small", "Big"
        ];

    var menu = new scilligence.ContextMenu(items, callback, null);
    function test() {
        menu.show(100, 100);
    }
 

 Example:
    scilligence.ready(function () {
        var input = scilligence.Utils.createElement(document.body, "input");
        new scilligence.DatePicker(input);
    });
 

 Example:
    // Create a popup dialog
    var div = scilligence.Utils.createElement(null, "div");
    var txt = scilligence.Utils.createElement(div, "textarea", null, { width: "580px", height: "400px" });
    var btn = scilligence.Utils.createElement(
            scilligence.Utils.createElement(div, "div", null, { textAlign: "center" }), 
                "button", "OK", { width: "200px" });
 
    var dlg = new scilligence.Dialog("My Dialog", div);
    dojo.connect(btn, "onclick", function (e) { dlg.hide(); });
    dlg.show();
 

 Example:
 <div id='div' style='width: 300px'></div> 
 <script type="text/javascript">
     scilligence.onload(function () {
         var dropdown = new scilligence.Dropdown("div", function (id) { alert(id); });
         var root = dropdown.tree.add(null, { id: 1, name: "Root", icon: "img/pen.gif" });
         dropdown.tree.add(root, { id: 2, name: "Child-1", icon: "img/pen.gif", 
             children: [{ id: 4, name: "Child-1 -1", leaf: true}] });
         dropdown.tree.add(root, { id: 3, name: "Child-2", icon: "img/pen.gif", leaf: true });
     });
 </script>
 

 Example:
    <button id='d'>Select City</button>
    <script type="text/javascript">
        scilligence.ready(function () {
            new scilligence.DropdownButton('d', { items: ["Boston", "New York", "London"], 
                callback: function (city) { alert(city); } });
        });
    </script>
 

 Example:
    <input id='d' />
    <script type="text/javascript">
        scilligence.ready(function () {
            new scilligence.DropdownCheck('d', ["Boston", "New York", "London"]);
        });
    </script>
 

 Example:
    <input id='d'/>
    <script type="text/javascript">
        scilligence.ready(function () {
            new scilligence.DropdownInput('d', { items: ["Boston", "New York", "London"],
                onclickitem: function (city) { alert(city); } 
            });
        });
    </script>
 

 Example:
    var input = scilligence.Utils.createElement(document.body, "input");
    var es = new scilligence.EditableSelect(element, options);
 

 Example:
    dojo.ready(function () {
        var parent = scilligence.Utils.createElement(document.body, "div");
        var columns = {
            user: { label: "User", type: "input", width: 300 },
            role: { label: "Role", type: "select", options: ["", "Member", "Manager"], width: 300 }
        };
        var editabletable = new scilligence.EditableTable(parent, columns, "User", { ajaxurl: "ajax.ashx", cmd: "editabletable" });
    });
 

 Example:
    <script type="text/javascript">
        function preview(fileid) {
            scilligence.FilePreviewer.show(fileid, { url: "ajax.ashx?cmd=attachment.preview", previewurl: "download.ashx?topic=preview&filename=f.png&page={page}&fileid=" + fileid });
        }
    </script>
 

 Example:
        var fields = {
            category: { label: "Category" },
            sheetindex: { label: "Sheet #", type: "select", items: [1, 2, 3, 4, 5] },
            headerlines: { label: "Header Lines", type: "select", items: [1, 2] }
        };

        var data = { formid: 123 };
        scilligence.FileUploader.upload({ caption: "Upload Excel", fields: fields, data: data, url: "ajax.ashx?cmd=my.cmd", callback: function (ret) { ... }});
 

 Constructor Parameters:
 - viewonly: {bool}
 - alternativeforms: {dict}
 - usepostform: {bool}
 - hidelabel: {bool}
 - centerbuttons: {bool}
 - onselectrow: function(item)
 - onchange: function(field, this, args)
 - oncreated: function(form)

 items of .render(parent, items, options)
    Format: { key1: { label, width, render, ... }, key2: { ... }}
      - align: left|right|center
      - attibutes: {dict}
      - autosugesturl: {string}. see scilligence.AutoComplete class
      - autohiderows: {bool}
      - button: {label, icon, type, onclick}
      - colspan: {int}
      - disable: {bool},
      - formula: {string}, 
      - icon: {string}
      - height: {int}
      - hidelabel: {bool}
      - labelstyle: {dict}
      - leading: {string}
      - label: {string}
      - padding: {int}
      - render: function(v, values) { return v; }
      - required: {bool}
      - str: {string}
      - style: {dict}
      - unit: {string}
      - value: {string}
      - viewonly: {bool}
      - was: {string}, the old key
      - width: {int}
      - onenter: function(field)
      - onclick: function(field, item, form)

 Supported Item Types:
    basic types: hidden, number, text, radio, date, color
    list types: select, dropdowninput, editableselect, dropdowncheck, multiselect
    table and text: table, tabtext, multitext, richtext, html, plaintext, multitext
    chemistry and biology: jsdraw, jdraw.fm, jsdraw.se, jsdraw.table, plate, sketches, plates
    file: file, filepath, filelink, filedblink, image, rawfile
    form: subform, checklist

 Example 1:
    <script type="text/javascript">
        dojo.ready(function () {
            var parent = scilligence.Utils.createElement(document.body, "div");
            var columns = {
                mass: { label: "Mass", type: "number", width: 200, unit: "g" },
                name: { label: "Compound Name", type: "input", width: 600, button: { label: "Test", onclick: function () { alert(99); } } },
                vendor: { label: "Vendor", type: "select", options: ["Company A", "Company B"], width: 700 }
            };
            var form = new scilligence.Form({ viewonly: false });
            form.render(parent, columns, { immediately: true });
        });
    </script>

 Example 2. File Upload Dialog:
    <script type="text/javascript">
        var fields = {
            projectcode: { label: "Project Code", required: true, width: 300 },
            file: { label: "Word File", type: "postfile", attributes: { name: "file"} }
        };
        var dlg;
        dlg = scilligence.Form.createDlgForm("Import Word", fields, { label: "Import", onclick: function () { dlg.form.post('ajax.ashx?cmd=abc.import', null, function(ret) { } } }, { usepostform: true });
    </script>

 Example 3. Form Forumla:
    <script type="text/javascript">
        var table;
        scilligence.ready(function () {
            var parent = scilligence.Utils.createElement(document.body, "div");
            var columns = {
                a: { label: "A", type: "number" },
                b: { label: "B", value: 5, viewonly: true },
                ab: { label: "A+B", formula: "{a}+{b}", viewonly: true },
                table: { label: "Table", formula: "cny=scilligence.Math.round({.usd}/{a},2)", type: "jsdraw.table", columns: [{ key: "usd", type: "float" }, { key: "cny", type: "float" }] },
                sum: { label: "Sum(USD)", formula: "{table}.getColSum('usd')", viewonly: true },
                sum2: { label: "Sum(CNY)", formula: "{table}.getColSum('cny')", viewonly: true }
            };
            table = new scilligence.Form({ viewonly: false });
            table.render(parent, columns);
        });
    </script>
 

 Example:
        var args = {
            ajaxurl: "ajax.aspx?cmd=user.home",
            search: { label: "Search", autosuggesturl: "ajax?cmd=search.suggest", hints: "Use Product #, Lot #, Package #, Location #.", url: "Search.aspx?text=" },
            columns: [
                { section: "projects", caption: "My Projects", text: "projectcode", link: "Project.aspx?projectid=", id: "projectid" }
            ]
        };
        scilligence.HomePage.init(div, args);
 

JSDraw2.BONDTYPES = {
    UNKNOWN: 0,
    SINGLE: 1,
    DOUBLE: 2,
    TRIPLE: 3,
    DELOCALIZED: 4,
    WEDGE: 5,
    HASH: 6,
    WIGGLY: 7,
    EITHER: 8,
    SINGLEORDOUBLE: 9,
    SINGLEORAROMATIC: 10,
    DOUBLEORAROMATIC: 11,
    QUADRUPLE: 12,
    DUMMY: 13,
    PEPTIDE: 21,
    NUCLEOTIDE: 22,
    DISULFIDE: 23,
    AMIDE: 24
}

 Example:
    <div id="div1" style="border:solid 1px gray;"></div>
    <script type="text/javascript">
        scilligence.ready(function () {
            var jsd = new JSDraw2.Editor("div1", { width: 900, height: 500, viewonly: true });
            // draw arrow
            JSDraw2.Drawer.drawArrow(jsd.surface, new JSDraw2.Point(100, 100), new JSDraw2.Point(200, 100), "red", 5);
        });
    </script>
 

 Example:
    <div id='formulation'></div>

    <script type="text/javascript">
        var formulation = null;
        dojo.ready(function () {
            formulation = new JSDraw2.Formulation("formulation", { viewonly: false, compoundlookup: 'ajax.ashx?cmd=compound.lookup' });
        });
    </script>
 

 Example:
    <div id='formulation'></div>

    <script type="text/javascript">
        var formulation = null;
        dojo.ready(function () {
            formulation = new JSDraw2.FormulationTable("formulation");
        });
    </script>
 

 Example:
    var molfile = "\n";
    molfile += "MolEngine02021312372D\n";
    molfile += "\n";
    molfile += "  2  1  0  0  0  0  0  0  0  0999 V2000\n";
    molfile += "    0.0000    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n";
    molfile += "    1.3510    0.7800    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n";
    molfile += "  1  2  1  0  0  0  0\n";
    molfile += "M  END\n";

    var m = new JSDraw3.Mol();
    m.setMolfile(molfile);

    var smiles = m.getSmiles();
 

 Example:
    <div id='plate'></div>

    <script type="text/javascript">
        var plate = null;
        dojo.ready(function () {
            plate = new JSDraw2.Plate("plate", { viewonly: false, showtable: true, size: "96", compoundlookup: 'ajax.ashx?cmd=compound.lookup' });
        });
    </script>
 

 Example:
   <html>
   <head>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
   <script type="text/javascript" src='http://[PATH]/Scilligence.JSDraw2.js'></script>
   </head>
   <body>
   <div id='ed'></div>
   <script type='text/javascript'>
     dojo.ready(function() {
       // create a JSDraw SequenceEditor
       var se = new JSDraw2.SequenceEditor("ed", { width: 800, height: 400 });
       se.setFasta('>Protein\nAKDSKFKDFKDJFKJDFKJDKFJDKJFKDJFKDJFKJDF');
       var fasta = se.getFasta();
       var xml = se.getXml();
     });
   </script>
   </body>
   </html>
 

 Example:
    var stack = JSDraw2.Stack(50);
    stack.push("Hydrogen");
    stack.push("Exygen");

    var item = stack.pop();
 

//* Example:
//*    <div id="test2" style="width: 720px; height: 300px; border: 1px solid gray" ></div>
//*    <button onclick='stoichiometry.populate(JSDraw.get("test2").m.parseRxn())'>Popuplate</button>
//*    <br />
//*    <div id='stoichiomety'></div>
//*    <br />
//*
//*    <script type="text/javascript">
//*        var stoichiometry = null;
//*        dojo.ready(function () {
//*            new JSDraw2.Editor("test2");
//*            stoichiometry = new JSDraw2.StoichiometryGrid("stoichiomety");
//*        });
//*    </script>
//* 

 Example 1.