/**
 * Author: Vuzum 
 * www.vuzum.com 
 *
 */
function createClocks(elementId){
    var clocksContainer = $(elementId);
    var counter = 0;

    jQuery.each(clocks, function(i, clockOptionSet) {
        var labelValue = "XX";
        var timezone = "";
        var totalNoOfClocks = clocks.length; 
            
        $.each(clockOptionSet, function(optionName, optionValue) {
            if(optionName == 'label')           labelValue = optionValue;
            else if(optionName == 'timezone')   timezone   = optionValue;    
        });
      
        var tempUtc = $('<div></div>');
        
        tempUtc.load('vuzumUTCOffset.php?tz='+timezone,function(){
            utcOffset = tempUtc.html();    

            var tempClock       = $('<div class="vuzumClock" id="vuzumClock' + counter  + '"></div>');
            var tempLabel       = $('<span class="vuzumClockLabel">' + labelValue + '</span>');
            var tempTime        = $('<span class="vuzumClockTime"></span>');
            var tempSeparator   = $('<span class="vuzumClockSeparator"></span>');
            tempClock.append(tempLabel);        
            tempClock.append(tempTime);
            
            if(counter > 0){ // if this is not the first clock insert a <span> separator
                clocksContainer.append(tempSeparator);    
            }
             
            clocksContainer.append(tempClock);
            
            if(counter == totalNoOfClocks){ // Clear floating items
                clocksContainer.append('<div style="clear:both;"></div>');
            }
                                 
            // Start the clock 
            $('#vuzumClock' + counter + ' .vuzumClockTime').jclock({
                utc: true,
                utc_offset: utcOffset
            });
            
            // Increment the counter after each clock is ready            
            counter++;   
        }); 
        
    });     
}