From 06686ff48010e0957124979fc7fb8abae1d11732 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Tue, 7 Oct 2014 01:37:41 -0400
Subject: background scaling demo

---
 public/assets/stylesheets/app.css |  11 +++-
 public/assets/test/bg.html        | 114 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 123 insertions(+), 2 deletions(-)
 create mode 100644 public/assets/test/bg.html

diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 1c20493..eb3bd87 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -414,12 +414,16 @@ iframe.embed {
 .page h1 {
 	font-size: 80px;
 	font-weight: 100;
-	padding: 20px 0 25px 0;
+	padding: 60px 0 25px 0;
 	float: left;
 	width: 100%;
 	border-top: 1px solid;
 }
 
+.page p {
+	margin: 20px;
+}
+
 /* DOCUMENTATION / ABOUT SECTION / FAQ PAGES */
 
 .docs .content {
@@ -1425,6 +1429,7 @@ h4 {
 input[type=range] {
   -webkit-appearance: none;
   -moz-appearance: none;
+  cursor: pointer;
   background-color: black;
   width: 180px;
   height:3px;
@@ -1532,13 +1537,14 @@ input[type="range"]::-webkit-slider-thumb {
 
 .settings {
   padding: 10px 12px 12px 12px;
-  bottom: 20px;
+  bottom: 10px;
   right: 10px;
   font-size: 12px;
   -webkit-transform: translateY(450px);
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
   transform: translateY(450px);
   transition: -webkit-transform 0.2s ease-in-out;
+	width: 210px;
 }
 
 .settings.active {
@@ -1590,6 +1596,7 @@ input[type="range"]::-webkit-slider-thumb {
 .settings input[type="text"] {
   border: 1px solid #000;
   font-size: 15px;
+  max-width: 100%;
   padding: 5px;
 }
 
diff --git a/public/assets/test/bg.html b/public/assets/test/bg.html
new file mode 100644
index 0000000..cd7eaa8
--- /dev/null
+++ b/public/assets/test/bg.html
@@ -0,0 +1,114 @@
+<div id="scene"></div>
+<div style="position:fixed;top:419px;left:10px;">
+<input id="url" value="http://i.asdf.us/im/97/imgrid_1400887539_xx_abridged___dmgk.png">
+<input id="scale" type="range" min="0.01" max="10.0" step="0.1" value="1.0">
+<div id="cursor" style="width:30px;height:30px;background:blue;display:inline-block;"></div>
+</div>
+<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/vendor/tube.js"></script>
+<script src="/assets/javascripts/vendor/loader.js"></script>
+<script src="/assets/javascripts/rectangles/util/constants.js"></script>
+<script src="/assets/javascripts/rectangles/util/mouse.js"></script>
+<script src="/assets/javascripts/rectangles/models/vec2.js"></script>
+<script src="/assets/javascripts/rectangles/models/rect.js"></script>
+<script src="/assets/javascripts/rectangles/models/surface.js"></script>
+<script>
+
+var w = scene.width = 600
+var h = scene.height = 400
+
+var surface = new Surface ()
+surface.add( new Rect( new vec2(10, 100), new vec2(0, 400) ) )
+surface.add( new Rect( new vec2(100, 300), new vec2(200, 400) ) )
+surface.add( new Rect( new vec2(300, 400), new vec2(0, 300) ) )
+surface.add( new Rect( new vec2(400, 500), new vec2(0, 400) ) )
+
+var colors = "#f00 #ff0 #0ff #00f #f0f".split(" ")
+surface.faces.forEach(function(face, i){
+	var el = document.createElement("div")
+	el.style.position = "absolute"
+	el.style.backgroundColor = colors[i%colors.length]
+	el.style.top = face.y.a + "px"
+	el.style.left = face.x.a + "px"
+	el.style.width = face.width() + "px"
+	el.style.height = face.height() + "px"
+	scene.appendChild(el)
+	face.el = el
+})
+
+url.addEventListener("input", updateBackgroundImage)
+scale.addEventListener("input", updateScale)
+
+var bg_w = 1, bg_h = 1, x = 0, y = 0, s = 1
+function updateBackgroundImage(){
+	var img = new Image ()
+	img.onload = function(){
+		x0 = 0
+		y0 = 0
+		bg_w = img.naturalWidth
+		bg_h = img.naturalHeight
+		surface.faces.forEach(function(face, i){
+			face.el.style.backgroundImage = 'url(' + url.value + ')'
+		})
+		update(x,y,bg_w,bg_h)
+	}
+	img.src = url.value
+	img.complete && img.onload()
+}
+function update(x,y,w,h){
+	dx = x
+	dy = y
+	surface.faces.forEach(function(face, i){
+		dx = x-face.x.a
+		dy = y-face.y.a
+		face.el.style.backgroundPosition = dx + 'px ' + dy + 'px'
+		face.el.style.backgroundSize = w*s + 'px ' + h*s + 'px'
+// 		console.log(x,y,' ',dx,dy)
+	})
+}
+updateBackgroundImage()
+
+function updateScale(){
+	s = parseFloat(scale.value)
+	console.log(scale.value, s)
+	update(x,y,bg_w,bg_h)
+}
+
+var leftOffset = 0
+
+var position = new vec2( 40, 40 )
+var dimension = new vec2( 50, 80 )
+var bounds = surface.bounds_at_index_with_dimensions(0, dimension)
+
+var delta = new vec2( 0, 0 )
+
+var dragging = false
+
+var x0 = 0, y0 = 0
+var mymouse = new mouse({
+  el: cursor,
+  down: function(e, cursor){
+  console.log(cursor.x.a, cursor.y.a)
+		dragging = true
+  },
+  drag: function(e, cursor){
+    if (! dragging) return
+    delta = cursor.delta()
+    delta.a = - delta.a
+		x0 = delta.a*s
+		y0 = delta.b*s
+//  console.log(x0,y0)
+		update(x+x0,y+y0,bg_w,bg_h)
+  },
+  up: function(e, cursor, new_cursor){
+    x += delta.a*s
+    y += delta.b*s
+    delta.zero()
+    dragging = false
+  },
+})
+
+
+
+
+</script>
-- 
cgit v1.2.3-70-g09d2