Added HEADER_EXPANDER_MANUAL config directive to allow for manual expanding/contracting (via clickable image) of the header area

Images from OpenIconLibrary: http://openiconlibrary.sourceforge.net/gallery2/?./Icons/actions

config.default.php

@@ -220,6 +220,11 @@ if (!defined('TAB_INFO')) define('TAB_INFO', true);
  */
 if (!defined('HEADER_EXPANDER')) define('HEADER_EXPANDER', false);
 
+/**
+ * Enable a header expander for the main page to shrink/expand when clicking on an arrow?
+ */
+if (!defined('HEADER_EXPANDER_MANUAL')) define('HEADER_EXPANDER_MANUAL', false);
+
 /**
  * Define how many minutes between each system sort (defaults to 5 as this is a common interval for appointments)
  */

css/index.css

@@ -1,3 +1,13 @@
+.headerexpand {
+    text-align: center;
+    position: absolute; 
+    height: 20px;
+    bottom: 0px;
+    width: 100%;
+}
+#headerexpandimage {
+	height: 20px;
+}
 .box {
  margin: 8px;	
 }

index.php

@@ -111,7 +111,15 @@ if (AUTO_LOGOUT_MINUTES !== false)
 }
 
 if (HEADER_EXPANDER) 
+{
 	$js[] = "js/headerexpand.js";
+	$js[] = "js/headerexpandauto.js";
+}
+else if (HEADER_EXPANDER_MANUAL) 
+{
+	$js[] = "js/headerexpand.js";
+	$js[] = "js/headerexpandmanual.js";
+}
 
 xhtml_head(T_("queXS"), $body, array("css/index.css","css/tabber.css","include/jquery-ui/css/smoothness/jquery-ui-1.8.2.custom.css") , $js);
 print $script;
@@ -124,6 +132,7 @@ print $script;
 	<div class='box important'><a href="javascript:poptastic('call.php');"><? echo T_("Call/Hangup"); ?></a></div>
 	<div class='box'><a href="javascript:poptastic('supervisor.php');"><? echo T_("Supervisor"); ?></a></div>
 	<div class='box' id='recbox'><a id='reclink' class='offline' href="javascript:poptastic('record.php?start=start');"><? echo T_("Start REC"); ?></a></div>
+	<? if (HEADER_EXPANDER_MANUAL){ ?> <div class='headerexpand'><img id='headerexpandimage' src='./images/arrow-up-2.png' alt='<? echo T_('Arrow for expanding or contracting'); ?>'/></div> <? } ?>
 </div>
 
 <div id="content" class="content">

js/headerexpand.js

@@ -1,21 +1,16 @@
-//Apply to all items of class header
+function headerexpand()
-$(document).ready(function(){
+{
-		$(".header").hover(
+	$(".header").css("height","30%");
-			//function on mouse over
+	$(".content").css("height","70%");
-			function(){
+	$(".content").css("top","30%");
-				$(".header").css("height","30%");
+	$(".box:not(.important)").css("display","");
-				$(".content").css("height","70%");
+}
-				$(".content").css("top","30%");
-				$(".box:not(.important)").css("display","");
-			},
 
-			//function on mouse out
+function headercontract()
-			function(){
+{
-				$(".header").css("height","5%");
+	$(".header").css("height","5%");
-				$(".content").css("height","95%");
+	$(".content").css("height","95%");
-				$(".content").css("top","5%");
+	$(".content").css("top","5%");
-				$(".box:not(.important)").css("display","none");
+	$(".box:not(.important)").css("display","none");
-			}
-			);
 
-		});
+}

js/headerexpandauto.js

@@ -0,0 +1,11 @@
+//Apply to all items of class header
+$(document).ready(function(){
+		$(".header").hover(
+			//function on mouse over
+			headerexpand,
+
+			//function on mouse out
+			headercontract
+			);
+
+		});

js/headerexpandmanual.js

@@ -0,0 +1,20 @@
+//Apply to all items of class header
+$(document).ready(function(){
+		$("#headerexpandimage").click(headertogglemanual);
+
+		});
+
+function headertogglemanual()
+{
+	if ($("#headerexpandimage").attr('src') == './images/arrow-up-2.png')
+	{
+		$("#headerexpandimage").attr('src',"./images/arrow-down-2.png");
+		headercontract();
+	}
+	else
+	{
+		$("#headerexpandimage").attr('src',"./images/arrow-up-2.png");
+		headerexpand();
+	}
+
+}