From b25b2a3973652d750ab49d11607036a915137a50 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Tue, 24 Jul 2012 16:22:14 +0400
Subject: [PATCH] split markers into a seporate set of files... make compleatly
 standalone...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui/experiment-ribbon-navigation-n-zoom.html | 30 +++------------------
 ui/gallery.html                             |  7 +++++
 ui/markers.css                              | 21 +++++++++++++++
 ui/markers.js                               | 10 +++++++
 4 files changed, 41 insertions(+), 27 deletions(-)
 create mode 100755 ui/markers.css
 create mode 100755 ui/markers.js

diff --git a/ui/experiment-ribbon-navigation-n-zoom.html b/ui/experiment-ribbon-navigation-n-zoom.html
index e6ba451f..417e9aa0 100755
--- a/ui/experiment-ribbon-navigation-n-zoom.html
+++ b/ui/experiment-ribbon-navigation-n-zoom.html
@@ -12,7 +12,10 @@ XXX zoom animation is odd...
 
 -->
 
+<link rel="stylesheet" href="markers.css">
+
 <script src="jquery.js"></script>
+<script src="markers.js"></script>
 <script src="ui.js"></script>
 
 <script>
@@ -25,15 +28,6 @@ $(document).ready(function(){
 	$('.current.image').click()
 })
 
-function toggleMarkers(){
-	var marker = $('.v-marker, .h-marker')
-	if(marker.css('display') == 'none'){
-		marker.fadeIn()
-	} else {
-		marker.fadeOut()
-	}
-}
-
 function imageClick(){
 	// set classes...
 	$('.current').removeClass('current')
@@ -65,24 +59,6 @@ function imageClick(){
 	overflow: hidden;
 }
 
-.h-marker {
-	position: absolute;
-	border-top: solid blue 1px;
-	height: 0px;
-	width: 100%;
-	top: 50%;
-	left: 0px;
-}
-
-.v-marker {
-	position: absolute;
-	border-left: solid blue 1px;
-	height: 100%;
-	width: 0px;
-	top: 0px;
-	left: 50%;
-}
-
 .field {
 	position: relative;
 	top: 0px;
diff --git a/ui/gallery.html b/ui/gallery.html
index c4c959b0..4977cb9b 100755
--- a/ui/gallery.html
+++ b/ui/gallery.html
@@ -3,6 +3,7 @@
 -->
 
 <link rel="stylesheet" href="gallery.css">
+<link rel="stylesheet" href="markers.css">
 <script src="jquery.js"></script>
 
 <script src="jquery.touchSwipe.js"></script>
@@ -17,6 +18,7 @@
 <script src="gallery-prototype.js"></script>
 
 <script src="ui.js"></script>
+<script src="markers.js"></script>
 
 <!--script src="gallery.js"></script-->
 
@@ -69,6 +71,8 @@ $(document).ready(setup);
 				<div class="image mock-image"></div-->
 			</div>
 		</div>
+		<div class="h-marker"></div>
+		<div class="v-marker"></div>
 	</div>
 	<div class="controller">
 		<div class="demote">^</div>
@@ -79,6 +83,9 @@ $(document).ready(setup);
 </div>
 
 <div class="demo-buttons">
+	<button onclick="toggleMarkers()">Toggle Guides</button>
+
+	<br><br>
 
 	<button onclick="firstImage()">first (home)</button>
 	<button onclick="prevImage()">prev (left)</button>
diff --git a/ui/markers.css b/ui/markers.css
new file mode 100755
index 00000000..27368e47
--- /dev/null
+++ b/ui/markers.css
@@ -0,0 +1,21 @@
+
+.h-marker {
+	position: absolute;
+	border-top: solid blue 1px;
+	height: 0px;
+	width: 100%;
+	top: 50%;
+	left: 0px;
+	display: none;
+}
+
+.v-marker {
+	position: absolute;
+	border-left: solid blue 1px;
+	height: 100%;
+	width: 0px;
+	top: 0px;
+	left: 50%;
+	display: none;
+}
+
diff --git a/ui/markers.js b/ui/markers.js
new file mode 100755
index 00000000..0b5908e7
--- /dev/null
+++ b/ui/markers.js
@@ -0,0 +1,10 @@
+
+function toggleMarkers(){
+	var marker = $('.v-marker, .h-marker')
+	if(marker.css('display') == 'none'){
+		marker.fadeIn()
+	} else {
+		marker.fadeOut()
+	}
+}
+