mbasaglia/annoy.html

## annoy.html
<!DOCTYPE html>
<html>
<head>
<title>,</title>
</head>
<body>
<style>

.wrapper
{
    position: relative;
    width: 64px;
    height: 64px;


    border: 1px solid black;
    border-radius: 5px;
    margin: 3em;
}

.annoy
{
    position: absolute;
    left: 0;
    top: 0;
    width: 64px;
    height: 64px;
}

#div1
{
    background-color: red;
}

#div2
{
    background-color: green;
    z-index: -2;
}

#div3
{
    background-color: blue;
}

#div4
{
    background-color: orange;
    z-index: -2;
}

.annoy:first-child:hover
{
    opacity: 0;
}

.wrapper::before,
.wrapper::after {
    border-radius: 10px;
    bottom: -10px;
    content: " ";
    left: -10px;
    position: absolute;
    right: -10px;
    top: -10px;
    z-index: -1;
}
.wrapper::before {
    border: 10px solid white;
}
.wrapper::after {
    border: 1px solid black;
}
</style>
<div class="wrapper">
    <div id="div1" class="annoy"></div>
    <div id="div2" class="annoy"></div>
</div>
<div class="wrapper">
    <div id="div3" class="annoy"></div>
    <div id="div4" class="annoy"></div>
</div>
<script>
function Annoy(element_top, element_bottom)
{
    this.shake_coord = function(amount)
    {
        return (Math.random() * (amount*2) - amount);
    };

    this.move = function(x, y)
    {
        this.element_bottom.style.left = x + "px";
        this.element_bottom.style.top = y + "px";
    };

    this.shake = function()
    {
        if ( this.annoyed )
        {
            if ( this.annoyance <= this.max_annoyance - this.annoyance_step_up )
                this.annoyance += this.annoyance_step_up;
            else
                this.annoyance = this.max_annoyance;
            this.move(this.shake_coord(this.annoyance), this.shake_coord(this.annoyance));
            element_top.style.opacity = 0;
            this.start();
        }
        else
        {
            this.annoyance = 0;
            element_top.style.opacity = 1;
            this.move(0, 0);
        }
    };

    this.start = function()
    {
        window.setTimeout(this.bound_shake, 10);
    };

    this.annoy_event = function(name, value)
    {
        this.element_top.addEventListener(
            name,
            function(event) {
                this.annoyed = value;
                if ( value )
                    this.start();
            }.bind(this),
            false
        );
    };

    this.element_top = element_top;
    this.element_bottom = element_bottom;
    this.max_annoyance = 5;
    this.annoyance = 0;
    this.annoyance_step_up = 0.01;
    this.annoyed = false;
    this.bound_shake = function(){ this.shake(); }.bind(this);

    this.annoy_event("touchstart", true);
    this.annoy_event("touchend",   false);
    this.annoy_event("mouseenter", true);
    this.annoy_event("mouseleave", false);
}

var annoy = new Annoy(document.getElementById("div1"), document.getElementById("div2"));
var annoy2 = new Annoy(document.getElementById("div3"), document.getElementById("div4"));
</script>
</body>
	<!DOCTYPE html>
	<html>
	<head>
	<title>,</title>
	</head>
	<body>
	<style>

	.wrapper
	{
	position: relative;
	width: 64px;
	height: 64px;


	border: 1px solid black;
	border-radius: 5px;
	margin: 3em;
	}

	.annoy
	{
	position: absolute;
	left: 0;
	top: 0;
	width: 64px;
	height: 64px;
	}

	#div1
	{
	background-color: red;
	}

	#div2
	{
	background-color: green;
	z-index: -2;
	}

	#div3
	{
	background-color: blue;
	}

	#div4
	{
	background-color: orange;
	z-index: -2;
	}

	.annoy:first-child:hover
	{
	opacity: 0;
	}

	.wrapper::before,
	.wrapper::after {
	border-radius: 10px;
	bottom: -10px;
	content: " ";
	left: -10px;
	position: absolute;
	right: -10px;
	top: -10px;
	z-index: -1;
	}
	.wrapper::before {
	border: 10px solid white;
	}
	.wrapper::after {
	border: 1px solid black;
	}
	</style>
	<div class="wrapper">
	<div id="div1" class="annoy"></div>
	<div id="div2" class="annoy"></div>
	</div>
	<div class="wrapper">
	<div id="div3" class="annoy"></div>
	<div id="div4" class="annoy"></div>
	</div>
	<script>
	function Annoy(element_top, element_bottom)
	{
	this.shake_coord = function(amount)
	{
	return (Math.random() * (amount*2) - amount);
	};

	this.move = function(x, y)
	{
	this.element_bottom.style.left = x + "px";
	this.element_bottom.style.top = y + "px";
	};

	this.shake = function()
	{
	if ( this.annoyed )
	{
	if ( this.annoyance <= this.max_annoyance - this.annoyance_step_up )
	this.annoyance += this.annoyance_step_up;
	else
	this.annoyance = this.max_annoyance;
	this.move(this.shake_coord(this.annoyance), this.shake_coord(this.annoyance));
	element_top.style.opacity = 0;
	this.start();
	}
	else
	{
	this.annoyance = 0;
	element_top.style.opacity = 1;
	this.move(0, 0);
	}
	};

	this.start = function()
	{
	window.setTimeout(this.bound_shake, 10);
	};

	this.annoy_event = function(name, value)
	{
	this.element_top.addEventListener(
	name,
	function(event) {
	this.annoyed = value;
	if ( value )
	this.start();
	}.bind(this),
	false
	);
	};

	this.element_top = element_top;
	this.element_bottom = element_bottom;
	this.max_annoyance = 5;
	this.annoyance = 0;
	this.annoyance_step_up = 0.01;
	this.annoyed = false;
	this.bound_shake = function(){ this.shake(); }.bind(this);

	this.annoy_event("touchstart", true);
	this.annoy_event("touchend", false);
	this.annoy_event("mouseenter", true);
	this.annoy_event("mouseleave", false);
	}

	var annoy = new Annoy(document.getElementById("div1"), document.getElementById("div2"));
	var annoy2 = new Annoy(document.getElementById("div3"), document.getElementById("div4"));
	</script>
	</body>