Index: other-projects/nz-flag-design/trunk/main-form/svg-edit-local/advanced-icon.xml
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/svg-edit-local/advanced-icon.xml	(revision 29744)
+++ other-projects/nz-flag-design/trunk/main-form/svg-edit-local/advanced-icon.xml	(revision 29756)
@@ -1,14 +1,22 @@
-<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
- <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
- <title>Advanced Icon</title>
-
- <g>
-  <title>Layer 1</title>
-  <path id="svg_4" d="m10.88436,0.22024c-5.99923,0 -10.86252,4.86325 -10.86252,10.86242c0,5.99921 4.86329,10.8625 10.86252,10.8625c5.99924,0 10.86249,-4.86329 10.86249,-10.8625c0,-5.99917 -4.86325,-10.86242 -10.86249,-10.86242zm6.26763,10.09119c-1.08453,1.24735 -2.7698,1.65986 -4.24897,1.18527l-5.37214,6.17793c-0.57253,0.65761 -1.56886,0.7249 -2.22634,0.15317s-0.72725,-1.56869 -0.15553,-2.22643l5.37953,-6.18466c-0.6672,-1.39387 -0.49098,-3.112 0.58844,-4.35266c1.02152,-1.17717 2.58048,-1.60772 3.99698,-1.25115l-2.05836,2.40053l0.67332,1.95902l2.03434,0.39532l2.06363,-2.4066c0.55914,1.35579 0.35347,2.96865 -0.67489,4.15027z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000"/>
- </g>
- <g>
-  <title>Layer 2</title>
-  <text font-weight="bold" id="svg_1" transform="matrix(0.309621, 0, 0, 0.324142, 1.51575, -1.78249)" xml:space="preserve" text-anchor="middle" font-family="Serif" font-size="24" y="33.95683" x="14.44621" stroke-width="0" stroke="#000000" fill="#7f7f7f">A</text>
-  <text id="svg_6" font-weight="bold" transform="matrix(0.313888, 0, 0, 0.328609, 4.02574, 0.430566)" xml:space="preserve" text-anchor="middle" font-family="Serif" font-size="24" y="55.6743" x="34.96717" stroke-width="0" stroke="#000000" fill="#7f7f7f">S</text>
- </g>
+<svg xmlns="http://www.w3.org/2000/svg">
+<!-- 
+	Sample icons file. This file looks like an SVG file with groups as its
+	children. Each group element has an ID that must match the ID of the button given
+	in the extension. The SVG inside the group makes up the actual icon, and
+	needs use a viewBox instead of width/height for it to scale	properly.
+	
+	Multiple icons can be included, each within their own group.
+-->
+    <g id="advanced"> 
+        <svg width="290" height="290" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+            <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+            <g>
+                <title>Show/Hide Advanced Features</title>
+                <ellipse ry="138.50001" rx="138.50001" id="svg_1" cy="158.8711" cx="149.06122" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#000000"/>
+                <path d="m241.75288,145.3091c15.76646,-18.12448 18.9362,-42.8737 10.35747,-63.67463l-31.65828,36.91841l-31.20456,-6.06812l-10.34077,-30.0617l31.57887,-36.83224c-21.72498,-5.47167 -45.65585,1.12635 -61.35255,19.18442c-16.55795,19.04544 -19.26741,45.40413 -9.02255,66.80138l-82.52099,94.89539c-8.77747,10.08925 -7.711,25.38509 2.37802,34.16252c10.0892,8.77078 25.38839,7.71091 34.16911,-2.3783l82.42503,-94.79622c22.6888,7.30687 48.55409,0.98058 65.19121,-18.15091l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff" id="svg_19" transform="rotate(2.24623, 154.207, 155.149)"/>
+                <text font-weight="bold" transform="matrix(4.50803, 0, 0, 4.50803, -159.378, -305.57)" xml:space="preserve" text-anchor="middle" font-family="Serif" font-size="24" id="svg_3" y="97.5864" x="53.23026" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#bfbfbf">A</text>
+                <text font-weight="bold" id="svg_5" transform="matrix(4.50803, 0, 0, 4.50803, -159.378, -305.57)" xml:space="preserve" text-anchor="middle" font-family="Serif" font-size="24" y="125.42976" x="81.26555" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#bfbfbf">F</text>
+            </g>
+        </svg>
+    </g>
 </svg>
Index: other-projects/nz-flag-design/trunk/main-form/svg-edit-local/ext-advanced.js
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/svg-edit-local/ext-advanced.js	(revision 29744)
+++ other-projects/nz-flag-design/trunk/main-form/svg-edit-local/ext-advanced.js	(revision 29756)
@@ -9,42 +9,41 @@
  *
  */
