Creating Timer for an auction website - php

Question

I am trying to create a timer for an auction website.
Each product has a specific end date called TargetDate, which is entered in TimerInput.php file.
These values are then posted into TimerOutput.php file which will display the product followed by the timer countdown to finish date.
Each time the counter > 15 and the user click on bid button, the timer continue countdown normally.
But when the counter < 15, each time clicking bid causes the timer to reset to 15 by extending the TargetDate by the specific value related to when the button was pressed.
First, the Bid button wasn't working, so instead the function is called by refreshing the page.
When the timer is under 15, refreshing the page causes the TargetDate to be extended as it should be and the timer is reset to 15.
But the problem is when the first TargetDate entered originally in TimerInput.php file is reached, the bid is over, although showing different time during execution of code shows that the date is being updated.
I have tried to works by executing the code in PHP alone and displaying using Javascript.
Then I have tried to execute code by Javascript and finally I have tried to write the date into external file and read it again but with no result.
Thanks for any help in advance.
Here is my code:
TimerOutput.php:
<?php
// target date entered by user
$TargetDate = $month."/".$day."/".$year." ".$hour.":".$minute.":".$second." ".$hourclock;
// change target date to unix timestamp format
$UnixTargetDate = strtotime($month."/".$day."/".$year." ".$hourHC.":".$minute.":".$second);
// unix timestamp right now
$unixtime = strtotime("now");
}
?>
<script language="JavaScript">
//TargetDate = "7/30/2012 13:32";
ForeColor = "navy";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%H%%:%%M%%:%%S%%";
FinishMessage = "Sold at: "
// extract timer variables inputs
var unixNow = parseInt("<?php echo $unixtime?>");
var unixTarget = parseInt("<?php echo $UnixTargetDate?>");
function AdditionalSecond()
{
if ((unixTarget - unixNow)>0 && (unixTarget - unixNow)<15)
{
// reset timer to 15s
// update target date
unixTarget = unixTarget + 15 - (unixTarget - unixNow);
}
else if ((unixTarget - unixNow)>15)
{
// do nothing continue countdown normally
unixTarget=unixTarget;
}
else
{
// display that item is sold when time is up
FinishMessage
}
}
// call function AdditionalSecond() to be executed
AdditionalSecond();
// create a new javascript Date object based on the timestamp
// multiplied by 1000 so that the argument is in milliseconds, not seconds
var date = new Date(unixTarget*1000);
// month part from the timestamp
var months = date.getMonth()+1;
// day part from the timestamp
var days = date.getDate();
// year part from the timestamp
var years = date.getFullYear();
// hours part from the timestamp
var hours = date.getHours();
// minutes part from the timestamp
var minutes = date.getMinutes();
// seconds part from the timestamp
var seconds = date.getSeconds();
// will display time in 10:30:23 format
TargetDate = months + '/' + days + '/' + years + ' ' + hours + ':' + minutes + ':' + seconds;
</script>
<div id="countTimer" name="countTimer" style="margin-left:100px;">
<script language="JavaScript" src="countdown.js"></script>
</div>
<div id = "soldtime" style = "margin-left:100px;">
<span id="timedispspan"></span>
</div>
<div id = "bottom" style = "margin-left:100px;">
<form name="BidForm" id="BidForm" onsubmit="return false">
<input type="button" value="Bid" onclick="AddSecond();" style = "width:100px;height:30px;">
</form>
</div>
</body>
</html>
countdown.js:
function calcage(secs, num1, num2) {
s = ((Math.floor(secs/num1))%num2).toString();
if (LeadingZero && s.length < 2)
s = "0" + s;
return "<b>" + s + "</b>";
}
function refreshDiv(){
document.getElementById("cntdwn").innerHTML = DisplayStr;
}
function CountBack(secs) {
if (secs < 0) {
document.getElementById("cntdwn").innerHTML = FinishMessage;
return;
}
DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));
document.getElementById("cntdwn").innerHTML = DisplayStr;
if (CountActive)
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}
function putspan(backcolor, forecolor) {
document.write("<span id='cntdwn' style='background-color:" + backcolor +
"; color:" + forecolor + "'></span>");
}
if (typeof(BackColor)=="undefined")
BackColor = "white";
if (typeof(ForeColor)=="undefined")
ForeColor= "black";
if (typeof(TargetDate)=="undefined")
TargetDate = "12/31/2012 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
CountActive = true;
if (typeof(FinishMessage)=="undefined")
FinishMessage = "";
if (typeof(CountStepper)!="number")
CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
LeadingZero = true;
CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
ddiff = new Date(dnow-dthen);
else
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);