var Mark = 1;
var clockAdded = false;
var digitalClockId;
var date = new Date();

function createLayer(type) {
    // var newDiv = document.createElement("div");

    // newDiv.setAttribute("id", "drag-"+Mark);
    // newDiv.setAttribute("class", "draggable");



    switch (type) {

        case 'date':
            var dateNode = document.createElement("textarea");
            dateNode.setAttribute("id", "layer" + Mark + '-date');
            dateNode.setAttribute("class", "draggable resize date");
            document.querySelector('.screen').appendChild(dateNode);
            AMIB.showPDate("layer" + Mark + '-date');
            Mark += 1;
            break


        case 'time':
            document.querySelector('#layer1-time').classList.replace('hideClock', 'showClock')
            setTimeout(startTime, 500);
            document.querySelector('#layer2-time').classList.replace('hideClock', 'showClock')

            // var dateNode = document.createElement("textarea");
            // dateNode.setAttribute("id", "layer"+Mark+'-time');
            // dateNode.setAttribute("class", "draggable resize time");
            // document.querySelector('.screen').appendChild(dateNode);
            // digitalClockId= "layer"+Mark+'-time'; 

            // startTime()
            // Mark += 1;
            break


        case 'iFrame':
            var frameNodeEditor = document.createElement("div");
            frameNodeEditor.setAttribute("id", "layer" + Mark + '-iFrame');
            frameNodeEditor.setAttribute("class", "editable draggable resize iFrame");

            var frameNode = document.createElement("p");
            frameNode.innerText = 'ویرایش فریم'
            frameNodeEditor.appendChild(frameNode);
            document.querySelector('.screen').appendChild(frameNodeEditor);
            Mark += 1;
            break;
    }

}


// interact('.resize')
//     .resizable({
//         // resize from all edges and corners
//         edges: { left: true, right: true, bottom: true, top: true },

//         listeners: {
//             move(event) {
//                 var target = event.target
//                 var x = (parseFloat(target.getAttribute('data-x')) || 0)
//                 var y = (parseFloat(target.getAttribute('data-y')) || 0)


//                 // update the element's style
//                 // target.style.width = event.rect.width + 'px'
//                 // target.style.height = event.rect.height + 'px'

//                 //Width height by % {
//                 let widthByPercent = ((event.rect.width) / screen.width) * 100
//                 target.style.width = widthByPercent + '%'
//                 let heightByPercent = ((event.rect.height) / screen.height) * 100
//                 target.style.height = heightByPercent + 'vh'
//                 //}


//                 // translate when resizing from top or left edges
//                 x += event.deltaRect.left
//                 y += event.deltaRect.top
//             }
//         },
//         modifiers: [
//             // keep the edges inside the parent
//             interact.modifiers.restrictEdges({
//                 outer: 'parent'
//             }),

//             // minimum size
//             interact.modifiers.restrictSize({
//                 min: { width: 100, height: 50 }
//             })
//         ],

//         inertia: true
//     })








// target elements with the "draggable" class
interact('.draggable')
    .draggable({
        // enable inertial throwing
        inertia: true,
        // keep the element within the area of it's parent
        modifiers: [
            interact.modifiers.restrictRect({
                restriction: 'parent',
                endOnly: true
            })
        ],
        // enable autoScroll
        autoScroll: true,

        listeners: {
            // call this function on every dragmove event
            move: dragMoveListener,

        }
    })

function dragMoveListener(event) {
    var target = event.target
    // keep the dragged position in the data-x/data-y attributes
    var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
    var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

    // translate the element
    target.style.webkitTransform =
        target.style.transform =
        // 'translate(' + x + 'px, ' + y + 'px)'
        'translate(' + (x / 10) * 4 + '%, ' + (y / 10) * 2 + 'vh)'



    // update the posiion attributes
    target.setAttribute('data-x', x)
    target.setAttribute('data-y', y)
}

// this function is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener









interact('.resize-drag')
    .resizable({
        // resize from all edges and corners
        edges: { left: true, right: true, bottom: true, top: true },

        listeners: {
            move(event) {
                var target = event.target
                var x = (parseFloat(target.getAttribute('data-x')) || 0)
                var y = (parseFloat(target.getAttribute('data-y')) || 0)

                // update the element's style
                target.style.width = (event.rect.width / 10) + '%'
                target.style.height = (event.rect.height / 10) + '%'

                // translate when resizing from top or left edges
                x += event.deltaRect.left
                y += event.deltaRect.top

                target.style.transform = 'translate(' + (x / 5) + '%, ' + y / 5 + 'vh)'

                //// Show element size on elem resizing
                // target.setAttribute('data-x', x)
                // target.setAttribute('data-y', y)
                // target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
            }
        },
        modifiers: [
            // keep the edges inside the parent
            interact.modifiers.restrictEdges({
                outer: 'parent'
            }),

            // minimum size
            interact.modifiers.restrictSize({
                min: { width: 100, height: 50 }
            })
        ],

        // inertia: true
    })
    .draggable({
        listeners: { move: window.dragMoveListener },
        inertia: true,
        modifiers: [
            interact.modifiers.restrictRect({
                restriction: 'parent',
                endOnly: true
            })
        ]
    })










