midas 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. data/.bundle/config +2 -0
  2. data/.document +5 -0
  3. data/.gitignore +32 -0
  4. data/Gemfile +12 -0
  5. data/LICENSE +20 -0
  6. data/README.textile +21 -0
  7. data/Rakefile +84 -0
  8. data/VERSION +1 -0
  9. data/features/step_definitions/editor_steps.rb +16 -0
  10. data/features/step_definitions/web_steps.rb +205 -0
  11. data/features/support/env.rb +39 -0
  12. data/features/support/paths.rb +29 -0
  13. data/features/view_editor.feature +8 -0
  14. data/generators/midas/midas_generator.rb +1 -0
  15. data/lib/midas.rb +1 -0
  16. data/midas.gemspec +131 -0
  17. data/public/images/midas/toolbars/actions/_background.png +0 -0
  18. data/public/images/midas/toolbars/actions/_background_radio.png +0 -0
  19. data/public/images/midas/toolbars/actions/_separator.png +0 -0
  20. data/public/images/midas/toolbars/actions/extra/prefspane.png +0 -0
  21. data/public/images/midas/toolbars/actions/extra/todospane.png +0 -0
  22. data/public/images/midas/toolbars/actions/historypanel.png +0 -0
  23. data/public/images/midas/toolbars/actions/insertcharacter.png +0 -0
  24. data/public/images/midas/toolbars/actions/insertlink.png +0 -0
  25. data/public/images/midas/toolbars/actions/insertmedia.png +0 -0
  26. data/public/images/midas/toolbars/actions/insertobject.png +0 -0
  27. data/public/images/midas/toolbars/actions/inserttable.png +0 -0
  28. data/public/images/midas/toolbars/actions/inspectorpanel.png +0 -0
  29. data/public/images/midas/toolbars/actions/notespanel.png +0 -0
  30. data/public/images/midas/toolbars/actions/preview.png +0 -0
  31. data/public/images/midas/toolbars/actions/redo.png +0 -0
  32. data/public/images/midas/toolbars/actions/save.png +0 -0
  33. data/public/images/midas/toolbars/actions/undo.png +0 -0
  34. data/public/images/midas/toolbars/htmleditor/_background.png +0 -0
  35. data/public/images/midas/toolbars/htmleditor/_line_separator.png +0 -0
  36. data/public/images/midas/toolbars/htmleditor/_separator.png +0 -0
  37. data/public/images/midas/toolbars/htmleditor/buttons.png +0 -0
  38. data/public/javascripts/midas/config.js +181 -0
  39. data/public/javascripts/midas/dialog.js +9 -0
  40. data/public/javascripts/midas/midas.js +307 -0
  41. data/public/javascripts/midas/native_extensions.js +43 -0
  42. data/public/javascripts/midas/palette.js +108 -0
  43. data/public/javascripts/midas/region.js +194 -0
  44. data/public/javascripts/midas/statusbar.js +84 -0
  45. data/public/javascripts/midas/toolbar.js +255 -0
  46. data/public/javascripts/prototype.js +6001 -0
  47. data/public/midas/backcolor.html +97 -0
  48. data/public/midas/examples/bundled.html +60 -0
  49. data/public/midas/examples/iframe.html +73 -0
  50. data/public/midas/examples/index.html +73 -0
  51. data/public/midas/examples/javascript_archive.js +111 -0
  52. data/public/midas/forecolor.html +97 -0
  53. data/public/stylesheets/midas/dialog.css +2 -0
  54. data/public/stylesheets/midas/midas.css +9 -0
  55. data/public/stylesheets/midas/palette.css +50 -0
  56. data/public/stylesheets/midas/region.css +16 -0
  57. data/public/stylesheets/midas/statusbar.css +17 -0
  58. data/public/stylesheets/midas/toolbar.css +262 -0
  59. data/rails/init.rb +1 -0
  60. data/spec/javascripts/dialog_spec.js +7 -0
  61. data/spec/javascripts/fixtures/midas_fixture.html +27 -0
  62. data/spec/javascripts/fixtures/midas_styles.css +14 -0
  63. data/spec/javascripts/fixtures/native_extensions_fixture.html +5 -0
  64. data/spec/javascripts/helpers/browser_detection.js +15 -0
  65. data/spec/javascripts/helpers/event_simulation.js +505 -0
  66. data/spec/javascripts/helpers/spec_helper.js +125 -0
  67. data/spec/javascripts/midas_spec.js +284 -0
  68. data/spec/javascripts/native_extensions_spec.js +39 -0
  69. data/spec/javascripts/palette_spec.js +59 -0
  70. data/spec/javascripts/region_spec.js +441 -0
  71. data/spec/javascripts/statusbar_spec.js +61 -0
  72. data/spec/javascripts/support/jasmine.yml +82 -0
  73. data/spec/javascripts/support/jasmine_config.rb +39 -0
  74. data/spec/javascripts/support/jasmine_runner.rb +19 -0
  75. data/spec/javascripts/toolbar_spec.js +149 -0
  76. data/spec/ruby/helpers/spec_helper.rb +9 -0
  77. data/spec/ruby/midas_spec.rb +9 -0
  78. data/spec/spec.opts +1 -0
  79. data/tasks/midas_tasks.rake +105 -0
  80. metadata +166 -0
