<link rel="stylesheet" type="text/css" href="../css/main.css" />
<script language="JavaScript" src="../jscript/alert_message.js"  type="text/javascript"></script>
<?php

$table_name = $_SESSION['db_prefix']."_presets";
$time_query = "SELECT preset_value FROM $table_name WHERE preset_name = 'clockin1'  ";
$time_result = mySQL_query($time_query);
$intime1 = mysql_result($time_result, 0, "preset_value");

$table_name = $_SESSION['db_prefix']."_presets";
$time_query = "SELECT preset_value FROM $table_name WHERE preset_name = 'grace1'  ";
$time_result = mySQL_query($time_query);
$gracetime1 = mysql_result($time_result, 0, "preset_value");

$table_name = $_SESSION['db_prefix']."_presets";
$time_query = "SELECT preset_value FROM $table_name WHERE preset_name = 'clockout1'  ";
$time_result = mySQL_query($time_query);
$outtime1 = mysql_result($time_result, 0, "preset_value");

$table_name = $_SESSION['db_prefix']."_presets";
$time_query = "SELECT preset_value FROM $table_name WHERE preset_name = 'clockin2'  ";
$time_result = mySQL_query($time_query);
$intime2 = mysql_result($time_result, 0, "preset_value");

$table_name = $_SESSION['db_prefix']."_presets";
$time_query = "SELECT preset_value FROM $table_name WHERE preset_name = 'grace2'  ";
$time_result = mySQL_query($time_query);
$gracetime2 = mysql_result($time_result, 0, "preset_value");

$table_name = $_SESSION['db_prefix']."_presets";
$time_query = "SELECT preset_value FROM $table_name WHERE preset_name = 'clockout2'  ";
$time_result = mySQL_query($time_query);
$outtime2 = mysql_result($time_result, 0, "preset_value");


$table_name = $_SESSION['db_prefix']."_time_sheet_temp";
$attendance_date_query = "SELECT attendance_date FROM $table_name ";
$attendance_date_result = mySQL_query($attendance_date_query);
$attendance_date = mysql_result($attendance_date_result, 0, "attendance_date");

?>
<!--style sheets-->
<link href="../css/main.css" rel="stylesheet" type="text/css">  
<link rel="stylesheet" type="text/css" href="../css/scroll_table.css" />
<link rel="stylesheet" type="text/css" href="../css/tooltip.css" />

<!--jscript-->
<script language="JavaScript" src="../jscript/prompt_late_hr.js"  type="text/javascript"></script> 
<script language="JavaScript" src="../jscript/prompt_early_hr.js"  type="text/javascript"></script> 
<script language="JavaScript" src="../jscript/prompt_absent_hr.js"  type="text/javascript"></script> 
<script language="JavaScript" src="../jscript/tooltip.js"  type="text/javascript"></script> 

<script language="JavaScript" src="../jscript/alert_message.js"  type="text/javascript"></script>
<script language="JavaScript" src="../jscript/gen_validatorv4_2.js"  type="text/javascript" xml:space="preserve"></script>

<?php include('../include/wait.php') ?>
</head>


<body onLoad="MM_showHideLayers('wait','','hide'); " onFocus="MM_showHideLayers('wait','','hide');">

<div class="wizard_page_middle_frame">
<form id="feedbackform" method="post" action="recordTimes_save.php" >
<script type="text/javascript" language="javascript" src="../jscript/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				$('#scroll_table').dataTable( {
					"sScrollY": "500px",
					"bPaginate": false,
					"bScrollCollapse": true,
					"aaSorting": [[ 1, "asc" ]],
					"aoColumns": [
								{"bSortable": true},
                             	{"bSortable": true},
								{"bSortable": true},
								{"bSortable": true},
								{"bSortable": true},
								{"bSortable": true},
								{"bSortable": true},
								{"bSortable": true},
								
								 ]
				} );
			} );
		</script>
<div class="wizard_frame">
<div style="float:left;">Recordings for <?php echo date("d-m-Y", strtotime($attendance_date)) ?></div>
<div style="font-size:9px; float:left;" align="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/not_clocked_red.png" width="12" height="12">=Not clocked&nbsp;&nbsp;&nbsp;<img src="../images/present_green.png" width="12" height="12">=Present&nbsp;&nbsp;&nbsp;<img src="../images/clock_green.png" width="12" height="12">=On site&nbsp;&nbsp;&nbsp;<img src="../images/late_red.png" width="12" height="12">=Late&nbsp;&nbsp;&nbsp;<img src="../images/late_green.png" width="12" height="12">=Leave&nbsp;&nbsp;&nbsp;<img src="../images/sick_green.png" width="12" height="12">=Sick&nbsp;&nbsp;&nbsp;<img src="../images/clock_red.png" width="12" height="12">=Absent </div>
<table class="data_display" id="scroll_table" >
  <thead>
    <tr>
      <td width="23" height="33" align="center">No</td>
      <td width="200" align="center">Name</td>
      <td width="23" align="center">&nbsp;</td>
      <td width="142" align="center">Status</td>
      <td width="250" align="center">Check in</td>
      <td width="39" align="center">Lunch</td>
      <td width="47" align="center">&nbsp;</td>
      <td width="185" align="center">Check out</td>
      </tr>
  </thead>
    <?php
	

	$table_name = $_SESSION['db_prefix']."_time_sheet_temp";
	$table_name2 = $_SESSION['db_prefix']."_employee";
    $display_query = "SELECT $table_name.* 
