/* version 1.1 */
//constants; canvas width
var w=500;
var h=433;
var ctx;
var triangles=[];
var color1="#f00";
var color2="#0f0";
//triangle object, contains coordinates and color
var Triangle=function(A,B,C,color) {
    this.A=A;
    this.B=B;
    this.C=C;
    this.color=color;
    this.draw();
};
//draws the triangle to the canvas
Triangle.prototype.draw=function() {
    ctx.strokeStyle=this.color;
    ctx.fillStyle=this.color;
    ctx.beginPath();
    ctx.moveTo(this.A[0]-1,433-this.A[1]);
    ctx.lineTo(this.B[0]-1,433-this.B[1]);
    ctx.lineTo(this.C[0]-1,433-this.C[1]);
    ctx.fill();
};
Triangle.prototype.split=function() {
    var A=this.A;
    var B=this.B;
    var C=this.C;
    var currentColor=this.color;
    //finding midpoints of current triangle
    var X=[(B[0]+C[0])/2,(B[1]+C[1])/2];
    var Y=[(C[0]+A[0])/2,(C[1]+A[1])/2];
    var Z=[(A[0]+B[0])/2,(A[1]+B[1])/2];
    //new three triangles
    triangles.push(new Triangle(Z,B,X,currentColor));
    triangles.push(new Triangle(X,C,Y,currentColor));
    triangles.push(new Triangle(Y,A,Z,currentColor));
    //new center triangle
    triangles.push(new Triangle(X,Y,Z,currentColor==color1?color2:color1));
};
//calculates distance between P and Q
d=function(P,Q) {
    var dx2=Math.pow(P[0]-Q[0],2);
    var dy2=Math.pow(P[1]-Q[1],2);
    return Math.sqrt(dx2+dy2);
};
//calculate area of a triangle with sides a,b,c
area=function(a,b,c) {
    var s=(a+b+c)/2;
    return Math.sqrt(s*(s-a)*(s-b)*(s-c));
};
//checks if the given point is inside the given triangle
inTriangle=function(point,triangle) {
    var A=triangle.A;
    var B=triangle.B;
    var C=triangle.C;
    //area ABC
    var a=d(B,C);
    var b=d(C,A);
    var c=d(A,B);
    var x=d(point,A);
    var y=d(point,B);
    var z=d(point,C);
    var eps=1;
    if(Math.abs(area(x,y,c)+area(y,z,a)+area(z,x,b)-area(a,b,c)) > eps)
        return false;
    return true;
};
functions.push(function() {
    var canvas=document.getElementById("sierpinski");
    if(!canvas.getContext)
        return alert("Je browser kan dit niet aan. Pech gehad.");
    ctx=canvas.getContext("2d");
    triangles.push(new Triangle([1,1],[w/2,h],[w,1],color1));
    canvas.onclick=function(e) {
        var mouse=[e.clientX-canvas.offsetLeft,h-e.clientY+canvas.offsetTop];
        for(var i=0,j=triangles.length;i<j;i++) {
            if(!inTriangle(mouse,triangles[i]))
                continue;
            triangles[i].split();
            triangles.splice(i,1);
            return true;
        }
    };
    document.getElementById("red").onclick=function() {
        if(triangles.length > 700 && (!confirm("Je browser zou best wel 's vast kunnen lopen. Wil je dit riskeren?") || !confirm("Echt?")))
            return;
        for(var i=0,j=triangles.length,k=0;i<j;i++) {
            if(triangles[k].color!=color1) {
                k++;
                continue;
            }
            triangles[k].split();
            triangles.splice(k,1);
        }
    };
    document.getElementById("green").onclick=function() {
        if(triangles.length > 700 && (!confirm("Je browser zou best wel 's vast kunnen lopen. Wil je dit riskeren?") || !confirm("Echt?")))
            return;
        for(var i=0,j=triangles.length,k=0;i<j;i++) {
            if(triangles[k].color!=color2) {
                k++;
                continue;
            }
            triangles[k].split();
            triangles.splice(k,1);
        }
    };
    document.getElementById("all").onclick=function() {
        if(triangles.length > 700 && (!confirm("Je browser zou best wel 's vast kunnen lopen. Wil je dit riskeren?") || !confirm("Echt?")))
            return;
        for(var i=0,j=triangles.length;i<j;i++) {
            triangles[0].split();
            triangles.shift();
        }
    };
});