//Tabs 

// function openCity(evt, cityName) {
//     var i, tabcontent, tablinks;
//     tabcontent = document.getElementsByClassName("tabcontent");
//     for (i = 0; i < tabcontent.length; i++) {
//         tabcontent[i].style.display = "none";
//     }
//     tablinks = document.getElementsByClassName("tablinks");
//     for (i = 0; i < tablinks.length; i++) {
//         tablinks[i].className = tablinks[i].className.replace(" active", "");
//     }
//     document.getElementById(cityName).style.display = "block";
//     evt.currentTarget.className += " active";
// }


// //accordion

// var acc = document.getElementsByClassName("accordion");
// var i;

// for (i = 0; i < acc.length; i++) {
//     acc[i].addEventListener("click", function () {
//         this.classList.toggle("active");
//         var panel = this.nextElementSibling;
//         if (panel.style.display === "block") {
//             panel.style.display = "none";
//         } else {
//             panel.style.display = "block";
//         }
//     });
// }








// var activeLayerId;

// // select active layer
// window.onclick = e => {
//     activeLayerId = e.target.id;
//     if (activeLayerId.includes('video')) {
//         document.querySelector('.videoAttr').classList.replace('hidden', 'show');
//         document.querySelector('.contentAttr').classList.replace('show', 'hidden');
//         document.querySelector('.subTitleAttr').classList.replace('show', 'hidden');
//         document.querySelector('.imageAttr').classList.replace('show', 'hidden');
//         document.querySelector('.dateAttr').classList.replace('show', 'hidden');
//         document.querySelector('.timeAttr').classList.replace('show', 'hidden');
//         document.querySelector('.iFrameAttr').classList.replace('show', 'hidden');
//         // document.getElementById(activeLayerId).start();

//     } else if (activeLayerId.includes('content')) {
//         document.querySelector('.contentAttr').classList.replace('hidden', 'show');
//         document.querySelector('.videoAttr').classList.replace('show', 'hidden');
//         document.querySelector('.subTitleAttr').classList.replace('show', 'hidden');
//         document.querySelector('.imageAttr').classList.replace('show', 'hidden');
//         document.querySelector('.dateAttr').classList.replace('show', 'hidden');
//         document.querySelector('.timeAttr').classList.replace('show', 'hidden');
//         document.querySelector('.iFrameAttr').classList.replace('show', 'hidden');
//         // document.getElementById(activeLayerId).start();

//     } else if (activeLayerId.includes('subTitle')) {
//         document.querySelector('.subTitleAttr').classList.replace('hidden', 'show');
//         document.querySelector('.videoAttr').classList.replace('show', 'hidden');
//         document.querySelector('.contentAttr').classList.replace('show', 'hidden');
//         document.querySelector('.imageAttr').classList.replace('show', 'hidden');
//         document.querySelector('.dateAttr').classList.replace('show', 'hidden');
//         document.querySelector('.timeAttr').classList.replace('show', 'hidden');
//         document.querySelector('.iFrameAttr').classList.replace('show', 'hidden');
//         //document.getElementById(activeLayerId).stop();


//     } else if (activeLayerId.includes('image')) {
//         document.querySelector('.imageAttr').classList.replace('hidden', 'show');
//         document.querySelector('.subTitleAttr').classList.replace('show', 'hidden');
//         document.querySelector('.videoAttr').classList.replace('show', 'hidden');
//         document.querySelector('.contentAttr').classList.replace('show', 'hidden');
//         document.querySelector('.dateAttr').classList.replace('show', 'hidden');
//         document.querySelector('.timeAttr').classList.replace('show', 'hidden');
//         document.querySelector('.iFrameAttr').classList.replace('show', 'hidden');
//         // document.getElementById(activeLayerId).start();

//     } else if (activeLayerId.includes('date')) {
//         document.querySelector('.dateAttr').classList.replace('hidden', 'show');
//         document.querySelector('.imageAttr').classList.replace('show', 'hidden');
//         document.querySelector('.subTitleAttr').classList.replace('show', 'hidden');
//         document.querySelector('.videoAttr').classList.replace('show', 'hidden');
//         document.querySelector('.contentAttr').classList.replace('show', 'hidden');
//         document.querySelector('.timeAttr').classList.replace('show', 'hidden');
//         document.querySelector('.iFrameAttr').classList.replace('show', 'hidden');
//         // document.getElementById(activeLayerId).start();

