"use strict";

const title = document.getElementById("title")
const apiButton = document.getElementById("api")
const exButton = document.getElementById("examples")
const textBox = document.getElementById("text")
const square = document.getElementById("square")
const circle = document.getElementById("circle")
const oval = document.getElementById("oval")

function titleInteract(){
    const titleMenu = new PopupMenu("title")
    titleMenu.bindPopup()
    titleMenu.addButtons(["resizable", "draggable", "remove", "snap100", "select"])
    const titleResizer = new Resizer("title")
    titleResizer.buildBorders()
    title.addEventListener('click', togglePopup)
    title.addEventListener("mousedown", drag)

}

function apiButtonInteract(){
    const apiButMenu = new PopupMenu("api")
    apiButMenu.bindPopup()
    apiButMenu.addButtons(["resizable", "draggable", "remove", "snap100", "select"])
    const apiResizer = new Resizer("api")
    apiResizer.buildBorders()
    apiButton.addEventListener('click', togglePopup)
    apiButton.addEventListener("mousedown", drag)

}


function exButtonInteract(){
    const exButMenu = new PopupMenu("examples")
    exButMenu.bindPopup()
    exButMenu.addButtons(["resizable", "draggable", "remove", "snap100", "select"])
    const exResizer = new Resizer("examples")
    exResizer.buildBorders()
    exButton.addEventListener('click', togglePopup)
    exButton.addEventListener("mousedown", drag)
}
function textBoxInteract(){
    const textMenu = new PopupMenu("text")
    textMenu.bindPopup()
    textMenu.addButtons(["resizable", "draggable", "remove", "snap100", "select"])
    const textBoxResizer = new Resizer("api")
    textBoxResizer.buildBorders()
    textBox.addEventListener('click', togglePopup)
    textBox.addEventListener("mousedown", drag)

}
function squareInteract(){
    const squareMenu = new PopupMenu("square")
    squareMenu.bindPopup()
    squareMenu.addButtons(["resizable", "draggable", "remove", "snap100", "select"])
    const squareResizer = new Resizer("square")
    squareResizer.buildBorders()
    square.addEventListener('click', togglePopup)
    square.addEventListener("mousedown", drag)

}
function circleInteract(){
    const circleMenu = new PopupMenu("circle")
    circleMenu.bindPopup()
    circleMenu.addButtons(["resizable", "draggable", "remove", "snap100", "select"])
    const circleResizer = new Resizer("circle")
    circleResizer.buildBorders()
    circle.addEventListener('click', togglePopup)
    circle.addEventListener("mousedown", drag)

}
function OvalInteract(){
    const ovalMenu = new PopupMenu("oval")
    ovalMenu.bindPopup()
    ovalMenu.addButtons(["resizable", "draggable", "remove", "snap100", "select"])
    const ovalResizer = new Resizer("oval")
    ovalResizer.buildBorders()
    oval.addEventListener('click', togglePopup)
    oval.addEventListener("mousedown", drag)

}

titleInteract()
apiButtonInteract()
exButtonInteract()
textBoxInteract()
squareInteract()
circleInteract()
OvalInteract()