Index: other-projects/nz-flag-design/trunk/main-form/choose-canvas.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/choose-canvas.html	(revision 29548)
+++ other-projects/nz-flag-design/trunk/main-form/choose-canvas.html	(revision 29549)
@@ -1,40 +1,40 @@
-  <!DOCTYPE html>  
-  <html id="story"><!-- class="story" id="idea"-->
+<!DOCTYPE html>  
+<html id="story">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-	<meta name="viewport" content="width=device-width, initial-scale=1"/>
-	<title>Choose Canvas Size</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>Canvas Size</title>
 	
   </head>
   <body>
-      <div data-role="page"  id="innovation-story-01-idea" 
-	   class="demo-page" 
-	   data-dom-cache="true" 
-	   data-prev="index" 
-	   data-next="choose-palette">
+    <div data-role="page" id="choose-canvas-page" 
+	 class="demo-page" 
+	 data-dom-cache="true" 
+	 data-prev="index" 
+	 data-next="choose-palette">
 	  
-	<div data-role="content">
+      <div data-role="content">
 	  
-	  <div data-role="controlgroup" class="control" data-mini="true">        	
-            <a href="#" class="next right-button res-fwd" style="right:1%;"></a>
-	    <a href="#" class="prev left-button gen-back" style="left:1%;"></a>
-          </div>  
+	<div data-role="controlgroup" class="control" data-mini="true">        	
+          <a href="#" class="next right-button res-fwd" style="right:1%;"></a>
+	  <a href="#" class="prev left-button gen-back" style="left:1%;"></a>
+        </div>  
 	  
-	  <div class="story-page">
-	    <!-- put custom content here -->  
-		
-	    <span class="left story-icon idea" ></span>
-	    <h2>Choose Canvas Size</h2>			
-	    <p>
-	      ...
-	    </p>	
-	    
-	    <!-- end of putting custom content -->
-	  </div> <!-- end story-page-->	
+	<div class="story-page">
+
+	  <!-- put custom content here -->  	  
+	  <span class="left story-icon idea" ></span>
+	  <h2>Canvas Size</h2>			
+	  <p>
+	    Choose from the following aspect ratios
+	  </p>	
+	  <!-- end of putting custom content -->
+
+	</div> <!-- end story-page-->	
+	
+      </div><!-- /content -->
+      
+    </div><!-- /page -->
 	  
-	</div><!-- /content -->
-
-</div><!-- /page -->
-	  
-</body>
+  </body>
 </html>
Index: other-projects/nz-flag-design/trunk/main-form/choose-palette.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/choose-palette.html	(revision 29548)
+++ other-projects/nz-flag-design/trunk/main-form/choose-palette.html	(revision 29549)
@@ -1,40 +1,38 @@
-  <!DOCTYPE html>  
-  <html id="story"><!-- class="story" id="idea"-->
+<!DOCTYPE html>  
+<html id="story">
   <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-	<meta name="viewport" content="width=device-width, initial-scale=1"/>
-	<title>Choose Colour Palette</title>
-	
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>	
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>Choose Palette</title>	
   </head>
   <body>
-      <div data-role="page"  id="innovation-story-01-idea" 
-	   class="demo-page" 
-	   data-dom-cache="true" 
-	   data-prev="choose-canvas" 
-	   data-next="iterative-design">
+    <div data-role="page" id="choose-palette-page" 
+	 class="demo-page" 
+	 data-dom-cache="true" 
+	 data-prev="choose-canvas"
+	 data-next="iterative-design">
 	  
-	<div data-role="content">
+      <div data-role="content">
 	  
-	  <div data-role="controlgroup" class="control" data-mini="true">        	
-            <a href="#" class="next right-button res-fwd" style="right:1%;"></a>
-	    <a href="#" class="prev left-button gen-back" style="left:1%;"></a>
-          </div>  
+	<div data-role="controlgroup" class="control" data-mini="true">        	
+          <a href="#" class="next right-button test-fwd" style="right:1%;"></a>
+	  <a href="#" class="prev left-button idea-back" style="left:1%;"></a>
+        </div>
 	  
-	  <div class="story-page">
-	    <!-- put custom content here -->  
-		
-	    <span class="left story-icon idea" ></span>
-	    <h2>Choose Colour Palette</h2>			
-	    <p>
-	      ...
-	    </p>	
-	    
-	    <!-- end of putting custom content -->
-	  </div> <!-- end story-page-->	
+	<div class="story-page">
 	  
-	</div><!-- /content -->
+	  <!-- put custom content here -->  
+	  <span class="left story-icon research" ></span>
+	  <h2>Choose Colour Palette</h2>
+	  <p>
+	    ...
+	  </p>
+	  <!-- end of putting custom content -->		
 
