<?php
       $cat = $_GET["c"];
       preg_match('/^[a-zA-Z0-9]+$/', $cat) or die("Invalid value.");
       
       //$myItem = $cat . "00001" ;
       //$url = "./cat_detail1.php?c=" . $cat . "&s=" . $myItem ;
       //header( "Location: " . $url);
       //exit();
       
       include "../../inc/presetval.php";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>PCCW - Biz Netvigator</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="copyright" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />

<link rel="stylesheet" href="../../css/common.css" type="text/css"> 
<link rel="stylesheet" href="../../css/style1.css" type="text/css">
<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css">
<![endif]-->
<script type="text/javascript">
var navOver = false;

function swapNav(thisId) {
	var thisObj = document.getElementById(thisId);
	
	if(navOver)
	{
		thisObj.src = thisObj.src.replace('b.jpg','a.jpg');
		navOver = false;
	}
	else
	{
		thisObj.src = thisObj.src.replace('a.jpg','b.jpg');
		navOver = true;
	}
}
</script>

<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" language="javascript" src="../../js/menuscript.js"></script>
<style type="text/css" media="screen">
div.thumb {
    margin: 15px;
    border: 1px solid #A0ACC0;
    height: auto;
    float: left;
    text-align: center;   
    position: relative; 
    /*background-color: #eee;*/
} 
.highlight{background-color: #ffff33;}
.active {
    background-color: #0ff;
}
.thumb img{
    display: inline;
    margin: 5px;
    border: 1px solid #A0ACC0;
}
.thumb a:hover img {border: 1px solid black;}
div.thumb a:hover {
background: #ffff33;
}
.photocattitle {text-align: center; font-weight: bold;}
.phototitle {
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 0 3px 3px 3px;
    text-decoration:none;
} 

.tooltip { 
	/* by default, hide it */
	display: none; 
	/* allow us to move the tooltip */
	position: absolute; 
	/* align the image properly */
	padding: 8px 0 0 8px; 
}

.tooltip span.overlay { 
	/* the png image, need ie6 hack though */
	/*background: url(./overlay.png) no-repeat;*/ 
	/* put this overlay on the top of the tooltip image */
	position: absolute; 
	top: 0px; 
	left: 0px; 
	display: block; 
	width: 400px; 
	height: 320px;
}
</style>
<script type="text/javascript" charset="utf-8">
<!--
$(document).ready(function(){
$(".thumb").mouseover(function(){ $(this).addClass('highlight'); }); 
$(".thumb").mouseout(function(){ $(this).removeClass('highlight'); }); 

// Get all the thumbnail
		$('.thumb').mouseenter(function(e) {

			// Calculate the position of the image tooltip
			//x = e.pageX - $(this).offset().left;
			//y = e.pageY - $(this).offset().top;
			var m = { x:e.pageX, y:e.pageY } ;
      var userAgent = window.navigator.userAgent.toLowerCase();
		  $.browser.msie8 = $.browser.msie && /msie 8\.0/i.test(userAgent);
      if( $.browser.msie8 ) { 
          // IE 8 
          m={ x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop }; 
      } 
      x = m.x - $(this).offset().left;
			y = m.y- $(this).offset().top ;
			
			if( $(this).children("#thumbno").val() % 3 == 2 ) 
      {
             //last one of Right side thumb
             x = x - 400 - 30 ;
      } 
      else 
      {
             x = x + 30; 
      }
			//x = x - 400 - 30 ;   //right
			//x = x + 30; //left
			y = y - 160;
			
			// Set the z-index of the current item, 
			// make sure it's greater than the rest of thumbnail items
			// Set the position and display the image tooltip
			$(this).css('z-index','15')
			.children("div.tooltip")
			.css({'top': y ,'left': x ,'display':'block'});
			
		}).mousemove(function(e) {
			
			// Calculate the position of the image tooltip		
			//x = e.pageX - $(this).offset().left;
			//y = e.pageY - $(this).offset().top;
			var m = { x:e.pageX, y:e.pageY } ;
      var userAgent = window.navigator.userAgent.toLowerCase();
		  $.browser.msie8 = $.browser.msie && /msie 8\.0/i.test(userAgent);
      if( $.browser.msie8 ) { 
          // IE 8 
          m={ x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop }; 
      } 
      x = m.x - $(this).offset().left;
			y = m.y- $(this).offset().top ;
			
			if( $(this).children("#thumbno").val() % 3 == 2 ) 
      {
            //last one of Right side thumb
             x = x - 400 - 30 ;
      } 
      else 
      {
             x = x + 30; 
      }
      
			//x = x - 400 - 30 ;  //right
			//x = x + 30; //left
			y = y - 160;
			
			// This line causes the tooltip will follow the mouse pointer
			$(this).children("div.tooltip").css({'top': y ,'left': x });
			
		}).mouseleave(function() {
			
			// Reset the z-index and hide the image tooltip 
			$(this).css('z-index','1')
			.children("div.tooltip")
			.animate({"opacity": "hide"}, "fast");
		});

});

function popup(url) 
{
 params  = 'width='+screen.width;
 params += ', height='+screen.height;
 params += ', top=0, left=0';
 params += ', resizable=1, scrollbars=1';
 params += ', fullscreen=yes';

 var newwin=window.open(url,'windowname4', params);
 /*if (window.focus) {
    if(newwin && !newwin.closed){
        newwin.focus();
    }
 }*/
 return false;
}
// -->
</script>
</head>

<body  >
<a name="top"></a>
<div id="wrapper">

<?php $menuTabOnNum = 1; ?>
<?php include "../../inc/header.php" ?>  

	<!-- content -->
	<div id="content" class="inside">
   <br>
<table cellpadding="0" cellspacing="0" border="0">
        <tr>
			<td valign="top"><?php include "../../inc/menu_tmp.php" ?></td>
         <td valign="top">
          <p>
      		<div style="margin-left:40px;"><h3><?php echo $gbl_cat_symbol[$cat]; ?></h3></div>

              <ul>
              <?php 
              
              if(   $gbl_cat_symbol[$cat] !=  "" ) 
              {
                  // declare the folder
                  $myDir = "./" . $cat . "/";     
                  
                  // prepare to read directory contents
                  $myDirList = @opendir($myDir);   
                  
                  //folder start with syntax for template
                  $startStr = $cat;
                  
                  
                  // loop through the items
                  $narray=array();
                  $i=0;
                  while ($myItem = readdir($myDirList))
                  {
                      if ($myItem) {
                  
                          if ($myItem != "." && $myItem != "..") {
                          
                              // check if it is a directory
                              if (  is_dir( $myDir . $myItem )  )
                              {
                                  if(  preg_match("/^".$startStr."/",$myItem)  )
                                  {   
                                        $narray[$i]=$myItem;
                                        $i++;
                                  }
                              }
                          }
                      }
                  }
                  
                  if( $i > 0 ) 
                  {
                      sort($narray);
                      for($i=0; $i<sizeof($narray); $i++)
                      {
                          $myItem = $narray[$i];
                          ?>
                          <div class="thumb">
                            <input type="hidden" id="thumbno" name="thumbno" value="<?php echo $i; ?>">
                            <a href='./cat_detail.php<?php echo "?c=" . $cat . "&amp;s=" . $myItem ?>'>
                            <img src='<?php echo $myDir . $myItem ?>/thumbnail.jpg' alt='Serial No.: <?php echo $myItem ?>'  width="200" height="160" />
                            <div class="phototitle">
                            Serial No.: <?php echo $myItem ?>
                            </div>
                            </a>
                            <div class="tooltip">
                          			<img src="<?php echo $myDir . $myItem ?>/thumbnail_en.jpg" alt="" width="400" height="320" />
                          			<span class="overlay"></span>
                          		</div> 
                          </div>
                          <?php
                      }
                  }
                  else
                  {
                      echo "No Template is provided currently.";
                  }
                  
                  closedir($myDirList);
              }
               
              ?> 
              </ul>
              
            </p>
            </td>
            </tr>
            <tr>
            	<td height="100">&nbsp;</td>
            </tr>
            </table>
           
        
	</div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
			<?php include "../../inc/footer.php" ?>
         </td>
     </tr>
</table> 
</div>
</body>
</html>
