midas 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
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>