Added jsplumb

Gruntfile.js

@@ -244,16 +244,23 @@ module.exports = function (grunt) {
           'jquery-handsontable/v0.10.5/dist/jquery.handsontable.full.css',
         relative_dest: 'lib/handsontable.css',
         dest: '<%= global_config.dest %>/<%= curl.handsontablecss.relative_dest %>'
-//       },
-//       jqueryuijs: {
-//         src: 'https://code.jquery.com/ui/1.10.4/jquery-ui.js',
-//         relative_dest: 'lib/jquery-ui.js',
-//         dest: '<%= global_config.dest %>/<%= curl.jqueryuijs.relative_dest %>'
-//       },
-//       jqueryuicss: {
-//         src: 'https://code.jquery.com/ui/1.11.0-beta.1/themes/base/jquery-ui.css',
-//         relative_dest: 'lib/jquery-ui.css',
-//         dest: '<%= global_config.dest %>/<%= curl.jqueryuicss.relative_dest %>'
+      },
+      jqueryuijs: {
+        src: 'https://code.jquery.com/ui/1.10.4/jquery-ui.js',
+        relative_dest: 'lib/jquery-ui.js',
+        dest: '<%= global_config.dest %>/<%= curl.jqueryuijs.relative_dest %>'
+      },
+      jqueryuicss: {
+        src: 'https://code.jquery.com/ui/1.11.0-beta.1/themes/base/jquery-ui.css',
+        relative_dest: 'lib/jquery-ui.css',
+        dest: '<%= global_config.dest %>/<%= curl.jqueryuicss.relative_dest %>'
+      },
+      jsplumbjs: {
+        src: "https://github.com/sporritt/jsPlumb/raw/" +
+        "master/dist/js/jquery.jsPlumb-1.6.2-min.js",
+        relative_dest: 'lib/jquery.jsplumb.min.js',
+        dest: '<%= global_config.dest %>/<%= curl.jsplumbjs.relative_dest %>'
+      }
 //       },
 //       beautifyhtml: {
 //         src: 'https://raw.githubusercontent.com/einars/js-beautify/master/js/lib/beautify-html.js',

dream/platform/src2/dream/document_page_mixin.js

@@ -13,6 +13,7 @@
           .push(function () {
             // XXX Conditional simulation menu
             return RSVP.all([
+              gadget.whoWantToDisplayThisDocumentPage("production_line", key),
               gadget.whoWantToDisplayThisDocumentPage("edit_table", key),
               gadget.whoWantToDisplayThisDocumentPage("run_simulation", key),
               gadget.whoWantToDisplayThisDocumentPage("manage_document", key),
@@ -36,15 +37,16 @@
           })
           .push(function (result_list) {
             return [
-              {link: result_list[0], title: "Edit table"},
-              {link: result_list[1], title: "Run simulation"},
-              {link: result_list[2], title: "Manage document"},
-              {link: result_list[3], title: "Stations Utilization"},
-              {link: result_list[4], title: "Queues Statistics"},
-              {link: result_list[5], title: "Exit Statistics"},
-              {link: result_list[6], title: "Job Gantt"},
-              {link: result_list[7], title: "Job Schedule"},
-              {link: result_list[8], title: "Debug JSON"}
+              {link: result_list[0], title: "Production line"},
+              {link: result_list[1], title: "Edit table"},
+              {link: result_list[2], title: "Run simulation"},
+              {link: result_list[3], title: "Manage document"},
+              {link: result_list[4], title: "Stations Utilization"},
+              {link: result_list[5], title: "Queues Statistics"},
+              {link: result_list[6], title: "Exit Statistics"},
+              {link: result_list[7], title: "Job Gantt"},
+              {link: result_list[8], title: "Job Schedule"},
+              {link: result_list[9], title: "Debug JSON"}
             ];
           });
       });

dream/platform/src2/dream/index.less

@@ -47,3 +47,176 @@
     padding: 1em;
   }
 }
