From 0ec53f52347e996a7060ad3eb35dc8f7d88e71c5 Mon Sep 17 00:00:00 2001
From: rWatcher <rwatcher@australia.edu>
Date: Fri, 2 Apr 2010 07:52:20 +0800
Subject: [PATCH] Fixed weird RTL bug.

---
 modules/tagfaces/js/jquery.Jcrop.js       |  2 +-
 modules/tagfaces/views/drawfaces.html.php | 76 +++++++++++++----------
 2 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/modules/tagfaces/js/jquery.Jcrop.js b/modules/tagfaces/js/jquery.Jcrop.js
index ad261f97..d938e203 100644
--- a/modules/tagfaces/js/jquery.Jcrop.js
+++ b/modules/tagfaces/js/jquery.Jcrop.js
@@ -105,7 +105,7 @@ $.Jcrop = function(obj,opt)
 	// Initialize some jQuery objects {{{
 
 	var $origimg = $(obj);
-	var $img = $origimg.clone().removeAttr('id').css({ position: 'absolute' });
+	var $img = $origimg.clone().removeAttr('id').css({ position: 'static' });
 
 	$img.width($origimg.width());
 	$img.height($origimg.height());
diff --git a/modules/tagfaces/views/drawfaces.html.php b/modules/tagfaces/views/drawfaces.html.php
index 981854c8..2dc9800f 100644
--- a/modules/tagfaces/views/drawfaces.html.php
+++ b/modules/tagfaces/views/drawfaces.html.php
@@ -6,20 +6,20 @@
 
 .jcrop-vline, .jcrop-hline
 {
-	font-size: 0;
-	position: absolute;
-	background: white url('<?= url::file("modules/tagfaces/images/Jcrop.gif") ?>') top left repeat;
+  font-size: 0;
+  position: absolute;
+  background: white url('<?= url::file("modules/tagfaces/images/Jcrop.gif") ?>') top left repeat;
 }
 .jcrop-vline { height: 100%; width: 1px !important; }
 .jcrop-hline { width: 100%; height: 1px !important; }
 .jcrop-handle {
-	font-size: 1px;
-	width: 7px !important;
-	height: 7px !important;
-	border: 1px #eee solid;
-	background-color: #333;
-	*width: 9px;
-	*height: 9px;
+  font-size: 1px;
+  width: 7px !important;
+  height: 7px !important;
+  border: 1px #eee solid;
+  background-color: #333;
+  *width: 9px;
+  *height: 9px;
 }
 
 .jcrop-tracker { width: 100%; height: 100%; }
@@ -27,14 +27,14 @@
 .custom .jcrop-vline,
 .custom .jcrop-hline
 {
-	background: yellow;
+  background: yellow;
 }
 .custom .jcrop-handle
 {
-	border-color: black;
-	background-color: #C7BB00;
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
+  border-color: black;
+  background-color: #C7BB00;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
 }
 </style>
 
@@ -60,30 +60,42 @@
   };
 </script>
 
-<div id="g-album-header">
-  <div id="g-album-header-buttons">
-    <?= $theme->dynamic_top() ?>
-  </div>
-  <h1><?= html::clean($title) ?></h1>
-</div>
-  <p><?=t("Use the mouse to select a face on the image below."); ?></p>
 
-<fieldset> 
-  <div id="g-item">
-    <div id="g-info">
-      <h2><?= html::purify($item->title) ?></h2>
-    </div>
-    <div id="g-photo">
-      <?= $item->resize_img(array("id" => "g-photo-id-{$item->id}", "class" => "g-resize")) ?>
-    </div>
+<?= html::script("modules/tagfaces/js/jquery.Jcrop.js") ?>
+
+<script language="Javascript">
+  // Remember to invoke within jQuery(window).load(...)
+  // If you don't, Jcrop may not initialize properly
+  jQuery(document).ready(function(){
+    jQuery('#g-select-photo-id-<?=$item->id ?>').Jcrop({
+      onChange: showCoords,
+      onSelect: showCoords
+    });
+  });
+
+  // Our simple event handler, called from onChange and onSelect
+  // event handlers, as per the Jcrop invocation above
+  function showCoords(c) {
+    jQuery('#x1').val(c.x);
+    jQuery('#y1').val(c.y);
+    jQuery('#x2').val(c.x2);
+    jQuery('#y2').val(c.y2);
+  };
+</script>
+
+<div id="g-select-item">
+  <?= $theme->dynamic_top() ?>
+  <div id="g-select-photo" align="center">
+  <h1><?= html::clean($title) ?></h1>
+  <p><?=t("Use the mouse to select a face on the image below."); ?></p>
+      <?= $item->resize_img(array("id" => "g-select-photo-id-{$item->id}", "class" => "g-select-resize", "style" => "position: fixed;")) ?>
   </div>
-</fieldset> 
+</div>
 
 <style>
 #face_title {
   width: 200px;
 }
-
 #face_description {
   width: 400px;
 }