OpenLayers WFS featureselected event and featureunselected

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<head>
    <link href='https://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
</head>
<body onload="init()">
     <h3>OpenLayers WFS with selectControl and eventListeners</h3>
    The Popup openes at the last mouseposition, not at the center of the features(default use case)

    <div id="map"></div>
</body>

CSS

html,body {
    width: 100%;
    height: 100%;
        font-family:'Josefin Slab', serif !important;

}
#map {
    width: calc(100% - 20px);
    height: 70%;
    margin-top: 5px !important;
}
/*@import url(https://fonts.googleapis.com/css?family=Josefin+Slab);*/
 .olFramedCloudPopupContent {
    font-family:'Josefin Slab', serif !important;
    font-size:1.1em !important;
}
.olPopupCloseBox {
    background: url("http://i.imgur.com/P3ZHMAK.png") !important;
}
.olControlAttribution {
    font-size:10px !important;
    bottom:0px !important;
    right:auto !important;
    left:0px !important;
}

JavaScript

var map;
var layer, wms, selectControl,lonLat;

function init() {
    map = new OpenLayers.Map('map');
    wms = new OpenLayers.Layer.OSM();

    layer = new OpenLayers.Layer.Vector("WFS", {

        strategies: [new OpenLayers.Strategy.BBOX()],
        protocol: new OpenLayers.Protocol.WFS({
            url: "http://demo.opengeo.org/geoserver/wfs",
            featureType: "ne_10m_lakes",
            featureNS: "http://boundlessgeo.com"
        }),

        eventListeners: {
            'featureselected': function (evt) {

                var feature = evt.feature;
                console.log(evt);
            },
                'featureunselected': function (evt) {
                console.log("feature not selected");
            }
        }
    });

    map.addLayers([wms, layer]);

    mapMousePosition = new OpenLayers.Control.MousePosition({
        displayProjection: new OpenLayers.Projection("EPSG:3857")
    });



    map.setCenter(new OpenLayers.LonLat(3346058.430048, 8840363.8835699)
                  //.    transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:3857"))
                  , 6);

    selectControl = new OpenLayers.Control.SelectFeature(layer, {
        onSelect: onFeatureSelect,
        onUnselect: onFeatureUnselect
    });

    map.addControls([selectControl, mapMousePosition]);
    selectControl.activate();


}



function onPopupClose(evt) {
    selectControl.unselect(selectedFeature);
}

function onFeatureSelect(feature) {
    selectedFeature = feature;

    var last_x = mapMousePosition.lastXy.x;
    var last_y = mapMousePosition.lastXy.y;
    lonLat = map.getLonLatFromPixel(
    new OpenLayers.Pixel(
    last_x,
    last_y));

    var clickinfo=lonLat.clone().transform(new OpenLayers.Projection("EPSG:3857"),new OpenLayers.Projection("EPSG:31468"));
    
    popup = new OpenLayers.Popup.FramedCloud("chicken",
    //    use last mouseposition to open popup instead of...