Clock count javascript/php error - php

Question

http://www.juriseodesign.com/clock/Sydney.php
My clock count javascript shows errors. I have my background changes working, but after adding the count clock javascript, the clock doesn't work. I guess it is caused by "collisions" with Mootools and regular jQuery, but I don't have any idea how to fix it. Could anybody can help this for me? Also, how to connect to other paged when I click the one of the city in the dropdown menu?
Thank you so much!
// JavaScript Document
//initial time
var h_current = -1;
var m1_current = -1;
var m2_current = -1;
var s1_current = -1;
var s2_current= -1;
function flip (upperId, lowerId, changeNumber, pathUpper, pathLower){
var upperBackId = upperId+"Back";
$(upperId).src = $(upperBackId).src;
$(upperId).setStyle("height", "64px");
Uncaught TypeError: Object # has no method 'setStyle' (repeated 315 times)
$(upperId).setStyle("visibility", "visible");
$(upperBackId).src = pathUpper+parseInt(changeNumber)+".png";
$(lowerId).src = pathLower+parseInt(changeNumber)+".png";
$(lowerId).setStyle("height", "0px");
$(lowerId).setStyle("visibility", "visible");
var flipUpper = new Fx.Tween(upperId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
flipUpper.addEvents({
'complete': function(){
var flipLower = new Fx.Tween(lowerId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
flipLower.addEvents({
'complete': function(){
lowerBackId = lowerId+"Back";
$(lowerBackId).src = $(lowerId).src;
$(lowerId).setStyle("visibility", "hidden");
$(upperId).setStyle("visibility", "hidden");
} });
flipLower.start('height', 64);
}
});
flipUpper.start('height', 0);
}//flip
function retroClock(){
// get new time
now = new Date();
h = now.getHours();
m1 = now.getMinutes() / 10;
m2 = now.getMinutes() % 10;
s1 = now.getSeconds() / 10;
s2 = now.getSeconds() % 10;
if(h < 12)
ap = "AM";
else{
if( h == 12 )
ap = "PM";
else{
ap = "PM";
h -= 12; }
}
//change pads
if( h != h_current){
flip('hoursUp', 'hoursDown', h, 'Single/Up/'+ap+'/', 'Single/Down/'+ap+'/');
h_current = h;
}
if( m2 != m2_current){
flip('minutesUpRight', 'minutesDownRight', m2, 'Double/Up/Right/', 'Double/Down/Right/');
m2_current = m2;
flip('minutesUpLeft', 'minutesDownLeft', m1, 'Double/Up/Left/', 'Double/Down/Left/');
m1_current = m1;
}
if (s2 != s2_current){
flip('secondsUpRight', 'secondsDownRight', s2, 'Double/Up/Right/', 'Double/Down/Right/');
s2_current = s2;
flip('secondsUpLeft', 'secondsDownLeft', s1, 'Double/Up/Left/', 'Double/Down/Left/');
s1_current = s1;
}
}
setInterval('retroClock()', 1000);

Answer 1

I just looked at jQuery reference, setStyle method does not exist.
You should use css method instead :
$(upperId).css('height','64px;');
Looking at this code, there are many things, that don't match with jQuery methods.
For example: if you want change src attribute to upperId element, in jQuery you should use attr method:
// $(upperId).src = $(upperBackId).src; // WRONG
$(upperId).attr('src', $(upperBackId).attr('src')); // CORRECT
If you want reference an element with its id you must prepend # before the element id:
var upperBackId = "#" + upperId + "Back";

Answer 2

You try to use Mootools methods with jQuery. There is no setStyle() method in jQuery.

Answer 3

Like others have suggested you should use $(..).css( ...) function since setStyle does not exist in jQuery.
I usually also prefer to use $(...).hide() and $(...).show() instead of $(...).css("visibility","hidden") or $(...).css("visibility","visible") since "visibility" still takes space and is the same as setting opacity to 0 - If I hide the element, I don't want it to use any space...