/*these are the div id names you added to your html*/
var clockAllDivs = [
    "clock0",
    "clockNYC",
    "clockTOR",
    "clockVAN",
    "clockLAX",
    "clockFRNK",
    "clockSAO",
    "clockTOK",
    "clockBEI",
    "clockHON",
    "clockLONDON",
    "clockPARIS",
    "clockSYDNEY"
];

var tz = jstz.determine(); // Determines the time zone of the browser client
    tz.name();

/*get timezone from this list: http://php.net/manual/en/timezones.php*/
var timeZones = [
    tz.name(),
    "America/New_York",
    "America/Toronto",
    "America/Vancouver",
    "America/Vancouver",
    "Europe/Zurich",
    "America/Sao_Paulo",
    "Asia/Tokyo",
    "Asia/Hong_Kong",
    "Asia/Hong_Kong",
    "Europe/London",
    "Europe/Paris",
    "Australia/Sydney"
];

/*titles you want to show for each clock*/
var clockTitles = [
    tz.name(),
    "Los Angeles",
    "Melbourne",
    "Kathmandu",
    "Tokyo",
    "Johannesburg"
];

var useTitle1 = false;
var useTitle2 = false;
var clockWidthHeight = 118;//width and height of the clock
var distanceBetweenClockTitle = 5;
var secondHandSpeed = 100;//in ms, the lower the number, the faster
var smoothRotation = false;//true or false
var useSecondHand = false;//set to false if you don't want to see the 2nd hand

/*location of the images*/
var clockFaceImg = "img/clockBg.png";
var hourHandImg = "images/hourHand.png";
var minuteHandImg = "images/minuteHand.png";
var secondHandImg = "images/secondHand.png";
var amImg = "images/am.png";
var pmImg = "images/pm.png";

/*location of the high res images for retina display*/
var clockFaceHighResImg = "img/clockBgHighRes.png";
var hourHandHighResImg = "images/hourHandHighRes.png";
var minuteHandHighResImg = "images/minuteHandHighRes.png";
var secondHandHighResImg = "images/secondHandHighRes.png";
var amHighResImg = "images/amHighRes.png";
var pmHighResImg = "images/pmHighRes.png";






/*text for days and months*/
var dayText = [
    "Sun",
    "Mon",
    "Tue",
    "Wed",
    "Thu",
    "Fri",
    "Sat"
];

var monthText = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec"
];


///////////////////////////////
//Do not edit below this line//
///////////////////////////////

var clockDivs = [];
var offsets = [];
var minuteHand;
var hourHand;
var secondHands = [];
var minuteHands = [];
var hourHands = [];
var ams = [];
var pms = [];
var retina = false;
var imgsLoaded = 0;
var imagesToLoad = 6;
var callInterval = 1000;
var thisOffset;
var formerHr = [];
var isStart = true;
var tzChecked = 0;

//once the page is ready . . .
$( document ).ready(function() {

    var dNow = new Date();
    thisOffset = dNow.getTimezoneOffset();//figure out user's timezone

    //get the timezone info for each of your clocks
    for(var i = 0;i<clockAllDivs.length;i++){
        getTZOutput(i);
    }

});

