title: Raphael - Get ID and name of path
body: <p>I'm building an interactive map using the Raphael library.  As part of the UI functionality, I have several functions that are going to execute on mouseover, mouseout and onclick.  In order to do this, I have to extract out several fields within the Raphael object.</p>
  
  <p>I have a JSON file that is loaded on page load and used by this function to draw the map of the US and counties:</p>
  
  <pre><code>function drawMap(data) {
    map = Raphael(document.getElementById("us_map_container", 555, 352));
  
    var pathCount = data.length;
  
    for (i = 0; i &lt; pathCount; i++) {
      var currentPath = map.path(data[i][2]);
      currentPath.name = data[i][0];
      currentPath.id = data[i][1];
      currentPath.attr({"stroke" : "#FFFFFF", "fill" : "#CBCBCB", "stroke-width" : "0.2"});
      currentPath.mouseover(function(e){countyMouseOver(e)});
      currentPath.mouseout(function(e){countyMouseOut(e)});
    }
  }
  </code></pre>
  
  <p>The data is formatted into over 3000 rows with the formatting</p>
  
  <pre><code>["North Slope, AK", "02185", 
    ["M62", "259L63", "258L64", "257L64", "258L64", "258L64", "258L66", "257L68", "255L70",
     "256L70", "256L69", "257L69", "258L70", "257L70", "256L71", "256L71", "257L72", "257L72",
     "258L73", "257L74", "257L75", "257L76", "257L75", "258L75", "258L76", "258L76",        
     "259L77", "259L78", "258L81", "258L82", "259L83", "259L84", "259L84", "259L85", "259L86", "259L87", 
     "259L89", "259L89", "259L90", "258L90", "258L91", "258L92", "258L96", "259L97", "263L97", 
     "265L88", "267L89", "269L87", "270L82", "271L82", "271L72", "272L69", "272L69", "271L68", 
     "271L68", "271L66", "271L64", "271L63", "271L63", "271L62", "271L62", "271L60", "271L60",
      "271L60", "271L60", "271L59", "271L58", "270L57", "270L57", "271L57", "271L54", "271L54",
      "272L52", "272L51", "271L50", "270L51", "269L51", "267L52", "267L54", "267L55", "267L56", 
     "265L57", "263L58", "261L59", "261L60", "261L61", "260L62", "259"]
  ]
  </code></pre>
  
  <p>Here, the <code>name</code> is the county name and two letter state abbreviation, and id is the FIPS number for that county.  These two fields are index positions 0 and 1 respectively.  The third array is a array of lines making a path to represent a county boundaries.</p>
  
  <p>On a mouseover event, how can I get the element's name and ID from the event object?</p>
  
  <p>So far, I have</p>
  
  <pre><code>function countyMouseOver(e) {
    var hover = e.target;
    var countyName = hover.name;
    $(hover).attr({"stroke" : "#FF0000", "stroke-width" : "1"});
  }
  </code></pre>
  
  <p>The <code>$(hover)</code> allows me to set the line color and thickness upon a mouseover event, but <code>countyName</code> is empty.</p>
  
  <p>When I have a breakpoint in the function above, I can get the <code>raphaelid</code> of the element, which is very different from the FIPS number that is supposed to be the id.  The <code>name</code> field is undefined.</p>