Leaflet z index (markers and polygons) - leaflet 0.7.7

HTML

<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<body>
<button onclick="bringToFront()">Bring to front</button>
<div id="map" ></div>
</body>

CSS

html, body, #map {
        margin: 0;
        width: 100%;
        height: 100%;
}

JavaScript

//http://stackoverflow.com/questions/12848812/layer-ordering-in-leaflet-js
// WA: http://gis.stackexchange.com/questions/100250/leaflet-geojson-in-front-of-markers-in-a-featuregroup
//     http://jsfiddle.net/53JHg/7/
//     http://bl.ocks.org/jfirebaugh/5380413
//   * https://github.com/Leaflet/Leaflet/issues/1742
//     https://github.com/Leaflet/Leaflet/commit/76f9c7ae7f1ea5f4956eeb487b1ea78d59bf395f
//   * https://github.com/Leaflet/Leaflet/pull/3266
//     https://github.com/Leaflet/Leaflet/issues/1742
//     https://github.com/Leaflet/Leaflet/issues/496
//     http://gis.stackexchange.com/questions/116205/multiple-simultaneous-tilelayers-in-leaflet
//     https://github.com/Leaflet/Leaflet/issues/4

var map = new L.Map('map', {
                center: new L.LatLng(82.22,22.5),
                zoom: 16
            });

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

function createPane(name, zIndex)
{
    var pane = map.createPane(name);
    pane.style.zIndex = zIndex;
    return pane;
}

function createRenderer(paneName)
{
    var renderer = (L.SVG && L.svg()) || (L.Canvas && L.canvas());
    renderer.options.pane = paneName;
    return renderer;
}

var layer1Pane = createPane('layer1-pane', 1000);
var layer1PaneMarkers = createPane('layer1-pane-markers', 1500);
var layer2Pane = createPane('layer2-pane', 2000);
var layer2PaneMarkers = createPane('layer2-pane-markers', 2500);

var polygon1 = L.polygon(
            [[45.5        ,-73.5],
			[45.5 + 0.005,-73.5],
            [45.5 + 0.005,-73.5 + 0.005],
            [45.5        ,-73.5 + 0.005]], 
            {
                fillColor: 'red', 
                fillOpacity: 1, 
                renderer: createRenderer('layer1-pane')
            });

var polygon2 = L.polygon(
            [[45.5 + 0.002,-73.5 + 0.002],
			[45.5 + 0.007,-73.5 + 0.002],
            [45.5 + 0.007,-73.5 + 0.007],
          ...