// Add clock to modal
document.querySelector('.digitalclock-add-btn').addEventListener('click', function () {
    let myClock = document.getElementById('digital-clock');
    document.querySelector('.digitalclock-preview div').appendChild(myClock)

    runDigitalClock()
})


function runDigitalClock() {

    let digitalTime
    setInterval(function () {
        digitalTime = `${new Date().getHours()} : ${new Date().getMinutes()} : ${new Date().getSeconds()}`;
        document.getElementById('digital-clock').innerHTML = digitalTime
    }, 1000)

}


document.querySelector('.digital-clock-fontsize-selector').addEventListener('change', function () {
    let clockFontsize = this.children[this.selectedIndex].value
    let clockam = document.getElementById('digital-clock');
    clockam.style.fontSize = `${clockFontsize}px`
    console.log(clockam)
})



document.querySelector('.digital-clock-theme-selector').addEventListener('change', function () {
    let clockTheme = this.children[this.selectedIndex].value
    document.getElementById('digital-clock').style.color = clockTheme
})

// Add digital clock to screen
document.querySelector('.add-digitalclock-btn').addEventListener('click', function () {

    // let clockTypeSelector = document.querySelector('.clock-type-selector');
    // let selectedClockType = clockTypeSelector.children[clockTypeSelector.selectedIndex].value

    // if (selectedClockType == 'analog') {
    //     let analogClock = document.querySelector('.apple-clock');
    //     document.querySelector('.screen').appendChild(analogClock);

    // } else if (selectedClockType == 'digital') {
    // let digitalClock = document.getElementById('digital-clock');


    // let clockLayer = document.createElement('div');
    // clockLayer.setAttribute('class', 'resize-drag digital-clock-viewer');
    // clockLayer.appendChild(digitalClock);
    // document.querySelector('.screen').appendChild(clockLayer);


    let clockLayer = document.getElementById('digital-clock');
        document.querySelector('.digital-clock-viewer').appendChild(clockLayer);

    runDigitalClock()


    // } else if (selectedClockType == 'both') {
    //     let analogClock = document.querySelector('.apple-clock');
    //     document.querySelector('.screen').appendChild(analogClock);
    //     let digitalClock = document.getElementById('digital-clock');
    //     document.querySelector('.screen').appendChild(digitalClock);
    // }


})



// ********************* analog  ******************** 

// Add analog clock to screen
document.querySelector('.add-analogclock-btn').addEventListener('click', function () {

    // let clockTypeSelector = document.querySelector('.clock-type-selector');
    // let selectedClockType = clockTypeSelector.children[clockTypeSelector.selectedIndex].value

    // if (selectedClockType == 'analog') {
    //     let analogClock = document.querySelector('.apple-clock');
    //     document.querySelector('.screen').appendChild(analogClock);

    // } else if (selectedClockType == 'digital') {
    // let digitalClock = document.getElementById('digital-clock');


    // let clockLayer = document.createElement('div');
    // clockLayer.setAttribute('class', 'resize-drag digital-clock-viewer');
    // clockLayer.appendChild(digitalClock);
    // document.querySelector('.screen').appendChild(clockLayer);


    let analogClockLayer = document.querySelector('.analogclock-preview .apple-clock');
        document.querySelector('.analog-clock-viewer').appendChild(analogClockLayer);

    // runDigitalClock()


    // } else if (selectedClockType == 'both') {
    //     let analogClock = document.querySelector('.apple-clock');
    //     document.querySelector('.screen').appendChild(analogClock);
    //     let digitalClock = document.getElementById('digital-clock');
    //     document.querySelector('.screen').appendChild(digitalClock);
    // }

console.log("analog clock")
})
document.querySelector('.analogclock-add-btn').addEventListener('click', function () {



    let myClock = document.getElementById('analog-clock-viewer');
    console.log(myClock)
    if(myClock){

        document.querySelector('.analog-clock-viewer').appendChild(myClock)
    }



})

// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Size @@@@@@@@@@@@@@@@@@@



var clock = document.querySelector('#utility-clock')



    // console.log(element)
  var update = function () {
    var parent = element.offsetParent
    var scale = Math.min(parent.offsetWidth, parent.offsetHeight) / nativeSize
    element.style.transform = element.style.webkitTransform = 'scale(' + scale.toFixed(3) + ')'

}


function autoResize(element, nativeSize) {
  update()
  window.addEventListener('resize', update)
}

// var update = function () {
//   var parent = element.offsetParent
//   var scale = Math.min(parent.offsetWidth, parent.offsetHeight) / nativeSize
//   element.style.transform = element.style.webkitTransform = 'scale(' + scale.toFixed(3) + ')'
// }
// update()
// window.addEventListener('resize', update)
// console.log('update')






// // customize

// const sizeSelector = document.querySelector('.clock-size-selector')
// sizeSelector.addEventListener('change', function () {

//   let selected = this.options[this.selectedIndex].value;
//   autoResize(clock, selected)

// })
