<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en">
<head>
    <title>Playing with events</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <style type="text/css">
span{background:#ff9;padding:0 .5em;}
svg {border:1px solid #000;}
    </style>
</head>
<body>
    <div id="test1">
        <h2>Test 1</h2>
        <p>Simple function callbacks.</p>
        <button id="test1_b1">Hello World</button>
        <button id="test1_b2">My name is Yoan</button>
        <span id="test1_l1"></span>
        <span id="test1_l2"></span>
    </div>
    <div id="test2">
        <h2>Test 2</h2>
        <p>Object callbacks</p>
        <button id="test2_b1">How</button>
        <button id="test2_b2">are</button>
        <button id="test2_b3">you</button>
        <button id="test2_b4">buddy?</button>
        <span id="test2_l1"></span>
        <span id="test2_l2"></span>
    </div>
    <div id="test3">
        <h2>Test 3</h2>
        <p>Pub/Sub</p>
        <button id="test3_b1">Using channels</button>
        <button id="test3_b2">is funny and flexible.</button>
        <span id="test3_l1"></span>
        <span id="test3_l2"></span>
    </div>

    <div id="test4">
        <h2>Test 4</h2>
        <p>SVG using channels</p>
        
        <svg id="canvas4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="400" height="400">
        </svg>
    </div>

    <div id="test5">
        <h3>Test 5</h3>
        <p>SVG using events</p>

        <svg id="canvas5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
        </svg>
    </div>

    <div id="test_connect">
        <h3>Dojo-like connect</h3>
        <p>Do you remember Qt?</p>
        <button id="connect_b1">Source</button>
        <span id="connect_l1"></span>
        <span id="connect_l2"></span>
        <span id="connect_l3"></span>
    </div>
    <div id="test_observable">
        <h3>Observable</h3>
        <p>Objective-C KVO</p>
        <input id="observable_i1" />
        <input id="observable_i2" />
        <span id="observable_l1"></span>
    </div>
<script type="text/javascript" charset="utf-8" src="event.js"></script>
<script type="text/javascript" charset="utf-8">
<!--//--><![CDATA[//><!--
// Test 1
var oEvent1 = new event()
    .register(function(sData) {
        document.getElementById("test1_l1").innerHTML = sData;
    })
    .register(function(sData) {
        document.getElementById("test1_l2").innerHTML = sData.bold();
    });

document.getElementById("test1_b1").onclick = function() {
    oEvent1.notify([this.innerHTML]);
};
document.getElementById("test1_b2").onclick = function() {
    oEvent1.notify([this.innerHTML]);
};

// Test 2

var oConfig2_1 = {
    id: "test2_l1",
    format: function(sData) {
        return sData.italics();
    }
};

var oConfig2_2 = {
    id: "test2_l2",
    format: function(sData) {
        return sData.bold();
    }
};

var fCallback = function(sData) {
    document.getElementById(this.id).innerHTML = this.format(sData);
};
var oEvent2 = new event()
    .register(fCallback, oConfig2_1)
    .register(fCallback, oConfig2_2);

document.getElementById("test2_b1").onclick = function() {
    oEvent2.notify([this.innerHTML]);
};
document.getElementById("test2_b2").onclick = function() {
    oEvent2.notify([this.innerHTML]);
};
document.getElementById("test2_b3").onclick = function() {
    oEvent2.notify([this.innerHTML], oConfig2_1);
};
document.getElementById("test2_b4").onclick = function() {
    oEvent2.notify([this.innerHTML], oConfig2_2);
};

// Test 3

var oConfig3_1 = {id: "test3_l1"};
var oConfig3_2 = {id: "test3_l2"};

var oPubsub = new pubsub()
    .subscribe("/test3/a", function(sData) {
        document.getElementById(this.id).innerHTML = sData.italics();  
    }, oConfig3_1)
    .subscribe("/test3/b", function(sData) {
        document.getElementById(this.id).innerHTML = sData.bold();
    }, oConfig3_1)
    .subscribe("/test3/*", function(sData) {
        document.getElementById(this.id).innerHTML = sData.fontcolor("blue");
    }, oConfig3_2);

document.getElementById("test3_b1").onclick = function() {
    oPubsub.publish("/test3/a", [this.innerHTML]);
};
document.getElementById("test3_b2").onclick = function() {
    oPubsub.publish("/test3/b", [this.innerHTML]);
};

// Test 4
var svgns = "http://www.w3.org/2000/svg",
    canvas4 = document.getElementById("canvas4"),
    rect0 = document.createElementNS(svgns, "svg:rect"),
    max = 100,
    size = 10,
    gap = 2;

for(var i=0; i<size; i++) {
    for(var j=0; j<size; j++) {
        (function(i, j) {
            var rect = rect0.cloneNode(false),
                color = "#"+i+j+Math.round((i+j)/2);
            rect.setAttribute("x", i*max/size+(gap/2));
            rect.setAttribute("y", j*max/size+(gap/2));
            rect.setAttribute("width", max/size-gap);
            rect.setAttribute("height", max/size-gap);
            rect.setAttribute("style", "fill:"+color);
            rect.addEventListener("mouseover", function() {
                oPubsub.publish("/svg/row"+i, ["#fff;stroke-width:"+gap+";stroke:white"]);
                oPubsub.publish("/svg/column"+j, ["#fff;stroke-width:"+gap+";stroke:white"]);
            }, false);
            rect.addEventListener("mouseout", function() {
                oPubsub.publish("/svg/row"+i);
                oPubsub.publish("/svg/column"+j);
            }, false);
            oPubsub
                .subscribe("/svg/row"+i, function(data) {
                    data=data||color;
                    rect.setAttribute("style", "fill:"+data);
                })
                .subscribe("/svg/column"+j, function(data) {
                    data=data||color
                    rect.setAttribute("style", "fill:"+data);
                });
            canvas4.appendChild(rect);
        }(i, j));
    }
}

// Test 5

var canvas5 = document.getElementById("canvas5"),
    oEvent5 = new event(),
    clicked = false,
    pos = [];

var circle1 = document.createElementNS(svgns, "svg:circle");
circle1.setAttribute("cx", 200);
circle1.setAttribute("cy", 200);
circle1.setAttribute("r", 20);
circle1.setAttribute("fill", "#00f");

var circle2 = circle1.cloneNode(true);
circle2.setAttribute("cx", 150);
circle2.setAttribute("cy", 150);

var circle3 = circle1.cloneNode(true);
circle3.setAttribute("cx", 250);
circle3.setAttribute("cy", 250);

var circle4 = circle1.cloneNode(true);
circle4.setAttribute("cx", 150);
circle4.setAttribute("cy", 250);
circle4.setAttribute("fill", "#0f0");

var circle5 = circle4.cloneNode(true);
circle5.setAttribute("cx", 250);
circle5.setAttribute("cy", 150);


function onOver(event) {
    event.target.setAttribute("fill", "#ff0");
}

function onOut(event) {
    event.target.setAttribute("fill", "#00f");
}

function onClick(event) {
    clicked = true;
    event.target.setAttribute("fill", "#f00");
    pos = [event.clientX, event.clientY];
}

function onRelease(event) {
    onOver(event);
    clicked = false;
}

function onMove(event) {
    if(clicked) {
        new_pos = [event.clientX, event.clientY];
        oEvent5.notify([new_pos[0]-pos[0], new_pos[1]-pos[1]]);
        pos = new_pos;
    }
}

function translate(dx, dy) {
    var cx = parseInt(this.getAttribute("cx"), 10);
    var cy = parseInt(this.getAttribute("cy"), 10);
    this.setAttribute("cx", cx+dx);
    this.setAttribute("cy", cy+dy);
};

circle1.addEventListener("mouseover", onOver, false);
circle2.addEventListener("mouseover", onOver, false);
circle3.addEventListener("mouseover", onOver, false);
circle1.addEventListener("mouseout", onOut, false);
circle2.addEventListener("mouseout", onOut, false);
circle3.addEventListener("mouseout", onOut, false);
circle1.addEventListener("mousedown", onClick, false);
circle2.addEventListener("mousedown", onClick, false);
circle3.addEventListener("mousedown", onClick, false);
circle1.addEventListener("mouseup", onRelease, false);
circle2.addEventListener("mouseup", onRelease, false);
circle3.addEventListener("mouseup", onRelease, false);
canvas5.addEventListener("mousemove", onMove, false);

oEvent5
    .register(translate, circle1)
    .register(translate, circle2)
    .register(translate, circle3)
    .register(translate, circle4)
    .register(translate, circle5);

canvas5.appendChild(circle1);
canvas5.appendChild(circle2);
canvas5.appendChild(circle3);
canvas5.appendChild(circle4);
canvas5.appendChild(circle5);

// Connect
var connect_button = document.getElementById("connect_b1");
function connectOnClick() {
    document.getElementById("connect_l1").innerHTML = this.innerHTML.bold();
};
var obj = {
    text: "foo",
    connectOnClick2: function() {
        document.getElementById("connect_l2").innerHTML = this.text.italics();
    }
};
function connectOnClick3() {
    document.getElementById("connect_l3").innerHTML = connect_button.innerHTML;
};
connect(connect_button, "onclick", "connectOnClick");
connect(connect_button, "onclick", obj, "connectOnClick2");
connect(connect_button, "onclick", window, "connectOnClick3");

// Observable
var Label = function(value) {
    this.value = value;
}
Label.prototype = new observable();
Label.constructor = Label;

var myLabel = new Label("");

document.getElementById("observable_i1").onkeyup = function() {
    myLabel.set("value", this.value);
}
document.getElementById("observable_i2").onkeyup = function() {
    myLabel.set("value", this.value);
}
myLabel.observe("value", function(value) {
    document.getElementById("observable_i1").value = value;
});
myLabel.observe("value", function(value) {
    document.getElementById("observable_i2").value = value;
});
myLabel.observe("value", function(value) {
    document.getElementById("observable_l1").innerHTML = value;
});
//--><!]]>
</script>
</body>
</html>
