title: All my code is being overwritten by the last section
body: <p>We have a map which uses polygons to create overlays on top of countries. When a user hovers over a country the polygons change color.</p>
  
  <p>When the mouse leave the country it changes back (or at least we want it to)</p>
  
  <p>Us the code below what happens is that that both countries access the settings for JUST the last section of code. It seems all other code is overwritten.</p>
  
  <p>I don't know which variable to make unique.</p>
  
  <pre><code>for(var i = 0; i &lt; germany.length; i++){
      addListener( germany[ i ], germany );
      }
  function addListener( germany_item, tweened )
  {   
      google.maps.event.addListener(germany_item, "mouseover",function() {
                      for( var i in tweened ) 
          tweened[ i ].setOptions({ fillColor: "#DD732B", strokeColor: "#DD732B" });
      });
      google.maps.event.addListener(germany_item, "mouseout",function() {
                      for( var i in tweened ) 
          tweened[ i ].setOptions({ fillColor: "#5EA9BD", strokeColor: "#5EA9BD" });
      });
  }//
  for(var i = 0; i &lt; france.length; i++){
      addListener( france[ i ], france );
      }
  function addListener( france_item, tweened )
  {   
      google.maps.event.addListener(france_item, "mouseover",function() {
                      for( var i in tweened ) 
          tweened[ i ].setOptions({ fillColor: "#DD732B", strokeColor: "#DD732B" });
          });
      google.maps.event.addListener(france_item, "mouseout",function() {    
                      for( var i in tweened ) 
              tweened[ i ].setOptions({ fillColor: "#006886", strokeColor: "#006886" });
          });
  </code></pre>