add business logic to new plan style

5 files changed, 265 insertions, 173 deletions

diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 4bfa363..56c65fe 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -903,24 +903,33 @@ iframe.embed {
 }
 
 /* PLANS BROCHURE */
-/* nb these styles should be fixed for narrower screens/mobile layout */
-.about_plan {
-  width: 28vw;
-  margin: 2vw;
-  float: left;
-  min-height: 28vw;
-  position: relative;
-}
-.about_plan button {
-  position: absolute;
-  bottom: 5%;
-  left: 5%;
-  width: 90%;
-}
 .about_custom {
   clear: both;
-  width: 76vw;
-  margin: 2vw 10vw;
+  max-width: 600px;
+  margin: 0 auto;
+  font-size: 14px;
+  border-bottom: 1px solid #e5e5e5;
+}
+.about_custom h3 {
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  font-size: 1.25em;
+  font-weight: 500;
+  background: #3A3A3A;
+  color: white;
+  text-align: center;
+}
+.about_custom li {
+  list-style-type: none;
+  line-height: 2em;
+  padding: 10px 20px;
+  background: white;
+  text-align: center;
+  border-left: 1px solid #e5e5e5;
+  border-right: 1px solid #e5e5e5;
+}
+.about_custom a {
+  border-bottom: 1px solid black;
 }
 
 ul#plans {
@@ -1013,6 +1022,14 @@ ul#plans .signup {
   padding: 25px 0;
 }
 