data/public/midas/backcolor.html ADDED
@@ -0,0 +1,97 @@
1
+ <script type="text/javascript">
2
+ window['setup_backcolor'] = function() {
3
+ $('midas_backcolor_selector').select('div').each(function(div) {
4
+ Event.observe(div, 'click', function(event) {
5
+ event.stop();
6
+
7
+ var color = div.getStyle('background-color');
8
+
9
+ $('midas_backcolor_last_picked').setStyle('background-color:' + color);
10
+
11
+ this.button.setStyle('background-color:' + color);
12
+ this.execute('backcolor', {value: color.toHex()}, event);
13
+ }.bind(this));
14
+ }.bind(this));
15
+ }
16
+ </script>
17
+
18
+ <div id="midas_backcolor_selector" class="midas-palette-content">
19
+ <div style="background:#FFFFFF"></div>
20
+ <div style="background:#FFCCCC"></div>
21
+ <div style="background:#FFCC99"></div>
22
+ <div style="background:#FFFF99"></div>
23
+ <div style="background:#FFFFCC"></div>
24
+ <div style="background:#99FF99"></div>
25
+ <div style="background:#99FFFF"></div>
26
+ <div style="background:#CCFFFF"></div>
27
+ <div style="background:#CCCCFF"></div>
28
+ <div style="background:#FFCCFF"></div>
29
+
30
+ <div style="background:#CCCCCC"></div>
31
+ <div style="background:#FF6666"></div>
32
+ <div style="background:#FF9966"></div>
33
+ <div style="background:#FFFF66"></div>
34
+ <div style="background:#FFFF33"></div>
35
+ <div style="background:#66FF99"></div>
36
+ <div style="background:#33FFFF"></div>
37
+ <div style="background:#66FFFF"></div>
38
+ <div style="background:#9999FF"></div>
39
+ <div style="background:#FF99FF"></div>
40
+
41
+ <div style="background:#C0C0C0"></div>
42
+ <div style="background:#FF0000"></div>
43
+ <div style="background:#FF9900"></div>
44
+ <div style="background:#FFCC66"></div>
45
+ <div style="background:#FFFF00"></div>
46
+ <div style="background:#33FF33"></div>
47
+ <div style="background:#66CCCC"></div>
48
+ <div style="background:#33CCFF"></div>
49
+ <div style="background:#6666CC"></div>
50
+ <div style="background:#CC66CC"></div>
51
+
52
+ <div style="background:#999999"></div>
53
+ <div style="background:#CC0000"></div>
54
+ <div style="background:#FF6600"></div>
55
+ <div style="background:#FFCC33"></div>
56
+ <div style="background:#FFCC00"></div>
57
+ <div style="background:#33CC00"></div>
58
+ <div style="background:#00CCCC"></div>
59
+ <div style="background:#3366FF"></div>
60
+ <div style="background:#6633FF"></div>
61
+ <div style="background:#CC33CC"></div>
62
+
63
+ <div style="background:#666666"></div>
64
+ <div style="background:#990000"></div>
65
+ <div style="background:#CC6600"></div>
66
+ <div style="background:#CC9933"></div>
67
+ <div style="background:#999900"></div>
68
+ <div style="background:#009900"></div>
69
+ <div style="background:#339999"></div>
70
+ <div style="background:#3333FF"></div>
71
+ <div style="background:#6600CC"></div>
72
+ <div style="background:#993399"></div>
73
+
74
+ <div style="background:#333333"></div>
75
+ <div style="background:#660000"></div>
76
+ <div style="background:#993300"></div>
77
+ <div style="background:#996633"></div>
78
+ <div style="background:#666600"></div>
79
+ <div style="background:#006600"></div>
80
+ <div style="background:#336666"></div>
81
+ <div style="background:#000099"></div>
82
+ <div style="background:#333399"></div>
83
+ <div style="background:#663366"></div>
84
+
85
+ <div style="background:#000000"></div>
86
+ <div style="background:#330000"></div>
87
+ <div style="background:#663300"></div>
88
+ <div style="background:#663333"></div>
89
+ <div style="background:#333300"></div>
90
+ <div style="background:#003300"></div>
91
+ <div style="background:#003333"></div>
92
+ <div style="background:#000066"></div>
93
+ <div style="background:#330099"></div>
94
+ <div style="background:#330033"></div>
95
+
96
+ <div id="midas_backcolor_last_picked">Last&nbsp;Color&nbsp;Picked</div>
97
+ </div>
data/public/midas/examples/bundled.html ADDED
@@ -0,0 +1,60 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
+ <html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
3
+ <head>
4
+ <title>Midas Integration</title>
5
+ <meta content='text/html; charset=UTF-8' http-equiv='content-type' />
6
+ <meta content='en' http-equiv='content-language' />
7
+ <meta content='no' http-equiv='imagetoolbar' />
8
+
9
+ <script src="/javascripts/prototype.js" type="text/javascript"></script>
10
+ <script src="/javascripts/midas.min.js" type="text/javascript"></script>
11
+ <link href="/stylesheets/midas.bundle.css" rel="stylesheet"/>
12
+
13
+ <style type="text/css">
14
+ .editable {
15
+ width: 200px;
16
+ height: 200px;
17
+ float: left;
18
+ }
19
+ #toolbar {
20
+ height: 100px;
21
+ }
22
+ </style>
23
+ </head>
24
+ <body onload="Midas.debugMode = true; var midas = new Midas({}, {appendTo: 'toolbar'});">
25
+
26
+ <div id="toolbar"></div>
27
+
28
+ <h3>If this example didn't load, you need to run rake midas:build to get the bundled and minified files first.</h3>
29
+
30
+ <div id="region1" class="editable">
31
+ Lorem Ip<span>s</span>um....<img src="/images/midas/toolbars/actions/save.png" align="right">
32
+ <div style="border:1px solid green">te<span>s</span>ting</div>
33
+ <table>
34
+ <thead>
35
+ <tr>
36
+ <th>th1</th>
37
+ <th>th2</th>
38
+ </tr>
39
+ </thead>
40
+ <tbody>
41
+ <tr>
42
+ <td>tr1td1</td>
43
+ <td>tr1td2</td>
44
+ </tr>
45
+ <tr>
46
+ <td>tr2td1</td>
47
+ <td>tr2td2</td>
48
+ </tr>
49
+ </tbody>
50
+ </table>
51
+ </div>
52
+
53
+ <div id="region2" class="editable">
54
+ </div>
55
+
56
+
57
+ <strong>this <em>is</em> a test</strong><br/><a href="http://cnn.com">cnn.com</a>
58
+
59
+ </body>
60
+ </html>
data/public/midas/examples/iframe.html ADDED
@@ -0,0 +1,73 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
+ <html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
3
+ <head>
4
+ <title>Midas Integration</title>
5
+ <meta content='text/html; charset=UTF-8' http-equiv='content-type' />
6
+ <meta content='en' http-equiv='content-language' />
7
+ <meta content='no' http-equiv='imagetoolbar' />
8
+
9
+ <script src="/javascripts/prototype.js" type="text/javascript"></script>
10
+
11
+ <script src="/javascripts/midas/native_extensions.js" type="text/javascript"></script>
12
+ <script src="/javascripts/midas/midas.js" type="text/javascript"></script>
13
+ <script src="/javascripts/midas/region.js" type="text/javascript"></script>
14
+ <script src="/javascripts/midas/toolbar.js" type="text/javascript"></script>
15
+ <script src="/javascripts/midas/statusbar.js" type="text/javascript"></script>
16
+ <script src="/javascripts/midas/dialog.js" type="text/javascript"></script>
17
+ <script src="/javascripts/midas/palette.js" type="text/javascript"></script>
18
+ <script src="/javascripts/midas/config.js" type="text/javascript"></script>
19
+
20
+ <link href="/stylesheets/midas/midas.css" rel="stylesheet"/>
21
+ <link href="/stylesheets/midas/region.css" rel="stylesheet"/>
22
+ <link href="/stylesheets/midas/toolbar.css" rel="stylesheet"/>
23
+ <link href="/stylesheets/midas/statusbar.css" rel="stylesheet"/>
24
+ <link href="/stylesheets/midas/dialog.css" rel="stylesheet"/>
25
+ <link href="/stylesheets/midas/palette.css" rel="stylesheet"/>
26
+
27
+ <style type="text/css">
28
+ .editable {
29
+ width: 200px;
30
+ height: 200px;
31
+ float: left;
32
+ }
33
+ #toolbar {
34
+ height: 86px;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body onload="Midas.debugMode = true; var midas = new Midas({useIframe: true}, {appendTo: 'toolbar'});">
39
+
40
+ <div id="toolbar"></div>
41
+
42
+ <h3></h3>
43
+
44
+ <div id="region1" class="editable">
45
+ Lorem Ip<span>s</span>um....<img src="/images/midas/toolbars/actions/save.png" align="right">
46
+ <div style="border:1px solid green">te<span>s</span>ting</div>
47
+ <table>
48
+ <thead>
49
+ <tr>
50
+ <th>th1</th>
51
+ <th>th2</th>
52
+ </tr>
53
+ </thead>
54
+ <tbody>
55
+ <tr>
56
+ <td>tr1td1</td>
57
+ <td>tr1td2</td>
58
+ </tr>
59
+ <tr>
60
+ <td>tr2td1</td>
61
+ <td>tr2td2</td>
62
+ </tr>
63
+ </tbody>
64
+ </table>
65
+ </div>
66
+
67
+ <div id="region2" class="editable">
68
+ </div>
69
+
70
+ <strong>this <em>is</em> a test</strong><br/><a href="http://cnn.com">cnn.com</a>
71
+
72
+ </body>
73
+ </html>
data/public/midas/examples/index.html ADDED
@@ -0,0 +1,73 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
+ <html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
3
+ <head>
4
+ <title>Midas Integration</title>
5
+ <meta content='text/html; charset=UTF-8' http-equiv='content-type' />
6
+ <meta content='en' http-equiv='content-language' />
7
+ <meta content='no' http-equiv='imagetoolbar' />
8
+
9
+ <script src="/javascripts/prototype.js" type="text/javascript"></script>
10
+
11
+ <script src="/javascripts/midas/native_extensions.js" type="text/javascript"></script>
12
+ <script src="/javascripts/midas/midas.js" type="text/javascript"></script>
13
+ <script src="/javascripts/midas/region.js" type="text/javascript"></script>
14
+ <script src="/javascripts/midas/toolbar.js" type="text/javascript"></script>
15
+ <script src="/javascripts/midas/statusbar.js" type="text/javascript"></script>
16
+ <script src="/javascripts/midas/dialog.js" type="text/javascript"></script>
17
+ <script src="/javascripts/midas/palette.js" type="text/javascript"></script>
18
+ <script src="/javascripts/midas/config.js" type="text/javascript"></script>
19
+
20
+ <link href="/stylesheets/midas/midas.css" rel="stylesheet"/>
21
+ <link href="/stylesheets/midas/region.css" rel="stylesheet"/>
22
+ <link href="/stylesheets/midas/toolbar.css" rel="stylesheet"/>
23
+ <link href="/stylesheets/midas/statusbar.css" rel="stylesheet"/>
24
+ <link href="/stylesheets/midas/dialog.css" rel="stylesheet"/>
25
+ <link href="/stylesheets/midas/palette.css" rel="stylesheet"/>
26
+
27
+ <style type="text/css">
28
+ .editable {
29
+ width: 200px;
30
+ height: 200px;
31
+ float: left;
32
+ }
33
+ #toolbar {
34
+ height: 100px;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body onload="Midas.debugMode = true; var midas = new Midas({}, {appendTo: 'toolbar'});">
39
+
40
+ <div id="toolbar"></div>
41
+
42
+ <h3></h3>
43
+
44
+ <div id="region1" class="editable">
45
+ Lorem Ip<span>s</span>um....<img src="/images/midas/toolbars/actions/save.png" align="right">
46
+ <div style="border:1px solid green">te<span>s</span>ting</div>
47
+ <table>
48
+ <thead>
49
+ <tr>
50
+ <th>th1</th>
51
+ <th>th2</th>
52
+ </tr>
53
+ </thead>
54
+ <tbody>
55
+ <tr>
56
+ <td>tr1td1</td>
57
+ <td>tr1td2</td>
58
+ </tr>
59
+ <tr>
60
+ <td>tr2td1</td>
61
+ <td>tr2td2</td>
62
+ </tr>
63
+ </tbody>
64
+ </table>
65
+ </div>
66
+
67
+ <div id="region2" class="editable">
68
+ </div>
69
+
70
+ <strong>this <em>is</em> a test</strong><br/><a href="http://cnn.com">cnn.com</a>
71
+
72
+ </body>
73
+ </html>
data/public/midas/examples/javascript_archive.js ADDED
@@ -0,0 +1,111 @@
1
+ // getTextNodes: function(fragment, textnodes) {
2
+ // textnodes = textnodes || [];
3
+ // Element.cleanWhitespace(fragment);
4
+ //
5
+ // for (var i = 0; i <= fragment.childNodes.length - 1; ++i) {
6
+ // if (fragment.childNodes[i].nodeType == 3) {
7
+ // textnodes.push(fragment.childNodes[i]);
8
+ // } else {
9
+ // this.getTextNodes(fragment.childNodes[i], textnodes);
10
+ // }
11
+ // }
12
+ // return textnodes;
13
+ // },
14
+ // insertElement: function(callback) {
15
+ // var element = callback.call(this);
16
+ // this.selections.each(function(selection) {
17
+ // selection.deleteContents();
18
+ // selection.insertNode(element);
19
+ // selection.selectNode(element);
20
+ // });
21
+ // },
22
+
23
+ // classname: function(classname) {
24
+ // this.selections.each(function(selection) {
25
+ // var fragment = selection.cloneContents();
26
+ // var textnodes = this.getTextNodes(fragment);
27
+ //
28
+ // console.debug(selection);
29
+ // console.debug(fragment);
30
+ //
31
+ // // get the container node
32
+ // // this should be prototyped on element/range for better testing
33
+ // var container;
34
+ // if (selection.commonAncestorContainer.nodeType == 3) { // common ancestor is a text node
35
+ // container = selection.commonAncestorContainer.parentNode;
36
+ // } else {
37
+ // container = selection.commonAncestorContainer;
38
+ // }
39
+ //
40
+ // console.debug('container', container);
41
+ //
42
+ // console.debug('container', container.childNodes);
43
+ // console.debug('fragment', fragment.childNodes);
44
+ //
45
+ // if (container != this.element) {
46
+ // if (!container.childNodes.equals(fragment.childNodes)) {
47
+ // // the node is not the fragment
48
+ // if (fragment.childNodes.length == 1 && fragment.childNodes[0].nodeType != 3) {
49
+ // // the fragment has one child and it's not a text node
50
+ // console.debug('first node');
51
+ // container = fragment.childNodes[0];
52
+ // selection.deleteContents();
53
+ // selection.insertNode(container);
54
+ // selection.selectNode(container);
55
+ // }
56
+ // }
57
+ // container.addClassName(classname)
58
+ // } else {
59
+ // // the nodes should be wrapped within one span
60
+ // // ... and cleanup should be done
61
+ // console.debug('new');
62
+ // selection.surroundContents(new Element('span', {'class': classname}));
63
+ // }
64
+ //
65
+ // // selecting 's' in 'testing', should be: span
66
+ // // selecting 'testing', should be: div
67
+ // // selecting 'Ipsum...', should be: [region]
68
+ // // selecting 'Ipsum... testing', should be: [region]
69
+ // // selecting everything, should be: [region]
70
+ // // selecting 'tr2td2', should be: td
71
+ // // selecting the table cell containing 'tr2td2', should be: td
72
+ // console.debug('container', container);
73
+ //
74
+ // // bugs:
75
+ // // if you select all of the cells in the table, and click italicize, and then bold.. ugh.
76
+ //
77
+ //
78
+ //
79
+ //
80
+ //// // figure out if we should add or remove
81
+ //// var count = 0;
82
+ //// textnodes.each(function(node) {
83
+ //// if (node.parentNode != fragment && Element.hasClassName(node.parentNode, classname)) count = count + 1;
84
+ //// });
85
+ ////
86
+ //// if (count == 0 || count < textnodes.length - 1) {
87
+ //// // add
88
+ //// textnodes.each(function(node) {
89
+ //// console.debug(node, node.parentNode);
90
+ //// if (node.parentNode != fragment) {
91
+ //// Element.addClassName(node.parentNode, classname);
92
+ //// } else {
93
+ //// Element.wrap(node, new Element('span', {'class': classname}));
94
+ //// }
95
+ //// });
96
+ //// } else {
97
+ //// console.debug('remove');
98
+ //// // remove
99
+ ////
100
+ //// // only remove span tags, if it doesn't have any attributes,
101
+ //// // otherwise remove the classname, and if the class attribute is empty remove that too
102
+ ////
103
+ //// textnodes.each(function(node) {
104
+ //// if (node.parentNode != fragment) {
105
+ //// Element.removeClassName(node.parentNode, classname);
106
+ //// }
107
+ //// });
108
+ //// }
109
+ ////
110
+ // }.bind(this));
111
+ // }
data/public/midas/forecolor.html ADDED
@@ -0,0 +1,97 @@
1
+ <script type="text/javascript">
2
+ window['setup_forecolor'] = function() {
3
+ $('midas_forecolor_selector').select('div').each(function(div) {
4
+ Event.observe(div, 'click', function(event) {
5
+ event.stop();
6
+
7
+ var color = div.getStyle('background-color');
8
+
9
+ $('midas_forecolor_last_picked').setStyle('background-color:' + color);
10
+
11
+ this.button.setStyle('background-color:' + color);
12
+ this.execute('forecolor', {value: color.toHex()}, event);
13
+ }.bind(this));
14
+ }.bind(this));
15
+ }
16
+ </script>
17
+
18
+ <div id="midas_forecolor_selector" class="midas-palette-content">
19
+ <div style="background-color:#FFFFFF"></div>
20
+ <div style="background:#FFCCCC"></div>
21
+ <div style="background:#FFCC99"></div>
22
+ <div style="background:#FFFF99"></div>
23
+ <div style="background:#FFFFCC"></div>
24
+ <div style="background:#99FF99"></div>
25
+ <div style="background:#99FFFF"></div>
26
+ <div style="background:#CCFFFF"></div>
27
+ <div style="background:#CCCCFF"></div>
28
+ <div style="background:#FFCCFF"></div>
29
+
30
+ <div style="background:#CCCCCC"></div>
31
+ <div style="background:#FF6666"></div>
32
+ <div style="background:#FF9966"></div>
33
+ <div style="background:#FFFF66"></div>
34
+ <div style="background:#FFFF33"></div>
35
+ <div style="background:#66FF99"></div>
36
+ <div style="background:#33FFFF"></div>
37
+ <div style="background:#66FFFF"></div>
38
+ <div style="background:#9999FF"></div>
39
+ <div style="background:#FF99FF"></div>
40
+
41
+ <div style="background:#C0C0C0"></div>
42
+ <div style="background:#FF0000"></div>
43
+ <div style="background:#FF9900"></div>
44
+ <div style="background:#FFCC66"></div>
45
+ <div style="background:#FFFF00"></div>
46
+ <div style="background:#33FF33"></div>
47
+ <div style="background:#66CCCC"></div>
48
+ <div style="background:#33CCFF"></div>
49
+ <div style="background:#6666CC"></div>
50
+ <div style="background:#CC66CC"></div>
51
+
52
+ <div style="background:#999999"></div>
53
+ <div style="background:#CC0000"></div>
54
+ <div style="background:#FF6600"></div>
55
+ <div style="background:#FFCC33"></div>
56
+ <div style="background:#FFCC00"></div>
57
+ <div style="background:#33CC00"></div>
58
+ <div style="background:#00CCCC"></div>
59
+ <div style="background:#3366FF"></div>
60
+ <div style="background:#6633FF"></div>
61
+ <div style="background:#CC33CC"></div>
62
+
63
+ <div style="background:#666666"></div>
64
+ <div style="background:#990000"></div>
65
+ <div style="background:#CC6600"></div>
66
+ <div style="background:#CC9933"></div>
67
+ <div style="background:#999900"></div>
68
+ <div style="background:#009900"></div>
69
+ <div style="background:#339999"></div>
70
+ <div style="background:#3333FF"></div>
71
+ <div style="background:#6600CC"></div>
72
+ <div style="background:#993399"></div>
73
+
74
+ <div style="background:#333333"></div>
75
+ <div style="background:#660000"></div>
76
+ <div style="background:#993300"></div>
77
+ <div style="background:#996633"></div>
78
+ <div style="background:#666600"></div>
79
+ <div style="background:#006600"></div>
80
+ <div style="background:#336666"></div>
81
+ <div style="background:#000099"></div>
82
+ <div style="background:#333399"></div>
83
+ <div style="background:#663366"></div>
84
+
85
+ <div style="background:#000000"></div>
86
+ <div style="background:#330000"></div>
87
+ <div style="background:#663300"></div>
88
+ <div style="background:#663333"></div>
89
+ <div style="background:#333300"></div>
90
+ <div style="background:#003300"></div>
91
+ <div style="background:#003333"></div>
92
+ <div style="background:#000066"></div>
93
+ <div style="background:#330099"></div>
94
+ <div style="background:#330033"></div>
95
+
96
+ <div id="midas_forecolor_last_picked">Last&nbsp;Color&nbsp;Picked</div>
97
+ </div>