var base = document.querySelector(".base")
var angle = 0
for (i = 0; i < 12 ; i++){
    mark = document.createElement("div")
    mark.innerHTML = i + 1
    angle += 30
    mark.style.height = "100%"
    mark.style.transform="rotate("+angle+"deg)"
    base.appendChild(mark)
}
var container = document.getElementById("container")
var clockModel = document.getElementById("model")
var HTMLclock = clockModel.innerHTML
var clockAreaWidth = container.offsetWidth
container.style.backgroundSize = clockAreaWidth + "px"
clockModel.className = "clockSpace"
clockModel.innerHTML = ""
    
function whidthContainer(){
    container.style.width = parseInt(document.body.offsetWidth / clockAreaWidth) * clockAreaWidth + "px"
}
    
whidthContainer()
window.onresize = whidthContainer
   
function set(clockHand, deg, timeAnimation) {
    clockHand.style.animation = ""
    setTimeout(function(){
        var rotation = 'rotate(' + deg + 'deg)'
        clockHand.style.animation ="clock linear " + timeAnimation + "s infinite"
        clockHand.querySelector("DIV").style.transform = rotation
    },20)
}
    
function apmDayChange(objectCity,timeCity){
    var hour = timeCity.getHours()    
    var HTMLday = objectCity.querySelector( ".day")
    HTMLday.innerHTML = timeCity.getDate()
    var HTMLapm = objectCity.querySelector( ".apm")
    HTMLapm.innerHTML = (hour<12) ? "AM" : "PM"
    var nextHour = new Date(timeCity)
    nextHour.setMilliseconds(100)
    nextHour.setSeconds(0)
    nextHour.setMinutes(0)
    nextHour.setHours(hour+1)
    objectCity.timeout = setTimeout(function(){
        HTMLapm.innerHTML = (nextHour.getHours()<12) ? "AM" : "PM"
        HTMLday.innerHTML = nextHour.getDate()
        objectCity.timeout =setInterval(function(){
            nextHour.setHours(nextHour.getHours()+1)
            HTMLday.innerHTML = nextHour.getDate()
            HTMLapm.innerHTML = (nextHour.getHours()<12) ? "AM" : "PM"
        }, 60 * 60 *1000)
    },nextHour-timeCity)
    
}
    
function startClock(objectCity){
    var timeCity = new Date(
        (new Date).getTime() + // local time
        (new Date).getTimezoneOffset() * 60 * 1000  + // UTC time
        city[objectCity.id].timezoneOffset * 1000 // Offset UTC time
    )
    set(objectCity.querySelector(".hour"), 30 * (timeCity.getHours() + timeCity.getMinutes() / 60), 60 * 60 * 24)
    set(objectCity.querySelector(".minute"), 6 * (timeCity.getMinutes() + timeCity.getSeconds() / 60), 60 * 60)
    set(objectCity.querySelector(".second"), 6 * (timeCity.getSeconds() + timeCity.getMilliseconds() / 1000), 60)
    apmDayChange(objectCity,timeCity)    
}
buttonSort = document.getElementById('buttonSort') 
buttonSort.disabled = true   
buttonSort.onclick = function(){    
    var order = []
    document.querySelectorAll('.clock').forEach(function(clock){
        order.push({id:clock.id,timezoneOffset:clock.timezoneOffset})
    })
    order.sort(function(a,b){return Number(b.timezoneOffset) - Number(a.timezoneOffset) })
    selectedCities = []
    container.innerHTML='<div class="clockSpace" id="model"><\/div>'
    buttonSort.disabled = true
    order.forEach(function(clock){        
        createHTMLclock(clock.id)
    })
}
function  activateOrderButton(){
    var clock = document.querySelectorAll('.clock')   
    buttonSort.disabled = true
    for (var i=0;i<clock.length-1;i++){
        if (Number(clock[i].timezoneOffset)>Number(clock[i+1].timezoneOffset)) buttonSort.disabled = false
    }
}  
function createHTMLclock(cityName){
    var div = document.createElement("DIV")
    div.className= "clock"
    div.id=cityName
    div.innerHTML = HTMLclock
    div.querySelector( ".title").innerHTML = cityName.replace(/_/g, " ");
    div.querySelector( ".utc").innerHTML = city[cityName].timezoneUTC;
    div.querySelector( ".zone").innerHTML = city[cityName].zone.replace(/\/|_/g, "<br>");
    div.timezoneOffset = city[cityName].timezoneOffset
    div.style.transform = "scale(0)"
    div.style.width = 0
    container.insertBefore(div,container.firstChild)
    var deleteClock = div.querySelector( ".deleteClock")
    deleteClock.clock = div
    deleteClock.onclick = function(){
        var clock = this.clock
        clock.setAttribute("style","width:0;margin-left:0;margin-right:0;opacity:0")
        setTimeout(function(){           
            selectedCities.splice(selectedCities.indexOf(clock.id), 1)        
            container.removeChild(clock)
            activateOrderButton()
        },500)    
    } 
    setTimeout(function(){
        div.style.width= ""
        div.style.transform = ""        
        startClock(div)
       
    },10)
    
    selectedCities.push(cityName)
}
var selectedCities = []

