From f67226545bdc14013f066fba86b243a69b549b81 Mon Sep 17 00:00:00 2001
From: JT Smith <jt@plainblack.com>
Date: Fri, 11 Jul 2003 04:59:54 +0000
Subject: [PATCH] Fixed Tab Form for better behavior under older browsers, less
 resource usage, and a cookie bug that would log out the users.

---
 docs/credits.txt         |  3 ---
 lib/WebGUI/TabForm.pm    | 14 +++-----------
 www/extras/tabs/tabs.css | 40 ++++++++++++++++++++++++++++++++++++++++
 www/extras/tabs/tabs.js  | 28 ++++++++++++++++++++++++++++
 4 files changed, 71 insertions(+), 14 deletions(-)
 create mode 100644 www/extras/tabs/tabs.css
 create mode 100644 www/extras/tabs/tabs.js

diff --git a/docs/credits.txt b/docs/credits.txt
index b96a3a45d..5c21329b8 100644
--- a/docs/credits.txt
+++ b/docs/credits.txt
@@ -95,6 +95,3 @@ HTML Area............................interactivetools.com
 
 Classic Rich Edit....................Bratta
 
-Tab DHTML............................Garrett Smith
-                                     dhtmlkitchen.com
-
diff --git a/lib/WebGUI/TabForm.pm b/lib/WebGUI/TabForm.pm
index 654d10b42..c94fe0f1f 100644
--- a/lib/WebGUI/TabForm.pm
+++ b/lib/WebGUI/TabForm.pm
@@ -171,10 +171,6 @@ Returns an HTML string with all the necessary components to draw the tab form.
 
 sub print {
 	my $output = '
-		<script src="'.$session{config}{extrasURL}.'/tabs/utils.js" type="text/javascript"></script>
-		<script src="'.$session{config}{extrasURL}.'/tabs/viewport.js" type="text/javascript"></script>
-		<script src="'.$session{config}{extrasURL}.'/tabs/global.js" type="text/javascript"></script>
-		<script src="'.$session{config}{extrasURL}.'/tabs/cookie.js" type="text/javascript"></script>
 		<script src="'.$session{config}{extrasURL}.'/tabs/tabs.js" type="text/javascript"></script>
 		<link href="'.$session{config}{extrasURL}.'/tabs/tabs.css" rel="stylesheet" rev="stylesheet" type="text/css">
 	';
@@ -184,12 +180,8 @@ sub print {
 	my $tabs;
 	my $form;	
 	foreach my $key (keys %{$_[0]->{_tab}}) {
-		$tabs .= '<span id="tab'.$i.'" class="tab';
-		if ($i == 1) {
-			$tabs .= ' tabActive';
-		}
-		$tabs .= '">'.$_[0]->{_tab}{$key}{label}.'</span> ';
-		$form .= '<div id="content'.$i.'" class="tabBody"><table>';
+		$tabs .= '<span onclick="toggleTab('.$i.')" id="tab'.$i.'" class="tab">'.$_[0]->{_tab}{$key}{label}.'</span> ';
+		$form .= '<div id="tabcontent'.$i.'" class="tabBody"><table>';
 		$form .= $_[0]->{_tab}{$key}{form}->printRowsOnly;
 		$form .= '</table></div>';
 		$i++;
@@ -197,7 +189,7 @@ sub print {
 	$output .= '<div class="tabs">'.$tabs.$_[0]->{_submit}.'</div>';
 	$output .= $form;
 	$output .= '</form>';
-	$output .= '<script>tabInit();</script>';
+	$output .= '<script>var numberOfTabs = '.($i-1).'; initTabs();</script>';
 	return $output;
 }
 
diff --git a/www/extras/tabs/tabs.css b/www/extras/tabs/tabs.css
new file mode 100644
index 000000000..dac381c89
--- /dev/null
+++ b/www/extras/tabs/tabs.css
@@ -0,0 +1,40 @@
+.tab {
+	display: inline; 
+	text-decoration: none;
+	margin-right: 3px;
+	font-weight: bold;
+         padding: 2px 9px 1px 9px;
+         z-index: 100;
+         border-bottom-width: 0;
+          border-top-width: 1 !important;
+          border-bottom-width: 0px !important;
+}
+
+.tabBody {
+	width: auto;
+         position: relative;
+         padding: 8px 12px 12px 12px;
+         z-index: 500;
+     }
+
+div.tabs {
+         position: relative;
+        top: 2px;
+        left: 8px;
+         white-space: nowrap;
+         cursor: default !important;
+         z-index: 10000;
+}
+
+.tabHover {
+         z-index: 1200;
+         border-bottom-width: 0;
+}
+
+.tabActive {
+         padding: 3px 9px 3px 9px;
+         z-index: 10000;
+         top: -2px;
+}
+
+
diff --git a/www/extras/tabs/tabs.js b/www/extras/tabs/tabs.js
new file mode 100644
index 000000000..f80d5c428
--- /dev/null
+++ b/www/extras/tabs/tabs.js
@@ -0,0 +1,28 @@
+function hoverOn(){
+        this.className = 'tab tabHover';
+}
+
+function hoverOff(){
+        this.className = 'tab';
+}
+
+function toggleTab(i){
+        if (document.getElementById){
+                for (f=1;f<numberOfTabs+1;f++){
+                        document.getElementById('tabcontent'+f).style.display='none';
+                        document.getElementById('tab'+f).className = 'tab';
+	 		document.getElementById('tab'+f).onmouseover = hoverOn;
+	 		document.getElementById('tab'+f).onmouseout = hoverOff;
+                }
+                document.getElementById('tabcontent'+i).style.display='block';
+                document.getElementById('tab'+i).className = 'tab tabActive';
+	 	document.getElementById('tab'+i).onmouseover = '';
+	 	document.getElementById('tab'+i).onmouseout = '';
+        }
+}
+
+function initTabs () {
+        toggleTab(1);
+}
+
+