From 1f0fe601c697c15813068b730ecbef4c68fe983c Mon Sep 17 00:00:00 2001
From: Andre Lorbach <alorbach@adiscon.com>
Date: Thu, 7 Aug 2008 16:09:43 +0200
Subject: [PATCH] Enhanced the detail popup window, it performs much better now
 and is less annoying.

You can close a detail popup by clicking into its content now. And it locates itself
to the middle of your mouse pointer location.
---
 src/css/defaults.css     | 16 +++++++++--
 src/css/menu.css         |  2 +-
 src/js/common.js         | 62 ++++++++++++++++++++++++++++++++++++++++
 src/templates/index.html |  8 +++---
 4 files changed, 81 insertions(+), 7 deletions(-)

diff --git a/src/css/defaults.css b/src/css/defaults.css
index 9dc39ec..4907eb8 100644
--- a/src/css/defaults.css
+++ b/src/css/defaults.css
@@ -33,19 +33,30 @@
 {
 	font-weight:normal;
     text-decoration:none;
+    position:relative;
+	overflow:visible;
 }
 .syslogdetails
 {
-    position:relative; /*this is the key*/
+    position:relative;
+	overflow:visible;
 	z-index:4;
 }
 
 .syslogdetails:hover
 {
+    position:relative; /*this is the key*/
 	font-weight:normal;
 	z-index:5; 
 }
-.syslogdetails span {display: none}
+.syslogdetails span
+{
+    position:relative;
+	overflow:visible;
+	display: none;
+	z-index:-1; 
+
+}
 /*the span will display just on :hover state*/
 /*
 .syslogdetails:hover span
@@ -60,6 +71,7 @@
 { 
     display:block;
     position:absolute;
+	overflow:auto;
 	z-index:5; 
 /*    top:15px; */
 /*    left:15px; */
diff --git a/src/css/menu.css b/src/css/menu.css
index 4066524..a9156b3 100644
--- a/src/css/menu.css
+++ b/src/css/menu.css
@@ -19,7 +19,7 @@
 
 #menu h2 {
 	font-size: 12px;
-	font: bold;
+	font-weight: bold;
 	text-align: center;
 }
 
diff --git a/src/js/common.js b/src/js/common.js
index fef542a..e0dfdf6 100644
--- a/src/js/common.js
+++ b/src/js/common.js
@@ -234,3 +234,65 @@ function DebugShowElementsById(ObjName)
 		document.write(obj[key]);
 	}
 }
+
+
+/* 
+*	Detail popup handling functions
+*/
+var myPopupHovering = false;
+function HoveringPopup(event, parentObj)
+{
+	// This will allow the detail window to be relocated
+	myPopupHovering = true;
+}
+
+function FinishHoveringPopup(event, parentObj)
+{
+	// This will avoid moving the detail window when it is open
+	myPopupHovering = false;
+}
+
+function initPopupWindow(parentObj)
+{
+	// Change CSS Class
+	parentObj.className='syslogdetails_popup';
+}
+
+function FinishPopupWindow(parentObj)
+{
+	// Change CSS Class
+	parentObj.className='syslogdetails';
+}
+
+function disableEventPropagation(myEvent)
+{
+	/* This workaround is specially for our beloved Internet Explorer */
+	if ( window.event)
+	{
+		window.event.cancelBubble = true; 
+	}
+}
+
+function movePopupWindow(myEvent, ObjName, PopupContentWidth, parentObj)
+{
+	var obj = document.getElementById(ObjName);
+	var middle = PopupContentWidth / 2;
+//	alert ( parentObj.className ) ;
+	if (myPopupHovering == false)
+	{
+		obj.style.left = (myEvent.clientX - middle) + 'px';
+	}
+}
+
+function GoToPopupTarget(myTarget, parentObj)
+{
+	if (!myPopupHovering)
+	{
+		// Change document location
+		document.location=myTarget;
+	}
+	else /* Close Popup */
+	{
+		FinishPopupWindow(parentObj);
+	}
+}
diff --git a/src/templates/index.html b/src/templates/index.html
index 957e720..27ff4c5 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -265,14 +265,14 @@
 		<!-- ENDIF hasdetails="false" -->
 
 		<!-- IF hasdetails="true" -->
-		<div OnClick="document.location='{detaillink}{additional_url_sourceonly}';" style="cursor:pointer" class="syslogdetails" OnMouseOver="this.className='syslogdetails_popup';"  OnMouseOut="this.className='syslogdetails';">{fieldvalue}<br />
-		<span>
-			<table cellpadding="0" cellspacing="1" border="0" width="500" align="left" class="with_border_alternate">
+		<div OnClick="GoToPopupTarget('{detaillink}{additional_url_sourceonly}',this);" style="cursor:pointer" class="syslogdetails" OnMouseMove="movePopupWindow(event,'details_{FieldColumn}_{uid}',500, this);"  OnMouseOver="initPopupWindow(this);" OnMouseOut="FinishPopupWindow(this);">{fieldvalue}<br />
+		<span id="details_{FieldColumn}_{uid}" OnMouseOver="HoveringPopup(event,this);" OnMouseOut="FinishHoveringPopup(event,this);">
+			<table cellpadding="0" cellspacing="1" border="0" width="500" align="left" class="with_border_alternate" OnMouseMove="disableEventPropagation();">
 			<tr><td colspan="2" class="cellmenu1" align="center"><B>{popupcaption}</B></td></tr>
 			<!-- BEGIN messagesdetails -->
 			<tr>
 				<td width="150" nowrap class="cellmenu2">{detailfieldtitle}</td>
-				<td width="100%" class="{detailscssclass}" >{detailfieldvalue}</td>
+				<td width="100%" class="{detailscssclass}">{detailfieldvalue}</td>
 			</tr>
 			<!-- END messagesdetails -->
 			</table>