// Short raindrops demo using Raphael (raphaeljs.com)

var drops = [];
var drawingInteval = undefined;
window.onload = function() {
    var drawingElem = document.getElementById('homepage_drawing');
    var paper = Raphael(drawingElem, 320, drawingElem.parentNode.offsetHeight);
    paper.text(paper.width, paper.height - 10.5, 'JS experiment with Raphael').attr({'font-size': '10px', 'font-family': 'Helvetica', 'text-anchor': 'end'});
    function drawAndAnimateDrop() {
        var x = Math.floor(Math.random()*300) + 10;
        var dropPath1 = 'M' + [x, -42] + 's' + [10, 25, 10, 30] + 'a' + [10, 10, 0, 0, 1, -20, 0] + 's' + [10, -25, 10, -30];
        var dropPath2 = 'M' + [x, paper.height] + 's' + [10, 25, 10, 30] + 'a' + [10, 10, 0, 0, 1, -20, 0] + 's' + [10, -25, 10, -30];
        var drop = paper.path(dropPath1).attr({'fill': '#b1d5f2', 'stroke-width': '1px', 'stroke': '#333'}).toBack();
        drop.animate({'path': dropPath2}, 800, '<');
        drops.push(drop);
    }
    function showLink() {
        paper.text(160, paper.height/2, 'Hello');
    }
    drawingInterval = setInterval(drawAndAnimateDrop, 100);
    setTimeout(function() {
        clearInterval(drawingInterval);
        for (var i = 0; i < drops.length; i += 1) {
            drops[i].animate({'opacity': 0}, 500);
        }
        var rect = paper.rect(100.5, paper.height/2 - 20.5, 120, 40, 5).attr({'fill': '#b1d5f2', 'stroke-width': '1px', 'stroke': '#333'});
        var text = paper.text(160.5, paper.height/2 - 0.5, 'raindrops.js').attr({'font-size': '18px', 'font-family': 'Georgia'});
        paper.set(rect, text).attr({'cursor': 'pointer', 'opacity': 0.1}).animate({'opacity': 1}, 1000, '<').click(function() {
            window.location = '/js/raindrops.js';
        });
    }, 3000);
};