Widget base. Note: changes to widgets are not saved yet.

33 files changed, 1024 insertions, 266 deletions

diff --git a/usr/local/www/index.php b/usr/local/www/index.php
index 4f6e436..59809c2 100755
--- a/usr/local/www/index.php
+++ b/usr/local/www/index.php
@@ -35,7 +35,6 @@
 	require_once('guiconfig.inc');
 	require_once('notices.inc');
 
-
 	## Load Functions Files
 	require_once('includes/functions.inc.php');
 
@@ -113,300 +112,287 @@
 		}
 		fclose($fd);
 	}
+	/*
+if (!is_array($config['widgets']['widget']))
+$config['widgets']['widget'] = array();
 
-	//set variables for traffic graph
-	$width = "300";
-	$height = "150";
+$a_schedules = &$config['widgets']['widget'];
 	
-	//set variables for log
-	$system_logfile = "{$g['varlog_path']}/system.log";
+if ($_POST){
 	
-$jscriptstr = <<<EOD
-<script type="text/javascript">
-
-function showgraph(incInterface){
-
-	d = document;	
-	var tempArray = incInterface.split("-");
-	selectInt = tempArray[1];
-	realInt = tempArray[0];
-	tr = d.getElementById(selectInt);
-
-	div = d.createElement("div");
-	selectIntID = selectInt + "graphdiv";
-	div.setAttribute ('id', selectIntID);
-	div.innerHTML= "<embed id='" + selectIntID + "' name='graph' src='graph.php?ifnum=" + realInt + "&ifname=" + selectInt + "' type='image/svg+xml' width='$width' height='$height' pluginspage='http://www.adobe.com/svg/viewer/install/auto' />";
-	tr.appendChild(div);
-	selectIntLink = selectInt + "graphlink";
-	textlink = d.getElementById(selectIntLink);
-	textlink.parentNode.removeChild(textlink);
-	
-	selectIntID = selectInt + "closegraph";
-	closelink = d.getElementById(selectIntID);
-	closelink.style.display="block";
+}
+*/
 	
+if ($config['widgets'])
+{
+	foreach ($config['widgets'] as $widget)
+	{
+		
+	}
+}
+else
+{
+	//build list of widgets
+	$directory = "widgets/widgets/";
+	$dirhandle  = opendir($directory);
+	$filename = "";
+	while (false !== ($filename = readdir($dirhandle))) {
+   		$periodpos = strpos($filename, ".");
+		$widgetname = substr($filename, 0, $periodpos);	
+   		if ($widgetname != "system information")
+   			$widgetfiles[] = $filename;   		
+	}
+	sort($widgetfiles);
+	array_unshift($widgetfiles, "system information.widget.php");
 }
+	
+	
 
