From 00d7ed76a3e877476e50e9ced1230fc37a086d2b Mon Sep 17 00:00:00 2001
From: rWatcher <rwatcher@australia.edu>
Date: Mon, 24 Aug 2009 17:15:56 -0400
Subject: [PATCH] Highlight face on mouseover.

---
 .../views/drawfaces_highlight_block.html.php  | 63 +++++++++++++------
 1 file changed, 43 insertions(+), 20 deletions(-)

diff --git a/modules/tagfaces/views/drawfaces_highlight_block.html.php b/modules/tagfaces/views/drawfaces_highlight_block.html.php
index 1bca9330..3dfd9f32 100644
--- a/modules/tagfaces/views/drawfaces_highlight_block.html.php
+++ b/modules/tagfaces/views/drawfaces_highlight_block.html.php
@@ -9,8 +9,20 @@
   //   to show where the faces are at.
   if (count($existingFaces) > 0) {
 ?>
-
-<div class="square" title="Test" id="divfacebox" style="display:none;left:5;top:5;width:50;height:50;"></div>
+<style>
+.transparent30
+{
+   filter:alpha(opacity=30); 
+   -moz-opacity: 0.3; 
+   opacity: 0.3; 
+}
+.transparent80
+{
+   filter:alpha(opacity=80); 
+   -moz-opacity: 0.8; 
+   opacity: 0.8; 
+}
+</style>
 
 <script type="text/JavaScript">
   function setfacemap() {
@@ -19,35 +31,46 @@
     photoimg.useMap = '#faces';
   }
 
-function highlightbox(x1, y1, x2, y2, str_title) {
-	// Put a div over a face when the mouse moves over it.
-	// Doesn't actually work :(
-    var photoimg = document.getElementById('gPhotoId-<?=$item->id ?>');
-    var facediv = document.getElementById('divfacebox');
-    facediv.title = str_title;
-    facediv.style.display = 'block';
-    facediv.style.left = photoimg.offsetLeft + x1;
-    facediv.style.top = photoimg.offsetTop + y1;
-    facediv.style.width=x2-x1;
-    facediv.style.height=y2-y1;
-}
-
-function hidebox() {
-  // Hide the div when the mouse moves off of the face.
-  document.getElementById('divfacebox').style.display = 'none';
-}
+  function highlightbox(x1, y1, x2, y2, str_title, str_url) {
+    var divtext = document.getElementById('divtagtext');
+    var photodiv = document.getElementById('gPhoto');
+    var photoimg = document.getElementById('<?="gPhotoId-{$item->id}"?>');
+    var divface = document.getElementById('divsquare');
+    
+    divface.style.display = 'block';
+    divface.style.left = (photoimg.offsetLeft + x1) + 'px';
+    divface.style.top = (photodiv.offsetTop + y1) + 'px';
+    divface.style.width=(x2-x1) + 'px';
+    divface.style.height=(y2-y1) + 'px';
+    divface.onclick = function() {self.location.href = str_url;}
+    
+    divtext.style.display = 'block';
+    divtext.style.left = divface.style.left;
+    divtext.innerText = str_title;
+    divtext.textContent = str_title;
+    divtext.style.top = (parseInt(divface.style.top.split('p')[0]) + parseInt(divface.style.height.split('p')[0]) + 2) + 'px';
+  }
 
+  function hidebox() {
+    // Hide the divs when the mouse moves off of the face.
+    document.getElementById('divsquare').style.display = 'none';
+    document.getElementById('divtagtext').style.display = 'none';
+  }
+  
   // Call setfacemap when the page loads.
   window.onload = setfacemap();
 </script>
 
+<div id="divtagtext" class="transparent80" style="position:absolute;display:none;border:2px #000000 outset;background-color:#ffffff;font-weight:bold;"></div> 
+<div id="divsquare" class="transparent30" onMouseOut="hidebox()" style="position:absolute;display:none;border:2px solid #000000;background-color:#ffffff;" onclick="self.location.href = '';"></div>
+
 <map name="faces">
 <?
     // For each face, add a rectangle area to the page.
     foreach ($existingFaces as $oneFace) {
       $oneTag = ORM::factory("tag", $oneFace->tag_id)
 ?>
-  <area shape="rect" coords="<?=$oneFace->x1 ?>,<?=$oneFace->y1 ?>,<?=$oneFace->x2 ?>,<?=$oneFace->y2 ?>" href="<?=url::site("tags/$oneFace->tag_id") ?>" title="<?=p::clean($oneTag->name); ?>" alt="<?=$oneTag->name; ?>" onMouseOver="highlightbox(<?=$oneFace->x1 ?>,<?=$oneFace->y1 ?>,<?=$oneFace->x2 ?>,<?=$oneFace->y2 ?>,'<?=p::clean($oneTag->name); ?>')" onMouseOut="hidebox()" />
+  <area shape="rect" coords="<?=$oneFace->x1 ?>,<?=$oneFace->y1 ?>,<?=$oneFace->x2 ?>,<?=$oneFace->y2 ?>" href="<?=url::site("tags/$oneFace->tag_id") ?>" title="<?=p::clean($oneTag->name); ?>" alt="<?=p::clean($oneTag->name); ?>" onMouseOver="highlightbox(<?=$oneFace->x1 ?>,<?=$oneFace->y1 ?>,<?=$oneFace->x2 ?>,<?=$oneFace->y2 ?>,'<?=p::clean($oneTag->name); ?>', '<?=url::site("tags/$oneFace->tag_id") ?>')" />
 <? } ?>
 </map>
 <?