openlayers 2 - how to display polygons as points until certain zoom level?

can somebody tell me how to display polygons as points until you zoom to some level. I'm speaking about OpenLayers. So, for example, if the zoom level is less then 10 than it should display feature as a point and when you zoom to 10 or further it should display it as polygon with the shape it really has.

I've tried something like this:

var my_style = new OpenLayers.Style({
'fillColor': '#9900cc',

'fillOpacity': .8,
'strokeColor': '#330066',
'strokeWidth': 1,
'pointRadius': 4
});
var vector_style_map = new OpenLayers.StyleMap({
'default': my_style
});

map.events.register("zoomend", map, function () {

    if (map.getZoom() < 10) {
        console.log("zoom level is less then 10");
        layer.styleMap = vector_style_map;
    }
});

But it just paint my polygon with defined colors, it doesn't change the shape to point. I'm probably missing something obvious but I would appreciate if you could help me. Thanks