-function closegraph(incInterface, imagelocation){
-	d = document;	
-	var tempArray = incInterface.split("-");
-	selectInt = tempArray[1];
-	realInt = tempArray[0];
-	selectIntLink = selectInt + "graphdiv";
-	close = d.getElementById(selectIntLink);
-	close.parentNode.removeChild(close);
-		
-	selectIntLink = selectInt + "closegraph";
-	closelink = d.getElementById(selectIntLink);
-	closelink.style.display = "none";
-	tr = d.getElementById(selectInt);
-	span = d.createElement("div");
-	selectedIntID = selectInt + "graphlink";
-	span.setAttribute ('id', selectedIntID);
-	onclick = "return showgraph('" + realInt + "-" + selectInt + "')";
-	span.setAttribute ("onclick", onclick);
-	span.innerHTML = "<center><img src='" + imagelocation + "' height='32' width='28' border='0' align='middle' alt='Click here to show current " + selectInt + " traffic'' /></center>";
 	
-	tr.appendChild(span);			
+	//build list of php include files
+	$phpincludefiles = Array();
+	$directory = "widgets/include/";
+	$dirhandle  = opendir($directory);
+	$filename = "";
+	while (false !== ($filename = readdir($dirhandle))) {
+   		$phpincludefiles[] = $filename;
+	}
+	foreach($phpincludefiles as $includename) {
+		if(!stristr($includename, ".inc"))
+			continue;	
+		include($directory . $includename);
+	}
+	
 	
+
+$jscriptstr = <<<EOD
+<script language="javascript" type="text/javascript">
+
+
+function showDiv(selectedDiv,swapButtons){
+		//appear element
+    Effect.BlindDown(selectedDiv, {duration:1});      
+    
+    if (swapButtons){
+	    d = document;	
+	    selectIntLink = selectedDiv + "-min";
+		textlink = d.getElementById(selectIntLink);
+		textlink.style.display = "inline";
+	    
+	    
+	    selectIntLink = selectedDiv + "-open";
+		textlink = d.getElementById(selectIntLink);
+		textlink.style.display = "none";
+		
+		selectIntLink = selectedDiv + "-input";
+		textlink = d.getElementById(selectIntLink);
+		textlink.value = "show";	
+    }
+    updatePref();
 }
 	
+function minimizeDiv(selectedDiv,swapButtons){
+	//fade element
+    Effect.BlindUp(selectedDiv, {duration:1});      
+    if (swapButtons){
+	    d = document;	
+	    selectIntLink = selectedDiv + "-open";
+		textlink = d.getElementById(selectIntLink);
+		textlink.style.display = "inline";	    
+	    
+	    selectIntLink = selectedDiv + "-min";
+		textlink = d.getElementById(selectIntLink);
+		textlink.style.display = "none";
+		
+		selectIntLink = selectedDiv + "-input";
+		textlink = d.getElementById(selectIntLink);
+		textlink.value = "hide";	
+    }
+    updatePref();
+}
+
+function closeDiv(selectedDiv){
+	selectedDiv = selectedDiv + "div";
+	Effect.Fade(selectedDiv, {duration:1}); 
+	selectIntLink = selectedDiv + "-input";
+	textlink = d.getElementById(selectIntLink);
+	textlink.value = "close";	
+	updatePref();
+}
+
+function updatePref(){
+	Effect.Appear('submitpref',{duration:1});
+	Sortable.serialize('col1');
+	Sortable.serialize('col2');
+}
+
+
 </script>
 EOD;
+$closehead = false;
 
-	## Set Page Title and Include Header
-	$pgtitle = "pfSense webGUI";
-	include("head.inc");
+## Set Page Title and Include Header
+$pgtitle = "pfSense webGUI";
+include("head.inc");
+	
+	
+echo "<script type=\"text/javascript\" language=\"javascript\" src=\"/javascript/domTT/domLib.js\"></script>";
+echo "<script type=\"text/javascript\" language=\"javascript\" src=\"/javascript/domTT/domTT.js\"></script>";
+echo "<script type=\"text/javascript\" language=\"javascript\" src=\"/javascript/domTT/behaviour.js\"></script>";
+echo "<script type=\"text/javascript\" language=\"javascript\" src=\"/javascript/domTT/fadomatic.js\"></script>";
 ?>
 
 <body link="#0000CC" vlink="#0000CC" alink="#0000CC">
-<script language="javascript">
-var ajaxStarted = false;
+<form action="index.php" method="post">
+<script language="javascript" type="text/javascript">
+// <![CDATA[
+columns = ['col1','col2'];
+// ]]>
+
 </script>
+
+
+<script src="/javascript/scriptaculous/prototype.js" type="text/javascript"></script>
+<script src="/javascript/scriptaculous/scriptaculous.js" type="text/javascript"></script>
+
 <?php
 include("fbegin.inc");
 echo $jscriptstr;
 	if(!file_exists("/usr/local/www/themes/{$g['theme']}/no_big_logo"))
 		echo "<center><img src=\"./themes/".$g['theme']."/images/logobig.jpg\"></center><br>";
 ?>
-<p class="pgtitle">System Overview</p>
 
-<div id="niftyOutter">
-<form action="index.php" method="post">
-<table  width="100%" border="0" cellspacing="0" cellpadding="5">
-		<tr>
-			<td valign="top">
-			<table width="100%" border="0" cellspacing="0" cellpadding="0">
-				<tbody>
-				<tr>
-					<td colspan="2" class="listtopic">System information</td>
-				</tr>
-				<tr>
-					<td width="25%" class="vncellt">Name</td>
-					<td width="75%" class="listr"><?php echo $config['system']['hostname'] . "." . $config['system']['domain']; ?></td>
-				</tr>
-				<tr>
-					<td width="25%" valign="top" class="vncellt">Version</td>
-					<td width="75%" class="listr">
-						<strong><?php readfile("/etc/version"); ?></strong>
-						<br />
-						built on <?php readfile("/etc/version.buildtime"); ?>
-					</td>
-				</tr>
-				<tr>
-					<td width="25%" class="vncellt">Platform</td>
-					<td width="75%" class="listr"><?=htmlspecialchars($g['platform']);?></td>
-				</tr>
-				<tr>
-					<td width="25%" class="vncellt">CPU Type</td>
-					<td width="75%" class="listr">
-					<?php 
-						$cpumodel = "";
-						exec("/sbin/sysctl -n hw.model", $cpumodel);
-						$cpumodel = implode(" ", $cpumodel);
-						echo (htmlspecialchars($cpumodel)); ?>
-					</td>
-				</tr>
-				<?php if ($hwcrypto): ?>
-				<tr>
-					<td width="25%" class="vncellt">Hardware crypto</td>
-					<td width="75%" class="listr"><?=htmlspecialchars($hwcrypto);?></td>
-				</tr>
-				<?php endif; ?>
-				<tr>
-					<td width="25%" class="vncellt">Uptime</td>
-					<td width="75%" class="listr"><input style="border: 0px solid white;" size="30" name="uptime" id="uptime" value="<?= htmlspecialchars(get_uptime()); ?>" /></td>
-				</tr>			
-				 <tr>
-		             <td width="30%" class="vncellt">DNS server(s)</td>
-		             <td width="70%" class="listr">
-							<?php
-								$dns_servers = get_dns_servers();
-								foreach($dns_servers as $dns) {
-									echo "{$dns}<br>";
-								}
-							?>
-					</td>
-				</tr>	
-				<?php if ($config['lastchange']): ?>
-				<tr>
-					<td width="25%" class="vncellt">Last config change</td>
-					<td width="75%" class="listr"><?= htmlspecialchars(date("D M j G:i:s T Y", $config['revision']['time']));?></td>
-				</tr>
-				<?php endif; ?>
-				<tr>
-					<td width="25%" class="vncellt">State table size</td>
-					<td width="75%" class="listr">
-						<input style="border: 0px solid white;" size="30" name="pfstate" id="pfstate" value="<?= htmlspecialchars(get_pfstate()); ?>" />
-				    	<br />
-				    	<a href="diag_dump_states.php">Show states</a>
-					</td>
-				</tr>
-				<tr>
-					<td width="25%" class="vncellt">CPU usage</td>
-					<td width="75%" class="listr">
-						<?php $cpuUsage = "0"; ?>
-						<img src="./themes/<?= $g['theme']; ?>/images/misc/bar_left.gif" height="15" width="4" border="0" align="middle" alt="left bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_blue.gif" height="15" name="cpuwidtha" id="cpuwidtha" width="<?= $cpuUsage; ?>" border="0" align="middle" alt="red bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_gray.gif" height="15" name="cpuwidthb" id="cpuwidthb" width="<?= (100 - $cpuUsage); ?>" border="0" align="middle" alt="gray bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_right.gif" height="15" width="5" border="0" align="middle" alt="right bar" />
-						&nbsp;
-						<input style="border: 0px solid white;" size="30" name="cpumeter" id="cpumeter" value="(Updating in 5 seconds)" />
-					</td>
-				</tr>
-				<tr>
-					<td width="25%" class="vncellt">Memory usage</td>
-					<td width="75%" class="listr">
-						<?php $memUsage = mem_usage(); ?>
-						<img src="./themes/<?= $g['theme']; ?>/images/misc/bar_left.gif" height="15" width="4" border="0" align="middle" alt="left bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_blue.gif" height="15" name="memwidtha" id="memwidtha" width="<?= $memUsage; ?>" border="0" align="middle" alt="red bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_gray.gif" height="15" name="memwidthb" id="memwidthb" width="<?= (100 - $memUsage); ?>" border="0" align="middle" alt="gray bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_right.gif" height="15" width="5" border="0" align="middle" alt="right bar" />
-						&nbsp;
-						<input style="border: 0px solid white;" size="30" name="memusagemeter" id="memusagemeter" value="<?= $memUsage.'%'; ?>" />
-					</td>
-				</tr>
-				<?php if($showswap == true): ?>
-				<tr>
-					<td width="25%" class="vncellt">SWAP usage</td>
-					<td width="75%" class="listr">
-						<?php $swapusage = swap_usage(); ?>
-						<img src="./themes/<?= $g['theme']; ?>/images/misc/bar_left.gif" height="15" width="4" border="0" align="middle" alt="left bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_blue.gif" height="15" width="<?= $swapUsage; ?>" border="0" align="middle" alt="red bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_gray.gif" height="15" width="<?= (100 - $swapUsage); ?>" border="0" align="middle" alt="gray bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_right.gif" height="15" width="5" border="0" align="middle" alt="right bar" />
-						&nbsp;
-						<input style="border: 0px solid white;" size="30" name="swapusagemeter" id="swapusagemeter" value="<?= $swapusage.'%'; ?>" />
-					</td>
-				</tr>
-				<?php endif; ?>
-		<?php
-				if(has_temp()):
+<?php 
+	?>
+<div id="widgetcontainer" style="display:none">
+		<div id="content1"><h1>Available Widgets</h1><p><?php
+			foreach($widgetfiles as $widget) {
+			
+				if(!stristr($widget, "widget.php"))
+					continue;		
+				
+				$periodpos = strpos($widget, ".");
+				$widgetname = substr($widget, 0, $periodpos);
+				$nicename = $widgetname;
+				$widgetname = str_replace(" ", "", $widgetname);
+				//make the title look nice
+				$nicename = ucwords($nicename);?>
+				<span style="cursor: pointer;" onclick='return showDiv("<?php echo $widgetname; ?>div",false)'><u><?php echo $nicename; ?></u></span><br><?php
+			}
 		?>
-				<tr>
-					<td width='25%' class='vncellt'>Temperature</td>
-					<td width='75%' class='listr'>
-						<?php $temp = get_temp(); ?>
-						<img src="./themes/<?= $g["theme"]; ?>/images/misc/bar_left.gif" height="15" width="4" border="0" align="middle" alt="left bar" /><img src="./themes/<?= $g["theme"]; ?>/images/misc/bar_blue.gif" height="15" name="tempwidtha" id="tempwidtha" width="<?= $temp; ?>" border="0" align="middle" alt="red bar" /><img src="./themes/<?= $g["theme"]; ?>/images/misc/bar_gray.gif" height="15" name="tempwidthb" id="tempwidthb" width="<?= (100 - $temp); ?>" border="0" align="middle" alt="gray bar" /><img src="./themes/<?= $g["theme"]; ?>/images/misc/bar_right.gif" height="15" width="5" border="0" align="middle" alt="right bar" />
-						&nbsp;
-						<input style="border: 0px solid white;" size="30" name="tempmeter" id="tempmeter" value="<?= $temp."C"; ?>" />
-					</td>
-				</tr>
-				<?php endif; ?>
-				<tr>
-					<td width="25%" class="vncellt">Disk usage</td>
-					<td width="75%" class="listr">
-						<?php $diskusage = disk_usage(); ?>
-						<img src="./themes/<?= $g["theme"]; ?>/images/misc/bar_left.gif" height="15" width="4" border="0" align="middle" alt="left bar" /><img src="./themes/<?= $g["theme"]; ?>/images/misc/bar_blue.gif" height="15" width="<?= $diskusage; ?>" border="0" align="middle" alt="red bar" /><img src="./themes/<?= $g["theme"]; ?>/images/misc/bar_gray.gif" height="15" width="<?= (100 - $diskusage); ?>" border="0" align="middle" alt="gray bar" /><img src="./themes/<?= $g["theme"]; ?>/images/misc/bar_right.gif" height="15" width="5" border="0" align="middle" alt="right bar" />
-						&nbsp;
-						<input style="border: 0px solid white;" size="30" name="diskusagemeter" id="diskusagemeter" value="<?= $diskusage.'%'; ?>" />
-					</td>
-				</tr>
-				<tr><td>&nbsp;</td></tr>
-				<tr>
-					<td  colspan="2" class="listtopic">Last 5 System Logs</td>
-				</tr>
-				<tr>
-						<?php
-						//show logs here
-						dump_clog($system_logfile, 5, true, array(), array("racoon", "ntpd", "pppoe"));
-						?>
-				</tr>		
-			</tbody>
-		</table>
-		</td>
-		<td valign="top">
-			<table width="100%" border="0" cellspacing="0" cellpadding="0" id="wangraphtable">
-			<tbody>
-					<?php $i = 0; $ifdescrs = array('wan' => 'WAN', 'lan' => 'LAN');
-					for ($j = 1; isset($config['interfaces']['opt' . $j]); $j++) {
-						$ifdescrs['opt' . $j] = $config['interfaces']['opt' . $j]['descr'];
-					}
-					$firstgraphshown = false;
-					foreach ($ifdescrs as $ifdescr => $ifname){
-						$ifinfo = get_interface_info($ifdescr);					
-						$ifnum = convert_friendly_interface_to_real_interface_name($ifname);
-						
-					 if ($ifinfo['status'] != "down"){ 					
-					?>
-					<tr>
-					<td class="listtopic" colspan="2">Current <?=$ifname;?> Traffic
-						<div id="<?=$ifname;?>closegraph" align="right" onclick='return closegraph("<?php echo $ifnum; echo "-"; echo $ifname; ?>","./themes/<?= $g['theme']; ?>/images/icons/icon_check.gif")' style="display:<?php if(!$firstgraphshown)echo "block";else echo "none";?>">[close graph]</div>
-					</td>
-					</tr>
-					<tr>
-						<td id="<?=$ifname;?>" valign="middle"><?php 
-						
-						 if (get_cpu_speed() >= 500) { 
-						 	if(!$firstgraphshown){
-						 	?>
-							<div id="<?=$ifname;?>graphdiv">
-								<embed id="graph" src="graph.php?ifnum=<?=$ifnum;?>&ifname=<?=rawurlencode($ifname);?>" type="image/svg+xml" width="<? echo $width; ?>" height="<? echo $height; ?>" pluginspage="http://www.adobe.com/svg/viewer/install/auto" />
-							</div>
-						<?
-							$firstgraphshown = true;
-							}
-							else
-							{ ?>
-								<div  id="<?=$ifname;?>graphlink" onclick='return showgraph("<?php echo $ifnum; echo "-"; echo $ifname; ?>");'><center><img src="./themes/<?= $g['theme']; ?>/images/icons/icon_check.gif" height="32" width="28" border="0" align="middle" alt="Click here to show current <?=$ifname;?> traffic" /></center></div>
-							<? }
-						 } else { ?>
-								<div id="<?=$ifname;?>graphlink" onclick='return showgraph("<?php echo $ifnum; echo "-"; echo $ifname; ?>");'><center><img src="./themes/<?= $g['theme']; ?>/images/icons/icon_check.gif" height="32" width="28" border="0" align="middle" alt="Click here to show current <?=$ifname;?> traffic" /></center></div>
-						<? } ?>
-						</td>
-					</tr><tr><td>&nbsp;</td></tr>
-					 <? } 
-					}?>	
-					
-				</tbody>
-			</table><br>
-			<table bgcolor="#990000" width="100%" border="0" cellspacing="0" cellpadding="0">
-				<tr>
-					<td colspan="2" class="listtopic">Interfaces</td>
-				</tr> 
-				<?php foreach ($ifdescrs as $ifdescr => $ifname){
-						$ifinfo = get_interface_info($ifdescr);
-					?>
-					<tr> 
-					<?php if ($ifinfo['status'] != "down"){ ?>
-					<td class="vncellt" width="30%"><strong><?=htmlspecialchars($ifname);?></strong></td>
-					<td width="70%"  class="listr">
-					
-					  <?php if ($ifinfo['dhcplink'] != "down" && $ifinfo['pppoelink'] != "down" && $ifinfo['pptplink'] != "down"){ ?>
-					  <?php if ($ifinfo['ipaddr']){ ?>
-		                  <?=htmlspecialchars($ifinfo['ipaddr']);?>
-		                  &nbsp; </td>
-		            </tr><?php }
-					  			}
-					  		}
-					  } 					?> 
-				</table>
-			</td>	
-	</tr>
-</tbody>
-</table>
-</form>
+		</p>
+	</div>
+</div>
+
+
+<p class="pgtitle">System Overview&nbsp;&nbsp;&nbsp;
+<img src="./themes/<?= $g['theme']; ?>/images/icons/icon_plus.gif" alt="Click here to add widgets" style="cursor: help;" onmouseup="domTT_activate(this, event, 'content', document.getElementById('content1'), 'type', 'velcro', 'delay', 0, 'fade', 'both', 'fadeMax', 100, 'styleClass', 'niceTitle');" />
+
+
+
+
+<div style="clear:both;"></div>
+
+<div id="submitpref" align="center" style="display:none;width:17%;margin:5px;padding: 5px;background:#CCCCCC">
+	<div class="listtopic">
+		Save your changes<div style="clear:both;"></div>
+	</div>
+	<div><center>
+		<input id="submit" name="submit" type="submit" onclick="return checkForRanges();" class="formbtn" value="Save" />
+		</center>
+	</div>
+</div></p>
+
+<div style="clear:both;"></div>
+<div id="niftyOutter">
+	<?php
+	$totalwidgets = count($widgetfiles);
+	$halftotal = $totalwidgets / 2;
+	$widgetcounter = 1;
+	$directory = "widgets/widgets/";
+	$printed = false;
+	$firstprint = false;
+	?> 
+	<div id="col1" style="float:left;width:49%;padding: 2px;padding-bottom:40px">		
+	<?php
+	
+	foreach($widgetfiles as $widget) {
+	
+		if(!stristr($widget, "widget.php"))
+			continue;		
+		
+		$periodpos = strpos($widget, ".");
+		$widgetname = substr($widget, 0, $periodpos);	
+		$nicename = $widgetname;
+		$widgetname = str_replace(" ", "", $widgetname);
+			
+		//make the title look nice
+		$nicename = ucwords($nicename);
+		
+		$display = "block";
+		
+		
+		if ($widgetcounter >= $halftotal && $printed == false){
+			$printed = true;
+			?>
+			</div>
+			<div id="col2" style="float:right;width:49%;padding: 2px;padding-bottom:40px">		
+			<?php
+		}			
+		?>		
+		<div style="clear:both;"></div>
+		<div  id="<?php echo $widgetname;?>div" class="widgetdiv" style="display:<?php echo $display; ?>;">
+			<input type="hidden" value="" id="<?php echo $widgetname;?>-input">
+			<div id="<?php echo $widgetname;?>topic" class="widgetheader" style="cursor:move">
+				<div style="float:left;">
+					<?php echo $nicename;?>
+				</div>
+				<div align="right" style="float:right;">					
+					<div id="<?php echo $widgetname;?>-open" onclick='return showDiv("<?php echo $widgetname;?>",true)' style="display:none; cursor:pointer" ><img src="./themes/<?= $g['theme']; ?>/images/icons/icon_open.gif" /></div>	
+					<div id="<?php echo $widgetname;?>-min" onclick='return minimizeDiv("<?php echo $widgetname;?>",true)' style="display:inline; cursor:pointer" ><img src="./themes/<?= $g['theme']; ?>/images/icons/icon_minus.gif"/></div>												
+					<div id="<?php echo $widgetname;?>-close" onclick='return closeDiv("<?php echo $widgetname;?>",true)' style="display:inline; cursor:pointer" ><img src="./themes/<?= $g['theme']; ?>/images/icons/icon_close.gif" /></div>	
+				</div>
+				<div style="clear:both;"></div>
+			</div>
+			<div id="<?php echo $widgetname;?>">
+				<?php include($directory . $widget); ?>
+			</div>
+			<div style="clear:both;"></div>
+		</div>
+		<?php 	
+	$widgetcounter++;
+	
+	}//end foreach	
+	?>			
+	</div><!-- end col -->
+	<div style="clear:both;"></div>
 </div>
 
 <?php include("fend.inc"); ?>
 	    
 <script type="text/javascript">
-	NiftyCheck();
-	Rounded("div#nifty","top","#FFF","#EEEEEE","smooth");
-</script>
-
-<meta http-equiv="refresh" content="120;url=<?php print $_SERVER['PHP_SELF']; ?>">
 
+	// <![CDATA[
+	Sortable.create("col1", {tag:'div',dropOnEmpty:true,containment:columns,handle:'widgetheader',constraint:false,only:'moveable',onChange:updatePref});	
+	Sortable.create("col2", {tag:'div',dropOnEmpty:true,containment:columns,handle:'widgetheader',constraint:false,only:'moveable',onChange:updatePref});		
+	// ]]>	
+	
+	<?php
+	//build list of javascript include files
+	$jsincludefiles = Array();
+	$directory = "widgets/javascript/";
+	$dirhandle  = opendir($directory);
+	$filename = "";
+	while (false !== ($filename = readdir($dirhandle))) {
+   		$jsincludefiles[] = $filename;
+	}
+	foreach($jsincludefiles as $jsincludename) {
+		if(!stristr($jsincludename, ".js"))
+			continue;	
+		include($directory . $jsincludename);
+	}
+	?>
+</script>
+</form>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/usr/local/www/themes/metallic/all.css b/usr/local/www/themes/metallic/all.css
index 3848c7f..c5870df 100644
--- a/usr/local/www/themes/metallic/all.css
+++ b/usr/local/www/themes/metallic/all.css
@@ -851,3 +851,91 @@ div#log span.log-protocol {
 	width: 5.5em;
 }
 /* END CSS FOR DYNAMIC LOG VIEWER */
