Trollmegle 2.0

by walkerneo

HTML

<div id="trollmegle">
    <p style="cursor:pointer;margin:0;font-size:40px;text-align:center;display:block;">Trollmegle 2.0</p>
    <div class="tabs">
        
        <div class="tab">
            <input type="radio" id="tab-1" name="tab-group-1" checked>
            <label for="tab-1">Main</label>
            
            <div class="content">
                <div class="opt" >CAPS <input id="optCaps" type="checkbox" /></div>
                <div class="opt" >RanDOm CaPS <input id="optRCaps" type="checkbox" /></div>
                <div class="opt" > Imitate stranger <input checked="checked" id="optIm" type="checkbox" /></div>
                <div class="opt" >Flip Text <input id="optFlip" type="checkbox" /></div>
                <div class="opt" > Tell them to stop typing <input id="optStopType" type="checkbox" /></div>
                 <div class="opt" > Legitify imitation <input id="optlegit" checked="checked" type="checkbox" /></div>
                <input onclick="window.flood()" style="padding:5px" type="button" value="flood" />
            </div>
        </div>
        
        <div style="" class="tab">
            <input type="radio" id="tab-2" name="tab-group-1">
            <label for="tab-2">ASCII Art</label>
            
            <div class="content">
                <input style="padding:5px" type="button" onclick="window.omg(window.ascii['trex'])" value="trex" />
                <input style="padding:5px" type="button" onclick="window.omg(window.ascii['stewie'])" value="stewie" />
                <input style="padding:5px" type="button" onclick="window.omg(window.ascii['finger'])" value="middle finger" />
                <input style="padding:5px" type="button" onclick="window.omg(window.ascii['pedobear'])" value="pedobear" />
                <input style="padding:5px" type="button" onclick="window.omg(window.ascii['facepalm'])" value="facepalm" />
                <input style="padding:5px" type="button"...

CSS

#trollmegle{
    z-index:50;
    position:fixed;
    
    background: -webkit-gradient(linear, left top, right bottom, from(#D5E0F2), to(#AEC8F2));
    background: -moz-linear-gradient(top, #D5E0F2, #AEC8F2);
    padding-top:25px;
    border-top-left-radius:45px;
    border-top-right-radius:45px;
    -moz-border-radius-topleft:45px;
    -moz-border-radius-topradius:45px;
}
#trollmegle p{
    color:#2B6BD9;
    font-weight:bold;
}
.tabs { 
    position:relative;
    width:350px;
    min-height: 250px;
    clear: both;
    margin-top: 30px;
}
.tab {
    float: left;
}
.tab label {
    background: -webkit-gradient(linear, left top, left bottom, from(#729FED), to(#4D84E3));
    background: -moz-linear-gradient(top, #729FED, #4D84E3);
    padding: 10px;
    padding-top: 5px;
    padding-bottom:5px;
    border: 1px solid #AEC8F5;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topradius:15px;
    margin-left: -1px;
    position: relative;
    left: 1px;
}
.tab [type=radio] {
    display: none;
}
.content {
    position: absolute;
    top: 23px;
    left: 0;
    background: #8CB6FF;
    background: -webkit-gradient(linear, left top, left bottom, from(#8CB6FF), to(#5996FF));
    background: -moz-linear-gradient(top, #8CB6FF, #5996FF);
    right: 0;
    bottom: 0;
    padding: 20px;
}
[type=radio]:checked ~ label {
    background: -webkit-gradient(linear, left top, left bottom, from(#5996FF), to(#8CB6FF));
    background: -moz-linear-gradient(top, #5996FF, #8CB6FF);
    border-bottom: 1px solid #8CB6FF;
    z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
    z-index: 1;
}
.opt{
    border-radius:5px;
    -moz-border-radius:5px;
    padding:5px;
    margin:3px;
    display:inline-block;
    background:#AEC8F5;
}

JavaScript

window.gid = function(id) {
    return document.getElementById(id);
};
var DragHandler = {


    // private property.
    _oElem: null,


    // public method. Attach drag handler to an element.
    attach: function(oElem) {
        oElem.getElementsByTagName('p')[0].onmousedown = DragHandler._dragBegin;

        // callbacks
        oElem.dragBegin = new Function();
        oElem.drag = new Function();
        oElem.dragEnd = new Function();

        return oElem;
    },


    // private method. Begin drag process.
    _dragBegin: function(e) {
        var oElem = DragHandler._oElem = this.parentNode;

        if (isNaN(parseInt(oElem.style.left))) {
            oElem.style.left = '0px';
        }
        if (isNaN(parseInt(oElem.style.top))) {
            oElem.style.top = '0px';
        }

        var x = parseInt(oElem.style.left);
        var y = parseInt(oElem.style.top);

        e = e ? e : window.event;
        oElem.mouseX = e.clientX;
        oElem.mouseY = e.clientY;

        oElem.dragBegin(oElem, x, y);

        document.onmousemove = DragHandler._drag;
        document.onmouseup = DragHandler._dragEnd;
        return false;
    },


    // private method. Drag (move) element.
    _drag: function(e) {
        var oElem = DragHandler._oElem;

        var x = parseInt(oElem.style.left);
        var y = parseInt(oElem.style.top);

        e = e ? e : window.event;
        oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
        oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';

        oElem.mouseX = e.clientX;
        oElem.mouseY = e.clientY;

        oElem.drag(oElem, x, y);

        return false;
    },


    // private method. Stop drag process.
    _dragEnd: function() {
        var oElem = DragHandler._oElem;

        var x = parseInt(oElem.style.left);
        var y = parseInt(oElem.style.top);

        oElem.dragEnd(oElem, x, y);

        document.onmousemove = null;
        document.onmouseup = null;
        DragHandler._oElem...