FROM $table_name, $table_name2 
WHERE $table_name.personnel_no = $table_name2.emp_no 
AND $table_name2.time_zone < 3
AND $table_name2.time_keeping = 'yes'
AND $table_name2.end_employ_date > '".$attendance_date."' AND $table_name2.premature_end_date > '".$attendance_date."' ";
    $display_result = mySQL_query($display_query);
    $display_num = mysql_num_rows($display_result);
	$p=0;
	while ($p<$display_num) {
		 
	
	$enable_box = 'name';
	$name = 'enable'.$p;
	
	$$enable_box=0;	
	
		$time_sheet_id = mysql_result($display_result, $p, "time_sheet_id");
		$emp_no = mysql_result($display_result, $p, "personnel_no");
			$table_name2 = $_SESSION['db_prefix']."_employee";
			$employee_query = "SELECT emp_id, emp_first_name, emp_last_name, time_zone FROM $table_name2 WHERE emp_no ='".$emp_no."' ";
			
			$employee_result = mySQL_query($employee_query);
			$employee_num = mysql_num_rows($employee_result);
			$emp_id = mysql_result($employee_result, 0, "emp_id");	
			$employee_name = mysql_result($employee_result, 0, "emp_first_name").' '.mysql_result($employee_result, 0, "emp_last_name"); 
			$time_zone = mysql_result($employee_result, 0, "time_zone");
			
		$attendance_date = mysql_result($display_result, $p, "attendance_date");
		$attendance_status = mysql_result($display_result, $p, "attendance_status");
		//if ($attendance_status=='Leave') { $leave=1;} else {$leave=0;}
		
		
		if ($time_zone==1) {
			  $intime = $intime1;
			  $outtime = $outtime1;
			  $gracetime = $gracetime1;
		}
		
		if ($time_zone==2) {
			  $intime = $intime2;
			  $outtime = $outtime2;
			  $gracetime = $gracetime2;
		}
		
		if ($time_zone==3) {
			  $intime = '';
			  $outtime = '';
			  $gracetime = '';
		}
				
		$time_in = mysql_result($display_result, $p, "check_in");
		$intime_hour = date("H", strtotime($time_in));
		$intime_min = date("i", strtotime($time_in));
		if ($intime_hour==0) {$intime_hour='00';}
		if ($intime_min==0) {$intime_min='00';}
		$time_in_min = mysql_result($display_result, $p, "check_in_min");
		
		$status = 'Present';
		
		if ($attendance_status=='Check-out') {$status='';}
		if ($attendance_status=='Present') {$status='Present';}
		if ($attendance_status=='On site') {$status='On site';}
		if ($attendance_status=='Leave') {$status='Leave';}
		if ($attendance_status=='Sick') {$status='Sick';}
		
		
		$absent_permission = mysql_result($display_result, $p, "absent_permission");
		$absent_reason = mysql_result($display_result, $p, "absent_reason");
		$late=0;
		$early=0;
		$late_permission = mysql_result($display_result, $p, "late_permission");
		$late_reason = mysql_result($display_result, $p, "late_reason");
		$late1_TT="'Reason and permission not set yet.<br>Click to set.'";
		$late2_TT="'Permission: ".$late_permission.".<br>Reason: ".$late_reason.".<br>Click to change.'";
		if ($time_in!=0) {
		if ($time_in_min>$intime+$gracetime) { $late=1; $status = 'Late';} else {$late=0;}
		}
		if ($attendance_status=='Check-out') { $attendance_status=''; }
			
		if ($time_in==0)  {
				$not_clocked=1; 
				$status = 'Not clocked';
				if ($attendance_status=='Not clocked') {$status='Not clocked';}
				if ($attendance_status=='Absent') {$status='Absent';}
				if ($attendance_status=='Check-out') {$status='Not clocked';}
			}
		else {
			$not_clocked=0;
		}
		
		$lunch_out = mysql_result($display_result, $p, "check_lunch_out");
		$lunch_out = date("H:i", strtotime($lunch_out));
		$lunch_out_min = mysql_result($display_result, $p, "check_lunch_out_min");
		if ($lunch_out!=0) {
		}
		else {
			$lunch_out = '';
		}
		
		
		$lunch_in = mysql_result($display_result, $p, "check_lunch_in");
		$lunch_in_min = mysql_result($display_result, $p, "check_lunch_in_min");
		if ($lunch_in!=0) {
		if ( ($lunch_in_min - $lunch_out_min ) > 60 ) {$lunch=1;} else {$lunch=0;}
		if ($lunch==1) {$lunch_in = '<font color=orange>'.date("H:i", strtotime($lunch_in)) . '</font>';} else { $lunch_in = '<font color=black>'.date("H:i", strtotime($lunch_in)) . '</font>';}
		}
		else {
			$lunch_in = '';
		}
		
		$time_out = mysql_result($display_result, $p, "check_out");
		$time_out_min = mysql_result($display_result, $p, "check_out_min");
		$outtime_hour = date("H", strtotime($time_out));
		$outtime_min = date("i", strtotime($time_out));
		if ($outtime_hour==0) {$outtime_hour='00'; $outtime_min='00';}
		if ($outtime_hour==0) {$not_clocked_out=1; } else {$not_clocked_out=0; }
		$status_out='Out';
		
		//$early_permission = mysql_result($display_result, $p, "early_permission");
//		$early_reason = mysql_result($display_result, $p, "early_reason");
		//$early1_TT="'Reason and permission not set yet.<br>Click to set.'";
//		$early2_TT="'Permission: ".$early_permission.".<br>Reason: ".$early_reason.".<br>Click to change.'";
				
		
		if ($time_out!=0) {
		
		if ($time_out_min<$outtime) { $early=1;} else {$early=0;}
		
		if ($early==1) {$time_out = '<font color=red>'.date("H:i", strtotime($time_out)) . '</font>';} else { $time_out = '<font color=black>'.date("H:i", strtotime($time_out)) . '</font>';}
		}
		else {
			if ($absent_reason=='') {
			        $time_out = 'Not clocked';
			}
			else {
				$time_out = $absent_reason;
			}
		}
		//$early_icon = '';
//		if ($early==1) {
//			$early_icon = '<a href=# ><img src=../images/exclamation_mark_red_small.png width=10 height=12 ></a>';
//			$status_out = 'Early';
//			} 
//			else {
//			$early_icon = '';
//			}
		
		
		
		if (($time_in_min>0) AND ($time_out_min>0)) {
		
		$worked = $time_out_min - $time_in_min - 60;
		$worked_hours =  floor($worked/60); 
		$worked_mins =   $worked % 60; 
		if ($worked_hours<10) { $worked_hours = 0 . $worked_hours; }
		if ($worked_mins<10) { $worked_mins = 0 . $worked_mins; }
		$total_worked = $worked_hours.':'.$worked_mins;
		}
		else {
			$total_worked=0;
			
		}
		
		
			    
	?> 
    <tr  >
      <td align="center" valign="top"> <?php echo $emp_no ?><input name="time_sheet_id<?php echo $p ?>" type="hidden" value="<?php echo $time_sheet_id ?>">
        <input type="hidden" name="attendance_date" id="attendance_date" value="<?php echo $attendance_date?>">        &nbsp;
        <input type="hidden" name="emp_no<?php echo $p ?>" id="emp_no<?php echo $p ?>" value="<?php echo $emp_no ?>"></td>
      <td align="left" valign="top"><p><a href="" onMouseover="ddrivetip('click here  ', 150)"; onMouseout="hideddrivetip()"><?php echo $employee_name ?>
        <input type="hidden" name="emp_id<?php echo $p ?>" id="emp_id<?php echo $p ?>" value="<?php echo $emp_id ?>" >
      </a></p><input name="line<?php echo $p ?>" id="line<?php echo $p ?>" type="hidden" value="<?php echo $p ?>"></td>
      <td align="center" valign="top"><?php echo $time_zone ?><input name="time_zone<?php echo $p ?>" type="hidden" value="<?php echo $time_zone ?>"><input name="status<?php echo $p ?>" id="status<?php echo $p ?>" type="hidden" value="<?php echo $status ?>"></td>
      
      <td align="center" valign="top">
      
<!--begin present block-->    
      <?php if  (($late==0) AND ($not_clocked==0) ) { ?>
      <script>
	  		document.getElementById('present_text<?php echo $p ?>').hidden=false;
			document.getElementById('on_site_text<?php echo $p ?>').hidden=true;
			document.getElementById('sick_text<?php echo $p ?>').hidden=true;
      		document.getElementById('leave_text<?php echo $p ?>').hidden=true;
      		document.getElementById('absent_text<?php echo $p ?>').hidden=true;
      		document.getElementById('late_text<?php echo $p ?>').hidden=true;
	  		document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true;
	  <?php if ($attendance_status=='Present') { ?>
           	document.getElementById('present_text<?php echo $p ?>').hidden=false;
			document.getElementById('on_site_text<?php echo $p ?>').hidden=true;
			document.getElementById('sick_text<?php echo $p ?>').hidden=true;
      		document.getElementById('leave_text<?php echo $p ?>').hidden=true;
      		document.getElementById('absent_text<?php echo $p ?>').hidden=true;
      		document.getElementById('late_text<?php echo $p ?>').hidden=true;
	  		document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true;
	  <?php  } ?>
	  
	  <?php if ($attendance_status=='On site') { ?>
           	document.getElementById('present_text<?php echo $p ?>').hidden=true;
			document.getElementById('on_site_text<?php echo $p ?>').hidden=false;
			document.getElementById('sick_text<?php echo $p ?>').hidden=true;
      		document.getElementById('leave_text<?php echo $p ?>').hidden=true;
      		document.getElementById('absent_text<?php echo $p ?>').hidden=true;
      		document.getElementById('late_text<?php echo $p ?>').hidden=true;
	  		document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true;
	  <?php  } ?>
	  
	  <?php if ($attendance_status=='Leave') { ?>
           	document.getElementById('present_text<?php echo $p ?>').hidden=true;
			document.getElementById('on_site_text<?php echo $p ?>').hidden=true;
			document.getElementById('sick_text<?php echo $p ?>').hidden=true;
      		document.getElementById('leave_text<?php echo $p ?>').hidden=false;
      		document.getElementById('absent_text<?php echo $p ?>').hidden=true;
      		document.getElementById('late_text<?php echo $p ?>').hidden=true;
	  		document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true;
	  <?php  } ?>
	  
	  <?php if ($attendance_status=='Sick') { ?>
           	document.getElementById('present_text<?php echo $p ?>').hidden=true;
			document.getElementById('on_site_text<?php echo $p ?>').hidden=true;
			document.getElementById('sick_text<?php echo $p ?>').hidden=false;
      		document.getElementById('leave_text<?php echo $p ?>').hidden=true;
      		document.getElementById('absent_text<?php echo $p ?>').hidden=true;
      		document.getElementById('late_text<?php echo $p ?>').hidden=true;
	  		document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true;
	  <?php  } ?>
			
      
	  </script>
      <div id="present1<?php echo $p ?>" style="float:left;" align="left" ><img src="../images/check_mark_green.png" width="12" height="12"  title="Change clocking status."  
      onClick="
      document.getElementById('clock_options1_div<?php echo $p ?>').hidden=false; 
      document.getElementById('present1<?php echo $p ?>').hidden=true; 
      document.getElementById('present_text<?php echo $p ?>').hidden=true;
      document.getElementById('sick_text<?php echo $p ?>').hidden=true;
      document.getElementById('leave_text<?php echo $p ?>').hidden=true;
      document.getElementById('absent_text<?php echo $p ?>').hidden=true;
      document.getElementById('late_text<?php echo $p ?>').hidden=true;
      document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true;
      document.getElementById('on_site_text<?php echo $p ?>').hidden=true; 
      document.getElementById('intime_hour_select<?php echo $p ?>').selectedIndex=7; 
      document.getElementById('intime_min_select<?php echo $p ?>').selectedIndex=0; 
      document.getElementById('outtime_hour_select<?php echo $p ?>').selectedIndex=6; 
      document.getElementById('outtime_min_select<?php echo $p ?>').selectedIndex=0; ">
      <br>
      </div>
      <br>
	   
      
 <?php } ?>
<!--end present block--> 

<!--begin late block-->    
	  <?php if ($late==1) { ?>
      <script>
      document.getElementById('present_text<?php echo $p ?>').hidden=true;
	  document.getElementById('sick_text<?php echo $p ?>').hidden=true;
      document.getElementById('leave_text<?php echo $p ?>').hidden=true;
      document.getElementById('absent_text<?php echo $p ?>').hidden=true;
      document.getElementById('late_text<?php echo $p ?>').hidden=false;
	  document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true;
      document.getElementById('on_site_text<?php echo $p ?>').hidden=true;
	  </script>
      
      <div id="present1<?php echo $p ?>" style="float:left; margin-left:0px;" align="left" >
      <img src="../images/check_mark_green.png" width="12" height="12"; title="Change clocking status." 
      onClick="
      document.getElementById('clock_options1_div<?php echo $p ?>').hidden=false; 
      document.getElementById('present1<?php echo $p ?>').hidden=true; 
      document.getElementById('present_text<?php echo $p ?>').hidden=true;
      document.getElementById('sick_text<?php echo $p ?>').hidden=true;
      document.getElementById('leave_text<?php echo $p ?>').hidden=true;
      document.getElementById('absent_text<?php echo $p ?>').hidden=true;
      document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true;
      document.getElementById('on_site_text<?php echo $p ?>').hidden=true;
      document.getElementById('late_text<?php echo $p ?>').hidden=true; 
      document.getElementById('intime_hour_select<?php echo $p ?>').selectedIndex=7; 
      document.getElementById('intime_min_select<?php echo $p ?>').selectedIndex=0; 
      document.getElementById('outtime_hour_select<?php echo $p ?>').selectedIndex=6; 
      document.getElementById('outtime_min_select<?php echo $p ?>').selectedIndex=0; ">
      <br>
       </div>
      
       <br>
           

<?php } ?>       
<!--end late block--> 

<!--begin not clocked block-->
 <?php if ($not_clocked==1) { ?> 
 <script>
      <?php if ($attendance_status == '' ) { ?>
      		document.getElementById('clock_options1_div<?php echo $p ?>').hidden=false;
	  		document.getElementById('present1<?php echo $p ?>').hidden=true;
	  		document.getElementById('absent_text<?php echo $p ?>').hidden=true;
			document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true;
			document.getElementById('present1<?php echo $p ?>').hidden=true;
	  <?php } ?>
	  	<?php if ($attendance_status == 'Absent' ) { ?>
			document.getElementById('absent_text<?php echo $p ?>').hidden=false;
			document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true;
			document.getElementById('clock_options1_div<?php echo $p ?>').hidden=true;
			document.getElementById('present1<?php echo $p ?>').hidden=false;
		<?php } ?>
		<?php if ($attendance_status == 'Not clocked' ) { ?>
			document.getElementById('absent_text<?php echo $p ?>').hidden=true;
			document.getElementById('not_clocked_text<?php echo $p ?>').hidden=false;
			document.getElementById('clock_options1_div<?php echo $p ?>').hidden=true;
			document.getElementById('present1<?php echo $p ?>').hidden=false;
		<?php } ?>
      
      document.getElementById('present_text<?php echo $p ?>').hidden=true;
	  document.getElementById('sick_text<?php echo $p ?>').hidden=true;
      document.getElementById('leave_text<?php echo $p ?>').hidden=true;
      document.getElementById('late_text<?php echo $p ?>').hidden=true;
	  document.getElementById('on_site_text<?php echo $p ?>').hidden=true;
	  
	  
	  </script>
  	  <div id="present1<?php echo $p ?>" style="float:left;" align="left" ><img src="../images/check_mark_green.png" width="12" height="12"  title="Change clocking status."  
      onClick="
      document.getElementById('clock_options1_div<?php echo $p ?>').hidden=false; 
      document.getElementById('present1<?php echo $p ?>').hidden=true; 
      document.getElementById('present_text<?php echo $p ?>').hidden=true;
      document.getElementById('sick_text<?php echo $p ?>').hidden=true;
      document.getElementById('leave_text<?php echo $p ?>').hidden=true;
      document.getElementById('absent_text<?php echo $p ?>').hidden=true;
      document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true;
      document.getElementById('on_site_text<?php echo $p ?>').hidden=true;
      document.getElementById('late_text<?php echo $p ?>').hidden=true; 
      document.getElementById('intime_hour_select<?php echo $p ?>').selectedIndex=7; 
      document.getElementById('intime_min_select<?php echo $p ?>').selectedIndex=0; 
      document.getElementById('outtime_hour_select<?php echo $p ?>').selectedIndex=6; 
      document.getElementById('outtime_min_select<?php echo $p ?>').selectedIndex=0; ">
      <br>
       </div>
      
       <br>
<?php } ?>
<!--end not clocked block--> 

      <div id="status"  style="float:left;"> 
        <div id="present_text<?php echo $p ?>" style="float:left;  margin:0px;">Present</div> 
        <div id="not_clocked_text<?php echo $p ?>" style="float:left;  margin:0px; " >Not clocked</div> 
      	<div id="on_site_text<?php echo $p ?>" style="float:left;  margin:0px; ">On site</div>
      	<div id="absent_text<?php echo $p ?>" style="float:left;  margin:0px; ">Absent</div>
      	<div id="leave_text<?php echo $p ?>" style="float:left;  margin:0px; ">Leave</div> 
      	<div id="sick_text<?php echo $p ?>" style="float:left;  margin:0px; " >Sick</div> 
      	<div id="late_text<?php echo $p ?>" style="float:left;  margin:0px; " >Late</div> 
      <div> 	
  	
 
<div id="clock_options1_div<?php echo $p ?>" align="left" style="float:left; margin:0px;" hidden="true">       

<div id="not_clocked_red<?php echo $p ?>" style="float:left; margin:0px;"  title="Set not clocked.">
        
      <img src="../images/not_clocked_red.png" width="12" height="12"; onClick="
      
document.getElementById('intime_hour_select<?php echo $p ?>').selectedIndex=7; 
document.getElementById('intime_min_select<?php echo $p ?>').selectedIndex=0;       
document.getElementById('outtime_hour_select<?php echo $p ?>').selectedIndex=6; 
document.getElementById('outtime_min_select<?php echo $p ?>').selectedIndex=0; 
document.getElementById('status<?php echo $p ?>').value='Not clocked'; 
document.getElementById('clock_options1_div<?php echo $p ?>').hidden=true;
document.getElementById('present1<?php echo $p ?>').hidden=false;
document.getElementById('not_clocked_text<?php echo $p ?>').hidden=false; 
document.getElementById('on_site_text<?php echo $p ?>').hidden=true; 
document.getElementById('absent_text<?php echo $p ?>').hidden = true;
document.getElementById('leave_text<?php echo $p ?>').hidden = true;
document.getElementById('sick_text<?php echo $p ?>').hidden = true;
document.getElementById('late_text<?php echo $p ?>').hidden=true;
document.getElementById('early_div<?php echo $p ?>').hidden=true; 
">
</div>

<div id="present_green_div<?php echo $p ?>" style="float:left; margin:0px; margin-left:3px; width:10px;" title="Set present." >
      <img src="../images/present_green.png" width="12" height="12" id="present_green<?php echo $p ?>" style="cursor:pointer" 
      onClick="
      document.getElementById('intime_hour_select<?php echo $p ?>').selectedIndex=1; 
      document.getElementById('intime_min_select<?php echo $p ?>').selectedIndex=0; 
      document.getElementById('outtime_hour_select<?php echo $p ?>').selectedIndex=5; 
      document.getElementById('outtime_min_select<?php echo $p ?>').selectedIndex=0; 
      document.getElementById('status<?php echo $p ?>').value='Present'; 
      document.getElementById('clock_options1_div<?php echo $p ?>').hidden=true; 
      document.getElementById('present1<?php echo $p ?>').hidden=false; 
      document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true; 
      document.getElementById('on_site_text<?php echo $p ?>').hidden=true; 
      document.getElementById('absent_text<?php echo $p ?>').hidden = true; 
      document.getElementById('present_text<?php echo $p ?>').hidden = false;
      document.getElementById('late_text<?php echo $p ?>').hidden=true; 
      document.getElementById('not_clocked_out_div<?php echo $p ?>').hidden=true; 
      document.getElementById('early_div<?php echo $p ?>').hidden=true;
      document.getElementById('status_out<?php echo $p ?>').value='';
    ">
     </div>
      
<div id="clockin_green_div<?php echo $p ?>" style="float:left; margin:0px; margin-left:3px; width:10px;" title="Set clocked on site." >
      <img src="../images/clock_green.png" width="12" height="12" id="clock_green<?php echo $p ?>" style="cursor:pointer" 
      onClick="
      document.getElementById('intime_hour_select<?php echo $p ?>').selectedIndex=1; 
      document.getElementById('intime_min_select<?php echo $p ?>').selectedIndex=0; 
      document.getElementById('outtime_hour_select<?php echo $p ?>').selectedIndex=5; 
      document.getElementById('outtime_min_select<?php echo $p ?>').selectedIndex=0;
      document.getElementById('status<?php echo $p ?>').value='On site'; 
      document.getElementById('clock_options1_div<?php echo $p ?>').hidden=true; 
      document.getElementById('present1<?php echo $p ?>').hidden=false; 
      document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true; 
      document.getElementById('on_site_text<?php echo $p ?>').hidden=false; 
      document.getElementById('absent_text<?php echo $p ?>').hidden = true; 
      document.getElementById('late_text<?php echo $p ?>').hidden=true;
      document.getElementById('not_clocked_out_div<?php echo $p ?>').hidden=true; 
      document.getElementById('early_div<?php echo $p ?>').hidden=true;
      document.getElementById('status_out<?php echo $p ?>').value=''; 
      ">
    </div>
     
<div id="late_red_div<?php echo $p ?>" style="float:left; margin:0px; margin-left:3px; width:10px;" title="Set late." >
      <img src="../images/late_red.png" width="12" height="12" id="late_red<?php echo $p ?>" style="cursor:pointer" 
      onClick="
      document.getElementById('intime_hour_select<?php echo $p ?>').selectedIndex=1; 
      document.getElementById('intime_min_select<?php echo $p ?>').selectedIndex=0; 
      document.getElementById('outtime_hour_select<?php echo $p ?>').selectedIndex=5; 
      document.getElementById('outtime_min_select<?php echo $p ?>').selectedIndex=0; 
      document.getElementById('clock_options1_div<?php echo $p ?>').hidden=true;
      document.getElementById('status<?php echo $p ?>').value='Late'; 
      document.getElementById('clock_options1_div<?php echo $p ?>').hidden=true; 
      document.getElementById('present1<?php echo $p ?>').hidden=false; 
      document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true; 
      document.getElementById('on_site_text<?php echo $p ?>').hidden=true; 
      document.getElementById('absent_text<?php echo $p ?>').hidden = true; 
      document.getElementById('late_text<?php echo $p ?>').hidden=false;
      ">
      </div>     
<br>    
    <div id="leave_green_div<?php echo $p ?>" style="float:left; margin:0px; margin-left:3px; width:10px;" title="On leave." >
      <img src="../images/leave_green.png" width="12" height="12" id="leave_green<?php echo $p ?>" style="cursor:pointer" 
      onClick="
      document.getElementById('intime_hour_select<?php echo $p ?>').selectedIndex=1; 
      document.getElementById('intime_min_select<?php echo $p ?>').selectedIndex=0; 
      document.getElementById('outtime_hour_select<?php echo $p ?>').selectedIndex=5; 
      document.getElementById('outtime_min_select<?php echo $p ?>').selectedIndex=0; 
      document.getElementById('status<?php echo $p ?>').value='Leave'; 
      document.getElementById('clock_options1_div<?php echo $p ?>').hidden=true; 
      document.getElementById('present1<?php echo $p ?>').hidden=false; 
      document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true; 
      document.getElementById('on_site_text<?php echo $p ?>').hidden=true; 
      document.getElementById('absent_text<?php echo $p ?>').hidden = true;
      document.getElementById('leave_text<?php echo $p ?>').hidden = false; 
      document.getElementById('sick_text<?php echo $p ?>').hidden = true;
      document.getElementById('late_text<?php echo $p ?>').hidden=true;
      document.getElementById('not_clocked_out_div<?php echo $p ?>').hidden=true; 
      document.getElementById('early_div<?php echo $p ?>').hidden=true; 
      document.getElementById('status_out<?php echo $p ?>').value='';
      ">
       </div>  
       
    <div id="sick_green_div<?php echo $p ?>" style="float:left; margin:0px; margin-left:3px; width:10px;" title="Sick leave." >
      <img src="../images/sick_green.png" width="12" height="12" id="sick_green<?php echo $p ?>" style="cursor:pointer" 
      onClick="
      document.getElementById('intime_hour_select<?php echo $p ?>').selectedIndex=1; 
      document.getElementById('intime_min_select<?php echo $p ?>').selectedIndex=0; 
      document.getElementById('outtime_hour_select<?php echo $p ?>').selectedIndex=5; 
      document.getElementById('outtime_min_select<?php echo $p ?>').selectedIndex=0;
      document.getElementById('status<?php echo $p ?>').value='Sick'; 
      document.getElementById('clock_options1_div<?php echo $p ?>').hidden=true; 
      document.getElementById('present1<?php echo $p ?>').hidden=false; 
      document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true; 
      document.getElementById('on_site_text<?php echo $p ?>').hidden=true; 
      document.getElementById('absent_text<?php echo $p ?>').hidden = true;
      document.getElementById('leave_text<?php echo $p ?>').hidden = true; 
      document.getElementById('sick_text<?php echo $p ?>').hidden = false; 
      document.getElementById('late_text<?php echo $p ?>').hidden=true;
      document.getElementById('not_clocked_out_div<?php echo $p ?>').hidden=true; 
      document.getElementById('early_div<?php echo $p ?>').hidden=true; 
      document.getElementById('status_out<?php echo $p ?>').value='';
      ">
       </div>     
       
     <div id="clockin_red_div <?php echo $p ?>" style="float:left; margin:0px; margin-left:3px; width:10px;" >
        <img src="../images/clock_red.png" width="12" height="12" id="clock_red<?php echo $p ?>" title="Set absent." style="cursor:pointer" 
        onClick="document.getElementById('intime_hour_select<?php echo $p ?>').selectedIndex=7; 
        document.getElementById('intime_min_select<?php echo $p ?>').selectedIndex=0; 
        document.getElementById('outtime_hour_select<?php echo $p ?>').selectedIndex=6; 
        document.getElementById('outtime_min_select<?php echo $p ?>').selectedIndex=0; 
        
        document.getElementById('not_clocked_out_div<?php echo $p ?>').hidden=true; 
        document.getElementById('early_div<?php echo $p ?>').hidden=true; 
        document.getElementById('status_out<?php echo $p ?>').value='';
        
        document.getElementById('status<?php echo $p ?>').value='Absent'; 
        document.getElementById('clock_options1_div<?php echo $p ?>').hidden=true; 
        document.getElementById('present1<?php echo $p ?>').hidden=false; 
        document.getElementById('not_clocked_text<?php echo $p ?>').hidden=true; 
        document.getElementById('on_site_text<?php echo $p ?>').hidden=true; 
        document.getElementById('absent_text<?php echo $p ?>').hidden = false; 
        document.getElementById('not_clocked_out_green<?php echo $p ?>').hidden=true; 
        document.getElementById('not_clocked_out_red<?php echo $p ?>').hidden=true; 
        document.getElementById('late_text<?php echo $p ?>').hidden=true; 
        
        "
        >
        <br>
</div>
</div>
          
</td>
     
      <td align="center" valign="top"  >
        <div id="clockin_div" style="float:left; margin:0px; " ><select name="intime_hour_select<?php echo $p ?>" class="select_no_arrow" id="intime_hour_select<?php echo $p ?>"  >
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="00">00</option>
        <option value="<?php echo $intime_hour ?>" selected="selected"><?php echo $intime_hour ?></option>
      </select>
      :
        <select name="intime_min_select<?php echo $p ?>" class="select_no_arrow" id="intime_min_select<?php echo $p ?>"  >
        <option value="0">00</option>
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
          <?php 
		  $i=10;
		  while ($i<60) {
			  ?>
          <option value="<?php echo $i ?>"><?php echo $i ?></option>    
          <?php
		  $i++;
		  }
		  ?>
         <option value="<?php echo $intime_min ?>" selected="selected" ><?php  echo $intime_min ?></option> 
        </select> 
        </div></td>
      <td align="center" valign="top"><?php echo $lunch_out?><br><?php echo $lunch_in?></td>
      
      <td align="center" valign="top"><input name="status_out<?php echo $p ?>" id="status_out<?php echo $p ?>" type="hidden" value="<?php echo $status_out ?>">
      <div id="early_div<?php echo $p ?>" <?php if ($early==0) { ?> hidden="false" <?php } ?> >
	   <img src="../images/early_red.png" width="12" height="12"  title="Set clock out to 17.00." style="cursor:pointer" 
        onClick="document.getElementById('outtime_hour_select<?php echo $p ?>').selectedIndex=5; 
        document.getElementById('outtime_min_select<?php echo $p ?>').selectedIndex=0; 
        document.getElementById('status_out<?php echo $p ?>').value='';
        document.getElementById('early_div<?php echo $p ?>').hidden=true; 
        "> 
        </div>
       <div id="not_clocked_out_div<?php echo $p ?>" <?php if ($not_clocked_out==0) { ?> hidden="false" <?php } ?> >
	   <img src="../images/not_clocked_red.png" width="12" height="12"  title="Set clock out to 17.00." style="cursor:pointer" 
        onClick="document.getElementById('outtime_hour_select<?php echo $p ?>').selectedIndex=5; 
        document.getElementById('outtime_min_select<?php echo $p ?>').selectedIndex=0; 
        document.getElementById('status_out<?php echo $p ?>').value='';
        document.getElementById('not_clocked_out_div<?php echo $p ?>').hidden=true; 
        "> 
        </div> 
       </td>
        
      <td align="center" valign="top"><div id="clockout_div" style="float:left;" ><select name="outtime_hour_select<?php echo $p ?>" class="select_no_arrow" id="outtime_hour_select<?php echo $p ?>" >
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="00">00</option>
        <option value="<?php echo $outtime_hour ?>" selected="selected"><?php echo $outtime_hour ?></option>
        </select>
        :
        <select name="outtime_min_select<?php echo $p ?>" class="select_no_arrow" id="outtime_min_select<?php echo $p ?>"  >
          <option value="0">00</option>
          <option value="1">01</option>
          <option value="2">02</option>
          <option value="3">03</option>
          <option value="4">04</option>
          <option value="5">05</option>
          <option value="6">06</option>
          <option value="7">07</option>
          <option value="8">08</option>
          <option value="9">09</option>
          <?php 
		  $i=10;
		  while ($i<60) {
			  ?>
          <option value="<?php echo $i ?>"><?php echo $i ?></option>    
          <?php
		  $i++;
		  }
		  ?>
          <option value="<?php echo $outtime_min ?>" selected="selected" ><?php  echo $outtime_min ?></option> 
          </select> 
        </div>
        <br></td>
      </tr>
    <?php 
	$p++;
	}
	$_SESSION['list_no']=$p;
	?>