+
+/* Widget CSS */
+.widgetsubheader {
+	border-right: 1px solid #999999;
+	font-size: 11px;
+	background-color: #999999;
+	padding-right: 6px;
+	padding-left: 6px;
+	color: #FFFFFF;
+	font-weight: bold;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+.widgetheader {
+	border-right: 1px solid #999999;
+	font-size: 11px;
+	background-color: #990000;
+	padding-right: 6px;
+	padding-left: 6px;
+	color: #FFFFFF;
+	font-weight: bold;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+.widgetdiv{
+	margin:5px;
+	padding: 5px;
+	background:#CCCCCC;
+}
+
+div#log div.log-entry-mini {
+	clear: both;
+}
+
+div#log div.log-entry-mini span {
+	padding: 2px 2px 2px 2px;
+	padding-left: 8px;
+}
+
+div#log span.log-action-mini-header,
+div#log span.log-interface-mini-header,
+div#log span.log-source-mini-header,
+div#log span.log-destination-mini-header,
+div#log span.log-protocol-mini-header {
+	float: left;
+	text-align: left;
+	background-color: #FFFFFF;
+	font-size: 12px;
+	border-left: 1px solid #999;
+	border-bottom: 1px solid #999;
+}
+
+div#log span.log-action-mini,
+div#log span.log-time-mini,
+div#log span.log-interface-mini,
+div#log span.log-source-mini,
+div#log span.log-destination-mini,
+div#log span.log-protocol-mini {
+	float: left;
+	text-align: left;
+	background-color: #FFFFFF;
+	font-size: 11px;
+	border-left: 1px solid #999;
+	border-bottom: 1px solid #999;
+}
+
+div#log span.log-action-mini,
+div#log span.log-action-mini-header {
+	width: 6%;
+}
+
+div#log span.log-interface-mini,
+div#log span.log-interface-mini-header {
+	width: 8%;
+}
+
+div#log span.log-source-mini,
+div#log span.log-destination-mini,
+div#log span.log-source-mini-header,
+div#log span.log-destination-mini-header {
+	width: 31%;
+}
+
+div#log span.log-protocol-mini,
+div#log span.log-protocol-mini-header {
+	width: 8%;	
+	border-right: 1px solid #999;
+}
\ No newline at end of file
diff --git a/usr/local/www/themes/metallic/images/icons/icon_cablenic.gif b/usr/local/www/themes/metallic/images/icons/icon_cablenic.gif
new file mode 100644
index 0000000..a071c66
--- /dev/null
+++ b/usr/local/www/themes/metallic/images/icons/icon_cablenic.gif
diff --git a/usr/local/www/themes/metallic/images/icons/icon_close.gif b/usr/local/www/themes/metallic/images/icons/icon_close.gif
new file mode 100644
index 0000000..e0f86a7
--- /dev/null
+++ b/usr/local/www/themes/metallic/images/icons/icon_close.gif
diff --git a/usr/local/www/themes/metallic/images/icons/icon_minus.gif b/usr/local/www/themes/metallic/images/icons/icon_minus.gif
new file mode 100644
index 0000000..417544f
--- /dev/null
+++ b/usr/local/www/themes/metallic/images/icons/icon_minus.gif
diff --git a/usr/local/www/themes/metallic/images/icons/icon_open.gif b/usr/local/www/themes/metallic/images/icons/icon_open.gif
new file mode 100644
index 0000000..ac3da14
--- /dev/null
+++ b/usr/local/www/themes/metallic/images/icons/icon_open.gif
diff --git a/usr/local/www/themes/metallic/images/icons/icon_wlan.gif b/usr/local/www/themes/metallic/images/icons/icon_wlan.gif
new file mode 100644
index 0000000..1f0addc
--- /dev/null
+++ b/usr/local/www/themes/metallic/images/icons/icon_wlan.gif
diff --git a/usr/local/www/themes/metallic/images/icons/icon_wlan_d.gif b/usr/local/www/themes/metallic/images/icons/icon_wlan_d.gif
new file mode 100644
index 0000000..cdf4571
--- /dev/null
+++ b/usr/local/www/themes/metallic/images/icons/icon_wlan_d.gif
diff --git a/usr/local/www/themes/nervecenter/all.css b/usr/local/www/themes/nervecenter/all.css
index a75b486..05d2f05 100644
--- a/usr/local/www/themes/nervecenter/all.css
+++ b/usr/local/www/themes/nervecenter/all.css
@@ -969,6 +969,7 @@ div#log span.log-protocol {
 	text-align: left;
 	border-left: 1px solid #999;
 	border-bottom: 1px solid #999;
