//DOM Elements Creation and appending

var modal= document.createElement("div");
var modalHeader= document.createElement("header");
modal.appendChild(modalHeader);


var header_title= document.createElement("h2");
var header_btn= document.createElement("button");
header_btn.textContent= "X";
header_btn.classList.add("btn-close");
modalHeader.appendChild(header_title);
modalHeader.appendChild(header_btn);

var modal_section= document.createElement("section");
modal.appendChild(modal_section);
var modal_section_text= document.createElement("p");
modal_section.appendChild(modal_section_text);
var modal_section_btn= document.createElement("a");
modal_section_btn.textContent= "Know more";
modal_section_btn.classList.add("section-btn");



// THE MAIN APPENDING!!! 
document.body.appendChild(modal);
modal.classList.add("modal");



$(document).on("click", "[data-entrance]", openModal);
 
function openModal(e) {
    var item= this;
    /*** fetching data to be set to modalTitle and ModalText of header from attributes of clicked element(this) ***/
    var modalTitle= this.getAttribute("data-title");
    var modalText= this.getAttribute("data-text");
     var btnText= this.getAttribute("data-btn-text");
    var btnLink= this.getAttribute("data-btn-link");
    header_title.textContent= modalTitle;
    modal_section_text.textContent= modalText;
    
    
    
    /*** get the value of 'data-entrance attribute, add and remove appropriate classes accroding to the attribute ***/
    
      var entrance= this.getAttribute("data-entrance");
    
    
    if(entrance==="modal-scale") {
               modal.classList.remove("modal-unscaled");
        modal.classList.remove("modal-untranslated");
        modal.classList.remove("modal-unfaded");
        modal.classList.add("modal-scaled");
    }
    
    
    
   else if((entrance==="modal-translate")) {
            modal.classList.remove("modal-untranslated");
        modal.classList.remove("modal-unfaded");
        modal.classList.remove("modal-unscaled");
         modal.classList.add("modal-translated");
    }
    
    
        else if((entrance==="modal-fade")) {
               modal.classList.remove("modal-unfaded");
                 modal.classList.remove("modal-untranslated");
        modal.classList.remove("modal-unscaled");
         modal.classList.add("modal-faded");
    }
    
    
modal.classList.add("modal-is-opened");
     modal.style.pointerEvents= "auto";
    
    
//create new variable for header_btn for ease
     var close= header_btn;
    close.addEventListener("click", closeModal, false); //add event listener to close to handle closeModal function at the last
    //close modal when "esc" key is pressed
    window.addEventListener("keyup", function(e) {
    if(e.keyCode===27) {
        closeModal();
    }                       
     });
    
    
    /*** If 'data-btn' is set to 'yes', assign textContent and 'href' for button(modal_section_btn) we created
    earliner. And finally append button to modal_section***/
    
    /*** CAUTION:: Keep this peice of code at the last but before 'e.preventDefault()' of openModal function or it would become buggy ***/
    
         var button= this.getAttribute("data-btn");
    
    if(button==="yes") {
        modal_section_btn.textContent= btnText;
        modal_section_btn.setAttribute("href", "http://"+btnLink);
        modal_section.appendChild(modal_section_btn);
    } else {
        if(modal_section.childNodes[1]===modal_section_btn) {
        modal_section.removeChild(modal_section_btn);
        }
    }
   
    e.preventDefault();
}


  

// Event handle to be executed when close(header>.btn-close) is clicked
function closeModal(e) {
modal.classList.remove("modal-is-opened");
    modal.style.pointerEvents= "none";
    
    if(modal.classList.contains("modal-scaled")) {
        modal.classList.remove("modal-scaled");
        modal.classList.add("modal-unscaled");
        
       }
    
    else if(modal.classList.contains("modal-translated")) {
        modal.classList.remove("modal-translated");
        modal.classList.add("modal-untranslated");
       }
    
    else if(modal.classList.contains("modal-faded")) {
        modal.classList.remove("modal-faded");
        modal.classList.add("modal-unfaded");
       }
}