//build each clock
function AnalogClock(){

    retina = window.devicePixelRatio > 1;//check if retina

    //if it's high res, use the high res images
    if(retina){

        clockFaceImg = clockFaceHighResImg;
        hourHandImg = hourHandHighResImg;
        minuteHandImg = minuteHandHighResImg;
        secondHandImg = secondHandHighResImg;
        amImg = amHighResImg;
        pmImg = pmHighResImg;

    }

    //determine if you want to use the second hand
    if(useSecondHand == false){
        imagesToLoad = imagesToLoad - 1;
    }

    //change the call interval for smooth rotation
    if(smoothRotation == true && useSecondHand){
        callInterval = 50;
    }

    //create each clock visually
    for(var i = 0;i<clockAllDivs.length;i++){

        var clockAllDiv = $("#" + clockAllDivs[i]);

        //add bg
        clockAllDiv.append("<div id='analog-clock" + i + "' class='myClock'></div>")


        //add title
        if(useTitle1 || useTitle2){

            var clockTitlePos = distanceBetweenClockTitle + clockWidthHeight;
            if(useTitle1)clockAllDiv.append("<div><p class='clockTitle'>" + clockTitles[i] + "</p></div>");
            if(useTitle2){
                clockAllDiv.append("<div><p id='title2_" + i + "' class='clockTitle2'></p></div>");
            }
            $('.clockTitle').css({"margin-top":clockTitlePos + 'px'});
            if(useTitle2 && !useTitle1)$('.clockTitle2').css({"margin-top":clockTitlePos + 'px'});

        }

        clockDivs[i] = "analog-clock" + i;
        var clockDiv = $("#" + clockDivs[i]);

        //set clock holder css
        clockDiv.css({"height":clockWidthHeight + "px", "width":clockWidthHeight + "px", "position":"relative"});

        //add more graphical elements
        clockDiv.append("<img id='bg' src=" + clockFaceImg + " height="+clockWidthHeight+" width="+clockWidthHeight+" />");

        //add the div for am/pm
        clockDiv.append("<img id='am' class='ampm' src='" + amImg + "' width='28' height='18' />");
        clockDiv.append("<img id='pm' class='ampm' src='" + pmImg + "' width='28' height='18' />");

        //add hands
        $("<img id='hourHand' src=" + hourHandImg + " />").appendTo("#" + clockDivs[i]);
        clockDiv.append("<img id='minuteHand' src=" + minuteHandImg + " />");
        if(useSecondHand)clockDiv.append("<img id='secondHand' src=" + secondHandImg + " />");

        //define elements
        if(useSecondHand)secondHands[i] = $("#" + clockDivs[i] + " #secondHand");
        minuteHands[i] = $("#" + clockDivs[i] + " #minuteHand");
        hourHands[i] = $("#" + clockDivs[i] + " #hourHand");
        ams[i] = $("#" + clockDivs[i] + " #am");
        pms[i] = $("#" + clockDivs[i] + " #pm");

        if(i == 0){

            //check to see if the images are loaded
            $('#bg').load(function() {   checkIfImagesLoaded();  });
            if(useSecondHand)secondHands[i].load(function() {   checkIfImagesLoaded();  });
            minuteHands[i].load(function() {   checkIfImagesLoaded();  });
            hourHands[i].load(function() {   checkIfImagesLoaded();  });
            ams[i].load(function() {   checkIfImagesLoaded();  });
            pms[i].load(function() {   checkIfImagesLoaded();  });

        }

        //set clock css
        var handIds = $("#" + clockDivs[i] + " #bg, #hourHand, #minuteHand, #secondHand");
        handIds.css({"position":"absolute"});

    }

};


function checkIfImagesLoaded(){

    //this gets called each time an image is loaded
    imgsLoaded++;

    if(imgsLoaded == imagesToLoad){//once all the images are loaded

        for(var i = 0;i<clockAllDivs.length;i++){

            //adjust widths and heights if 2x resolution
            if(retina){
                if(useSecondHand)secondHands[i].css( { "height":secondHands[i].height()/2, "width":secondHands[i].width()/2 } );
                minuteHands[i].css( { "height":minuteHands[i].height()/2, "width":minuteHands[i].width()/2 } );
                hourHands[i].css( { "height":hourHands[i].height()/2, "width":hourHands[i].width()/2 } );
            }

            //set the position of the hands
            if(useSecondHand)secondHands[i].css( { "left": (clockWidthHeight - secondHands[i].width())/2 + "px", "top": (clockWidthHeight - secondHands[i].height())/2 + "px" });//set x and y pos
            minuteHands[i].css( { "left": (clockWidthHeight - minuteHands[i].width())/2 + "px", "top": (clockWidthHeight - minuteHands[i].height())/2 + "px" });//set x and y pos
            hourHands[i].css( { "left": (clockWidthHeight - hourHands[i].width())/2 + "px", "top": (clockWidthHeight - hourHands[i].height())/2 + "px" });//set x and y pos
            //if(useSecondHand)setSecondStart();

            //fade the clocks in
            $("#" + clockAllDivs[i]).animate({ opacity:1 }, "slow");

        }

        //call rotatehands function
        setInterval(function(){

            rotateHands();

        }, callInterval);//1000 = 1 second

        if(!smoothRotation)rotateHands();//make sure they start in the right position

    }

}


