window.onload = function () {

    buildScene();
}

var w = 720;
var h = 100;

var r = 20;

var tmpx = 10;
var tmpy = 30;
var newx = Math.random() * w;
var newy = Math.random() * h;
var numcirc = 50;
var numrec = 30;

var buildScene = function () {
    var paper = Raphael("canvas",w,h);
    var originX = paper.width/3;
    var originY = paper.height/3;

    var bg = paper.rect(0, 0, w, h);
    bg.attr({fill: "none", stroke: "none"})

        //var sq = paper.rect(20, 50, r, r);

        var circarray = [];
    for (i=0; i < numcirc; i++){

        var circ = paper.circle((Math.random()* 200), originY + (Math.random()*100),  Math.random()*30);
        circ.attr({fill: "#000", id: "i"});
        if(Math.random() < 0.4){
            circ.attr({stroke: "#333"});
        }else{
            circ.attr({stroke: "none"});
        }
    }
        for (i=0; i < numrec; i++){

        var rec = paper.rect(Math.random()*90, originY + (Math.random()*100), Math.random()*600, Math.random()*10);
        rec.attr({fill: "#000", id: "i"});
        if(Math.random() < 0.4){
            rec.attr({stroke: "#333"});
        }else{
            rec.attr({stroke: "none"});
        }
    }

    //var  q = paper.path("M291.82378,446.48593L291.82378,498.49077L348.74982,501.97608L348.74982,456.51694L291.82378,446.48593 z");


    var draw = function () {
        var newx = Math.random() * w;
        // cross.animate({x: newx}, 4000, draw);
        // cross.attr({rotation: 0}).animate({rotation: "360", x: newx}, 5000);
        //circ.animate({cx: newx }, 5000, draw);
    }
    draw();

}