Semiotic

// ==UserScript==
// @id             semiotic
// @name           Semiotic
// @version        1.0
// @namespace
// @author
// @description
// @include        *8ch.net/*
// @include        *www.google.com/search*
// @include        *boards.4chan*
// @run-at         document-end
// @grant unsafeWindow
// ==/UserScript==

/*To-Do:
scrape full size imgs instead of thumbnail
scaled branding image
movable branding image
bug in brand img load, won't draw unless draw delayed?
resizing window messes up button layout
chrome canvas save problems
*/

function getOffset( el ) {
    var _x = 0; var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    newNode.parentElement = referenceNode.parentNode;
}

function initEditCanvas(){
    editCanvas = document.createElement("canvas");
    editCanvas.style.zIndex = 2147483647;
    editCanvas.style.backgroundColor = "white";;
    editCanvas.width = 100;
    editCanvas.height = 100;
    editCanvas.style.width = 100;
    editCanvas.style.height = 100;

    editContext = editCanvas.getContext("2d");
    firstImg = new Image();
    brandImg = new Image();
}

function centerEditPopup(){
    var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
    var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
    width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
    var left = ((width / 2) - (100 / 2)) + dualScreenLeft;
    var top = ((height / 2) - (100 / 2)) + dualScreenTop;
    editPopup.style.left = left + "px";
    editPopup.style.top = top + "px";
}

function initEditPopup(){
    editPopup = document.createElement("div");
    editPopup.style.position = "fixed";

    centerEditPopup();

    editPopup.style.zIndex = 2147483646;
    editPopup.style.backgroundColor = "gray";
    editPopup.style.visibility = "hidden";
    document.body.appendChild(editPopup);

    editPopupImg = document.createElement("img");
    initEditCanvas();
    editPopup.appendChild(editCanvas);

    editBrandImg = document.createElement("img");

    editInfoContainer = document.createElement("p");
    editPopup.appendChild(editInfoContainer);

    editLoad = document.createElement("input");
    editLoad.setAttribute("type", "file");
    editLoad.setAttribute("value", "LOAD BRANDING IMAGE");

    editInfoContainer.appendChild(editLoad);

    editCloseButton = document.createElement("input");
    editCloseButton.setAttribute("type", "button");
    editCloseButton.setAttribute("value", "X");
    editCloseButton.setAttribute("name", "closeEditPopupButton");
    editCloseButton.setAttribute("onclick", "hideEditPopup()");

    editInfoContainer.appendChild(editCloseButton);
}
initEditPopup();

function redrawCanvas(){
    editContext.clearRect ( 0 , 0 , editCanvas.width, editCanvas.height );
    var w = editPopupImg.naturalWidth;
    var h = editPopupImg.naturalHeight;
    editCanvas.width = w;
    editCanvas.height = h;

    firstImg.src = editPopupImg.src;
    editContext.drawImage(firstImg, 0,0, w, h);

    var brandSize = 75;
    var xA = editCanvas.width - brandSize;
    var yA = editCanvas.height - brandSize;
    var xB = brandSize;
    var yB = brandSize;

    setTimeout(function(){ // won't draw otherwise?
    editContext.drawImage(brandImg, xA, yA, xB, yB);
    }
           ,250);
}

editLoad.onchange =
function brandImage(evt) {
    var tgt = evt.target || window.event.srcElement,
        files = tgt.files;

    if (FileReader && files && files.length) {
        var fr = new FileReader();
        fr.onload = function () {
            editBrandImg.src = fr.result;
        brandImg.src = editBrandImg.src;

        redrawCanvas();

        }
        fr.readAsDataURL(files[0]);
    } else { alert("File reader not supported on this browser."); }
}

function hideEditPopup() { editPopup.style.visibility = "hidden"; }

function sEditImage(imgID){
    sImg = document.getElementById("i"+imgID);

    var newImg =  sImg;
    editPopup.style.visibility = "visible";
    editPopupImg = newImg;

    centerEditPopup();
    redrawCanvas();
}

function sTagImages() {
    var imgs = document.getElementsByTagName("img");

    for (var x = 0; x < imgs.length; x++) {
    img = imgs[x];
    img.id = "i"+x;

    mB = document.createElement("input");
    mB.id = x;
    mB.setAttribute("type", "button");
    mB.setAttribute("value", "Semiotic");
    mB.setAttribute("name", "semioticTagButton");
    mB.setAttribute("onclick", "sEditImage(this.id)");
    mB.zIndex = 2147483647;

    var offset = getOffset(img);
    mB.style.position = "absolute";
    mB.style.left = offset.left + "px";
    mB.style.top = (offset.top - 20) + "px";
    mB.style.zIndex = 2147483600;
    document.body.appendChild(mB);
    }
}
sTagImages();

unsafeWindow.sEditImage = sEditImage;
unsafeWindow.hideEditPopup = hideEditPopup;