commit b0e6d13fa6ac313a13a4763add325fcab91576fb
Author: Harry Stuart <h.stuart@redmarble.ai>
Date:   Sun Nov 27 17:16:56 2022 +1100

    initial commit

diff --git a/XWidget.html b/XWidget.html
new file mode 100644
index 0000000..5f2ef7f
--- /dev/null
+++ b/XWidget.html
@@ -0,0 +1,3 @@
+<style>
+</style>
+<h1>yeehaw</h1>
\ No newline at end of file
diff --git a/XWidget.js b/XWidget.js
new file mode 100644
index 0000000..cd1ec29
--- /dev/null
+++ b/XWidget.js
@@ -0,0 +1,340 @@
+const template = document.createElement("template");
+
+{
+    let url = import.meta.url;
+    let path = url.substring(0, url.lastIndexOf("/"))
+    let response = await fetch(`${path}/XIconButton.html`);
+    template.innerHTML = await response.text();
+}
+
+class XWidget extends HTMLElement {
+    #icon;
+    #form;
+    #location;
+
+    #margin;
+    
+    #pointerDown;
+    #moving;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({mode: 'open'});
+
+        this.#icon = this.#createIcon();
+        shadowRoot.appendChild(this.#icon)
+
+        this.#form = this.#createForm();
+        shadowRoot.appendChild(this.#form);
+
+        this.#margin = "20px";
+        this.#pointerDown = false;
+        this.#moving = false;
+        this.#location = "bottom-right";
+    }
+
+    connectedCallback() {
+        this.#render();
+    }
+
+    #render() {
+        if (this.isConnected) {
+            this.#renderIcon({width: "60px", height: "60px", imgSrc: this.#icon.openImgSrc});
+            this.#renderForm({visibility: "hidden"});
+        }
+    }
+
+    #createIcon() {
+        let icon = document.createElement("div");
+
+        icon.openImgSrc = "icon_open.png";
+        icon.closeImgSrc = "icon_close.png";
+
+        icon.addEventListener("pointerdown", (e) => this.#onIconPointerDown(e));
+        icon.addEventListener("pointermove", (e) => this.#onIconPointerMove(e));
+        icon.addEventListener("pointerup", (e) => this.#onIconPointerUp(e));
+        icon.addEventListener("pointerover", (e) => this.#onIconPointerOver(e));
+        icon.addEventListener("pointerout", (e) => this.#onIconPointerOut(e));
+
+        let iconImage = document.createElement("img");
+        iconImage.style.width = "100%";
+        iconImage.style.height = "100%";
+        icon.appendChild(iconImage)
+
+        return icon;
+    }
+
+    #createForm() {
+        let form = document.createElement("div");
+
+        let header = document.createElement("div");
+        header.id = "form-header";
+        form.appendChild(header);
+
+        let title = document.createElement("div");
+        title.id = "form-title";
+        header.appendChild(title);
+
+        // let headerBottom = document.createElement("hr");
+        // headerBottom.id = "form-header-bottom";
+        // form.appendChild(headerBottom);
+
+        // let nameInput = document.createElement("input");
+        // nameInput.id = "name-input";
+        // form.appendChild(nameInput);
+
+        // let commentInput = document.createElement("textarea");
+        // commentInput.id = "comment-input";
+        // form.appendChild(commentInput);
+
+        return form;
+    }
+
+    #renderIcon(parameters={}) {
+        this.#icon.style.position = "fixed";
+        this.#icon.style.transition = "scale 0.2s ease";
+
+        if (parameters["width"]) {
+            this.#icon.style.width = parameters["width"];
+        }
+
+        if (parameters["height"]) {
+            this.#icon.style.height = parameters["height"];
+        }
+
+        if (parameters["scale"]) {
+            this.#icon.style.scale = parameters["scale"];
+        }
+
+        if (parameters["imgSrc"]) {
+            this.#icon.querySelector("img").src = parameters["imgSrc"];
+        }
+
+        if (this.#location == "top-left") {
+            this.#icon.style.left = this.#margin;
+            this.#icon.style.top = this.#margin;
+            this.#icon.style.bottom = "auto";
+            this.#icon.style.right = "auto";
+        } else if (this.#location == "top-right") {
+            this.#icon.style.left = "auto";
+            this.#icon.style.top = this.#margin;
+            this.#icon.style.bottom = "auto";
+            this.#icon.style.right = this.#margin;
+        } else if (this.#location == "bottom-left") {
+            this.#icon.style.left = this.#margin;
+            this.#icon.style.top = "auto";
+            this.#icon.style.bottom = this.#margin;
+            this.#icon.style.right = "auto";
+        } else if (this.#location == "bottom-right") {
+            this.#icon.style.left = "auto";
+            this.#icon.style.top = "auto";
+            this.#icon.style.bottom = this.#margin;
+            this.#icon.style.right = this.#margin;
+        }
+    }
+
+    #renderForm(parameters={}) {
+        this.#form.style.width = "350px";
+        this.#form.style.height = "500px";
+        this.#form.style.backgroundColor = "white";
+        this.#form.style.border = "0px";
+        this.#form.style.borderRadius = "10px 10px 10px 10px"
+        this.#form.style.boxShadow = "0 4px 16px rgb(0 0 0 / 25%)";
+        this.#form.style.borderRadius = "15px";
+        this.#form.style.position = "fixed";
+        this.#form.style.opacity = "0";
+
+        if (this.#location == "top-left") {
+            this.#form.style.left = this.#margin;
+            this.#form.style.top = this.#icon.clientHeight + 50 + "px";
+            this.#form.style.bottom = "auto";
+            this.#form.style.right = "auto";
+        } else if (this.#location == "top-right") {
+            this.#form.style.left = "auto";
+            this.#form.style.top = this.#icon.clientHeight + 50 + "px";
+            this.#form.style.bottom = "auto";
+            this.#form.style.right = this.#margin;
+        } else if (this.#location == "bottom-left") {
+            this.#form.style.left = this.#margin;
+            this.#form.style.top = "auto";
+            this.#form.style.bottom = this.#icon.clientHeight + 50 + "px";
+            this.#form.style.right = "auto";
+        } else if (this.#location == "bottom-right") {
+            this.#form.style.left = "auto";
+            this.#form.style.top = "auto";
+            this.#form.style.bottom = this.#icon.clientHeight + 50 + "px";
+            this.#form.style.right = this.#margin;
+        }
+
+        if (parameters["visibility"]) {
+            // This animation feels messy - especially since opacity is always declared above as 0
+            if (parameters["visibility"] == "visible" && this.#form.style.visibility != "visible") {
+                this.#form.style.visibility = "visible";
+
+                if (parameters["animate"]) {
+                    this.#form.style.opacity = "1";
+                    this.#form.style.transition = "visibility 0s linear 0.1s, opacity 0.1s linear";
+                    this.#form.style.transitionDelay = "0s";
+                }
+                else {
+                    this.#form.style.transition = "";
+                }
+            }
+            else if (parameters["visibility"] == "hidden" && this.#form.style.visibility != "hidden") {
+                this.#form.style.visibility = "hidden";
+
+                if (parameters["animate"]) {
+                    this.#form.style.opacity = "0";
+                    this.#form.style.transition = "visibility 0s linear 0.1s, opacity 0.1s linear";
+                }
+                else {
+                    this.#form.style.transition = "";
+                }
+            }
+        }
+
+        let header = this.#form.querySelector("#form-header");
+        header.style.top = "0px";
+        header.style.width = "100%";
+        header.style.height = "60px";
+        header.style.backgroundColor = "#AE55E7";
+        header.style.borderRadius = "15px 15px 0px 0px";
+        header.style.border = "0px";
+        header.style.justifyContent = "center";
+        header.style.alignItems = "center";
+        header.style.display = "flex";
+
+        // let headerBottom = this.#form.querySelector("#form-header-bottom");
+        // headerBottom.style.width = "100%";
+        // headerBottom.style.height = "10px";
+        // headerBottom.style.backgroundColor = "#AE55E7";
+        // headerBottom.style.margin = "0px";
+        // headerBottom.style.border = "0px";
+        // headerBottom.style.boxShadow = "0 0 26px -2px rgba(0, 0, 0, 0.5)";
+        // headerBottom.style.clipPath = "polygon(0% 0%, 100% 0%, 100% 500%, 0% 500%)";
+
+        let title = this.#form.querySelector("#form-title");
+        title.textContent = "New Ticket";
+        title.style.fontFamily = "Alexandria, sans-serif";
+        title.style.fontWeight = "400";
+        title.style.fontSize = "24px";
+        title.style.color = "white";
+        title.style.textAlign = "center";
+
+        // let nameInput = this.#form.querySelector("#name-input");
+        // nameInput.setAttribute("type", "text");
+        // nameInput.setAttribute("placeholder", "Name");
+        // nameInput.style.fontFamily = "Alexandria, sans-serif";
+        // nameInput.style.fontWeight = "300";
+        // nameInput.style.fontSize = "12px";
+
+        // let commentInput = this.#form.querySelector("#comment-input");
+        // commentInput.setAttribute("resize", "none");
+        // commentInput.setAttribute("overflow-y", "scroll");
+        // commentInput.setAttribute("rows", "15");
+        // commentInput.setAttribute("cols", "30");
+    }
+
+    #onIconPointerOver(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.#renderIcon({scale: 1.05});
+    }
+
+    #onIconPointerOut(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.#renderIcon({scale: 1});
+    }
+
+    #onIconPointerDown(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.#pointerDown = true;
+
+        this.#icon.setPointerCapture(e.pointerId);
+    }
+
+    #onIconPointerMove(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.#icon.style.cursor = "pointer";
+
+        if (this.#pointerDown) {
+            this.#moving = true;
+            this.#icon.style.cursor = "grabbing";
+            this.#snapToCorner(e.clientX, e.clientY);
+        }
+    }
+
+    #onIconPointerUp(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.#icon.style.cursor = "pointer";
+
+        if (!this.#moving) {
+            if (this.#form.style.visibility == "visible") {
+                this.#renderIcon({imgSrc: this.#icon.openImgSrc});
+                this.#renderForm({visibility: "hidden", animate: true});
+            } 
+            else {
+                this.#renderIcon({imgSrc: this.#icon.closeImgSrc});
+                this.#renderForm({visibility: "visible", animate: true});
+            }
+        }
+        else {
+            this.#moving = false;
+        }
+
+        this.#pointerDown = false;
+
+        this.#icon.releasePointerCapture(e.pointerId);
+    }
+
+    #toggleDisplayForm() {
+        let visibility = 
+            this.#form.style.visibility == "visible" ?
+            "hidden" : "visible";
+
+        this.#renderForm({visibility: visibility})
+    }
+
+    #snapToCorner(anchorX, anchorY) {
+        let locationChanged = false;
+
+        if (anchorX < window.innerWidth / 5) {
+            if (this.#location != "top-left" && anchorY < window.innerHeight / 5) {
+                this.#location = "top-left";
+                locationChanged = true;
+            }
+            else if (this.#location != "bottom-left" && anchorY > window.innerHeight - window.innerHeight / 5) {
+                this.#location = "bottom-left";
+                locationChanged = true;
+            }
+        }
+        else if (anchorX > window.innerWidth - window.innerWidth / 5) {
+            if (this.#location != "top-right" &&  anchorY < window.innerHeight / 5) {
+                this.#location = "top-right";
+                locationChanged = true;
+            }
+            else if (this.#location != "bottom-right" && anchorY > window.innerHeight - window.innerHeight / 5) {
+                this.#location = "bottom-right";
+                locationChanged = true;
+            }
+        }
+
+        if (locationChanged) {
+            this.#renderIcon({imgSrc: this.#icon.openImgSrc});
+            this.#renderForm({visibility: "hidden"});
+        }
+    }
+}
+
+customElements.define("x-widget", XWidget);
+document.body.appendChild(document.createElement("x-widget"));
\ No newline at end of file
diff --git a/icon_close.png b/icon_close.png
new file mode 100644
index 0000000..fc544a3
Binary files /dev/null and b/icon_close.png differ
diff --git a/icon_open.png b/icon_open.png
new file mode 100644
index 0000000..bbfb43a
Binary files /dev/null and b/icon_open.png differ
diff --git a/implementation.html b/implementation.html
new file mode 100644
index 0000000..45600b8
--- /dev/null
+++ b/implementation.html
@@ -0,0 +1,493 @@
+<html>
+    <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    </head>
+    <body>
+        <div style="height: 50px; width: 10000px; background-color: blue;"></div>
+    
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        v
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+
+
+        <template id="x-widget-template">
+            <style>
+                * {
+                    box-sizing: border-box;
+                    --side-margin: 20px;
+                    --site-falcon-purple: #AE55E7;
+                }
+
+                #icon {
+                    width: 60px;
+                    height: 60px;
+                    position: fixed;
+                    transition: scale 0.2s ease;
+                    scale: 1.0;
+                }
+
+                #icon:hover {
+                    scale: 1.05;
+                }
+
+                #icon.location-top-left {
+                    left: var(--side-margin);
+                    top: var(--side-margin);
+                    bottom: auto;
+                    right: auto;
+                }
+
+                #icon.location-top-right {
+                    left: auto;
+                    top: var(--side-margin);
+                    bottom: auto;
+                    right: var(--side-margin);
+                }
+
+                #icon.location-bottom-left {
+                    left: var(--side-margin);
+                    top: auto;
+                    bottom: var(--side-margin);
+                    right: auto;
+                }
+
+                #icon.location-bottom-right {
+                    left: auto;
+                    top: auto;
+                    bottom: var(--side-margin);
+                    right: var(--side-margin);
+                }
+
+                #icon > img {
+                    width: 100%;
+                    height: 100%;
+                }
+
+                #form {
+                    width: 350px;
+                    height: 500px;
+                    background-color: white;
+                    border: 0px;
+                    border-radius: 10px 10px 10px 10px;
+                    box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
+                    border-radius: 15px;
+                    position: fixed;
+                    opacity: 0;
+                }
+
+                #form.location-top-left {
+                    left: var(--side-margin);
+                    top: 110px;
+                    bottom: auto;
+                    right: auto;
+                }
+
+                #form.location-top-right {
+                    left: auto;
+                    top: 110px;
+                    bottom: auto;
+                    right: var(--side-margin);
+                }
+
+                #form.location-bottom-left {
+                    left: var(--side-margin);
+                    top: auto;
+                    bottom: 110px;
+                    right: auto;
+                }
+
+                #form.location-bottom-right {
+                    left: auto;
+                    top: auto;
+                    bottom: 110px;
+                    right: var(--side-margin);
+                }
+
+                #form-header {
+                    top: 0px;
+                    width: 100%;
+                    height: 60px;
+                    background-color: var(--site-falcon-purple);
+                    border-radius: 15px 15px 0px 0px;
+                    border: 0px;
+                    justify-content: center;
+                    align-items: center;
+                    display: flex;
+                }
+
+                #form-title {
+                    font-family: Alexandria, sans-serif;
+                    font-weight: 400;
+                    font-size: 24px;
+                    color: white;
+                    text-align: center;
+                }
+
+                #form-content-container {
+                    width: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                }
+
+                #input-name-container {
+                    margin-top: 50px;
+                    position: relative;
+                }
+
+                #input-name {
+                    height: 48px;
+                    width: 280px;
+                    border: 1px solid #c0c0c0;
+                    border-radius: 4px;
+                    box-sizing: border-box;
+                    padding: 16px;
+                }
+
+                #label-input-name {
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: 16px;
+                    display: flex;
+                    align-items: center;
+                    pointer-events: none;
+                }
+
+                #input-name, #label-input-name > div {
+                    font-family: Alexandria, sans-serif;
+                    font-weight: 300;
+                    font-size: 16px;
+                }
+
+                #label-input-name > div {
+                    transition: all 0.15s ease-out, visibility 0s;
+                    color: grey;
+                }
+
+                #input-name:focus {
+                    outline: none;
+                    border: 2px solid var(--site-falcon-purple);
+                }
+
+                #input-name:focus + #label-input-name > div, :not(#input-name[value=""]) + #label-input-name > div {
+                    font-size: 14px;
+                    transform: translate(0, -150%);
+                    background-color: white;
+                    padding-left: 4px;
+                    padding-right: 4px;
+                }
+
+                #input-name:focus + #label-input-name > div {
+                    color: var(--site-falcon-purple);
+                }
+            </style>
+
+            <div id="icon">
+                <img>
+            </div>
+
+            <div id="form">
+                <div id="form-header">
+                    <div id="form-title">
+                        New Ticket
+                    </div>
+                </div>
+                <div id="form-content-container">
+                    <div id="input-name-container">
+                        <input
+                            type="text"
+                            id="input-name"
+                            name="name"
+                            value=""
+                            aria-labelledby="label-input-name"
+                        />
+                        <label for="name" id="label-input-name">
+                            <div>Name</div>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </template>
+
+        <script>
+            class XWidget extends HTMLElement {
+                #icon;
+                #form;
+                #location;
+                
+                #pointerDown;
+                #moving;
+
+                constructor() {
+                    super();
+
+                    const shadowRoot = this.attachShadow({mode: 'open'});
+                    let v = document.getElementById("x-widget-template").content.cloneNode(true);
+                    shadowRoot.appendChild(document.getElementById("x-widget-template").content.cloneNode(true));
+
+                    this.#icon = this.#createIcon();
+
+                    this.#form = this.#createForm();
+
+                    this.#pointerDown = false;
+                    this.#moving = false;
+                    this.#location = "bottom-right";
+                }
+
+                connectedCallback() {
+                    this.#render();
+                }
+
+                #render() {
+                    if (this.isConnected) {
+                        this.#renderIcon({imgSrc: this.#icon.openImgSrc});
+                        this.#renderForm({visibility: "hidden"});
+                    }
+                }
+
+                #createIcon() {
+                    let icon = this.shadowRoot.getElementById("icon");
+
+                    icon.openImgSrc = "icon_open.png";
+                    icon.closeImgSrc = "icon_close.png";
+
+                    icon.addEventListener("pointerdown", (e) => this.#onIconPointerDown(e));
+                    icon.addEventListener("pointermove", (e) => this.#onIconPointerMove(e));
+                    icon.addEventListener("pointerup", (e) => this.#onIconPointerUp(e));
+                    icon.addEventListener("pointerover", (e) => this.#onIconPointerOver(e));
+                    icon.addEventListener("pointerout", (e) => this.#onIconPointerOut(e));
+
+                    return icon;
+                }
+
+                #createForm() {
+                    let form = this.shadowRoot.getElementById("form");
+
+                    let inputName = this.shadowRoot.getElementById("input-name");
+                    inputName.addEventListener("input", (e) => this.#onNameInput(e));
+
+                    return form;
+                }
+
+                #renderIcon(parameters={}) {
+                    if (parameters["imgSrc"]) {
+                        this.#icon.querySelector("img").src = parameters["imgSrc"];
+                    }
+
+                    if (this.#location == "top-left") {
+                        removeClassByPrefix(this.#icon, "location");
+                        this.#icon.classList.add("location-top-left");
+                    } 
+                    else if (this.#location == "top-right") {
+                        removeClassByPrefix(this.#icon, "location");
+                        this.#icon.classList.add("location-top-right");
+                    } 
+                    else if (this.#location == "bottom-left") {
+                        removeClassByPrefix(this.#icon, "location");
+                        this.#icon.classList.add("location-bottom-left");
+                    } 
+                    else if (this.#location == "bottom-right") {
+                        removeClassByPrefix(this.#icon, "location");
+                        this.#icon.classList.add("location-bottom-right");
+                    }
+                }
+
+                #renderForm(parameters={}) {
+                    if (this.#location == "top-left") {
+                        removeClassByPrefix(this.#form, "location");
+                        this.#form.classList.add("location-top-left");
+                    } else if (this.#location == "top-right") {
+                        removeClassByPrefix(this.#form, "location");
+                        this.#form.classList.add("location-top-right");
+                    } else if (this.#location == "bottom-left") {
+                        removeClassByPrefix(this.#form, "location");
+                        this.#form.classList.add("location-bottom-left");
+                    } else if (this.#location == "bottom-right") {
+                        removeClassByPrefix(this.#form, "location");
+                        this.#form.classList.add("location-bottom-right");
+                    }
+
+                    // Not happy with how it fades in and out
+                    if (parameters["visibility"]) {
+                        if (parameters["visibility"] == "visible" && this.#form.style.visibility != "visible") {
+                            this.#form.style.visibility = "visible";
+
+                            if (parameters["animate"]) {
+                                this.#form.style.opacity = "1";
+                                this.#form.style.transition = "visibility 0s linear 0.1s, opacity 0.1s linear";
+                                this.#form.style.transitionDelay = "0s";
+                            }
+                            else {
+                                this.#form.style.transition = "";
+                            }
+                        }
+                        else if (parameters["visibility"] == "hidden" && this.#form.style.visibility != "hidden") {
+                            this.#form.style.visibility = "hidden";
+
+                            if (parameters["animate"]) {
+                                this.#form.style.opacity = "0";
+                                this.#form.style.transition = "visibility 0s linear 0.1s, opacity 0.1s linear";
+                            }
+                            else {
+                                this.#form.style.transition = "";
+                            }
+                        }
+                    }
+                }
+
+                #onNameInput(e) {
+                    let inputName = this.shadowRoot.getElementById("input-name");
+
+                    inputName.setAttribute('value', inputName.value);
+                }
+
+                #onIconPointerOver(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+
+                #onIconPointerOut(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+
+                #onIconPointerDown(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    this.#pointerDown = true;
+
+                    this.#icon.setPointerCapture(e.pointerId);
+                }
+
+                #onIconPointerMove(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    if (this.#pointerDown) {
+                        this.#moving = true;
+                        this.#icon.style.cursor = "grabbing";
+                        this.#snapToCorner(e.clientX, e.clientY);
+                    }
+                    else {
+                        this.#icon.style.cursor = "pointer";
+                    }
+                }
+
+                #onIconPointerUp(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    this.#icon.style.cursor = "pointer";
+
+                    if (!this.#moving) {
+                        if (this.#form.style.visibility == "visible") {
+                            this.#renderIcon({imgSrc: this.#icon.openImgSrc});
+                            this.#renderForm({visibility: "hidden", animate: true});
+                        } 
+                        else {
+                            this.#renderIcon({imgSrc: this.#icon.closeImgSrc});
+                            this.#renderForm({visibility: "visible", animate: true});
+                        }
+                    }
+                    else {
+                        this.#moving = false;
+                    }
+
+                    this.#pointerDown = false;
+
+                    this.#icon.releasePointerCapture(e.pointerId);
+                }
+
+                #snapToCorner(anchorX, anchorY) {
+                    let locationChanged = false;
+
+                    if (anchorX < window.innerWidth / 5) {
+                        if (this.#location != "top-left" && anchorY < window.innerHeight / 5) {
+                            this.#location = "top-left";
+                            locationChanged = true;
+                        }
+                        else if (this.#location != "bottom-left" && anchorY > window.innerHeight - window.innerHeight / 5) {
+                            this.#location = "bottom-left";
+                            locationChanged = true;
+                        }
+                    }
+                    else if (anchorX > window.innerWidth - window.innerWidth / 5) {
+                        if (this.#location != "top-right" &&  anchorY < window.innerHeight / 5) {
+                            this.#location = "top-right";
+                            locationChanged = true;
+                        }
+                        else if (this.#location != "bottom-right" && anchorY > window.innerHeight - window.innerHeight / 5) {
+                            this.#location = "bottom-right";
+                            locationChanged = true;
+                        }
+                    }
+
+                    if (locationChanged) {
+                        this.#renderIcon({imgSrc: this.#icon.openImgSrc});
+                        this.#renderForm({visibility: "hidden"});
+                    }
+                }
+            }
+
+            function removeClassByPrefix(el, prefix) {
+                if (!el.classList) {
+                    return;
+                }
+
+                let filteredClassList = [];
+
+                for (let i = 0; i < el.classList.length; i++) {
+                    if (!el.classList[i].startsWith(prefix)) {
+                        filteredClassList.push(el.classList[i])
+                    }
+                }
+
+                el.classList = filteredClassList;
+            }
+
+            customElements.define("x-widget", XWidget);
+            document.body.appendChild(document.createElement("x-widget"));
+        </script>
+    </body>
+</html> 
\ No newline at end of file
diff --git a/old/CornerSnap.html b/old/CornerSnap.html
new file mode 100644
index 0000000..cc3f281
--- /dev/null
+++ b/old/CornerSnap.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html>
+  
+<head>
+</head>
+  
+<body>
+    <div>
+        <style>
+            p {
+                font-size: 24;
+            }
+        </style>
+        <div style="height: 50px; width: 10000px; background-color: blue;"></div>
+
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        v
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+    </div>
+
+    <div id="widget" style="position: fixed; top: 0px; left: 0px; width: 100px; height: 100px; background-color: red;"></div>
+
+    <script type="text/javascript">
+        let widget = document.getElementById("widget");
+
+        let isDown = false;
+
+        function onMouseDown(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            isDown = true;
+
+            this.setPointerCapture(e.pointerId);
+        }
+
+        function setCorner(anchorX, anchorY, element) {
+            let offsets = element.getBoundingClientRect();
+
+            if (anchorX < window.innerWidth / 2){
+                // left half
+                if (anchorY < window.innerHeight / 2) {
+                    // top left
+                    element.style.left = "0px";
+                    element.style.top = "0px";
+                }
+                else {
+                    // bottom left
+                    element.style.left = "0px";
+                    element.style.top = window.innerHeight - offsets.height + "px";
+                }
+            }
+            else {
+                // right half
+                if (anchorY < window.innerHeight / 2) {
+                    // top right
+                    element.style.left = window.innerWidth - offsets.width + "px";4
+                    element.style.top = "0px";
+                }
+                else {
+                    // bottom right
+                    element.style.left = window.innerWidth - offsets.width + "px";
+                    element.style.top = window.innerHeight - offsets.height + "px";  
+                }
+            }
+        }
+
+        function onMouseMove(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (isDown) {
+                setCorner(e.clientX, e.clientY, this);
+            }
+        }
+
+        function onMouseUp(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            isDown = false;
+
+            this.releasePointerCapture(e.pointerId);
+        }
+
+        function onMouseLeave(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            if (isDown) {
+                
+            }
+        }
+
+        widget.addEventListener("pointerdown", onMouseDown);
+        widget.addEventListener("pointermove", onMouseMove);
+        widget.addEventListener("pointerleave", onMouseLeave);
+        widget.addEventListener("pointerup", onMouseUp);
+
+        window.addEventListener("resize", () => {
+            let offsets = widget.getBoundingClientRect();
+            setCorner(offsets.left, offsets.top, widget);
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/old/Screenshot.html b/old/Screenshot.html
new file mode 100644
index 0000000..635eb97
--- /dev/null
+++ b/old/Screenshot.html
@@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<html>
+  
+<head>
+    <script src=
+"https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">
+    </script>
+</head>
+  
+<body>
+    <div>
+        <style>
+            p {
+                font-size: 24;
+            }
+        </style>
+
+        <img />
+
+        <button id="snapshot-button">Take snapshot</button>
+
+        <div style="height: 50px; width: 10000px; background-color: blue;"></div>
+        <!-- <img width="400px" height="700px" src="alley.jpg" /> -->
+
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        v
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+    </div>
+
+    <script type="text/javascript">
+        let canvas = document.createElement("canvas");
+        document.body.appendChild(canvas);
+        canvas.style = "position: fixed; top: 0px; left: 0px; cursor: crosshair;";
+
+        function setCanvasDimensions(canvas) {
+            let bodyMarginLeft = window.getComputedStyle(document.body).getPropertyValue('margin-left');
+            let bodyMarginRight = window.getComputedStyle(document.body).getPropertyValue('margin-right');
+            if (bodyMarginLeft || bodyMarginRight) {
+                canvas.width = document.body.offsetWidth + parseInt(bodyMarginLeft) + parseInt(bodyMarginRight);
+            }
+            else {
+                canvas.width = document.body.offsetWidth;
+            }
+            
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+            canvas.hidden = true;
+        }
+
+        setCanvasDimensions(canvas);
+        window.addEventListener("resize", () => setCanvasDimensions(canvas))
+
+        let ctx = canvas.getContext("2d");
+
+        let hiddenCanvas = document.createElement("canvas");
+        document.body.appendChild(hiddenCanvas);
+
+        hiddenCanvas.hidden = true;
+
+        let hiddenCtx = hiddenCanvas.getContext("2d");
+
+        let initialX;
+        let initialY;
+
+        let isDown = false;
+
+        function onMouseDown(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            initialX = e.offsetX;
+            initialY = e.offsetY;
+
+            isDown = true;
+
+            this.setPointerCapture(e.pointerId);
+        }
+
+        function onMouseMove(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (isDown) {
+                let offsetX;
+                let offsetY;
+
+                if (e.offsetX < 0) {
+                    offsetX = 0;
+                }
+                else if (e.offsetX > canvas.width - 1) {
+                    offsetX = canvas.width - 1;
+                }
+                else {
+                    offsetX = e.offsetX;
+                }
+
+                if (e.offsetY < 0) {
+                    offsetY = 0;
+                }
+                else if (e.offsetY > canvas.height - 1) {
+                    offsetY = canvas.height - 1;
+                }
+                else {
+                    offsetY = e.offsetY;
+                }
+
+                let width = offsetX - initialX;
+                let height = offsetY - initialY;
+
+                setCanvas();
+                ctx.beginPath();
+                ctx.clearRect(initialX, initialY, width, height);
+                ctx.rect(initialX, initialY, width, height);
+                ctx.stroke();
+                ctx.closePath();
+            }
+        }
+
+        async function onMouseUp(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (isDown) {
+                let offsetX;
+                let offsetY;
+
+                if (e.offsetX < 0) {
+                    offsetX = 0;
+                }
+                else if (e.offsetX > canvas.width - 1) {
+                    offsetX = canvas.width - 1;
+                }
+                else {
+                    offsetX = e.offsetX;
+                }
+
+                if (e.offsetY < 0) {
+                    offsetY = 0;
+                }
+                else if (e.offsetY > canvas.height - 1) {
+                    offsetY = canvas.height - 1;
+                }
+                else {
+                    offsetY = e.offsetY;
+                }
+
+                unloadCanvas();
+                this.releasePointerCapture(e.pointerId);
+
+                if (Math.abs(offsetX - initialX) > 10 && Math.abs(offsetY - initialY) > 10) {
+                    await takeScreenshot(offsetX, offsetY);
+                }
+
+                initialX = null;
+                initialY = null;
+                isDown = false;
+            }
+        }
+
+        function onMouseLeave(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            if (isDown) {
+                
+            }
+        }
+
+        async function takeScreenshot(offsetX, offsetY) {
+            let width = offsetX - initialX;
+            let height = offsetY - initialY;
+            let offsetInitialX = initialX;
+            let offsetInitialY = initialY;
+
+            if (width < 0) {
+                width = width * -1;
+                offsetInitialX = initialX - width;
+            }
+
+            if (height < 0) {
+                height = height * -1;
+                offsetInitialY = initialY - height;
+            }
+
+            let documentCanvas;
+
+            await html2canvas(document.body, {
+                logging: true, 
+                letterRendering: 1, 
+                allowTaint: true,
+                useCORS: true 
+            }).then(
+                function (canvas) {
+                    console.log("nice")
+                    documentCanvas = canvas;
+            });
+
+            return;
+
+            hiddenCanvas.width = width;
+            hiddenCanvas.height = height;
+            hiddenCtx.drawImage(documentCanvas, offsetInitialX, offsetInitialY, width, height, 0, 0, width, height);
+
+            let base64image = canvas.toDataURL("image/png");
+            console.log(base64image);
+
+            hiddenCtx.clearRect(0, 0, hiddenCanvas.width, hiddenCanvas.height);
+
+            hiddenCanvas.width = 0;
+            hiddenCanvas.height = 0;
+        }
+
+        function setCanvas() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            ctx.globalAlpha = 0.5;
+            ctx.fillStyle = "white";
+            ctx.beginPath();
+            ctx.rect(0, 0, canvas.width, canvas.height);
+            ctx.fill();
+            ctx.closePath();
+            
+            setBrush();
+        }
+
+        function setBrush() {
+            ctx.globalAlpha = 1;
+            ctx.strokeStyle = 'red';
+        }
+        
+        canvas.addEventListener("pointerdown", onMouseDown);
+        canvas.addEventListener("pointermove", onMouseMove);
+        canvas.addEventListener("pointerleave", onMouseLeave);
+        canvas.addEventListener("pointerup", onMouseUp);
+
+        function loadCanvas() {
+            setCanvas();
+            canvas.hidden = false;
+        }
+
+        function unloadCanvas() {
+            setCanvas();
+            canvas.hidden = true;
+        }
+
+        let snapshotButton = document.getElementById("snapshot-button");
+
+        snapshotButton.addEventListener("click", () => { loadCanvas() });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/old/ScreenshotTest.html b/old/ScreenshotTest.html
new file mode 100644
index 0000000..299bd85
--- /dev/null
+++ b/old/ScreenshotTest.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <script src=
+        "https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">
+    </script>
+</head>
+<body>
+    <div id="capture" style="padding: 10px; background: #f5da55">
+        <h4 style="color: #000; ">Hello wytorld!</h4>
+        <img width="400px" height="700px" src="alley.jpg" />
+    </div>
+
+    <script type="text/javascript">
+        async function Do() {
+            await html2canvas(document.body)
+            .then(
+                function (canvas) {
+                    document.body.appendChild(canvas);
+                });
+        }
+
+        Do();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/old/Widget.html b/old/Widget.html
new file mode 100644
index 0000000..93b01dd
--- /dev/null
+++ b/old/Widget.html
@@ -0,0 +1,197 @@
+<html>
+    <head>
+
+    </head>
+
+    <body>
+        <div>
+            <style>
+                p {
+                    font-size: 24;
+                }
+            </style>
+    
+            <img />
+    
+            <button id="snapshot-button">Take snapshot</button>
+    
+            <div style="height: 50px; width: 10000px; background-color: blue;"></div>
+    
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+    
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            v
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+        </div>
+
+        <x-widget></x-widget>
+
+        <script>
+            class XWidget extends HTMLElement {
+                frame;
+                icon;
+
+                constructor() {
+                    super();
+
+                    const shadowRoot = this.attachShadow({mode: 'open'});
+
+                    let frame = document.createElement("div");
+                    frame.style.position = "fixed";
+                    frame.style.top = "0px";
+                    frame.style.left = "0px";
+                    frame.style.right = "0px";
+                    frame.style.bottom = "0px";
+                    frame.style.border = "5px dotted blue";
+                    shadowRoot.append(frame);
+                    this.frame = frame;
+
+                    let icon = document.createElement("x-widget-icon");
+                    this.frame.appendChild(icon);
+                    this.icon = icon;
+                }
+
+                connectedCallback() {
+                }
+            }
+
+            class XWidgetIcon extends HTMLElement {
+                iconContainer;
+                isPressed;
+
+                constructor() {
+                    super();
+
+                    const shadowRoot = this.attachShadow({mode: 'open'});
+
+                    let iconContainer = document.createElement("div");
+                    shadowRoot.append(iconContainer);
+                    this.iconContainer = iconContainer;
+                }
+
+                connectedCallback() {
+                    this.#render();
+
+                    this.isPressed = false;
+
+                    this.iconContainer.addEventListener("pointerdown", (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        this.isPressed = true;
+
+                        this.iconContainer.setPointerCapture(e.pointerId);
+                    });
+
+                    this.iconContainer.addEventListener("pointermove", (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        if (this.isPressed) {
+                            this.#snapToCorner();
+                        }
+                    });
+
+                    this.iconContainer.addEventListener("pointerleave", (e) => {
+                        if (this.isPressed) {
+                            
+                        }
+                    });
+
+                    this.iconContainer.addEventListener("pointerup", (e) => {
+                        this.isPressed = false;
+
+                        this.iconContainer.releasePointerCapture(e.pointerId);
+                    });
+                }
+
+                #render() {
+                    this.iconContainer.style.position = "fixed";
+                    this.iconContainer.style.bottom = "0px";
+                    this.iconContainer.style.right = "0px";
+                    this.iconContainer.style.width = "50px";
+                    this.iconContainer.style.height = "50px";
+                    this.iconContainer.style.backgroundColor = "red";
+                }
+
+                #snapToCorner(x, y) {
+                    let maxWidth = window.innerWidth;
+                    let maxHeight = window.innerHeight;
+
+                    if (x < maxWidth / 2){
+                        // left half
+                        if (y < maxHeight / 2) {
+                            // top left
+                            this.style.left = "0px";
+                            this.style.top = "0px";
+                            this.style.bottom = null;
+                            this.style.right = null;
+                        }
+                        else {
+                            // bottom left
+                            this.style.left = "0px";
+                            this.style.top = null;
+                            this.style.bottom = "0px";
+                            this.style.right = null;
+                        }
+                    }
+                    else {
+                        // right half
+                        if (y < maxHeight / 2) {
+                            // top right
+                            this.style.left = null;
+                            this.style.top = "0px";
+                            this.style.bottom = null;
+                            this.style.right = "0px";
+                        }
+                        else {
+                            // bottom right
+                            this.style.left = null;
+                            this.style.top = null;
+                            this.style.bottom = "0px";
+                            this.style.right = "0px";
+                        }
+                    }
+                }
+            }
+
+            customElements.define("x-widget", XWidget);
+            customElements.define("x-widget-icon", XWidgetIcon);
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/old/WidgetNew.html b/old/WidgetNew.html
new file mode 100644
index 0000000..7a3d165
--- /dev/null
+++ b/old/WidgetNew.html
@@ -0,0 +1,131 @@
+<html>
+    <head>
+
+    </head>
+
+    <body>
+        <div>
+            <style>
+                p {
+                    font-size: 24;
+                }
+            </style>
+    
+            <img />
+    
+            <button id="snapshot-button">Take snapshot</button>
+    
+            <div style="height: 50px; width: 10000px; background-color: blue;"></div>
+    
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+    
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            v
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+            <p>Nice thanks man awesome</p>
+        </div>
+
+        <x-widget></x-widget>
+
+        <script>
+            class XWidget extends HTMLElement {
+                frame;
+                icon;
+
+                constructor() {
+                    super();
+
+                    const shadowRoot = this.attachShadow({mode: 'open'});
+
+                    let frame = document.createElement("div");
+                    frame.style.position = "fixed";
+                    frame.style.top = "0px";
+                    frame.style.left = "0px";
+                    frame.style.right = "0px";
+                    frame.style.bottom = "0px";
+                    frame.style.border = "5px dotted blue";
+                    shadowRoot.append(frame);
+                    this.frame = frame;
+
+                    let icon = document.createElement("x-widget-icon");
+                    this.frame.appendChild(icon);
+                    this.icon = icon;
+
+                    frame.addEventListener("click", (e) => { 
+                        if (e.target == icon) {
+                            console.log("Clicked on icon");
+                        }
+                    });
+                }
+
+                connectedCallback() {
+                }
+            }
+
+            class XWidgetIcon extends HTMLElement {
+                iconContainer;
+                isPressed;
+
+                constructor() {
+                    super();
+
+                    const shadowRoot = this.attachShadow({mode: 'open'});
+
+                    let iconContainer = document.createElement("div");
+                    shadowRoot.append(iconContainer);
+                    this.iconContainer = iconContainer;
+                }
+
+                connectedCallback() {
+                    this.#render();
+                }
+
+                #render() {
+                    this.iconContainer.style.position = "fixed";
+                    this.iconContainer.style.bottom = "0px";
+                    this.iconContainer.style.right = "0px";
+                    this.iconContainer.style.width = "50px";
+                    this.iconContainer.style.height = "50px";
+                    this.iconContainer.style.backgroundColor = "red";
+                }
+            }
+
+            customElements.define("x-widget", XWidget);
+            customElements.define("x-widget-icon", XWidgetIcon);
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/old/implementationold.html b/old/implementationold.html
new file mode 100644
index 0000000..d7c7ee0
--- /dev/null
+++ b/old/implementationold.html
@@ -0,0 +1,406 @@
+<html>
+    <head>
+    </head>
+    <body>
+        <div style="height: 50px; width: 10000px; background-color: blue;"></div>
+    
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        v
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+        <p>Nice thanks man awesome</p>
+
+        <template>
+            <h1>yeehaw</h1>
+        </template>
+
+        <script>
+            loadExternalStyles();
+
+            function loadExternalStyles() {
+                let gfPreconnectLink = document.createElement("link");
+                gfPreconnectLink.setAttribute("rel", "preconnect");
+                gfPreconnectLink.setAttribute("href", "https://fonts.googleapis.com");
+                document.head.appendChild(gfPreconnectLink);
+
+                let gfPreconnectCOLink = document.createElement("link");
+                gfPreconnectCOLink.setAttribute("rel", "preconnect");
+                gfPreconnectCOLink.setAttribute("href", "https://fonts.gstatic.com");
+                gfPreconnectCOLink.setAttribute("crossorigin", true);
+                document.head.appendChild(gfPreconnectCOLink);
+
+                let gfLink = document.createElement("link");
+                gfLink.setAttribute("rel", "stylesheet");
+                gfLink.setAttribute("href", "https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700&display=swap");
+                document.head.appendChild(gfLink);
+            }
+
+            class XWidget extends HTMLElement {
+                #icon;
+                #form;
+                #location;
+
+                #margin;
+                
+                #pointerDown;
+                #moving;
+
+                constructor() {
+                    super();
+
+                    const shadowRoot = this.attachShadow({mode: 'open'});
+
+                    this.#icon = this.#createIcon();
+                    shadowRoot.appendChild(this.#icon)
+
+                    this.#form = this.#createForm();
+                    shadowRoot.appendChild(this.#form);
+
+                    this.#margin = "20px";
+                    this.#pointerDown = false;
+                    this.#moving = false;
+                    this.#location = "bottom-right";
+                }
+
+                connectedCallback() {
+                    this.#render();
+                }
+
+                #render() {
+                    if (this.isConnected) {
+                        this.#renderIcon({width: "60px", height: "60px", imgSrc: this.#icon.openImgSrc});
+                        this.#renderForm({visibility: "hidden"});
+                    }
+                }
+
+                #createIcon() {
+                    let icon = document.createElement("div");
+
+                    icon.openImgSrc = "icon_open.png";
+                    icon.closeImgSrc = "icon_close.png";
+
+                    icon.addEventListener("pointerdown", (e) => this.#onIconPointerDown(e));
+                    icon.addEventListener("pointermove", (e) => this.#onIconPointerMove(e));
+                    icon.addEventListener("pointerup", (e) => this.#onIconPointerUp(e));
+                    icon.addEventListener("pointerover", (e) => this.#onIconPointerOver(e));
+                    icon.addEventListener("pointerout", (e) => this.#onIconPointerOut(e));
+
+                    let iconImage = document.createElement("img");
+                    iconImage.style.width = "100%";
+                    iconImage.style.height = "100%";
+                    icon.appendChild(iconImage)
+
+                    return icon;
+                }
+
+                #createForm() {
+                    let form = document.createElement("div");
+
+                    let header = document.createElement("div");
+                    header.id = "form-header";
+                    form.appendChild(header);
+
+                    let title = document.createElement("div");
+                    title.id = "form-title";
+                    header.appendChild(title);
+
+                    // let headerBottom = document.createElement("hr");
+                    // headerBottom.id = "form-header-bottom";
+                    // form.appendChild(headerBottom);
+
+                    // let nameInput = document.createElement("input");
+                    // nameInput.id = "name-input";
+                    // form.appendChild(nameInput);
+
+                    // let commentInput = document.createElement("textarea");
+                    // commentInput.id = "comment-input";
+                    // form.appendChild(commentInput);
+
+                    return form;
+                }
+
+                #renderIcon(parameters={}) {
+                    this.#icon.style.position = "fixed";
+                    this.#icon.style.transition = "scale 0.2s ease";
+
+                    if (parameters["width"]) {
+                        this.#icon.style.width = parameters["width"];
+                    }
+
+                    if (parameters["height"]) {
+                        this.#icon.style.height = parameters["height"];
+                    }
+
+                    if (parameters["scale"]) {
+                        this.#icon.style.scale = parameters["scale"];
+                    }
+
+                    if (parameters["imgSrc"]) {
+                        this.#icon.querySelector("img").src = parameters["imgSrc"];
+                    }
+
+                    if (this.#location == "top-left") {
+                        this.#icon.style.left = this.#margin;
+                        this.#icon.style.top = this.#margin;
+                        this.#icon.style.bottom = "auto";
+                        this.#icon.style.right = "auto";
+                    } else if (this.#location == "top-right") {
+                        this.#icon.style.left = "auto";
+                        this.#icon.style.top = this.#margin;
+                        this.#icon.style.bottom = "auto";
+                        this.#icon.style.right = this.#margin;
+                    } else if (this.#location == "bottom-left") {
+                        this.#icon.style.left = this.#margin;
+                        this.#icon.style.top = "auto";
+                        this.#icon.style.bottom = this.#margin;
+                        this.#icon.style.right = "auto";
+                    } else if (this.#location == "bottom-right") {
+                        this.#icon.style.left = "auto";
+                        this.#icon.style.top = "auto";
+                        this.#icon.style.bottom = this.#margin;
+                        this.#icon.style.right = this.#margin;
+                    }
+                }
+
+                #renderForm(parameters={}) {
+                    this.#form.style.width = "350px";
+                    this.#form.style.height = "500px";
+                    this.#form.style.backgroundColor = "white";
+                    this.#form.style.border = "0px";
+                    this.#form.style.borderRadius = "10px 10px 10px 10px"
+                    this.#form.style.boxShadow = "0 4px 16px rgb(0 0 0 / 25%)";
+                    this.#form.style.borderRadius = "15px";
+                    this.#form.style.position = "fixed";
+                    this.#form.style.opacity = "0";
+
+                    if (this.#location == "top-left") {
+                        this.#form.style.left = this.#margin;
+                        this.#form.style.top = this.#icon.clientHeight + 50 + "px";
+                        this.#form.style.bottom = "auto";
+                        this.#form.style.right = "auto";
+                    } else if (this.#location == "top-right") {
+                        this.#form.style.left = "auto";
+                        this.#form.style.top = this.#icon.clientHeight + 50 + "px";
+                        this.#form.style.bottom = "auto";
+                        this.#form.style.right = this.#margin;
+                    } else if (this.#location == "bottom-left") {
+                        this.#form.style.left = this.#margin;
+                        this.#form.style.top = "auto";
+                        this.#form.style.bottom = this.#icon.clientHeight + 50 + "px";
+                        this.#form.style.right = "auto";
+                    } else if (this.#location == "bottom-right") {
+                        this.#form.style.left = "auto";
+                        this.#form.style.top = "auto";
+                        this.#form.style.bottom = this.#icon.clientHeight + 50 + "px";
+                        this.#form.style.right = this.#margin;
+                    }
+
+                    if (parameters["visibility"]) {
+                        // This animation feels messy - especially since opacity is always declared above as 0
+                        if (parameters["visibility"] == "visible" && this.#form.style.visibility != "visible") {
+                            this.#form.style.visibility = "visible";
+
+                            if (parameters["animate"]) {
+                                this.#form.style.opacity = "1";
+                                this.#form.style.transition = "visibility 0s linear 0.1s, opacity 0.1s linear";
+                                this.#form.style.transitionDelay = "0s";
+                            }
+                            else {
+                                this.#form.style.transition = "";
+                            }
+                        }
+                        else if (parameters["visibility"] == "hidden" && this.#form.style.visibility != "hidden") {
+                            this.#form.style.visibility = "hidden";
+
+                            if (parameters["animate"]) {
+                                this.#form.style.opacity = "0";
+                                this.#form.style.transition = "visibility 0s linear 0.1s, opacity 0.1s linear";
+                            }
+                            else {
+                                this.#form.style.transition = "";
+                            }
+                        }
+                    }
+
+                    let header = this.#form.querySelector("#form-header");
+                    header.style.top = "0px";
+                    header.style.width = "100%";
+                    header.style.height = "60px";
+                    header.style.backgroundColor = "#AE55E7";
+                    header.style.borderRadius = "15px 15px 0px 0px";
+                    header.style.border = "0px";
+                    header.style.justifyContent = "center";
+                    header.style.alignItems = "center";
+                    header.style.display = "flex";
+
+                    // let headerBottom = this.#form.querySelector("#form-header-bottom");
+                    // headerBottom.style.width = "100%";
+                    // headerBottom.style.height = "10px";
+                    // headerBottom.style.backgroundColor = "#AE55E7";
+                    // headerBottom.style.margin = "0px";
+                    // headerBottom.style.border = "0px";
+                    // headerBottom.style.boxShadow = "0 0 26px -2px rgba(0, 0, 0, 0.5)";
+                    // headerBottom.style.clipPath = "polygon(0% 0%, 100% 0%, 100% 500%, 0% 500%)";
+
+                    let title = this.#form.querySelector("#form-title");
+                    title.textContent = "New Ticket";
+                    title.style.fontFamily = "Alexandria, sans-serif";
+                    title.style.fontWeight = "400";
+                    title.style.fontSize = "24px";
+                    title.style.color = "white";
+                    title.style.textAlign = "center";
+
+                    // let nameInput = this.#form.querySelector("#name-input");
+                    // nameInput.setAttribute("type", "text");
+                    // nameInput.setAttribute("placeholder", "Name");
+                    // nameInput.style.fontFamily = "Alexandria, sans-serif";
+                    // nameInput.style.fontWeight = "300";
+                    // nameInput.style.fontSize = "12px";
+
+                    // let commentInput = this.#form.querySelector("#comment-input");
+                    // commentInput.setAttribute("resize", "none");
+                    // commentInput.setAttribute("overflow-y", "scroll");
+                    // commentInput.setAttribute("rows", "15");
+                    // commentInput.setAttribute("cols", "30");
+                }
+
+                #onIconPointerOver(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    this.#renderIcon({scale: 1.05});
+                }
+
+                #onIconPointerOut(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    this.#renderIcon({scale: 1});
+                }
+
+                #onIconPointerDown(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    this.#pointerDown = true;
+
+                    this.#icon.setPointerCapture(e.pointerId);
+                }
+
+                #onIconPointerMove(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    this.#icon.style.cursor = "pointer";
+
+                    if (this.#pointerDown) {
+                        this.#moving = true;
+                        this.#icon.style.cursor = "grabbing";
+                        this.#snapToCorner(e.clientX, e.clientY);
+                    }
+                }
+
+                #onIconPointerUp(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    this.#icon.style.cursor = "pointer";
+
+                    if (!this.#moving) {
+                        if (this.#form.style.visibility == "visible") {
+                            this.#renderIcon({imgSrc: this.#icon.openImgSrc});
+                            this.#renderForm({visibility: "hidden", animate: true});
+                        } 
+                        else {
+                            this.#renderIcon({imgSrc: this.#icon.closeImgSrc});
+                            this.#renderForm({visibility: "visible", animate: true});
+                        }
+                    }
+                    else {
+                        this.#moving = false;
+                    }
+
+                    this.#pointerDown = false;
+
+                    this.#icon.releasePointerCapture(e.pointerId);
+                }
+
+                #toggleDisplayForm() {
+                    let visibility = 
+                        this.#form.style.visibility == "visible" ?
+                        "hidden" : "visible";
+
+                    this.#renderForm({visibility: visibility})
+                }
+
+                #snapToCorner(anchorX, anchorY) {
+                    let locationChanged = false;
+
+                    if (anchorX < window.innerWidth / 5) {
+                        if (this.#location != "top-left" && anchorY < window.innerHeight / 5) {
+                            this.#location = "top-left";
+                            locationChanged = true;
+                        }
+                        else if (this.#location != "bottom-left" && anchorY > window.innerHeight - window.innerHeight / 5) {
+                            this.#location = "bottom-left";
+                            locationChanged = true;
+                        }
+                    }
+                    else if (anchorX > window.innerWidth - window.innerWidth / 5) {
+                        if (this.#location != "top-right" &&  anchorY < window.innerHeight / 5) {
+                            this.#location = "top-right";
+                            locationChanged = true;
+                        }
+                        else if (this.#location != "bottom-right" && anchorY > window.innerHeight - window.innerHeight / 5) {
+                            this.#location = "bottom-right";
+                            locationChanged = true;
+                        }
+                    }
+
+                    if (locationChanged) {
+                        this.#renderIcon({imgSrc: this.#icon.openImgSrc});
+                        this.#renderForm({visibility: "hidden"});
+                    }
+                }
+            }
+
+            customElements.define("b6d215dc-03ff-4ca5-bc48-879e821a07f0", XWidget);
+            document.body.appendChild(document.createElement("b6d215dc-03ff-4ca5-bc48-879e821a07f0"));
+        </script>
+    </body>
+</html> 
\ No newline at end of file