<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
    <script src="firebase_sdk.js"></script>

</head>
<body>
  <div class="lunches"></div>
<script>
    $(function(){
        var lunchName = getParameterByName("lunch");
        if (lunchName && lunchName != "") {
            console.log("lunch: ["+lunchName+"]");

            model.addLaunch(lunchName, 0, 0, 19);
        }

        var joinLunchRecord = getParameterByName("join");
        if (joinLunchRecord && joinLunchRecord != "") {
            console.log("join: ["+joinLunchRecord+"]");

            var lunch_id = joinLunchRecord.split("|")[0];
            var driver_id = joinLunchRecord.split("|")[1];
            model.joinLaunch(lunch_id, driver_id);
        }
    });

    model.onLaunchChange(function(snapshot){
        console.log("event triggered");
        var lunches = snapshot.val();

        var container = $(".lunches");
        container.text("");
        $.each(lunches, function(id, data) {
            var participants = [];
            $.each(data, function(id, text){
                participants.push(id);
            });
            console.log(participants);
            container.append("<div>" + id + " - " + participants + "</div>");
            container.append("<br>");
        });

    });
</script>
</body>
</html>