//     } else if (activeLayerId.includes('time') || activeLayerId.includes('clock')) {
//         document.querySelector('.timeAttr').classList.replace('hidden', 'show');
//         document.querySelector('.imageAttr').classList.replace('show', 'hidden');
//         document.querySelector('.subTitleAttr').classList.replace('show', 'hidden');
//         document.querySelector('.videoAttr').classList.replace('show', 'hidden');
//         document.querySelector('.contentAttr').classList.replace('show', 'hidden');
//         document.querySelector('.dateAttr').classList.replace('show', 'hidden');
//         document.querySelector('.iFrameAttr').classList.replace('show', 'hidden');
//         //document.getElementById(activeLayerId).start();

//     } else if (activeLayerId.includes('iFrame')) {
//         document.querySelector('.iFrameAttr').classList.replace('hidden', 'show');
//         document.querySelector('.timeAttr').classList.replace('show', 'hidden');
//         document.querySelector('.imageAttr').classList.replace('show', 'hidden');
//         document.querySelector('.subTitleAttr').classList.replace('show', 'hidden');
//         document.querySelector('.videoAttr').classList.replace('show', 'hidden');
//         document.querySelector('.contentAttr').classList.replace('show', 'hidden');
//         document.querySelector('.dateAttr').classList.replace('show', 'hidden');
//         //document.getElementById(activeLayerId).start();
//     }
// }



// // submit Video Details
// function submitVideoDetails() {
//     // var videoSourceInput = document.querySelector('#videoSrc').value     
//     // if( videoSourceInput !== ""){
//     // let ActiveVideoId = document.activeElement.id;
//     // document.getElementById(ActiveVideoId).src = videoSourceInput

//     // }
//     let videoLoop = document.querySelector('#videoLoop')
//     let ActiveVideo = document.activeElement;
//     if (videoLoop.checked == true) {
//         ActiveVideo.setAttribute('loop', 'true');
//     } else if (videoLoop.checked == false) {
//         ActiveVideo.removeAttribute('loop')
//     }

// }


// // submit Image Details
// function submitImageDetails() {
//     var imageSourceInput = document.querySelector('#imageSrc').value;
//     if (imageSourceInput !== "") {
//         // let ActiveImageId = document.activeElement.id;
//         document.getElementById(activeLayerId).src = imageSourceInput;

//     }

// }


// submit subtitle Details
function submitSubTitleDetails() {
    if (activeLayerId.includes('subTitle')) {
        if (subTitleSourceInput !== "") {
            console.log('activeLayerId.includes subTitle')
            var subTitleSourceInput = document.querySelector('#subTitleSrc').value;
            console.log('activeLayerId.includes subTitle')
            let activesubTitle = document.getElementsById('activeLayerId');
            document.getElementById(activesubTitle).innerHTML = subTitleSourceInput;
        }
    }

}











// // remove active Layer
// function removeLayer() {
//     if (activeLayerId.includes('layer')) {



//         document.getElementById(activeLayerId).remove();

//         document.querySelector('.contentAttr').classList.replace('show', 'hidden');
//         document.querySelector('.videoAttr').classList.replace('show', 'hidden');
//         document.querySelector('.subTitleAttr').classList.replace('show', 'hidden');
//         document.querySelector('.imageAttr').classList.replace('show', 'hidden');
//         document.querySelector('.dateAttr').classList.replace('show', 'hidden');
//         document.querySelector('.timeAttr').classList.replace('show', 'hidden');
//         document.querySelector('.iFrameAttr').classList.replace('show', 'hidden');

//         Mark -= 1;
//     }
// }


// function clockRemover() {
//     document.querySelector('#layer1-time').classList.replace('showClock', 'hideClock')
//     document.querySelector('#layer2-time').classList.replace('showClock', 'hideClock')
//     document.querySelector('.timeAttr').classList.replace('show', 'hidden');

// }




// Uncomment the following code to test the "Timeout Loading Method".
// CKEDITOR.loadFullCoreTimeout = 5;

window.onload = function () {
    // Listen to the double click event.
    if (window.addEventListener)
        document.body.addEventListener('dblclick', onDoubleClick, false);
    else if (window.attachEvent)
        document.body.attachEvent('ondblclick', onDoubleClick);

};

function onDoubleClick(ev) {
    // Get the element which fired the event. This is not necessarily the
    // element to which the event has been attached.
    var element = ev.target || ev.srcElement;

    // Find out the div that holds this element.
    var name;

    do {
        element = element.parentNode;
    }
    while (element && (name = element.nodeName.toLowerCase()) &&
    (name != 'div' || element.className.indexOf('editable') == -1) && name != 'body');

    if (name == 'div' && element.className.indexOf('editable') != -1)
        replaceDiv(element);
}

var editor;

function replaceDiv(div) {
    if (editor)
        editor.destroy();

    editor = CKEDITOR.replace(div);
}