var buttonOk = document.getElementById("buttonOk")
buttonOk.onclick = function(){
    var selectedCity = inputSearchCity.value    
    inputSearchCity.value =""
    inputSearchCity.style.color =""
    clearInput.style.display="none"
    this.disabled = true
    createHTMLclock(selectedCity)
    activateOrderButton()
}
var panel = document.getElementById("listCitysFound")
var inputSearchCity = document.getElementById("searchCity")
var clearInput = document.getElementById("clear")

clearInput.style.display ="none"
clearInput.onclick = function(){
    inputSearchCity.value="" 
    inputSearchCity.style.color =""
    panel.innerHTML=""
    this.style.display="none"
    buttonOk.disabled = true
    inputSearchCity.focus()
}

/*
inputSearchCity.onfocus = function(){
    scroll(0, document.getElementById("busqueLaCiutat").offsetTop-20)
    panel.style.display = ""
}
inputSearchCity.onblur = function(){
    setTimeout("panel.style.display = 'none'",200)
   
}
*/
inputSearchCity.onkeypress = function(event){    
    var char = String.fromCharCode(event.which || event.keyCode)
    if ((char<"a" || char>"z") && 
        (char<"A" || char>"Z") && 
        (char != "_")) return false
}
function clickCityList(city){
    inputSearchCity.value = city 
    panel.innerHTML = ""
    buttonOk.disabled = false
    inputSearchCity.style.color = "RoyalBlue"
}

inputSearchCity.oninput=function(){
   var value= this.value.trim().toUpperCase()
   panel.innerHTML=""
   var HTML = ""
   for (var i in city){
       if (selectedCities.indexOf(i) == -1 && value == i.toUpperCase().substr(0,value.length)){
           HTML += "<div onClick=clickCityList('"+i+"')>" +
            "<b>"  +i.substr(0,value.length)+ "</b>" +
                i.substring(value.length ) + 
               "<small> " +
               city[i].zone + " " +
               city[i].timezoneUTC +
                 "<\/small>" +
               "<\/div>"
           this.value= i.substr(0,value.length)          
        }
   }
   panel.innerHTML= HTML
   if (value.length == 0) {
       panel.innerHTML = ""
       clearInput.style.display="none"
   }else{
       clearInput.style.display=""
   }
   if (typeof city[this.value] != "undefined"){
       this.style.color ="RoyalBlue"
       panel.innerHTML=""
       buttonOk.disabled = false
   }else{
       this.style.color = ""
       buttonOk.disabled = true
   }

}
function get_the_time_in(option,callback){
    var xmlhttp = new XMLHttpRequest()
    var url = "https://www.icalendar37.net/gadgets/timeInTheCity/?q=" + option
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            callback(JSON.parse(xmlhttp.responseText))          
        }
    }
    xmlhttp.open("GET", url, true)
    xmlhttp.send()
} 
get_the_time_in("list",(obj)=>{
  city = obj
  inputSearchCity.disabled = false 
    ;["Apia","Adelaide","Bangkok","Dubai","Barcelona","London","Caracas","New_York","Los_Angeles","Marquesas","Pago_Pago"].forEach(function(city){       
      createHTMLclock(city)       
    })
}) 
window.addEventListener("focus",function(){
    //It is necessary to refresh the CSS animation if the page loses focus
    document.querySelectorAll(".clock").forEach(function(clock,i){
        startClock(clock)
    })
})
document.getElementById("fullscreen").onclick = function(){
    if(this.className=="fullscreen"){
        this.className="fullscreenOff"
        document.getElementById("fullscreenZone").requestFullscreen()
    }else{
        this.className="fullscreen"
        document.exitFullscreen()
    }
}