OpenLayers WFS zoomToExtent on loadend event

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<body onload="init()">
    answer to stackexchange question zoomToExtent on loadend<div id="map"></div>
</body>

CSS

#map {
    width: 500px;
    height: 600px;
}

JavaScript

var map;
var layer, wms, selectControl;

var HSExtent = new OpenLayers.Bounds("-13885035.931999,2870341.1822503,-7455044.0334896,6338168.0713254");

function init() {
    map = new OpenLayers.Map('map', {
        maxExtent: HSExtent

    });
    osm = new OpenLayers.Layer.OSM();
    var first_time = true;
    layer = new OpenLayers.Layer.Vector("WFS", {

        strategies: [new OpenLayers.Strategy.Fixed()],
        eventListeners: {
            'loadend': function (evt) {

                if (first_time === true) {
                    map.zoomToExtent(HSExtent);
                }
                first_time = false;
                console.log(first_time);
            }
        },
        protocol: new OpenLayers.Protocol.WFS({
            url: "http://geospatial.ga:8080/geoserver/newdata/wfs",
            featureType: "missouri_building",
            featureNS: "http://www.openplans.org/topp"
        })
    });

    map.addLayers([osm, layer]);


    map.setCenter(new OpenLayers.LonLat(0, 0), 6);





}