+
+[data-gadget-scope="productionline"] {
+  #main {
+    /* these two margins settings are here just to ensure that jsPlumb handles
+       margins properly.*/
+    position: relative;
+    margin:20px auto;
+    font-size: 80%;
+    border: 1px solid #999;
+    width: 100%;
+    height: 600px;
+    overflow: hidden;
+    border-radius: 10px;
+    background-color:#eaedef;
+    text-align: center;
+  }
+
+  .selected {
+    color:rgb(189, 11, 11) !important;
+  }
+
+  .window, .label {
+    background-color:white;
+    text-align:center;
+    z-index:23;
+    cursor:pointer;
+    box-shadow: 2px 2px 19px #aaa;
+    -o-box-shadow: 2px 2px 19px #aaa;
+    -webkit-box-shadow: 2px 2px 19px #aaa;
+    -moz-box-shadow: 2px 2px 19px #aaa;
+  }
+
+  path, ._jsPlumb_endpoint {
+    cursor:pointer;
+  }
+
+  ._jsPlumb_endpoint_drop_allowed {
+    border: 4px solid #123456;
+    box-shadow: 6px 6px 19px #444;
+    -o-box-shadow: 6px 6px 19px #444;
+    -webkit-box-shadow: 6px 6px 19px #444;
+    -moz-box-shadow: 6px 6px 19px #444;
+  }
+
+  /* z index stuff */
+
+  ._jsPlumb_connector {
+    z-index:18;
+  }
+
+  ._jsPlumb_endpoint {
+    z-index:19;
+  }
+
+  ._jsPlumb_overlay {
+    z-index:23;
+  }
+
+  ._jsPlumb_connector._jsPlumb_hover {
+    z-index:21 !important;
+  }
+
+  ._jsPlumb_endpoint._jsPlumb_hover {
+    z-index:22 !important;
+  }
+
+  ._jsPlumb_overlay {
+    border:1px solid #346789;
+    opacity:0.8;
+    filter:alpha(opacity=80);
+    background-color:white;
+    color:black;
+    font-family:helvetica;
+    padding:0.5em;
+  }
+
+  .Dream-Source, .Dream-BatchSource {
+    border: 1px solid #bbc;
+    background-color:#ffe;
+    background-image: linear-gradient(to bottom, #ffe 0%, #dde 100%);
+  }
+
+  .Dream-Machine, .Dream-MachineJobShop, .Dream-BatchScrapMachine, .Dream-MachineManagedJob, .Dream-MouldAssembly {
+    border: 1px solid #cbc;
+    background-color: #fef;
+    background-image: linear-gradient(to bottom, #fef 0%, #ede 100%);
+  }
+
+  .Dream-Queue, .Dream-QueueJobShop, .Dream-LineClearance, .Dream-QueueManagedJob, .Dream-ConditionalBuffer, .Dream-OrderDecomposition, .Dream-MouldAssemblyBuffer {
+    border: 1px solid #bcc;
+    background-color:#eff;
+    background-image: linear-gradient(to bottom, #eff 0%, #dee 100%);
+  }
+
+  .Dream-Exit, .Dream-ExitJobShop {
+    border: 1px solid #ccb;
+    background-color:#eef;
+    background-image: linear-gradient(to bottom, #eef 0%, #dde 100%);
+  }
+
+  .Dream-EventGenerator {
+    border: 1px solid #cba;
+    background-color:#fdc;
+    background-image: linear-gradient(to bottom, #fdc 0%, #ecb 100%);
+  }
+
+  .Dream-BatchDecomposition, .Dream-BatchDecompositionStartTime, .Dream-BatchReassembly {
+    border: 1px solid #bcb;
+    background-color:#dfd;
+    background-image: linear-gradient(to bottom, #dfd 0%, #cec 100%);
+  }
+
+  .Dream-Repairman {
+    border: 1px solid #cbb;
+    background-color:#fdd;
+    background-image: linear-gradient(to bottom, #fdd 0%, #dcc 100%);
+  }
+
+  .window, .dummy_window {
+    border:1px solid lightgray;
+    width:100px;
+    height:64px;
+    position:absolute;
+    color:black;
+    font-family:serif;
+    font-style:italic;
+    padding-top:0.9em;
+    font-size:0.9em;
+    cursor:move;
+    font-size:11px;
+    -webkit-transition:background-color 0.1s ease-in;
+    -moz-transition:background-color 0.1s ease-in;
+    transition:background-color 0.1s ease-in;
+    border-radius: 5px;
+  }
+
+  .window:hover {
+    background-color: #5c96bc;
+    background-image: none;
+    color:white;
+  }
+
+  .dummy_window {
+    position: absolute;
+    top: 0;
+    left: 0;
+    visibility: hidden;
+  }
+
+  .ep {
+    position:absolute;
+    bottom:37%;
+    right:5px;
+    width:1em;
+    height:1em;
+    background-color:orange;
+    cursor:pointer;
+    box-shadow: 0px 0px 2px black;
+    -webkit-transition:-webkit-box-shadow 0.25s ease-in;
+    -moz-transition:-moz-box-shadow 0.25s ease-in;
+    transition:box-shadow 0.25s ease-in;
+  }
+
+  ._jsPlumb_source_hover, ._jsPlumb_target_hover, .dragHover {
+    background-color:#1e8151;
+    background-image: none;
+    color:white;
+  }
+
+  path {
+    cursor:pointer;
+  }
+}
\ No newline at end of file

dream/platform/src2/dream/production_line.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Edit table</title>
+    <script src="<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+
+    <script src="document_page_mixin.js" type="text/javascript"></script>
+    <script src="production_line.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div data-gadget-url="../jsplumb/index.html"
+         data-gadget-scope="productionline"></div>
+  </body>
+</html>

dream/platform/src2/dream/production_line.js

+/*global console, rJS, RSVP, initDocumentPageMixin */
+(function(window, rJS, RSVP, initDocumentPageMixin) {
+    "use strict";
+    var gadget_klass = rJS(window);
+    initDocumentPageMixin(gadget_klass);
+    gadget_klass.ready(function(g) {
+        g.props = {};
+    }).ready(function(g) {
+        return g.getElement().push(function(element) {
+            g.props.element = element;
+        });
+    }).declareAcquiredMethod("aq_getAttachment", "jio_getAttachment").declareMethod("render", function(options) {
+        var jio_key = options.id, gadget = this;
+        gadget.props.jio_key = jio_key;
+      return new RSVP.Queue().push(function() {
+            return RSVP.all([ gadget.aq_getAttachment({
+                _id: jio_key,
+                _attachment: "body.json"
+            }), gadget.getDeclaredGadget("productionline") ]);
+        }).push(function(result_list) {
+            return result_list[1].render(result_list[0]);
+        });
+    }).declareMethod("startService", function() {
+        return this.getDeclaredGadget("productionline").push(function(productionline) {
+            return productionline.startService();
+        });
+    });
+})(window, rJS, RSVP, initDocumentPageMixin);
\ No newline at end of file

dream/platform/src2/jsplumb/index.html

+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="<%= curl.jqueryuicss.relative_dest %>">
+    
+    <script src="curl.jquery.relative_dest %>"></script>
+    <script src="curl.jqueryuijs.relative_dest %>"></script>
+    <script src="copy.rsvp.relative_dest %>"></script>
+    <script src="copy.renderjs.relative_dest %>"></script>
+    <script src="copy.handlebars.relative_dest %>"></script>
+    <script src="curl.jsplumbjs.relative_dest %>"></script>
+
+    <script src="jsplumb.js"></script>
+  </head>
+  <body>
+    <div id="main"></div>
+    <div class="dummy_window"></div>
+  </body>
+</html>

dream/platform/src2/jsplumb/jsplumb.css

+/* /\* body { *\/ */
+/* /\*   padding:0; *\/ */
+/* /\*   margin:0; *\/ */
+/* /\*   background-color:white; *\/ */
+/* /\*   font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; *\/ */
+/* /\*   text-align:center; *\/ */
+/* /\* } *\/ */
+
+/* /\* #headerWrapper { *\/ */
+/* /\*   display:none; *\/ */
+/* /\*   width:100%; *\/ */
+/* /\*   background-color:black; *\/ */
+/* /\*   position:fixed; *\/ */
+/* /\*   top:0; *\/ */
+/* /\*   left:0; *\/ */
+/* /\*   height:44px; *\/ */
+/* /\*   padding:0; *\/ */
+/* /\*   border-bottom:1px solid #999; *\/ */
+/* /\*   box-shadow: 0px 2px 19px #aaa; *\/ */
+/* /\*   -o-box-shadow: 0px 2px 19px #aaa; *\/ */
+/* /\*   -webkit-box-shadow: 0px 2px 19px #aaa; *\/ */
+/* /\*   -moz-box-shadow: 0px 2px 19px #aaa; *\/ */
+/* /\*   opacity:0.8; *\/ */
+/* /\* } *\/ */
+
+/* #intro { */
+/*   margin-top:59px; */
+/* } */
+
+#main {
+  /* these two margins settings are here just to ensure that jsPlumb handles
+    margins properly.*/
+  position: relative;
+  margin:20px auto;
+  font-size: 80%;
+  border: 1px solid #999;
+  width: 100%;
+  height: 600px;
+  overflow: hidden;
+  border-radius: 10px;
+  background-color:#eaedef;
+  text-align: center;
+}
+
+/* /\* Setting for dialog *\/ */
+
+/* label, input { */
+/*   display:block; */
+/* } */
+
+/* input.text, select { */
+/*   margin:4px; */
+/*   padding:0; */
+/*   width:95%; */
+/* } */
+
+/* fieldset { */
+/*   padding:0; */
+/*   border:0; */
+/*   margin-top:25px; */
+/* } */
+
+h1 {
+  font-size: 1.2em;
+  margin: .6em 0;
+}
+
+/* div#users-contain { */
+/*   width: 350px; */
+/*   margin: 20px 0; */
+/* } */
+
+/* div#users-contain table { */
+/*   margin: 1em 0; */
+/*   border-collapse: collapse; */
+/*   width: 100%; */
+/* } */
+
+/* div#users-contain table td, div#users-contain table th { */
+/*   border: 1px solid #eee; */
+/*   padding: .6em 10px; */
+/*   text-align: left; */
+/* } */
+
+/* .ui-dialog .ui-state-error { */
+/*   padding: .3em; */
+/* } */
+
+/* .validateTips { */
+/*   border: 1px solid transparent; */
+/*   padding: 0.3em; */
+/* } */
+
+/* /\* End of dialog setting *\/ */
+
+/* #main li { */
+/*   margin: 3px; */
+/*   /\*padding: 1px;*\/ */
+/*   /\*text-align: -webkit-match-parent;*\/ */
+/*   background: #e6e6e6; */
+/*   border: 1px solid #d3d3d3; */
+/*   list-style-type: none; */
+/*   width: 120px; */
+/* } */
+
+/* #sidebar { */
+/*   font-size:13px; */
+/* } */
+
+/* /\* demo elements *\/ */
+
+/* .menu, #explanation { */
+/*   background-color:#fff; */
+/* } */
+
+/* .menu { */
+/*   height: 15px; */
+/*   float:right; */
+/*   padding-top:1em; */
+/*   padding-bottom:0.4em; */
+/*   background-color: transparent; */
+/*   margin-right:30px; */
+/* } */
+
+/* .otherLibraries { */
+/*   display:inline; */
+/* } */
+
+/* a, a:visited { */
+/*   text-decoration:none; */
+/*   color:#01a3c6; */
+/*   font-family:helvetica; */
+/*   padding:0.3em; */
+/*   border-radius:0.2em; */
+/* } */
+
+/* a:hover { */
+/*   color:#1b911b; */
+/* } */
+
+.selected {
+  color:rgb(189, 11, 11) !important;
+}
+
+.window, .label {
+  background-color:white;
+  text-align:center;
+  z-index:23;
+  cursor:pointer;
+  box-shadow: 2px 2px 19px #aaa;
+  -o-box-shadow: 2px 2px 19px #aaa;
+  -webkit-box-shadow: 2px 2px 19px #aaa;
+  -moz-box-shadow: 2px 2px 19px #aaa;
+}
+
+path, ._jsPlumb_endpoint {
+  cursor:pointer;
+}
+
+._jsPlumb_endpoint_drop_allowed {
+  border: 4px solid #123456;
+  box-shadow: 6px 6px 19px #444;
+  -o-box-shadow: 6px 6px 19px #444;
+  -webkit-box-shadow: 6px 6px 19px #444;
+  -moz-box-shadow: 6px 6px 19px #444;
+}
+
+/* z index stuff */
+
+._jsPlumb_connector {
+  z-index:18;
+}
+
+._jsPlumb_endpoint {
+  z-index:19;
+}
+
+._jsPlumb_overlay {
+  z-index:23;
+}
+
+._jsPlumb_connector._jsPlumb_hover {
+  z-index:21 !important;
+}
+
+._jsPlumb_endpoint._jsPlumb_hover {
+  z-index:22 !important;
+}
+
+._jsPlumb_overlay {
+  border:1px solid #346789;
+  opacity:0.8;
+  filter:alpha(opacity=80);
+  background-color:white;
+  color:black;
+  font-family:helvetica;
+  padding:0.5em;
+}
+
+/* /\* DREAM specific css *\/ */
+
+/* #available { */
+/*   position: absolute; */
+/*   width: 200px; */
+/*   height: 200px; */
+/*   border: 2px solid; */
+/*   margin-top: 350px; */
+/*   margin-left: 150px; */
+/*   border-radius: 10px; */
+/* } */
+
+/* #tools { */
+/*   /\*  position: absolute; */
+/*   width: 200px; */
+/*   height: 400px; *\/ */
+/*   width: 100%; */
+/*   border: 1px solid #999; */
+/*   margin: 20px 0; */
+/*   border-radius: 10px; */
+/*   padding-bottom: 20px; */
+/* } */
+
+/* #tools-container { */
+/*   margin-bottom: 4px; */
+/* } */
+
+/* #simulation_controls { */
+/*   /\*  position: absolute; */
+/*   width: 200px; */
+/*   height: 300px; */
+/*   margin-top: 550px; */
+/*   margin-left: 35px; */
+/*   font-size:13px; *\/ */
+/*   width: 100%; */
+/*   border: 1px solid #999; */
+/*   border-radius: 10px; */
+/* } */
+
+/* .tool { */
+/*   border: 1px solid lightgray; */
+/*   box-shadow: 1px 1px 2px #aaa; */
+/*   /\*margin-top: 20px; */
+/*   margin-left: 35px;*\/ */
+/*   min-width:7em; */
+/*   height:2em; */
+/*   z-index: 10001; */
+/*   color: gray; */
+/*   font-family:serif; */
+/*   font-style:italic; */
+/*   padding-top:0.9em; */
+/*   font-size:0.9em; */
+/*   margin:0.5em; */
+/*   display: inline-block; */
+/*   border-radius: 5px; */
+/* } */
+
+/* #graph { */
+/*   width: 70%; */
+/*   height: 250px; */
+/*   text-align: center; */
+/*   margin-left:auto; */
+/*   margin-right:auto; */
+/*   padding-top:2px; */
+/*   margin-top:0px; */
+/* } */
+
+/* #queue_stat_graph { */
+/*   width: 70%; */
+/*   height: 250px; */
+/*   text-align: center; */
+/*   margin-left:auto; */
+/*   margin-right:auto; */
+/*   padding-top:2px; */
+/*   margin-top:0px; */
+/* } */
+
+/* #tools .ui-button { */
+/*   width:80%; */
+/*   margin:4px 0; */
+/* } */
+
+.Dream-Source, .Dream-BatchSource {
+  border: 1px solid #bbc;
+  background-color:#ffe;
+  background-image: linear-gradient(to bottom, #ffe 0%, #dde 100%);
+}
+
+.Dream-Machine, .Dream-MachineJobShop, .Dream-BatchScrapMachine, .Dream-MachineManagedJob, .Dream-MouldAssembly {
+  border: 1px solid #cbc;
+  background-color: #fef;
+  background-image: linear-gradient(to bottom, #fef 0%, #ede 100%);
+}
+
+.Dream-Queue, .Dream-QueueJobShop, .Dream-LineClearance, .Dream-QueueManagedJob, .Dream-ConditionalBuffer, .Dream-OrderDecomposition, .Dream-MouldAssemblyBuffer {
+  border: 1px solid #bcc;
+  background-color:#eff;
+  background-image: linear-gradient(to bottom, #eff 0%, #dee 100%);
+}
+
+.Dream-Exit, .Dream-ExitJobShop {
+  border: 1px solid #ccb;
+  background-color:#eef;
+  background-image: linear-gradient(to bottom, #eef 0%, #dde 100%);
+}
+
+.Dream-EventGenerator {
+  border: 1px solid #cba;
+  background-color:#fdc;
+  background-image: linear-gradient(to bottom, #fdc 0%, #ecb 100%);
+}
+
+.Dream-BatchDecomposition, .Dream-BatchDecompositionStartTime, .Dream-BatchReassembly {
+  border: 1px solid #bcb;
+  background-color:#dfd;
+  background-image: linear-gradient(to bottom, #dfd 0%, #cec 100%);
+}
+
+.Dream-Repairman {
+  border: 1px solid #cbb;
+  background-color:#fdd;
+  background-image: linear-gradient(to bottom, #fdd 0%, #dcc 100%);
+}
+
+/* #exit_stat { */
+/*   display: inline-block; */
+/* } */
+
+/* #exit_stat table, #exit_stat td { */
+/* border: 1px solid black; */
+/* } */
+
+.window, .dummy_window {
+  border:1px solid lightgray;
+  width:100px;
+  height:64px;
+  position:absolute;
+  color:black;
+  font-family:serif;
+  font-style:italic;
+  padding-top:0.9em;
+  font-size:0.9em;
+  cursor:move;
+  font-size:11px;
+  -webkit-transition:background-color 0.1s ease-in;
+  -moz-transition:background-color 0.1s ease-in;
+  transition:background-color 0.1s ease-in;
+  border-radius: 5px;
+}
+
+.window:hover {
+  background-color: #5c96bc;
+  background-image: none;
+  color:white;
+}
+
+.dummy_window {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+}
+
+/* #debug_json textarea { */
+/*   width:95%; */
+/* } */
+
+/* #error{ */
+/*   text-align: left; */
+/* } */
+
+.ep {
+  position:absolute;
+  bottom:37%;
+  right:5px;
+  width:1em;
+  height:1em;
+  background-color:orange;
+  cursor:pointer;
+  box-shadow: 0px 0px 2px black;
+  -webkit-transition:-webkit-box-shadow 0.25s ease-in;
+  -moz-transition:-moz-box-shadow 0.25s ease-in;
+  transition:box-shadow 0.25s ease-in;
+}
+
+._jsPlumb_source_hover, ._jsPlumb_target_hover, .dragHover {
+  background-color:#1e8151;
+  background-image: none;
+  color:white;
+}
+
+path {
+  cursor:pointer;
+}
+
+/* #spreadsheet_output { */
+/*   margin: 20px 0; */
+/* } */
+
+/* #gantt_output { */
+/*   height: 400px; */
+/*   margin: 20px 0; */
+/* } */
+
+/* .sub_task { */
+/*   background-color: #3DD388; */
+/*   border-color: #28B06C; */
+/* } */
+
+/* li.result { */
+/*   width: 100%; */
+/*   text-align: left; */
+/*   cursor:pointer; */
+/* } */
+
+/* li.result.active { */
+/*   background:#fcc; */
+/* } */

dream/platform/static/jsplumb/jsplumb.css

+body {
+  padding:0;
+  margin:0;
+  background-color:white;
+  font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  text-align:center;
+}
+
+#headerWrapper {
+  display:none;
+  width:100%;
+  background-color:black;
+  position:fixed;
+  top:0;
+  left:0;
+  height:44px;
+  padding:0;
+  border-bottom:1px solid #999;
+  box-shadow: 0px 2px 19px #aaa;
+  -o-box-shadow: 0px 2px 19px #aaa;
+  -webkit-box-shadow: 0px 2px 19px #aaa;
+  -moz-box-shadow: 0px 2px 19px #aaa;
+  opacity:0.8;
+}
+
+#intro {
+  margin-top:59px;
+}
+
+#main {
+  /* these two margins settings are here just to ensure that jsPlumb handles
+    margins properly.*/
+  position: relative;
+  margin:20px auto;
+  font-size: 80%;
+  border: 1px solid #999;
+  width: 100%;
+  height: 600px;
+  overflow: hidden;
+  border-radius: 10px;
+  background-color:#eaedef;
+  text-align: center;
+}
+
+/* Setting for dialog */
+
+label, input {
+  display:block;
+}
+
+input.text, select {
+  margin:4px;
+  padding:0;
+  width:95%;
+}
+
+fieldset {
+  padding:0;
+  border:0;
+  margin-top:25px;
+}
+
+h1 {
+  font-size: 1.2em;
+  margin: .6em 0;
+}
+
+div#users-contain {
+  width: 350px;
+  margin: 20px 0;
+}
+
+div#users-contain table {
+  margin: 1em 0;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+div#users-contain table td, div#users-contain table th {
+  border: 1px solid #eee;
+  padding: .6em 10px;
+  text-align: left;
+}
+
+.ui-dialog .ui-state-error {
+  padding: .3em;
+}
+
+.validateTips {
+  border: 1px solid transparent;
+  padding: 0.3em;
+}
+
+/* End of dialog setting */
+
+li {
+  margin: 3px;
+  /*padding: 1px;*/
+  /*text-align: -webkit-match-parent;*/
+  background: #e6e6e6;
+  border: 1px solid #d3d3d3;
+  list-style-type: none;
+  width: 120px;
+}
+
+#sidebar {
+  font-size:13px;
+}
+
+/* demo elements */
+
+.menu, #explanation {
+  background-color:#fff;
+}
+
+.menu {
+  height: 15px;
+  float:right;
+  padding-top:1em;
+  padding-bottom:0.4em;
+  background-color: transparent;
+  margin-right:30px;
+}
+
+.otherLibraries {
+  display:inline;
+}
+
+a, a:visited {
+  text-decoration:none;
+  color:#01a3c6;
+  font-family:helvetica;
+  padding:0.3em;
+  border-radius:0.2em;
+}
+
+a:hover {
+  color:#1b911b;
+}
+
+.selected {
+  color:rgb(189, 11, 11) !important;
+}
+
+.window, .label {
+  background-color:white;
+  text-align:center;
+  z-index:23;
+  cursor:pointer;
+  box-shadow: 2px 2px 19px #aaa;
+  -o-box-shadow: 2px 2px 19px #aaa;
+  -webkit-box-shadow: 2px 2px 19px #aaa;
+  -moz-box-shadow: 2px 2px 19px #aaa;
+}
+
+path, ._jsPlumb_endpoint {
+  cursor:pointer;
+}
+
+._jsPlumb_endpoint_drop_allowed {
+  border: 4px solid #123456;
+  box-shadow: 6px 6px 19px #444;
+  -o-box-shadow: 6px 6px 19px #444;
+  -webkit-box-shadow: 6px 6px 19px #444;
+  -moz-box-shadow: 6px 6px 19px #444;
+}
+
+/* z index stuff */
+
+._jsPlumb_connector {
+  z-index:18;
+}
+
+._jsPlumb_endpoint {
+  z-index:19;
+}
+
+._jsPlumb_overlay {
+  z-index:23;
+}
+
+._jsPlumb_connector._jsPlumb_hover {
+  z-index:21 !important;
+}
+
+._jsPlumb_endpoint._jsPlumb_hover {
+  z-index:22 !important;
+}
+
+._jsPlumb_overlay {
+  border:1px solid #346789;
+  opacity:0.8;
+  filter:alpha(opacity=80);
+  background-color:white;
+  color:black;
+  font-family:helvetica;
+  padding:0.5em;
+}
+
+/* DREAM specific css */
+
+#available {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  border: 2px solid;
+  margin-top: 350px;
+  margin-left: 150px;
+  border-radius: 10px;
+}
+
+#tools {
+  /*  position: absolute;
+  width: 200px;
+  height: 400px; */
+  width: 100%;
+  border: 1px solid #999;
+  margin: 20px 0;
+  border-radius: 10px;
+  padding-bottom: 20px;
+}
+
+#tools-container {
+  margin-bottom: 4px;
+}
+
+#simulation_controls {
+  /*  position: absolute;
+  width: 200px;
+  height: 300px;
+  margin-top: 550px;
+  margin-left: 35px;
+  font-size:13px; */
+  width: 100%;
+  border: 1px solid #999;
+  border-radius: 10px;
+}
+
+.tool {
+  border: 1px solid lightgray;
+  box-shadow: 1px 1px 2px #aaa;
+  /*margin-top: 20px;
+  margin-left: 35px;*/
+  min-width:7em;
+  height:2em;
+  z-index: 10001;
+  color: gray;
+  font-family:serif;
+  font-style:italic;
+  padding-top:0.9em;
+  font-size:0.9em;
+  margin:0.5em;
+  display: inline-block;
+  border-radius: 5px;
+}
+
+#graph {
+  width: 70%;
+  height: 250px;
+  text-align: center;
+  margin-left:auto;
+  margin-right:auto;
+  padding-top:2px;
+  margin-top:0px;
+}
+
+#queue_stat_graph {
+  width: 70%;
+  height: 250px;
+  text-align: center;
+  margin-left:auto;
+  margin-right:auto;
+  padding-top:2px;
+  margin-top:0px;
+}
+
+#tools .ui-button {
+  width:80%;
+  margin:4px 0;
+}
+
+.Dream-Source, .Dream-BatchSource {
+  border: 1px solid #bbc;
+  background-color:#ffe;
+  background-image: linear-gradient(to bottom, #ffe 0%, #dde 100%);
+}
+
+.Dream-Machine, .Dream-MachineJobShop, .Dream-BatchScrapMachine, .Dream-MachineManagedJob, .Dream-MouldAssembly {
+  border: 1px solid #cbc;
+  background-color: #fef;
+  background-image: linear-gradient(to bottom, #fef 0%, #ede 100%);
+}
+
+.Dream-Queue, .Dream-QueueJobShop, .Dream-LineClearance, .Dream-QueueManagedJob, .Dream-ConditionalBuffer, .Dream-OrderDecomposition, .Dream-MouldAssemblyBuffer {
+  border: 1px solid #bcc;
+  background-color:#eff;
+  background-image: linear-gradient(to bottom, #eff 0%, #dee 100%);
+}
+
+.Dream-Exit, .Dream-ExitJobShop {
+  border: 1px solid #ccb;
+  background-color:#eef;
+  background-image: linear-gradient(to bottom, #eef 0%, #dde 100%);
+}
+
+.Dream-EventGenerator {
+  border: 1px solid #cba;
+  background-color:#fdc;
+  background-image: linear-gradient(to bottom, #fdc 0%, #ecb 100%);
+}
+
+.Dream-BatchDecomposition, .Dream-BatchDecompositionStartTime, .Dream-BatchReassembly {
+  border: 1px solid #bcb;
+  background-color:#dfd;
+  background-image: linear-gradient(to bottom, #dfd 0%, #cec 100%);
+}
+
+.Dream-Repairman {
+  border: 1px solid #cbb;
+  background-color:#fdd;
+  background-image: linear-gradient(to bottom, #fdd 0%, #dcc 100%);
+}
+
+#exit_stat {
+  display: inline-block;
+}
+
+#exit_stat table, #exit_stat td {
+border: 1px solid black;
+}
+
+.window, .dummy_window {
+  border:1px solid lightgray;
+  width:100px;
+  height:64px;
+  position:absolute;
+  color:black;
+  font-family:serif;
+  font-style:italic;
+  padding-top:0.9em;
+  font-size:0.9em;
+  cursor:move;
+  font-size:11px;
+  -webkit-transition:background-color 0.1s ease-in;
+  -moz-transition:background-color 0.1s ease-in;
+  transition:background-color 0.1s ease-in;
+  border-radius: 5px;
+}
+
+.window:hover {
+  background-color: #5c96bc;
+  background-image: none;
+  color:white;
+}
+
+.dummy_window {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+}
+
+#debug_json textarea {
+  width:95%;
+}
+
+#error{
+  text-align: left;
+}
+
+.ep {
+  position:absolute;
+  bottom:37%;
+  right:5px;
+  width:1em;
+  height:1em;
+  background-color:orange;
+  cursor:pointer;
+  box-shadow: 0px 0px 2px black;
+  -webkit-transition:-webkit-box-shadow 0.25s ease-in;
+  -moz-transition:-moz-box-shadow 0.25s ease-in;
+  transition:box-shadow 0.25s ease-in;
+}
+
+._jsPlumb_source_hover, ._jsPlumb_target_hover, .dragHover {
+  background-color:#1e8151;
+  background-image: none;
+  color:white;
+}
+
+path {
+  cursor:pointer;
+}
+
+#spreadsheet_output {
+  margin: 20px 0;
+}
+
+#gantt_output {
+  height: 400px;
+  margin: 20px 0;
+}
+
+.sub_task {
+  background-color: #3DD388;
+  border-color: #28B06C;
+}
+
+li.result {
+  width: 100%;
+  text-align: left;
+  cursor:pointer;
+}
+
+li.result.active {
+  background:#fcc;
+}