+.signup .current {
+  display: inline-block;
+  color: white;
+  font-weight: bold;
+  font-size: 1em;
+  padding: 4px 30px 3px;
+}
+
 .signup .button {
   font-weight: bold;
   padding: 16px 30px 14px;
diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index 3ae0204..fa7e3c5 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -44,6 +44,7 @@ body {
   <span class="ion-navigate" data-role="arrow-mode"></span>
   <span class="ion-ios-pulse active" data-role="polyline-mode"></span>
   <span class="ion-ios-grid-view-outline" data-role="ortho-polyline-mode"></span>
+  <span class="ion-scissors" data-role="eraser-mode"></span>
 </div>
 
 <script src="/assets/javascripts/util.js"></script>
@@ -96,7 +97,7 @@ var ArrowTool = MapTool.extend(function(base){
 	exports.down = function(e, cursor){
     last_point.a = cursor.x.a
     last_point.b = cursor.y.a
-    var p = findClosestPoint(last_point)
+    var p = shapes.findClosestPoint(last_point)
     if (p) {
       selected_shape = p.shape
       selected_point = p.point
@@ -110,7 +111,7 @@ var ArrowTool = MapTool.extend(function(base){
   exports.move = function(e, cursor){
     last_point.a = cursor.x.a
     last_point.b = cursor.y.a
-    var p = findClosestPoint(last_point)
+    var p = shapes.findClosestPoint(last_point)
     if (p) {
       document.body.style.cursor = "pointer"
       last_point.assign(p.point)
@@ -339,6 +340,26 @@ var OrthoPolylineTool = MapTool.extend(function (base) {
   return exports
 })
 
+var EraserTool = MapTool.extend(function(base){
+	var exports = {}
+	exports.down = function(e, cursor){
+  }
+  exports.move = function(e, cursor){
+    var segment = shapes.findClosestSegment(last_point)
+    if (segment) {
+      document.body.style.cursor = "pointer"
+      last_point.a = segment.x
+      last_point.b = segment.y
+      cursor.x.a = cursor.x.b = last_point.a
+      cursor.y.a = cursor.y.b = last_point.b
+      return
+    }
+    else {
+      document.body.style.cursor = "crosshair"
+    }
+  }
+  return exports
+})
 
 var ShapeList = Fiber.extend(function(base){
   var exports = {}
@@ -348,6 +369,12 @@ var ShapeList = Fiber.extend(function(base){
   exports.add = function(shape){
     this.shapes.push(shape)
   }
+  exports.remove = function(shape){
+    var index = this.shapes.indexOf(shape)
+    if (index !== -1) {
+      this.shapes.splice(index, 1)
+    }
+  }
   exports.findClosestPoint = function (p){
     var point
     for (var i = 0; i < this.shapes.length; i++) {
@@ -364,6 +391,17 @@ var ShapeList = Fiber.extend(function(base){
     }
     return null
   }
+  exports.findClosestSegment = function (p){
+    var segment = null, closest_segment = null
+    for (var i = 0; i < this.shapes.length; i++) {
+      segment = this.shapes[i].hasSegmentNear(p, 10)
+      if (segment && (! closest_segment || segment.distance < closest_segment.distance)) {
+        closest_segment = segment
+        closest_segment.shape = this.shapes[i]
+      }
+    }
+    return closest_segment
+  }
   exports.forEach = function(fn){
     this.shapes.forEach(fn)
   }
@@ -421,7 +459,10 @@ var Polyline = Fiber.extend(function(base){
     var dx, dy, new_x, new_y, x, y, closest_distance = min_dist || Infinity
     var closest_i = -1
     var points = this.points
+    var p1, p2 = points[0]
     for (var i = 1; i < points.length; i++) {
+      p1 = p2
+      p2 = points[i]
       d1 = p1.a - p2.a
       d2 = p1.b - p2.b
       sum = d1*d1 + d2*d2
@@ -448,10 +489,6 @@ var Polyline = Fiber.extend(function(base){
     }
 	}
 	
-	exports.getSegment = function(i){
-	  return [ points[i], points[i+1] ]
-	}
-
   exports.draw = function(ctx){
     var points = this.points
     if (! points.length) return
@@ -541,7 +578,16 @@ MX.Polyline = MX.Object3D.extend({
     })
     var hue = abs(round( angle / PI * 90 + 300))
     mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')'
-  }
+  },
+  
+  destroy: function(){
+    this.faces.forEach(function(mx){
+      scene.remove(mx)
+    })
+    this.faces = null
+    this.points = null
+  },
+
 })
 
 MX.Point = MX.Object3D.extend({
@@ -577,6 +623,7 @@ map = new Map ({
 map.ui.add_tool("arrow", new ArrowTool)
 map.ui.add_tool("polyline", new PolylineTool)
 map.ui.add_tool("ortho-polyline", new OrthoPolylineTool)
+map.ui.add_tool("eraser", new EraserTool)
 map.ui.add_tool("position", new PositionTool)
 
 $(window).resize(function(){
@@ -645,6 +692,9 @@ OrthographicToolbar.add("polyline-mode", function(){
 OrthographicToolbar.add("ortho-polyline-mode", function(){
   map.ui.set_tool("ortho-polyline")
 })
+OrthographicToolbar.add("eraser-mode", function(){
+  map.ui.set_tool("eraser")
+})
 OrthographicToolbar.pick("ortho-polyline-mode")
 
 document.addEventListener('DOMContentLoaded', build)
diff --git a/views/about/_old_plans.ejs b/views/about/_old_plans.ejs
new file mode 100644
index 0000000..e4b07be
--- /dev/null
+++ b/views/about/_old_plans.ejs
@@ -0,0 +1,63 @@
+     <div class="about_plan planbox free_plan_info">
+      <h3>[[- plans.free.name ]]</h3>
+      <ul>
+        <li> [[- plans.free.stock_project_limit ]] exhibition with pre-designed template floor plan
+      </ul>
+    </div>
+
+    <div class="about_plan planbox">
+      <h3>[[- plans.basic.name ]]</h3>
+      <ul>
+        <li> $[[- plans.basic.monthly_price ]]/mo or $[[- plans.basic.yearly_price ]]/year
+        <li> Comes with [[- plans.basic.basic_layout_limit ]] basic floor plan and [[- plans.basic.basic_project_limit ]] exhibitions
+        <li> Each new basic floor plan costs $[[- plans.basic.basic_layout_monthly_price ]]/mo
+             or $[[- plans.basic.basic_layout_yearly_price ]]/year, minimum 3 months
+        <li> Each new floor plan can have up to [[- plans.basic.basic_project_limit ]] exhibitions
+        <li> VValls logo appears when embedding an exhibition on a web page
+        <li>
+        [[ if (! logged_in) { ]]
+          <button data-role="show-signup-modal">Sign Up</button>
+        [[ } else if (! user.plan_level) { ]]
+          <a href="https://vvalls.recurly.com/subscribe/basic-monthly/[[- user._id ]]/[[- user.username ]]"><button>Buy Now</button></a>
+        [[ } else if (user.plan_level == plans.basic.level) { ]]
+					Current Level
+				[[ } ]]
+      </ul>
+    </div>
+
+    <div class="about_plan planbox">
+      <h3>[[- plans.pro.name ]]</h3>
+      <ul>
+        <li> $[[- plans.pro.monthly_price ]]/mo or $[[- plans.pro.yearly_price ]]/year
+        <li> Comes with [[- plans.pro.pro_layout_limit ]] pro floor plan and [[- plans.pro.pro_project_limit ]] exhibitions
+        <li> Each new pro floor plan costs $[[- plans.pro.pro_layout_monthly_price ]]/mo
+             or $[[- plans.pro.pro_layout_yearly_price ]]/year, minimum 3 months
+        <li> Each new pro floor plan can have up to [[- plans.pro.pro_project_limit ]] exhibitions
+        <li> Includes planning for 3D objects in the room
+        <li> No VValls logo on embed
+        <li>
+        [[ if (! logged_in) { ]]
+          <button data-role="show-signup-modal">Sign Up</button>
+        [[ } else if (! user.plan_level) { ]]
+          <a href="https://vvalls.recurly.com/subscribe/pro-monthly/[[- user._id ]]/[[- user.username ]]"><button>Buy Now</button></a>
+        [[ } else if (user.plan_level == plans.pro.level) { ]]
+					Current Level
+        [[ } else if (user.plan_level < plans.pro.level) { ]]
+          <a href="/profile/billing"><button>Upgrade Now</button></a>
+				[[ } ]]
+      </ul>
+    </div>
+  
+    <div class="about_custom planbox miscbox">
+      <ul>
+        <li> Buying any extra floor plan unlocks collaboration.<br>Invite an artist or curator to work on the exhibition with you.
+        <li> Basic Floor plan: Rectangle-based design of any dimension.
+        <li> Pro Floor plan: Trace an arbitrary floor plan from image.
+      </ul>
+    </div>
+
+    <div class="about_custom custombox planbox">
+      <h3>Want Something Custom?</h3>
+      <li> We offer customized white-label options for business and educational uses.
+      <li> <a href="mailto:hello@vvalls.com">Contact us</a> for more information.
+    </div>
diff --git a/views/about/_plans.ejs b/views/about/_plans.ejs
index 16fb9c6..af2a050 100644
--- a/views/about/_plans.ejs
+++ b/views/about/_plans.ejs
@@ -1,63 +1,117 @@
-    <div class="about_plan planbox free_plan_info">
-      <h3>[[- plans.free.name ]]</h3>
-      <ul>
-        <li> [[- plans.free.stock_project_limit ]] exhibition with pre-designed template floor plan
-      </ul>
-    </div>
 
-    <div class="about_plan planbox">
-      <h3>[[- plans.basic.name ]]</h3>
-      <ul>
-        <li> $[[- plans.basic.monthly_price ]]/mo or $[[- plans.basic.yearly_price ]]/year
-        <li> Comes with [[- plans.basic.basic_layout_limit ]] basic floor plan and [[- plans.basic.basic_project_limit ]] exhibitions
-        <li> Each new basic floor plan costs $[[- plans.basic.basic_layout_monthly_price ]]/mo
-             or $[[- plans.basic.basic_layout_yearly_price ]]/year, minimum 3 months
-        <li> Each new floor plan can have up to [[- plans.basic.basic_project_limit ]] exhibitions
-        <li> VValls logo appears when embedding an exhibition on a web page
-        <li>
-        [[ if (! logged_in) { ]]
-          <button data-role="show-signup-modal">Sign Up</button>
-        [[ } else if (! user.plan_level) { ]]
-          <a href="https://vvalls.recurly.com/subscribe/basic-monthly/[[- user._id ]]/[[- user.username ]]"><button>Buy Now</button></a>
-        [[ } else if (user.plan_level == plans.basic.level) { ]]
-					Current Level
-				[[ } ]]
-      </ul>
+<ul id="plans">
+  <li class="most-popular">
+    <div class="top">
+      <h2>[[- plans.pro.name ]]</h2>
+      <h3><span class="dollar">$</span><span class="price large">[[- plans.pro.monthly_price ]]</span> <span class="month large">/ mo </span></h3>
+      <h4>Ideal for large galleries<br>and small businesses.</h4>
     </div>
-
-    <div class="about_plan planbox">
-      <h3>[[- plans.pro.name ]]</h3>
-      <ul>
-        <li> $[[- plans.pro.monthly_price ]]/mo or $[[- plans.pro.yearly_price ]]/year
-        <li> Comes with [[- plans.pro.pro_layout_limit ]] pro floor plan and [[- plans.pro.pro_project_limit ]] exhibitions
-        <li> Each new pro floor plan costs $[[- plans.pro.pro_layout_monthly_price ]]/mo
-             or $[[- plans.pro.pro_layout_yearly_price ]]/year, minimum 3 months
-        <li> Each new pro floor plan can have up to [[- plans.pro.pro_project_limit ]] exhibitions
-        <li> Includes planning for 3D objects in the room
-        <li> No VValls logo on embed
-        <li>
-        [[ if (! logged_in) { ]]
-          <button data-role="show-signup-modal">Sign Up</button>
-        [[ } else if (! user.plan_level) { ]]
-          <a href="https://vvalls.recurly.com/subscribe/pro-monthly/[[- user._id ]]/[[- user.username ]]"><button>Buy Now</button></a>
-        [[ } else if (user.plan_level == plans.pro.level) { ]]
-					Current Level
-        [[ } else if (user.plan_level < plans.pro.level) { ]]
-          <a href="/profile/billing"><button>Upgrade Now</button></a>
-				[[ } ]]
-      </ul>
+    <ul>
+      <li>
+        [[- plans.pro.pro_layout_limit ]] Pro Floor Plan and [[- plans.pro.pro_project_limit ]] Exhibitions
+      </li>
+      <li>
+        Trace a Floor Plan from a Drawing
+      </li>
+      <li>
+        Image Hosting For Artworks
+      </li>
+      <li>
+        Planning for 3D Objects 
+      </li>
+      <li>
+        Everything the Medium Plan Contains 
+      </li>
+      <li>
+        No VValls Branding!
+      </li>
+    </ul>
+    <div class="signup">
+      [[ if (! logged_in) { ]]
+        <a class="button" href="#" data-role="show-signup-modal">Sign Up for [[- plans.pro.name ]]</a>
+      [[ } else if (! user.plan_level || user.plan_level < plans.pro.level) { ]]
+        <a href="https://vvalls.recurly.com/subscribe/pro-monthly/[[- user._id ]]/[[- user.username ]]">Sign Up for [[- plans.pro.name ]]</a>
+      [[ } else if (user.plan_level == plans.basic.level) { ]]
+        <div class="current">Current Level</div>
+      [[ } ]]
+    </div>
+  </li>
+  <li>
+    <div class="top">
+      <h2>[[- plans.basic.name ]]</h2>
+      <h3><span class="dollar">$</span><span class="price medium">[[- plans.basic.monthly_price ]]</span> <span class="month medium">/ mo </span></h3>
+      <h4>Great for small galleries<br>and art projects.</h4>
     </div>
-  
-    <div class="about_custom planbox miscbox">
-      <ul>
-        <li> Buying any extra floor plan unlocks collaboration.<br>Invite an artist or curator to work on the exhibition with you.
-        <li> Basic Floor plan: Rectangle-based design of any dimension.
-        <li> Pro Floor plan: Trace an arbitrary floor plan from image.
-      </ul>
+    <ul>
+      <li>
+        [[- plans.basic.basic_layout_limit ]] Basic Floor Plan and [[- plans.basic.basic_project_limit ]] Exhibitions
+      </li>
+      <li>
+        Add More Basic Floor Plans for $[[- plans.basic.basic_layout_monthly_price ]]/mo
+      </li>
+      <li>
+        Invite Artists to Collaborate
+      </li>
+      <li>
+        Prepay a Year and Get Two Months Free
+      </li>
+      <li>
+        Everything the Small Plan Contains 
+      </li>
+      <li>
+        VValls Branding
+      </li>
+    </ul>
+    <div class="signup">
+      [[ if (! logged_in) { ]]
+        <a class="button" href="#" data-role="show-signup-modal">Sign Up for [[- plans.basic.name ]]</a>
+      [[ } else if (! user.plan_level || user.plan_level < plans.basic.level) { ]]
+        <a href="https://vvalls.recurly.com/subscribe/basic-monthly/[[- user._id ]]/[[- user.username ]]">Sign Up for [[- plans.basic.name ]]</a>
+      [[ } else if (user.plan_level == plans.basic.level) { ]]
+        <div class="current">Current Level</div>
+      [[ } ]]
     </div>
+  </li>
+  <li>
+    <div class="top">
+      <h2>[[- plans.free.name ]]</h2>
+      <h3><span class="dollar">$</span><span class="price small">0</span> <span class="month small">/ mo </span></h3>
+      <h4>Free forever.</h4>
+    </div>
+    <ul>
+      <li>
+        [[- plans.free.stock_project_limit ]] Basic Exhibition
+      </li>
+      <li>
+        Use Any of our Built-In Floor Plans 
+      </li>
+      <li>
+        Embed Images and Videos in your Room
+      </li>
+      <li>
+        Custom Color and Wallpaper
+      </li>
+      <li>
+        Embed Room on Your Website
+      </li>
+      <li>
+        VValls Branding
+      </li>
+    </ul>
 
-    <div class="about_custom custombox planbox">
-      <h3>Want Something Custom?</h3>
-      <li> We offer customized white-label options for business and educational uses.
-      <li> <a href="mailto:hello@vvalls.com">Contact us</a> for more information.
+    <div class="signup">
+      [[ if (! logged_in) { ]]
+        <a class="button" href="#" data-role="show-signup-modal">Sign Up for Small</a>
+      [[ } else if (user.plan_level >= plans.basic.level) { ]]
+        <div class="current">Current Level</div>
+      [[ } ]]
     </div>
+  </li>
+</ul>
+
+<div class="about_custom custombox planbox">
+  <h3>Want Something Custom?</h3>
+  <li> We offer customized white-label options for business and educational uses.
+    <br>
+    <a href="mailto:hello@vvalls.com">Contact us</a> for more information.
+</div>
diff --git a/views/about/brochure.ejs b/views/about/brochure.ejs
index 80cb154..e34d3d3 100644
--- a/views/about/brochure.ejs
+++ b/views/about/brochure.ejs
@@ -11,99 +11,7 @@
 	<h1 class="leader">Subscriptions</h1>
 
 	<div class="projectList about aboutintro">
-  
-
-		<ul id="plans">
-		  <li class="most-popular">
-		    <div class="top">
-		      <h2>Large</h2>
-		      <h3><span class="dollar">$</span><span class="price large">50</span> <span class="month large">/ mo </span></h3>
-		      <h4>Ideal for businesses and ecommerce sites.</h4>
-		    </div>
-		    <ul>
-		      <li>
-		        15 Source Accounts / Hashtags 
-		      </li>
-		      <li>
-		        3 Embeddable Feeds 
-		      </li>
-		      <li>
-		        Pulls In New Posts Every 10 Minutes 
-		      </li>
-		      <li>
-		        Analytics and Analysis Tools 
-		      </li>
-		      <li>
-		        Everything the Medium Plan Contains 
-		      </li>
-		      <li>
-		        No Juicer Branding! 
-		      </li>
-		    </ul>
-		    <div class="signup"><a class="button" href="/credit-card/new?plan=large">Sign Up for Large</a></div>
-		  </li>
-		  <li>
-		    <div class="top">
-		      <h2>Medium</h2>
-		      <h3><span class="dollar">$</span><span class="price medium">10</span> <span class="month medium">/ mo </span></h3>
-		      <h4>Great for personal sites and small blogs.</h4>
-		    </div>
-		    <ul>
-		      <li>
-		        5 Source Accounts / Hashtags 
-		      </li>
-		      <li>
-		        1 Embeddable Feed 
-		      </li>
-		      <li>
-		        Pulls In New Posts Every Hour 
-		      </li>
-		      <li>
-		        Moderation and Filtering Tools 
-		      </li>
-		      <li>
-		        Everything the Small Plan Contains 
-		      </li>
-		      <li>
-		        No Juicer Branding! 
-		      </li>
-		    </ul>
-		    <div class="signup"><a class="button" href="/credit-card/new?plan=medium">Sign Up for Medium</a></div>
-		  </li>
-		  <li>
-		    <div class="top">
-		      <h2>Small</h2>
-		      <h3><span class="dollar">$</span><span class="price small">0</span> <span class="month small">/ mo </span></h3>
-		      <h4>Free forever.</h4>
-		    </div>
-		    <ul>
-		      <li>
-		        2 Source Accounts / Hashtags 
-		      </li>
-		      <li>
-		        1 Embeddable Social Media Feed 
-		      </li>
-		      <li>
-		        Pulls In New Posts Every 24 Hours 
-		      </li>
-		      <li>
-		        All Templates and Custom Styling 
-		      </li>
-		      <li>
-		        HTTPS Secure Connection Support 
-		      </li>
-		      <li>
-		        Juicer Branding 
-		      </li>
-		    </ul>
-		    <div class="signup"><a class="button" href="/sign-up">Sign Up for Small</a></div>
-		  </li>
-		</ul>
-
-
-
-
-		[[ include _plans ]]
+    [[ include _plans ]]
   </div>
 
 	[[ include ../partials/confirm-modal ]]