-</div><!-- /page -->
-	  
-</body>
+	</div> <!-- end story-page-->
+      </div><!-- /content -->
+
+    </div><!-- /page -->
+    
+  </body>
 </html>
Index: other-projects/nz-flag-design/trunk/main-form/index.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/index.html	(revision 29548)
+++ other-projects/nz-flag-design/trunk/main-form/index.html	(revision 29549)
@@ -1,88 +1,75 @@
 <!DOCTYPE html>  
-<html id="story"><!-- class="story" id="idea"-->
+<html id="story">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<!--
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>Enter Your Name</title>
-
-    <link rel="shortcut icon" href="lib-slider/favicon.ico"/>		
-
-    <!-- Local styling -->
+-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    
     <script src="css/source-sans-pro.js"></script>
     <link href="css/styles.css" rel="stylesheet"/>
     <link href="css/storystyle.css" rel="stylesheet"/>
+	
+    <link rel="stylesheet"  href="lib-slider/css/jquery.mobile-1.3.0.css"/>
+    <link rel="stylesheet" href="lib-slider/css/jqm-demos.css"/>
+    <link rel="stylesheet" href="lib-slider/css/swipe-page.css"/>
+    <link rel="shortcut icon" href="lib-slider/favicon.ico"/>		
 
     <!-- jQuery -->
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
-	
-    <!-- Swipe support -->
-
-    <link rel="stylesheet"  href="lib-slider/css/jquery.mobile-1.3.0.css"/>
-    <link rel="stylesheet" href="lib-slider/css/jqm-demos.css"/>
-    <link rel="stylesheet" href="lib-slider/css/swipe-page.css"/>
 <!--
     <script src="lib/jquery-1.8.2.min.js"></script>
 -->
-    
+
+    <!-- page swipe -->
     <script src="lib-slider/js/jquery.mobile.demos.js"></script>
-    <script src="lib-slider/js/jquery.mobile-1.3.0.js"></script> 
-    <script src="lib-slider/js/swipe-page.js"></script>		
+    <script src="lib-slider/js/jquery.mobile-1.3.0.js"></script>
+    <script src="lib-slider/js/swipe-page.js"></script>	
 
-
-    <!-- Side-bar accordion support -->
-<!--
-    <link href="css/liteaccordion.css" rel="stylesheet" />    
+    <!-- accordion bars -->
+    <link href="css/liteaccordion.css" rel="stylesheet" />
     <script src="js/jquery.easing.1.3.js"></script>
     <script src="js/liteaccordion.jquery.js"></script>
--->
 
-
+    <title>Enter Name</title>
 
   </head>
-
   <body>
-    <div data-role="page" id="innovation-story-01" 
+    <div data-role="page" id="enter-name-page" 
 	 class="demo-page" 
 	 data-dom-cache="true" 
-	 data-next="choose-canvas"> <!--data-theme="a" -->
-      
+	 data-next="choose-canvas">
       <div data-role="content">
-	
+	  
 	<div data-role="controlgroup" class="control" data-mini="true">        	
           <a href="#" class="next right-button idea-fwd" style="right:1%;"></a>
+	  <a href="#" class="prev left-button gen-back" style="left:1%;"></a>
         </div>  
+	  
+ 	<a target="_parent" href="../index.html" class="back-button back-left"></a>	  
+	  
+	<div class="story-page">
 
-	<a target="_parent" href='../index.html' class="back-button back-left"></a>	  
-
-	<div class="story-page">
-	  <!-- put custom content here -->
-	  
+	  <!-- put custom content here -->	  
 	  <div class="story-title">
 	    <h1 class="center">Enter Name</h1>
+	    <p class="center">-- xx </p>
+	    <p>
+	      Name: 
+	      <form>
+		<input type="text" />
+	      </form>
+	    </p>
 	  </div>
+	  <!-- end of putting custom content -->
 
-	    <p>
-	      ...
-	    </p>	
-
-	  <!-- end of putting custom content -->
 	</div> <!-- end story-page-->		
-	
-<!--
-	<span class="swipe-text"></span>
--->
 	
       </div><!-- /content -->
 
-    </div><!-- /page -->
-
-<!--
-    <div id="footer" class="center">
-      Creative Commons Licensed, Center for Open Source Innovation (COSI), University of Waikato 2015
-    </div>
--->      
-    
-
+    </div><!-- /page -->	  
   </body>
 </html>
