i'm using the code below but its going below 0 when it is in use or running in background. Everything else is perfect. i am testing on a mobile device and when i minimise and then resume, the timer is still running in background. when it is not in use or minimised, the timer needs to stop and when resumed it needs to start again. most probably like a game timer should stop at 0.Hope someone can help me on this


Code:
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<title>Image Match Game</title>


<style type="text/css">

body {
  background-color: #EEEEEE;
  margin: 0;
}

#match-holder {
    margin: 100px auto;
    width: 900px;
}

#match-holder IMG{
    width: 200px;height:200px;
}


</style>

</head>
<body>

<div id="match-holder">
        <img class="birds" src="https://lh4.googleusercontent.com/-FmW-yW_iThc/UYHsbbbBK0I/AAAAAAABXGE/g_vGb4Gh7lE/w497-h373/97604-beautiful-birds-blue-bird.jpg" alt="" />
        <img class="cats" src="http://images.wisegeek.com/young-calico-cat.jpg" alt="" />
        <img class="cats" src="http://avivaromm.com/romm/wp-content/uploads/2013/07/0404_milk.jpg" alt="" />
        <img class="birds" src="http://www.communityjournal.net/wp-content/uploads/2012/05/seeds.jpg" alt="" />
    </div>
<div>
<br />
<span id="count" ></span>

<script type="text/javascript">
/*<![CDATA[*/

var zxcMatch={

 Reset:function(id){
  var o=this[id],z0=0;
  if (o){
   clearTimeout(o.to);
   o.time[1]=null;
   for (;z0<o.imgs.length;z0++){
    o.imgs[z0].style.visibility='visible';
   }
   o.cnt=z0/2;
   o.lst=null;
  }
 },

 init:function(o){
  var id=o.ParentID,imgs=document.getElementById(id).getElementsByTagName('IMG'),z0=0;
  o.imgs=imgs;
  for (;z0<imgs.length;z0++){
   this.addevt(imgs[z0],'mouseup','match',o,imgs[z0]);
  }
  o.time=[typeof(o.Timer)=='function'?o.Timer:null];
  o.cnt=z0/2;
  this[id]=o;
 },

 match:function(o,img){
  if (o.time[0]&&!o.time[1]){
   o.time[1]=new Date();
   o.to=setInterval(function(){ o.time[0](o,Math.floor((new Date()-o.time[1])/1000)); },1000);
  }
  if (!o.lst){
   o.lst=img;
  }
  else {
   if (o.lst.className==img.className&&o.lst!=img){
    img.style.visibility=o.lst.style.visibility='hidden';
    o.cnt--;
    if (o.cnt==0){
     clearTimeout(o.to);
     o.time[1]=null;
     o.Complete();
    }
   }
   else {
    alert('try again');
   }
   o.lst=null;
  }
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 }


}

zxcMatch.init({
 ParentID:'match-holder',
 Timer:function(o,sec){
  document.getElementById('count').innerHTML=30-sec;
  if (sec>29){
    alert('Time Out');
    zxcMatch.Reset('match-holder');
  }
 },
 Complete:function(){
//  window.top.location='http://www.vicsjavascripts.org.uk/';
 }
});
/*]]>*/
</script>
</body>
</html>