</table>
</div>
<div class="wizard_frame">       
              <table width="637" height="50" align="center" id="tableButtonBar">
                <tr>
                  <td colspan="5"><div style="font-size:9px; float:left;" align="right"><img src="../images/not_clocked_red.png" width="12" height="12">=Not clocked&nbsp;&nbsp;&nbsp;<img src="../images/present_green.png" width="12" height="12">=Present&nbsp;&nbsp;&nbsp;<img src="../images/clock_green.png" width="12" height="12">=On site&nbsp;&nbsp;&nbsp;<img src="../images/late_red.png" width="12" height="12">=Late&nbsp;&nbsp;&nbsp;<img src="../images/late_green.png" width="12" height="12">=Leave&nbsp;&nbsp;&nbsp;<img src="../images/sick_green.png" width="12" height="12">=Sick&nbsp;&nbsp;&nbsp;<img src="../images/clock_red.png" width="12" height="12">=Absent </div></td>
                </tr>
                <tr>
                  <td width="134">&nbsp;</td>
                  <td width="132">
                    <input name="s" type="hidden" id="s" value="4" />
                    <input name="p" type="hidden" id="p" value="4" />
                  </td>
                  <td width="113">&nbsp;</td>
                  <td width="143" align="right"><input name="cancelbutton" type="button" class="imagebutton" id="cancelbutton" onClick="needToConfirm = false; cancel_confirmation(1, '../hr_module/hr_main.php?date=0');" value="Cancel" /></td>
                  <td width="91" align="right"><input  name="next_button" type="submit" class="imagebutton" id="next_button" value="Next" onClick="needToConfirm = false; MM_showHideLayers('wait','','show');"  /></td>
                </tr>
              </table>
</div>  
</form>

</div>
</body>