- 
-/* 
-	This is a very basic SVG-Edit extension. It adds a "Hello World" button in
-	the left panel. Clicking on the button, and then the canvas will show the
-	user the point on the canvas that was clicked on.
-*/
- 
-svgEditor.addExtension("Advanced", function() {'use strict';
+var advancedClicked = false;
 
+svgEditor.addExtension("Advanced", function() {'use strict';                                     
+                                               
 		return {
 			name: "Advanced",
-			// For more notes on how to make an icon file, see the source of
-			// the helloworld-icon.xml
+			// The icon for 'advanced features'
 			svgicons: svgEditor.curConfig.extPath + "advanced-icon.xml",
 			
 			// Multiple buttons can be added in this array
 			buttons: [{
-				// Must match the icon ID in helloworld-icon.xml
+				// Must match the icon ID in advanced-icon.xml
 				id: "advanced", 
 				
-				// This indicates that the button will be added to the "mode"
-				// button panel on the left side
-				type: "mode", 
+				// This indicates that the button will be added independently to the buttons in the button
+				// panel on the left side (it will not be unselected when one of the other buttons is selected)
+				type: "context",
+                panel: "tools_left",
 				
 				// Tooltip text
-				title: "Show Advanced Options", 
+				title: "Show/Hide Advanced Features", 
 				
 				// Events
 				events: {
 					'click': function() {
-						// The action taken when the button is clicked on.
-						// For "mode" buttons, any other button will 
-						// automatically be de-pressed.
-                        if (svgCanvas.getMode() != "advanced") {
-						  svgCanvas.setMode("advanced");
+                        // Toggle the advanced button
+                        if (advancedClicked == true)
+                        {
+                            advancedClicked = false;
+                            // Hide advanced features
+                            advancedButton(advancedClicked);
                         }
-                        else {
-                          
+                        else
+                        {
+                            advancedClicked = true; 
+                            // Hide advanced features
+                            advancedButton(advancedClicked);
                         }
 					}
@@ -54,11 +53,9 @@
 			// on the editor canvas (not the tool panels)
 			mouseDown: function() {
-				// Check the mode on mousedown
-				if(svgCanvas.getMode() == "advanced") {
-				
-					// The returned object must include "started" with 
-					// a value of true in order for mouseUp to be triggered
-					return {started: true};
-				}
+                advancedButton(advancedClicked);
+
+                // The returned object must include "started" with 
+                // a value of true in order for mouseUp to be triggered
+                return {started: true};
 			},
 			
@@ -66,20 +63,40 @@
 			// to true (see above). Note that "opts" is an object with event info
 			mouseUp: function(opts) {
-				// Check the mode on mouseup
-				if(svgCanvas.getMode() == "advanced") {
-					var zoom = svgCanvas.getZoom();
-					
-					// Get the actual coordinate by dividing by the zoom value
-					var x = opts.mouse_x / zoom;
-					var y = opts.mouse_y / zoom;
-					
-					var text = "These are advanced features!\n\nYou clicked here: " 
-						+ x + ", " + y;
-						
-					// Show the text using the custom alert function
-					$.alert(text);
-				}
-			}
+                //advancedButton(advancedClicked);
+			},
+            
+            elementChanged: function(opts)
+            {
+                advancedButton(advancedClicked);
+            },
+            
+            callback: function(opts) {
+                advancedClicked = false;
+                advancedButton(advancedClicked);
+            }
 		};
 });
 
+// Function: advancedButton
+// Unless advanced button is selected, advanced features will be hidden
+this.advancedButton = function() {
+    
+    // 'Advanced feature' elements
+    var elements = ['sidepanels', 'editor_panel', 'tool_move_top', 'tool_move_bottom', 'tool_topath', 'tool_reorient', 'tool_make_link', 'idLabel', 'tool_angle', 'tool_blur', 'tool_position', 'xy_panel', 'rect_width_tool', 'rect_height_tool', 'cornerRadiusLabel'];
+
+    // Toggle the display attributes of the selected advanced elements
+    for (var i = 0; i < elements.length; i++) {
+        if (advancedClicked == false) {
+            document.getElementById(elements[i]).style.display = 'none';
+        }
+        else {
+            document.getElementById(elements[i]).style.display = 'block';
+        }
+    }
+    
+    // Remove strange extra 'tool_seps' when advanced features is not selected
+    if (advancedClicked == false)
+    {
+        $("#selected_panel :first-child").find(".tool_sep").css("display", "none")
+    }
+}
