From 0a2cc194d5ccd8155b9591236667cdabef87807f Mon Sep 17 00:00:00 2001
From: Eduardo Lundgren <eduardolundgren@gmail.com>
Date: Sun, 1 Jun 2008 19:44:10 +0000
Subject: [PATCH] Image-cropper real-world demo css fixed

---
 ui/demos/real-world/image-cropper/index.html  |  28 ++---
 .../real-world/image-cropper/real-world.css   | 104 ++++++++++++++++++
 2 files changed, 119 insertions(+), 13 deletions(-)
 create mode 100644 ui/demos/real-world/image-cropper/real-world.css

diff --git a/ui/demos/real-world/image-cropper/index.html b/ui/demos/real-world/image-cropper/index.html
index 6f00035ba..528575aef 100644
--- a/ui/demos/real-world/image-cropper/index.html
+++ b/ui/demos/real-world/image-cropper/index.html
@@ -19,7 +19,7 @@
 /*************************************/
 /* Real-World CSS                    */
 
-@import "../../css/real-world.css";
+@import "real-world.css";
 
 /*************************************/
 /* Demo CSS                          */
@@ -125,21 +125,23 @@
 		minHeight: 100,
 
 		resize: function(e, ui) {
+			var self = $(this).data("resizable");
+			
+  		  this.style.backgroundPosition = '-' + (self.position.left) + 'px -' + (self.position.top) + 'px';
+			
 
-  		  this.style.backgroundPosition = '-' + (ui.instance.position.left) + 'px -' + (ui.instance.position.top) + 'px';
+		  $("#log-top").html(self.position.top+"px");
 
-		  $("#log-top").html(ui.instance.position.top+"px");
+		  $("#log-left").html(self.position.left+"px");
 
-		  $("#log-left").html(ui.instance.position.left+"px");
+		  $("#log-height").html(self.size.height+"px");
 
-		  $("#log-height").html(ui.instance.size.height+"px");
-
-		  $("#log-width").html(ui.instance.size.width+"px");
+		  $("#log-width").html(self.size.width+"px");
 
   	    },
 		stop: function(e, ui) {
-
-  		  this.style.backgroundPosition = '-' + (ui.instance.position.left) + 'px -' + (ui.instance.position.top) + 'px';
+			var self = $(this).data("resizable");
+  		  this.style.backgroundPosition = '-' + (self.position.left) + 'px -' + (self.position.top) + 'px';
   	    }
 	})
 
@@ -150,12 +152,12 @@
 		containment: $('#resizeme_containment_div_wrapper'),
 
 		drag: function(e, ui) {
+			var self = $(this).data("draggable");
+			this.style.backgroundPosition = '-' + (self.position.left) + 'px -' + (self.position.top) + 'px';
 
-			this.style.backgroundPosition = '-' + (ui.position.left) + 'px -' + (ui.position.top) + 'px';
-
-		  $("#log-top").html(ui.instance.position.top+"px");
+		  $("#log-top").html(self.position.top+"px");
 
-		  $("#log-left").html(ui.instance.position.left+"px");
+		  $("#log-left").html(self.position.left+"px");
 
 		}
 
diff --git a/ui/demos/real-world/image-cropper/real-world.css b/ui/demos/real-world/image-cropper/real-world.css
new file mode 100644
index 000000000..f7630bd8f
--- /dev/null
+++ b/ui/demos/real-world/image-cropper/real-world.css
@@ -0,0 +1,104 @@
+/*************************************/
+/* Blueprint: reset.css              */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	font-size: 100%;
+	font-family: inherit;
+	vertical-align: baseline;
+}
+
+/* Remember to define focus styles! */
+:focus {
+	outline: 0;
+}
+body {
+	line-height: 1;
+	color: black;
+	background: white;
+}
+ol, ul {
+	list-style: none;
+}
+
+/* Tables still need 'cellspacing="0"' in the markup. */
+table {
+	border-collapse: separate;
+	border-spacing: 0;
+}
+caption, th, td {
+	text-align: left;
+	font-weight: normal;
+}
+
+/* Remove possible quote marks (") from <q>, <blockquote>. */
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: "";
+}
+blockquote, q {
+	quotes: "" "";
+}
+
+.clear {
+    clear:both;
+}
+
+/*************************************/
+/* Layout                            */
+body, html {
+	height: 100%;
+    font-family:sans-serif;
+    font-size:13px;
+    margin:0px;
+    padding:0px;
+}
+body, html {
+	height: 100%;
+    font-family:sans-serif;
+    font-size:13px;
+    
+}
+#main {
+    height:auto;
+    background: #E8EEF7;
+    border-left:1px solid #ccc;
+    border-bottom:1px solid #ccc;
+    margin:0 0 0 200px;
+}
+	#header {
+	    height:30px;
+	    padding:10px;
+	    font-size:2em;
+	    font-weight:bold;
+		text-align: center;
+	    border-bottom:1px solid #ccc;
+        background: #E8EEF7;
+	}
+	#main #content {
+	    padding:10px;
+        background: #FFF;
+	}
+    #main #break {
+	    padding:10px;
+	    border-top:1px solid #ccc;
+    }
+#sidebar {
+    float:left;
+    width:200px;
+    height:100%;
+    border-right:1px solid #ccc;
+}
+    #sidebar div {
+        padding:10px;
+    }
-- 
2.39.5