Displaying Running Digital Clock

Scenario..

The technical support / customer service will raise a case on behalf the account user and follow up the case,
Whenver the technical support try to reach the case contact he/she want to know the current time of case contact.


So i have decided to display the running digital clock in case detail page:

some thing like this...

sceern shot of case detail page :



Step 1: Create a Picklist field in contact called TimeZone__c with field values like ...

(GMT+05:30) India Standard Time (Asia/Calcutta)

(GMT-05:00) Eastern Daylight Time (America/New_York)

(GMT-11:00) Samoa Standard Time (Pacific/Pago_Pago)

Step 2: upload the clock images in static resources.

Step 3: Create a visualforce page

Apex Page :
<apex:page standardController="case" tabStyle="case" extensions="contact_clock">

<apex:form >

<table bgcolor="#c9c299">
<th><apex:image value="{!$Resource.hand}"/></th>
<th><apex:outputText value="Your Time " /></th>
<th width="5"></th>
<th>
<apex:image id="Uh1" value="{!h1}"/>
<apex:image id="Uh2" value="{!h2}"/>
<apex:image id="Um" value="{!$Resource.dgc}" />
<apex:image id="Um1" value="{!m1}"/>
<apex:image id="Um2" value="{!m2}"/>
<apex:image id="Us" value="{!$Resource.dgc}"/>
<apex:image id="Us1" value="{!s1}"/>
<apex:image id="Us2" value="{!s2}"/>
<apex:image id="Uampm" value="{!ampm}" />
<apex:actionPoller action="{!UserTime}"
rerender="Uh1,Uh2,Us1,Us2,Um1,Um2,Uampm,r1" interval="5" />
</th><th width="120"  ><apex:outputText value="{!a}" id="r1"  /></th>
<th><apex:image value="{!$Resource.hand}"/></th>
<th><apex:outputText value="Contact Time " /></th>
<th width="5"></th>
<th>
<apex:image id="Ch1" value="{!h1}"/>
<apex:image id="Ch2" value="{!h2}"/>
<apex:image id="Cm" value="{!$Resource.dgc}"/>
<apex:image id="Cm1" value="{!m1}"/>
<apex:image id="Cm2" value="{!m2}"/>
<apex:image id="Cs" value="{!$Resource.dgc}"/>
<apex:image id="Cs1" value="{!s1}"/>
<apex:image id="Cs2" value="{!s2}"/>
<apex:image id="Campm" value="{!ampm}" />
<apex:actionPoller action="{!ContactTime}"
rerender="Ch1,Ch2,Cs1,Cs2,Cm1,Cm2,Campm,Cr1" interval="5" />
</th><th width="120"  ><apex:outputText value="{!a}" id="Cr1"  /></th>
</table>
</apex:form>
</apex:page> 

Apex Class:

public with sharing class contact_clock {
public contact_clock(ApexPages.StandardController controller) { }
String idr = System.currentPageReference().getParameters().get('id');
string urlr = 'https://na5.salesforce.com/resource/1246944823000/dg';
DateTime tall;    Boolean flag;    String temp,tempw,temph,tempm,sDate,ap,s1,s2,m1,m2,h1,h2,dt;
Public PageReference UserTime() {
flag = false;  geta(); return null;
}
Public PageReference ContactTime() {
flag = true;  geta(); return null;
}
public string geta() {
tall = Datetime.now();
if(flag == true){
contact con2 = [select TimeZone__c from contact where id in (select contactid from case where id=:idr)];
tempw = con2.TimeZone__c.substring(4,5);
if(tempw == '+'){temph = con2.TimeZone__c.substring(5,7);}else{
  temph = con2.TimeZone__c.substring(4,7);
}
integer addh = integer.valueof(temph);
tempm =  con2.TimeZone__c.substring(8,10); 
integer addm = integer.valueof(tempm); 
datetime newDateh = tall.addHours(addh); 
datetime  newDatem = newDateh.addminutes(addm); 
sDate = newDatem.formatgmt('hh:mm:ss a MM-dd-yyyy');}else{
sDate = tall.format('hh:mm:ss a MM-dd-yyyy');}
s2 = sDate.substring(7,8);
s1 = sDate.substring(6,7);
m2 = sDate.substring(4,5);
m1 = sDate.substring(3,4);
h2 = sDate.substring(1,2);
h1 = sDate.substring(0,1);
ap = sDate.substring(9,11);
dt = sDate.substring(11);
return dt;
}   
public string gets1() {  
return urlr+s1;  
}   
public string gets2() { 
return urlr+s2;  
}  
public string getm1() { 
return urlr+m1;  
} 
public string getm2() { 
return urlr+m2;  
} 
public string geth1() { 
return urlr+h1;  
}  
public string geth2() {  
return urlr+h2; 
} 
public string getampm() { 
return urlr+ap;
}   
}