+	
 }
 
 div#log span.log-general {
@@ -1058,3 +1059,92 @@ div#log span.log-protocol {
 	margin: 0em;
 	text-indent: 10px;
 }
+
+/* Widget CSS */
+.widgetsubheader {
+	border-right: 1px solid #999999;
+	font-size: 11px;
+	background-color: #999999;
+	padding-right: 6px;
+	padding-left: 6px;
+	color: #FFFFFF;
+	font-weight: bold;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+.widgetheader {
+	border-right: 1px solid #999999;
+	font-size: 11px;
+	background-color: #990000;
+	padding-right: 6px;
+	padding-left: 6px;
+	color: #FFFFFF;
+	font-weight: bold;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+.widgetdiv{
+	margin:5px;
+	padding: 5px;
+	background:#CCCCCC;
+}
+
+div#log div.log-entry-mini {
+	clear: both;
+}
+
+div#log div.log-entry-mini span {
+	padding: 2px 2px 2px 2px;
+	padding-left: 8px;
+}
+
+div#log span.log-action-mini-header,
+div#log span.log-interface-mini-header,
+div#log span.log-source-mini-header,
+div#log span.log-destination-mini-header,
+div#log span.log-protocol-mini-header {
+	float: left;
+	text-align: left;
+	background-color: #FFFFFF;
+	font-size: 12px;
+	border-left: 1px solid #999;
+	border-bottom: 1px solid #999;
+}
+
+div#log span.log-action-mini,
+div#log span.log-time-mini,
+div#log span.log-interface-mini,
+div#log span.log-source-mini,
+div#log span.log-destination-mini,
+div#log span.log-protocol-mini {
+	float: left;
+	text-align: left;
+	background-color: #FFFFFF;
+	font-size: 11px;
+	border-left: 1px solid #999;
+	border-bottom: 1px solid #999;
+}
+
+div#log span.log-action-mini,
+div#log span.log-action-mini-header {
+	width: 6%;
+}
+
+div#log span.log-interface-mini,
+div#log span.log-interface-mini-header {
+	width: 8%;
+}
+
+div#log span.log-source-mini,
+div#log span.log-destination-mini,
+div#log span.log-source-mini-header,
+div#log span.log-destination-mini-header {
+	width: 31%;
+}
+
+div#log span.log-protocol-mini,
+div#log span.log-protocol-mini-header {
+	width: 8%;	
+	border-right: 1px solid #999;
+}
+
diff --git a/usr/local/www/themes/nervecenter/images/icons/icon_cablenic.gif b/usr/local/www/themes/nervecenter/images/icons/icon_cablenic.gif
new file mode 100644
index 0000000..a071c66
--- /dev/null
+++ b/usr/local/www/themes/nervecenter/images/icons/icon_cablenic.gif
diff --git a/usr/local/www/themes/nervecenter/images/icons/icon_close.gif b/usr/local/www/themes/nervecenter/images/icons/icon_close.gif
new file mode 100644
index 0000000..e0f86a7
--- /dev/null
+++ b/usr/local/www/themes/nervecenter/images/icons/icon_close.gif
diff --git a/usr/local/www/themes/nervecenter/images/icons/icon_minus.gif b/usr/local/www/themes/nervecenter/images/icons/icon_minus.gif
new file mode 100644
index 0000000..417544f
--- /dev/null
+++ b/usr/local/www/themes/nervecenter/images/icons/icon_minus.gif
diff --git a/usr/local/www/themes/nervecenter/images/icons/icon_open.gif b/usr/local/www/themes/nervecenter/images/icons/icon_open.gif
new file mode 100644
index 0000000..ac3da14
--- /dev/null
+++ b/usr/local/www/themes/nervecenter/images/icons/icon_open.gif
diff --git a/usr/local/www/themes/nervecenter/images/icons/icon_wlan.gif b/usr/local/www/themes/nervecenter/images/icons/icon_wlan.gif
new file mode 100644
index 0000000..1f0addc
--- /dev/null
+++ b/usr/local/www/themes/nervecenter/images/icons/icon_wlan.gif
diff --git a/usr/local/www/themes/nervecenter/images/icons/icon_wlan_d.gif b/usr/local/www/themes/nervecenter/images/icons/icon_wlan_d.gif
new file mode 100644
index 0000000..cdf4571
--- /dev/null
+++ b/usr/local/www/themes/nervecenter/images/icons/icon_wlan_d.gif
diff --git a/usr/local/www/themes/pfsense-dropdown/all.css b/usr/local/www/themes/pfsense-dropdown/all.css
index 608b6f8..2c9f091 100644
--- a/usr/local/www/themes/pfsense-dropdown/all.css
+++ b/usr/local/www/themes/pfsense-dropdown/all.css
@@ -724,3 +724,91 @@ div.suggestions div.current {
 .rxr1,.rxr2,.rxr3,.rxr4,.rxsr1,.rxsr2,.rar1,.rar2,.rar3,.rar4,.rasr1,.rasr2{border-left-width:0}
 .r4,.rl4,.rr4,.re4,.rel4,.rer4,.ra4,.rar4,.ral4,.rx4,.rxl4,.rxr4{height:2px}
 .rer1,.rel1,.re1,.res1,.resl1,.resr1{border-width:1px 0 0;height:0px !important;height /**/:1px}
+
+/* Widget CSS */
+.widgetsubheader {
+	border-right: 1px solid #999999;
+	font-size: 11px;
+	background-color: #999999;
+	padding-right: 6px;
+	padding-left: 6px;
+	color: #FFFFFF;
+	font-weight: bold;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+.widgetheader {
+	border-right: 1px solid #999999;
+	font-size: 11px;
+	background-color: #990000;
+	padding-right: 6px;
+	padding-left: 6px;
+	color: #FFFFFF;
+	font-weight: bold;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+.widgetdiv{
+	margin:5px;
+	padding: 5px;
+	background:#CCCCCC;
+}
+
+div#log div.log-entry-mini {
+	clear: both;
+}
+
+div#log div.log-entry-mini span {
+	padding: 2px 2px 2px 2px;
+	padding-left: 8px;
+}
+
+div#log span.log-action-mini-header,
+div#log span.log-interface-mini-header,
+div#log span.log-source-mini-header,
+div#log span.log-destination-mini-header,
+div#log span.log-protocol-mini-header {
+	float: left;
+	text-align: left;
+	background-color: #FFFFFF;
+	font-size: 12px;
+	border-left: 1px solid #999;
+	border-bottom: 1px solid #999;
+}
+
+div#log span.log-action-mini,
+div#log span.log-time-mini,
+div#log span.log-interface-mini,
+div#log span.log-source-mini,
+div#log span.log-destination-mini,
+div#log span.log-protocol-mini {
+	float: left;
+	text-align: left;
+	background-color: #FFFFFF;
+	font-size: 11px;
+	border-left: 1px solid #999;
+	border-bottom: 1px solid #999;
+}
+
+div#log span.log-action-mini,
+div#log span.log-action-mini-header {
+	width: 6%;
+}
+
+div#log span.log-interface-mini,
+div#log span.log-interface-mini-header {
+	width: 8%;
+}
+
+div#log span.log-source-mini,
+div#log span.log-destination-mini,
+div#log span.log-source-mini-header,
+div#log span.log-destination-mini-header {
+	width: 31%;
+}
+
+div#log span.log-protocol-mini,
+div#log span.log-protocol-mini-header {
+	width: 8%;	
+	border-right: 1px solid #999;
+}
\ No newline at end of file
diff --git a/usr/local/www/themes/pfsense-dropdown/images/icons/icon_cablenic.gif b/usr/local/www/themes/pfsense-dropdown/images/icons/icon_cablenic.gif
new file mode 100644
index 0000000..a071c66
--- /dev/null
+++ b/usr/local/www/themes/pfsense-dropdown/images/icons/icon_cablenic.gif
diff --git a/usr/local/www/themes/pfsense-dropdown/images/icons/icon_close.gif b/usr/local/www/themes/pfsense-dropdown/images/icons/icon_close.gif
new file mode 100644
index 0000000..e0f86a7
--- /dev/null
+++ b/usr/local/www/themes/pfsense-dropdown/images/icons/icon_close.gif
diff --git a/usr/local/www/themes/pfsense-dropdown/images/icons/icon_minus.gif b/usr/local/www/themes/pfsense-dropdown/images/icons/icon_minus.gif
new file mode 100644
index 0000000..417544f
--- /dev/null
+++ b/usr/local/www/themes/pfsense-dropdown/images/icons/icon_minus.gif
diff --git a/usr/local/www/themes/pfsense-dropdown/images/icons/icon_open.gif b/usr/local/www/themes/pfsense-dropdown/images/icons/icon_open.gif
new file mode 100644
index 0000000..ac3da14
--- /dev/null
+++ b/usr/local/www/themes/pfsense-dropdown/images/icons/icon_open.gif
diff --git a/usr/local/www/themes/pfsense-dropdown/images/icons/icon_wlan.gif b/usr/local/www/themes/pfsense-dropdown/images/icons/icon_wlan.gif
new file mode 100644
index 0000000..1f0addc
--- /dev/null
+++ b/usr/local/www/themes/pfsense-dropdown/images/icons/icon_wlan.gif
diff --git a/usr/local/www/themes/pfsense-dropdown/images/icons/icon_wlan_d.gif b/usr/local/www/themes/pfsense-dropdown/images/icons/icon_wlan_d.gif
new file mode 100644
index 0000000..cdf4571
--- /dev/null
+++ b/usr/local/www/themes/pfsense-dropdown/images/icons/icon_wlan_d.gif
diff --git a/usr/local/www/themes/pfsense/all.css b/usr/local/www/themes/pfsense/all.css
index 13d7b58..59ab624 100644
--- a/usr/local/www/themes/pfsense/all.css
+++ b/usr/local/www/themes/pfsense/all.css
@@ -693,3 +693,91 @@ div.suggestions div.current {
 .rxr1,.rxr2,.rxr3,.rxr4,.rxsr1,.rxsr2,.rar1,.rar2,.rar3,.rar4,.rasr1,.rasr2{border-left-width:0}
 .r4,.rl4,.rr4,.re4,.rel4,.rer4,.ra4,.rar4,.ral4,.rx4,.rxl4,.rxr4{height:2px}
 .rer1,.rel1,.re1,.res1,.resl1,.resr1{border-width:1px 0 0;height:0px !important;height /**/:1px}
+
+/* Widget CSS */
+.widgetsubheader {
+	border-right: 1px solid #999999;
+	font-size: 11px;
+	background-color: #999999;
+	padding-right: 6px;
+	padding-left: 6px;
+	color: #FFFFFF;
+	font-weight: bold;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+.widgetheader {
+	border-right: 1px solid #999999;
+	font-size: 11px;
+	background-color: #990000;
+	padding-right: 6px;
+	padding-left: 6px;
+	color: #FFFFFF;
+	font-weight: bold;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+.widgetdiv{
+	margin:5px;
+	padding: 5px;
+	background:#CCCCCC;
+}
+
+div#log div.log-entry-mini {
+	clear: both;
+}
+
+div#log div.log-entry-mini span {
+	padding: 2px 2px 2px 2px;
+	padding-left: 8px;
+}
+
+div#log span.log-action-mini-header,
+div#log span.log-interface-mini-header,
+div#log span.log-source-mini-header,
+div#log span.log-destination-mini-header,
+div#log span.log-protocol-mini-header {
+	float: left;
+	text-align: left;
+	background-color: #FFFFFF;
+	font-size: 12px;
+	border-left: 1px solid #999;
+	border-bottom: 1px solid #999;
+}
+
+div#log span.log-action-mini,
+div#log span.log-time-mini,
+div#log span.log-interface-mini,
+div#log span.log-source-mini,
+div#log span.log-destination-mini,
+div#log span.log-protocol-mini {
+	float: left;
+	text-align: left;
+	background-color: #FFFFFF;
+	font-size: 11px;
+	border-left: 1px solid #999;
+	border-bottom: 1px solid #999;
+}
+
+div#log span.log-action-mini,
+div#log span.log-action-mini-header {
+	width: 6%;
+}
+
+div#log span.log-interface-mini,
+div#log span.log-interface-mini-header {
+	width: 8%;
+}
+
+div#log span.log-source-mini,
+div#log span.log-destination-mini,
+div#log span.log-source-mini-header,
+div#log span.log-destination-mini-header {
+	width: 31%;
+}
+
+div#log span.log-protocol-mini,
+div#log span.log-protocol-mini-header {
+	width: 8%;	
+	border-right: 1px solid #999;
+}
\ No newline at end of file
diff --git a/usr/local/www/themes/pfsense/images/icons/icon_cablenic.gif b/usr/local/www/themes/pfsense/images/icons/icon_cablenic.gif
new file mode 100644
index 0000000..a071c66
--- /dev/null
+++ b/usr/local/www/themes/pfsense/images/icons/icon_cablenic.gif
diff --git a/usr/local/www/themes/pfsense/images/icons/icon_close.gif b/usr/local/www/themes/pfsense/images/icons/icon_close.gif
new file mode 100644
index 0000000..e0f86a7
--- /dev/null
+++ b/usr/local/www/themes/pfsense/images/icons/icon_close.gif
diff --git a/usr/local/www/themes/pfsense/images/icons/icon_minus.gif b/usr/local/www/themes/pfsense/images/icons/icon_minus.gif
new file mode 100644
index 0000000..417544f
--- /dev/null
+++ b/usr/local/www/themes/pfsense/images/icons/icon_minus.gif
diff --git a/usr/local/www/themes/pfsense/images/icons/icon_open.gif b/usr/local/www/themes/pfsense/images/icons/icon_open.gif
new file mode 100644
index 0000000..ac3da14
--- /dev/null
+++ b/usr/local/www/themes/pfsense/images/icons/icon_open.gif
diff --git a/usr/local/www/themes/pfsense/images/icons/icon_wlan.gif b/usr/local/www/themes/pfsense/images/icons/icon_wlan.gif
new file mode 100644
index 0000000..1f0addc
--- /dev/null
+++ b/usr/local/www/themes/pfsense/images/icons/icon_wlan.gif
diff --git a/usr/local/www/themes/pfsense/images/icons/icon_wlan_d.gif b/usr/local/www/themes/pfsense/images/icons/icon_wlan_d.gif
new file mode 100644
index 0000000..cdf4571
--- /dev/null
+++ b/usr/local/www/themes/pfsense/images/icons/icon_wlan_d.gif
diff --git a/usr/local/www/widgets/include/log.inc b/usr/local/www/widgets/include/log.inc
new file mode 100644
index 0000000..8c26603
--- /dev/null
+++ b/usr/local/www/widgets/include/log.inc
@@ -0,0 +1,166 @@
+<?php
+
+//set variables for log
+$filter_logfile = "{$g['varlog_path']}/filter.log";
+$nentries = 5;
+$filterlog = conv_clog_filter($filter_logfile, $nentries);
+
+/* AJAX related routines */
+	handle_ajax();
+	
+
+/* format filter logs */	
+function conv_clog_filter($logfile, $tail = 50) {
+	global $config, $nentries, $logfile;
+
+	$logfile = "/var/log/filter.log";
+
+	/* make interface/port table */
+	$iftable = array();
+	$iftable[$config['interfaces']['lan']['if']] = "LAN";
+	$iftable[get_real_wan_interface()] = "WAN";
+	for ($i = 1; isset($config['interfaces']['opt' . $i]); $i++)
+		$iftable[$config['interfaces']['opt' . $i]['if']] = $config['interfaces']['opt' . $i]['descr'];
+
+	$sor = isset($config['syslog']['reverse']) ? "-r" : "";
+
+	$logarr = "";
+	exec("/usr/sbin/clog {$logfile} | /usr/bin/tail {$sor} -n {$tail}", $logarr);
+
+	$filterlog = array();
+
+	$counter = 0;
+
+	foreach ($logarr as $logent) {
+
+		if($counter > $nentries)
+			break;
+
+		$log_split = "";
+
+		preg_match("/(\b(?:\d{1,3}\.){3}\d{1,3}(\.\w+)?)\s.*\s(\b(?:\d{1,3}\.){3}\d{1,3}(\.\w+)?)/", $logent, $log_split);
+
+		$flent['src'] 		= convert_port_period_to_colon($log_split[1]);
+		$flent['dst'] 		= convert_port_period_to_colon($log_split[3]);
+
+		preg_match("/(.*)\s.*\spf:\s.*\srule\s(.*)\(match\)\:\s(.*)\s\w+\son\s(\w+)\:\s(.*)\s>\s(.*)\:\s.*/", $logent, $log_split);
+
+		$logent = strtoupper($logent);
+
+		$do_not_display = false;
+
+		if(stristr(strtoupper($logent), "UDP") == true)
+			$flent['proto'] = "UDP";
+		else if(stristr(strtoupper($logent), "TCP") == true)
+			$flent['proto'] = "TCP";
+		else if(stristr(strtoupper($logent), "ICMP") == true)
+			$flent['proto'] = "ICMP";
+		else if(stristr(strtoupper($logent), "HSRP") == true)
+			$flent['proto'] = "HSRP";
+		else if(stristr(strtoupper($logent), "ESP") == true)
+			$flent['proto'] = "ESP";
+		else if(stristr(strtoupper($logent), "AH") == true)
+			$flent['proto'] = "AH";
+		else if(stristr(strtoupper($logent), "GRE") == true)
+			$flent['proto'] = "GRE";
+		else if(stristr(strtoupper($logent), "IGMP") == true)
+			$flent['proto'] = "IGMP";
+		else if(stristr(strtoupper($logent), "CARP") == true)
+			$flent['proto'] = "CARP";
+		else if(stristr(strtoupper($logent), "PFSYNC") == true)
+			$flent['proto'] = "PFSYNC";
+		else
+			$flent['proto'] = "TCP";
+
+		$time_regex = "";
+		preg_match("/.*([0-9][0-9]:[0-9][0-9]:[0-9][0-9])/", $log_split[1], $time_regex);
+		$row_time = strtotime($time_regex[1]);
+
+		$flent['time'] 		= $row_time;
+		$flent['act'] 		= $log_split[3];
+
+		$friendly_int = convert_real_interface_to_friendly_interface_name($log_split[4]);
+
+		$flent['interface'] 	=  strtoupper($friendly_int);
+
+		if($config['interfaces'][$friendly_int]['descr'] <> "")
+			$flent['interface'] = "{$config['interfaces'][$friendly_int]['descr']}";
+
+		$flent['src'] 		= convert_port_period_to_colon($log_split[5]);
+		$flent['dst'] 		= convert_port_period_to_colon($log_split[6]);
+
+		$flent['dst'] = str_replace(": NBT UDP PACKET(137)", "", $flent['dst']);
+
+		$tmp = split("/", $log_split[2]);
+		$flent['rulenum'] = $tmp[0];
+
+		$counter++;
+		$filterlog[] = $flent;
+
+	}
+
+	return $filterlog;
+}
+
+function convert_port_period_to_colon($addr) {
+	$addr_split = split("\.", $addr);
+	if($addr_split[4] == "")
+		$newvar = $addr_split[0] . "." . $addr_split[1] . "." . $addr_split[2] . "." . $addr_split[3];
+	else
+		$newvar = $addr_split[0] . "." . $addr_split[1] . "." . $addr_split[2] . "." . $addr_split[3] . ":" . $addr_split[4];
+	if($newvar == "...")
+		return $addr;
+	return $newvar;
+}
+
+function format_ipf_ip($ipfip) {
+	list($ip,$port) = explode(",", $ipfip);
+	if (!$port)
+		return $ip;
+
+	return $ip . ", port " . $port;
+}
+
+/* AJAX specific handlers */
+function handle_ajax() {
+	if($_GET['getrulenum'] or $_POST['getrulenum']) {
+		if($_GET['getrulenum'])
+			$rulenum = $_GET['getrulenum'];
+		if($_POST['getrulenum'])
+			$rulenum = $_POST['getrulenum'];
+		$rule = `pfctl -vvsr | grep @{$rulenum}`;
+		echo "The rule that triggered this action is:\n\n{$rule}";
+		exit;
+	}
+
+	if($_GET['lastsawtime'] or $_POST['lastsawtime']) {
+		global $filter_logfile,$filterent;
+		if($_GET['lastsawtime'])
+			$lastsawtime = $_GET['lastsawtime'];
+		if($_POST['lastsawtime'])
+			$lastsawtime = $_POST['lastsawtime'];
+		/*  compare lastsawrule's time stamp to filter logs.
+		 *  afterwards return the newer records so that client
+                 *  can update AJAX interface screen.
+		 */
+		$new_rules = "";
+		$filterlog = conv_clog_filter($filter_logfile, 50);
+		foreach($filterlog as $log_row) {
+			$time_regex = "";
+			preg_match("/.*([0-9][0-9]:[0-9][0-9]:[0-9][0-9])/", $log_row['time'], $time_regex);
+			$row_time = strtotime($time_regex[1]);
+			if (strstr(strtolower($log_row['act']), "p"))
+				$img = "<img border='0' src='/themes/metallic/images/icons/icon_pass.gif'>";
+			else if(strstr(strtolower($filterent['act']), "r"))
+				$img = "<img border='0' src='/themes/metallic/images/icons/icon_reject.gif'>";
+			else
+				$img = "<img border='0' src='/themes/metallic/images/icons/icon_block.gif'>";
+			//echo "{$time_regex[1]} - $row_time > $lastsawtime<p>";
+			if($row_time > $lastsawtime)
+				$new_rules .= "{$img}||{$log_row['time']}||{$log_row['interface']}||{$log_row['src']}||{$log_row['dst']}||{$log_row['proto']}||" . time() . "||\n";
+		}
+		echo $new_rules;
+		exit;
+	}
+}
+?>
\ No newline at end of file
diff --git a/usr/local/www/widgets/javascript/log.js b/usr/local/www/widgets/javascript/log.js
new file mode 100644
index 0000000..cc823a1
--- /dev/null
+++ b/usr/local/www/widgets/javascript/log.js
@@ -0,0 +1,155 @@
+
+lastsawtime = '<?php echo time(); ?>;';
+var lines = Array();
+var timer;
+var updateDelay = 12000;
+var isBusy = false;
+var isPaused = false;
+
+<?php
+	if(isset($config['syslog']['reverse']))
+		echo "	var isReverse = true;\n";
+	else
+		echo "	var isReverse = false;\n";
+?>
+
+if (typeof getURL == 'undefined') {
+	getURL = function(url, callback) {
+		if (!url)
+			throw 'No URL for getURL';
+		try {
+			if (typeof callback.operationComplete == 'function')
+				callback = callback.operationComplete;
+		} catch (e) {}
+			if (typeof callback != 'function')
+				throw 'No callback function for getURL';
+		var http_request = null;
+		if (typeof XMLHttpRequest != 'undefined') {
+		    http_request = new XMLHttpRequest();
+		}
+		else if (typeof ActiveXObject != 'undefined') {
+			try {
+				http_request = new ActiveXObject('Msxml2.XMLHTTP');
+			} catch (e) {
+				try {
+					http_request = new ActiveXObject('Microsoft.XMLHTTP');
+				} catch (e) {}
+			}
+		}
+		if (!http_request)
+			throw 'Both getURL and XMLHttpRequest are undefined';
+		http_request.onreadystatechange = function() {
+			if (http_request.readyState == 4) {
+				callback( { success : true,
+				  content : http_request.responseText,
+				  contentType : http_request.getResponseHeader("Content-Type") } );
+			}
+		}
+		http_request.open('GET', url, true);
+		http_request.send(null);
+	}
+}
+
+function outputrule(req) {
+	alert(req.content);
+}
+function fetch_new_rules() {
+	if(isPaused)
+		return;
+	if(isBusy)
+		return;
+	isBusy = true;
+	getURL('diag_logs_filter_dynamic.php?lastsawtime=' + lastsawtime, fetch_new_rules_callback);
+}
+function fetch_new_rules_callback(callback_data) {
+	if(isPaused)
+		return;
+
+	var data_split;
+	var new_data_to_add = Array();
+	var data = callback_data.content;
+
+	data_split = data.split("\n");
+
+	for(var x=0; x<data_split.length-1; x++) {
+		/* loop through rows */
+		row_split = data_split[x].split("||");
+		var line = '';
+		line = '<div class="log-entry">';
+		line += '  <span class="log-action-mini" nowrap>&nbsp;' + row_split[0] + '&nbsp;</span>';
+		line += '  <span class="log-interface-mini" nowrap>' + row_split[2] + '</span>';
+		line += '  <span class="log-source-mini" nowrap>' + row_split[3] + '</span>';
+		line += '  <span class="log-destination-mini" nowrap>' + row_split[4] + '</span>';
+		line += '  <span class="log-protocol-mini" nowrap>' + row_split[5] + '</span>';
+		line += '</tr></div>';
+		lastsawtime = row_split[6];
+		new_data_to_add[new_data_to_add.length] = line;
+	}
+	update_div_rows(new_data_to_add);
+	isBusy = false;
+}
+function update_div_rows(data) {
+	if(isPaused)
+		return;
+
+	var isIE = navigator.appName.indexOf('Microsoft') != -1;
+	var isSafari = navigator.userAgent.indexOf('Safari') != -1;
+	var isOpera = navigator.userAgent.indexOf('Opera') != -1;
+	var rulestable = document.getElementById('log');
+	var rows = rulestable.getElementsByTagName('div');
+	var showanim = 1;
+	if (isIE) {
+		showanim = 0;
+	}
+	//alert(data.length);
+	for(var x=0; x<data.length; x++) {
+		var numrows = rows.length;
+		var appearatrow;
+		/*    if reverse logging is enabled we need to show the
+		 *    records in a reverse order with new items appearing
+         *    on the top
+         */
+		//if(isReverse == false) {
+		//	for (var i = 2; i < numrows; i++) {
+		//		nextrecord = i + 1;
+		//		if(nextrecord < numrows)
+		//			rows[i].innerHTML = rows[nextrecord].innerHTML;
+		//	}
+		//	appearatrow = numrows - 1;
+		//} else {
+			for (var i = numrows; i > 0; i--) {
+				nextrecord = i + 1;
+				if(nextrecord < numrows)
+					rows[nextrecord].innerHTML = rows[i].innerHTML;
+			}
+			appearatrow = 1;
+		//}
+		var item = document.getElementById('firstrow');
+		if(x == data.length-1) {
+			/* nothing */
+			showanim = false;
+		} else {
+			showanim = false;
+		}
+		if (showanim) {
+			rows[appearatrow].style.display = 'none';
+			rows[appearatrow].innerHTML = data[x];
+			new Effect.Appear(rows[appearatrow]);
+		} else {
+			rows[appearatrow].innerHTML = data[x];
+		}
+	}
+	/* rechedule AJAX interval */
+	timer = setInterval('fetch_new_rules()', updateDelay);
+}
+function toggle_pause() {
+	if(isPaused) {
+		isPaused = false;
+		fetch_new_rules();
+	} else {
+		isPaused = true;
+	}
+}
+/* start local AJAX engine */
+lastsawtime = '<?php echo time(); ?>;';
+timer = setInterval('fetch_new_rules()', updateDelay);
diff --git a/usr/local/www/widgets/widgets/interfaces.widget.php b/usr/local/www/widgets/widgets/interfaces.widget.php
new file mode 100644
index 0000000..1ebaa95
--- /dev/null
+++ b/usr/local/www/widgets/widgets/interfaces.widget.php
@@ -0,0 +1,56 @@
+<?php $i = 0; $ifdescrs = array('wan' => 'WAN', 'lan' => 'LAN');
+					for ($j = 1; isset($config['interfaces']['opt' . $j]); $j++) {
+						$ifdescrs['opt' . $j] = $config['interfaces']['opt' . $j]['descr'];
+					}?>
+			
+	         <table bgcolor="#990000" width="100%" border="0" cellspacing="0" cellpadding="0">
+			<?php 
+			$counter = 1;
+			foreach ($ifdescrs as $ifdescr => $ifname){
+					$ifinfo = get_interface_info($ifdescr);
+					$iswireless = is_interface_wireless($ifdescr);
+				?>
+				<tr> 
+				<td class="vncellt" width="30%">
+				<?php if($iswireless) {
+						 if($ifinfo['status'] == "associated") { ?> 
+		                  <img src="./themes/<?= $g['theme']; ?>/images/icons/icon_wlan.gif" />
+		                  <? } else { ?>
+		                  	<img src="./themes/<?= $g['theme']; ?>/images/icons/icon_wlan_d.gif" />
+		                  	<? } ?>
+		              <? } else { ?>
+		                  <img src="./themes/<?= $g['theme']; ?>/images/icons/icon_cablenic.gif"/>
+		                  <? } ?>&nbsp; 
+				<strong>
+				<?php
+				if ($ifname == "WAN") { ?>
+					<a href="/interfaces_wan.php">					
+				<? } else if ($ifname == "LAN") { ?>
+					<a href="/interfaces_lan.php">
+				<? } else { ?>				
+					<a href="/interfaces_opt.php?index=<?=$counter; ?>">
+				<? 
+				$counter++;
+				} ?>			
+				
+				
+				<span style="color:#000000"><?=htmlspecialchars($ifname);?></span></a></strong>
+				</td>
+				<td width="70%"  class="listr">
+				
+				  <?php if ($ifinfo['dhcplink'] != "down" && $ifinfo['pppoelink'] != "down" && $ifinfo['pptplink'] != "down"){ ?>
+	                 <?php if($ifinfo['status'] == "up") { ?> 
+		                  <img src="./themes/<?= $g['theme']; ?>/images/icons/icon_pass.gif" title="<?=$ifname;?> is up" />&nbsp; 
+		                  <? } else if ($ifinfo['status'] == "down") { ?>
+		                  <img src="./themes/<?= $g['theme']; ?>/images/icons/icon_block.gif" title="<?=$ifname;?> is down" />&nbsp; 
+		                  <? } else if ($ifinfo['status'] == "associated") { ?>
+		                  <img src="./themes/<?= $g['theme']; ?>/images/icons/icon_pass.gif" title="<?=$ifname;?> is associated" />&nbsp; 
+		                  <? } else { ?><?=htmlspecialchars($ifinfo['status']);
+				}?>				
+				  <?php if ($ifinfo['ipaddr']){ ?>
+	                 <?=htmlspecialchars($ifinfo['ipaddr']);}?>&nbsp;                 
+		              <?=htmlspecialchars($ifinfo['media']);?>
+	            </tr><?php }
+			}
+			?> 
+			</table>
\ No newline at end of file
diff --git a/usr/local/www/widgets/widgets/log.widget.php b/usr/local/www/widgets/widgets/log.widget.php
new file mode 100644
index 0000000..3e6259f
--- /dev/null
+++ b/usr/local/www/widgets/widgets/log.widget.php
@@ -0,0 +1,41 @@
+<div class="log-header">
+    <span class="log-action-mini-header">Act</span>
+    <span class="log-interface-mini-header">IF</span>
+    <span class="log-source-mini-header">Source</span>
+    <span class="log-destination-mini-header">Destination</span>
+    <span class="log-protocol-mini-header">Proto</span>
+</div>
+<?php $counter=0; foreach ($filterlog as $filterent): ?>
+<?php
+	if(isset($config['syslog']['reverse'])) {
+		/* honour reverse logging setting */
+		if($counter == 0)
+			$activerow = " id=\"firstrow\"";
+		else
+			$activerow = "";
+
+	} else {
+		/* non-reverse logging */
+		if($counter == count($filterlog))
+			$activerow = " id=\"firstrow\"";
+		else
+			$activerow = "";
+	}
+?>
+<div class="log-entry-mini" <?php echo $activerow; ?> style="clear:both;">
+	<span class="log-action-mini" nowrap>
+	<?php
+		if (strstr(strtolower($filterent['act']), "p"))
+			$img = "/themes/metallic/images/icons/icon_pass.gif";
+		else if(strstr(strtolower($filterent['act']), "r"))
+			$img = "/themes/metallic/images/icons/icon_reject.gif";
+		else
+			$img = "/themes/metallic/images/icons/icon_block.gif";
+	?>
+	&nbsp;<img border="0" src="<?=$img;?>">&nbsp;</span>
+	<span class="log-interface-mini" ><?=htmlspecialchars(convert_real_interface_to_friendly_interface_name($filterent['interface']));?></span>
+	<span class="log-source-mini" ><?=htmlspecialchars($filterent['src']);?></span>
+	<span class="log-destination-mini" ><?=htmlspecialchars($filterent['dst']);?></span>
+	<span class="log-protocol-mini" ><?=htmlspecialchars($filterent['proto']);?></span>
+</div>
+<?php $counter++; endforeach; ?>
\ No newline at end of file