-  
Index: other-projects/nz-flag-design/trunk/main-form/iterative-design.html
===================================================================
--- other-projects/nz-flag-design/trunk/main-form/iterative-design.html	(revision 29548)
+++ other-projects/nz-flag-design/trunk/main-form/iterative-design.html	(revision 29549)
@@ -1,45 +1,123 @@
-  <!DOCTYPE html>  
-  <html id="story"><!-- class="story" id="idea"-->
+<!DOCTYPE html>  
+<html id="story">
   <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-	<meta name="viewport" content="width=device-width, initial-scale=1"/>
-	<title>Iterative Design</title>
-	
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>	
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+
+    <title>Iterative Design</title>	
+
   </head>
+
   <body>
-      <div data-role="page"  id="innovation-story-01-idea" 
-	   class="demo-page" 
-	   data-dom-cache="true" 
-	   data-prev="choose-canvas" 
-	   data-next="iterative-design">
+    <div data-role="page" id="iterative-design-page" 
+	 class="demo-page" 
+	 data-dom-cache="true" 
+	 data-prev="choose-palette">
 	  
-	<div data-role="content">
+      <div data-role="content">
 	  
-	  <div data-role="controlgroup" class="control" data-mini="true">        	
-            <a href="#" class="next right-button res-fwd" style="right:1%;"></a>
-	    <a href="#" class="prev left-button gen-back" style="left:1%;"></a>
-          </div>  
+	<div data-role="controlgroup" class="control" data-mini="true">        	
+          <a href="#" class="next right-button test-fwd" style="right:1%;"></a>
+	  <a href="#" class="prev left-button idea-back" style="left:1%;"></a>
+        </div>
 	  
-	  <div class="story-page">
-	    <!-- put custom content here -->  
+	<div class="story-page">
+	  
+	  <!-- put custom content here -->  
+	  <span class="left story-icon research" ></span>
+	  <h2>Iterative Design</h2>
+
+	  <div>
+	    <div id="side-by-side">
+              <ol>
+
+		<li>
+		  <h2><span>2D Design</span></h2>
+		  <div id="design-div" >
+
+		    <iframe style="width: 100%; height: 100%"
+			    id="design-iframe" ></iframe>
+		  </div>
+		</li>
+
+		<li>
+		  <h2><span title="Click to Open/Close">Flag Similarity</span></h2>
+	      
+		  <div id="similarity-2d-div">
+		    <iframe src="../similarity-2d/index.jsp" 
+			    style="width: 100%; height: 100%"
+			    id="similarity-2d-iframe" ></iframe>
+		  </div>
+		  
+		</li>
+		<li>
+		  <h2><span title="Click to Open/Close">Render 3D</span></h2>
+		  <div id="comparison-3d-div">
+		    <iframe src="../render-3d/flag.html" 
+			    style="width: 100%; height: 100%;"
+			    id="comparison-3d-iframe" ></iframe>
+		  </div>
+		</li>
 		
-	    <span class="left story-icon idea" ></span>
-	    <h2>Iterative Design</h2>			
+	      </ol>
+	    </div>
+	  </div>
 
-	    <style>
-	      iframe::-webkit-scrollbar {  
-	      display: none;
-	      }  
-	    </style>
+	  <!-- end of putting custom content -->		
 
-	    <iframe src="iterative-design-frame.html" style="width: 100%; height: 100%" >
-	    </iframe>
-	    <!-- end of putting custom content -->
-	  </div> <!-- end story-page-->	
-	  
-	</div><!-- /content -->
+	</div> <!-- end story-page-->
+      </div><!-- /content -->
 
-</div><!-- /page -->
-	  
-</body>
+      <script>
+
+
+	var activatedAccordion    = false;
+	var activatedSVGEditorFrame = false;
+
+        function activateAccordion() {
+
+          $('#side-by-side').show();
+          $('#side-by-side')
+            .liteAccordion(
+               { theme           : 'light',
+                 rounded         : true,
+                 containerWidth  : 1000,
+                 containerHeight : 600,       
+               } 
+           );
+        }
+
+        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");
+        }
+
+        $(document).on("pageload",function(event,data){
+          console.log( "Iterative Design Page: jquerymobile pageload()" );
+          if (!activatedAccordion) {
+  	    activateAccordion();	    
+	    activatedAccordion = true;
+	  }
+        });
+
+
+        $(document).on("pagebeforeshow",function(event,data){
+	  var active_page = $.mobile.activePage.attr("id");
+	  console.log("Event: pagebeforeshow() for page " + active_page);
+
+	  if (!activatedSVGEditorFrame && (active_page == "iterative-design-page")) {
+	    activateSVGEditor();
+	    activatedSVGEditorFrame = true;
+	  }
+
+        });
+
+      </script>
+
+
+    </div><!-- /page -->
+
+        
+  </body>
 </html>
