var zonePolygons;
function drawPolygonsOutline(polygonsArray){
        for (var i = 0; i < polygonsArray.length; i++) {
            var dist_id;
            var fetchedPolygon = polygonsArray[i].coordinates;
            var zone_id = polygonsArray[i].zone_id;
            var name = polygonsArray[i].name;
            if(currentZoom > 17){
                dist_id = polygonsArray[i].district_id;
            }
            coordinates = fetchedPolygon.split(';');
            var tempArray = new google.maps.MVCArray();
            var polygon = {};
            for (var j = 0; j < coordinates.length; j++) {
                cor = coordinates[j].split(',');
                tempArray.push(new google.maps.LatLng(cor[1], cor[0]));
            }
            pol = new google.maps.Polygon({
                paths : tempArray,
                disableAutoPan: true,
                strokeOpacity : 1,
                strokeWeight : 1,
                fillOpacity: 1,
                fillColor: 'white'
            });
            polygon.zone_id = zone_id;
            polygon.name = name;
            polygon.pol = pol;
            if(currentZoom > 7){
                Polygon.district_id = dist_id;
            }
            if(currentZoom <= 7){
                zonePolygons.push(polygon);
            }
            else{
                distPolygons.push(polygon);
            }

        }
        initialize();
    }

    function InflatePloygons(){
        var currentPolygon;
        if(currentZoom <= 7){
            currentPolygons = zonePolygons;
        }
        else{
            currentPolygons = distPolygons;
        }
        for (var i = 0; i < currentPolygons.length; i++) {
            plotPolygonOutlines(currentPolygons[i]);
        };
    }

    function plotPolygonOutlines(polygon){
        polygon.pol.setMap(map);
        var ib = new InfoBox();
        polygon.pol.addListener("mouseover", function(event) {
            var boxText = document.createElement("div");
            boxText.style.cssText = "border: 1px solid #c2c2c2; margin-top: 8px; background:#FFF; padding: 5px;";
            var contentString = '<div id= "content" style="width: 190px;">'+
            '<div id="siteNotice">'+'</div>'+
            '<h2 id="firstHeading" class="firstHeading" style="margin-bottom:0px;">'+
            polygon.name + '</h2>'+
            '</div></div>';
            boxText.innerHTML = contentString;

            var myOptions = {
                 content: boxText
                ,disableAutoPan: true
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(0, 10)
                ,zIndex: null
                ,boxStyle: {
                  //background: "url('tipbox.gif') no-repeat",
                  opacity: 1,
                  width: "200px"
                 }
                ,closeBoxMargin: "10px 2px 2px 2px"
                ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: false
                ,pane: "mapPane"
                ,enableEventPropagation: true
            };
            ib.setOptions(myOptions);
            ib.open(map, event);

        });

        polygon.pol.addListener("mouseout", function(event) {
            ib.close();
        });
    }