function rotateHands(){

    for(var i = 0;i<clockAllDivs.length;i++){

        //get current time/date from local computer
        var now = new Date();
        now.setMinutes(now.getMinutes() + offsets[i] + thisOffset);

        //set the second hand
        var secondAngle = 6 * now.getSeconds();//turn the time into angle
        if(smoothRotation)var smoothSecondAngle = now.getMilliseconds()/1000 * 6 + secondAngle;


        var currentHr = now.getHours();

        if(formerHr[i] && currentHr != formerHr[i]){
            getTZOutput(i);
            setDayMonthTxt(now, i);
        }
        formerHr[i] = currentHr;

        if(useSecondHand){

            if(smoothRotation){
                secondHands[i].rotate(smoothSecondAngle, 'abs');//set the hand angle
            }else{
                if(secondAngle == 0){
                    secondHands[i].rotate(-6, 'abs');//set the hand angle
                }
                secondHands[i].rotate({ animateTo:secondAngle, duration:secondHandSpeed}, 'abs');
            }
        }

        //set the minute hand
        var minuteAngle = 6 * now.getMinutes() + secondAngle/60;//turn the time into angle

        minuteHands[i].rotate(minuteAngle, 'abs');//set the hand angle

        //set the hour hand
        var hourAngle = 360/12 * currentHr;//turn the time into angle
        var hourAngleWOffset = hourAngle + minuteAngle/12;
        hourHands[i].rotate(hourAngleWOffset%360, 'abs');//set the hand angle

    }

    isStart = false;

}

//get timezone info from the
function getTZOutput(thisNum) {
    $.ajax({
        type: "POST",
        url:'timezone-clock-scripts/getTimezoneTime.php',
        data: {thisTz:timeZones[thisNum]},
        dataType: "json",
        success: function (response) {
            offsets[thisNum] = response/60;
            allTZChecked();

        },
        error: function (){
            console.log("error");
        }
  });
}

//make sure the php script has called first
function allTZChecked(){
    tzChecked++;
    if(tzChecked == clockAllDivs.length){

        AnalogClock();

        for(var i = 0;i<clockAllDivs.length;i++){
            var now = new Date();
            now.setMinutes(now.getMinutes() + offsets[i] + thisOffset);
            setDayMonthTxt(now, i);
        }

    }
}

function setDayMonthTxt(now, thisNum){

    var thisDay = dayText[now.getDay()];
    var thisMonth = monthText[now.getMonth()];
    var thisDate = now.getDate();
    var thisYear = now.getFullYear();

    //this is what the actual strong of text looks like, but you can modify it as you please.
    if(useTitle2)$("#title2_" + thisNum ).html(thisDay + " " + thisMonth + " " + thisDate + ", " + thisYear);

    //determine am/pm
    if(now.getHours() < 12){
        ams[thisNum].fadeIn();
        pms[thisNum].fadeOut();

    }else{
        ams[thisNum].fadeOut();
        pms[thisNum].fadeIn();
    }

}

<?php

    $tzTxt = $_REQUEST['thisTz'];

    $date = new DateTime();
    $tz = new DateTimeZone($tzTxt);
    $date->setTimezone($tz);
    echo $date->format(Z);
    //echo $date;

?>