Index: other-projects/nz-flag-design/trunk/index.html
===================================================================
--- other-projects/nz-flag-design/trunk/index.html	(revision 29564)
+++ other-projects/nz-flag-design/trunk/index.html	(revision 29565)
@@ -44,12 +44,7 @@
 
 	    <p>Welcome ...
-	      
- 	      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+	      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  	      sed do eiusmod tempor incididunt ut labore et dolore
- 	      magna aliqua. Ut enim ad minim veniam, quis nostrud
- 	      exercitation ullamco laboris nisi ut aliquip ex ea
- 	      commodo consequat. Duis aute irure dolor in
- 	      reprehenderit in voluptate velit esse cillum dolore eu
- 	      fugiat nulla pariatur.
+ 	      magna aliqua.
 	    </p>
 
Index: other-projects/nz-flag-design/trunk/main-form/index.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/index.html	(revision 29564)
+++ other-projects/nz-flag-design/trunk/main-form/index.html	(revision 29565)
@@ -34,4 +34,8 @@
     <script src="js/jquery.easing.1.3.js"></script>
     <script src="js/liteaccordion.jquery.js"></script>
+
+<script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"></script> 
+<script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
+<script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script> 
 
     <title>Enter Name</title>
Index: other-projects/nz-flag-design/trunk/main-form/iterative-design.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/iterative-design.html	(revision 29564)
+++ other-projects/nz-flag-design/trunk/main-form/iterative-design.html	(revision 29565)
@@ -34,8 +34,8 @@
 		<li>
 		  <h2><span>2D Design</span></h2>
-		  <div id="design-div" >
+		  <div id="design-2d-div" >
 
 		    <iframe style="width: 100%; height: 100%"
-			    id="design-iframe" ></iframe>
+			    id="design-2d-iframe" ></iframe>
 		  </div>
 		</li>
@@ -53,8 +53,8 @@
 		<li>
 		  <h2><span title="Click to Open/Close">Render 3D</span></h2>
-		  <div id="comparison-3d-div">
+		  <div id="render-3d-div">
 		    <iframe src="../render-3d/flag.html" 
 			    style="width: 100%; height: 100%;"
-			    id="comparison-3d-iframe" ></iframe>
+			    id="render-3d-iframe" ></iframe>
 		  </div>
 		</li>
@@ -75,4 +75,53 @@
 	var activatedSVGEditorFrame = false;
 
+
+	function savePNGAsFile(imgType, quality) {
+
+  	  var design_frame = document.getElementById('design-2d-iframe');
+	  var svgCanvas = design_frame.contentWindow.svgCanvas;
+	  var svgedit = design_frame.contentWindow.svgedit;
+
+  	  var mimeType = 'image/' + imgType.toLowerCase();
+	  var svg_str = svgCanvas.svgCanvasToString();
+	
+
+		var type = imgType || 'PNG';
+		if (!$('#export_canvas').length) {
+			$('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
+		}
+		var c = $('#export_canvas')[0];
+		c.width = svgCanvas.contentW;
+		c.height = svgCanvas.contentH;
+		
+		canvg(c, svg_str, {renderCallback: function() {
+			var dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
+			var datauri = quality ? c.toDataURL('image/' + dataURLType, quality) : c.toDataURL('image/' + dataURLType);
+
+	                $.ajax({
+	                    type: "POST",
+	                    url: "../design-2d/image-data-to-file.jsp",
+	                    data: { imageData : datauri },
+	                    success: function() { console.log("Exported PNG data to file: " + datauri) }
+	                });
+	          }
+	        });
+
+        }
+
+        function exportPNG() {
+	  var design_frame = document.getElementById('design-2d-iframe')
+          var str = design_frame.contentWindow.svgEditor.uiStrings.notification.loadingImage;
+
+          var exportWindow = window.open(
+              'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
+              'svg-edit-exportWindow'
+          );
+
+	  design_frame.contentWindow.svgCanvas.rasterExport("PNG", null, exportWindow.name);
+
+          //svgCanvas.rasterExport('PNG', null, exportWindow.name);
+        }
+
+
         function activateAccordion() {
 
@@ -80,8 +129,15 @@
           $('#side-by-side')
             .liteAccordion(
-               { theme           : 'light',
+               { theme           : 'stitch', // 'light',
                  rounded         : true,
                  containerWidth  : 1000,
-                 containerHeight : 600,       
+                 containerHeight : 600,
+	         onTriggerSlide : function() {
+	           console.log("onTriggerSlide: id = " + this[0].id);
+                   if (this[0].id == "render-3d-div") {
+	             console.log("Triggering SVG-Editor exportPNG()");
+                     savePNGAsFile("PNG",null);
+	           }
+                 }
                } 
            );
@@ -90,6 +146,6 @@
         function activateSVGEditor() {
           console.log("activateSVGEditor()");
-	  //$('#design-iframe').attr("src", "svg-edit-2.7/svg-editor.html");	
-          $('#design-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html");
+	  //$('#design-2d-iframe').attr("src", "svg-edit-2.7/svg-editor.html");	
+          $('#design-2d-iframe').attr("src","svg-edit-trunk/editor/svg-editor.html");
         }
 
