From cf030b62c79fc15bcd8802974f6757a37e85deea Mon Sep 17 00:00:00 2001
From: Sanj <b@pad.ma>
Date: Sun, 26 Jun 2011 02:49:04 +0530
Subject: [PATCH] added ids to elements, some console.log testing to identify
 elements on mouse-over

---
 index.html | 50 +++++++++++++++++++++++++-------------------------
 radia.js   | 14 ++++++++++++++
 2 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index 8e064ce..6947698 100644
--- a/index.html
+++ b/index.html
@@ -21,19 +21,19 @@
   <text style="fill: #000000;text-anchor:start;font-size:12.8px;font-family:sans-serif;font-style:normal;font-weight:normal" x="570.616" y="237">
     <tspan x="570.616" y="237"></tspan>
   </text>
-  <g>
+  <g id="pbox">
     <rect style="fill: #ffffff" x="737.322" y="437.5" width="113.443" height="35" rx="10" ry="10"/>
     <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke-linejoin: round; stroke: #1c5a1c" x="737.322" y="437.5" width="113.443" height="35" rx="10" ry="10"/>
   </g>
-  <g>
+  <g id="cbox">
     <rect style="fill: #ffffff" x="427.738" y="442.5" width="112" height="35" rx="10" ry="10"/>
     <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke-linejoin: round; stroke: #0000ff" x="427.738" y="442.5" width="112" height="35" rx="10" ry="10"/>
   </g>
-  <g>
+  <g id="jbox">
     <rect style="fill: #ffffff" x="592.766" y="346" width="97" height="36" rx="10" ry="10"/>
     <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke-linejoin: round; stroke: #ff0000" x="592.766" y="346" width="97" height="36" rx="10" ry="10"/>
   </g>
-  <g>
+  <g id="vbox">
     <rect style="fill: #ffffff" x="586.808" y="527.05" width="114.213" height="39.1997" rx="10" ry="10"/>
     <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke-linejoin: round; stroke: #861dc8" x="586.808" y="527.05" width="114.213" height="39.1997" rx="10" ry="10"/>
   </g>
@@ -57,7 +57,7 @@
       <tspan x="254.388" y="427.708">Content</tspan>
     </text>
   </g>
-  <g>
+  <g id="rbox">
     <polygon style="fill: #000000" points="630.388,430.5 641.624,388.53 651.388,430.5 732.616,457.25 681.352,458.29 660.846,480.212 642.33,520.228 623.368,479.504 600.034,458.29 545.588,456.876 "/>
     <polygon style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #861dc8" points="630.388,430.5 641.624,388.53 651.388,430.5 732.616,457.25 681.352,458.29 660.846,480.212 642.33,520.228 623.368,479.504 600.034,458.29 545.588,456.876 "/>
   </g>
@@ -96,7 +96,7 @@
   <text style="fill: #000000;text-anchor:start;font-size:12.8px;font-family:sans-serif;font-style:normal;font-weight:normal" x="640.888" y="319.758">
     <tspan x="640.888" y="319.758"></tspan>
   </text>
-  <g>
+  <g id="rajakani">
     <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 4; stroke: #000000" d="M 792.766,574.431 A 51.1146,51.1146 0 0 0 843.881,625.546"/>
     <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 4; stroke: #000000" x1="792.766" y1="480.972" x2="792.766" y2="574.431"/>
     <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 4; stroke: #000000" d="M 960.834,644.059 A 18.5134,18.5134 0 0 0 942.321,625.546"/>
@@ -105,12 +105,12 @@
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="795.766,484.736 792.766,478.736 789.766,484.736 "/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="956.834,672.146 960.834,680.146 964.834,672.146 "/>
   </g>
-  <g>
+  <g id="rajaspec">
     <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 20 4 4 4 4 4; stroke: #000000" x1="772.778" y1="549.889" x2="568.998" y2="698.861"/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="771.51,554.532 774.583,548.57 767.969,549.689 "/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="570.266,694.218 567.193,700.18 573.807,699.061 "/>
   </g>
-  <g>
+  <g id="dmkcong">
     <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 1021.47,691.044 A 269.538,269.538 0 0 0 990.511,214.791"/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="1023.21,686.581 1019.56,692.21 1026.25,691.752 "/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="997.396,213.332 988.469,213.882 994.265,220.694 "/>
@@ -118,44 +118,44 @@
   <text style="fill: #000000;text-anchor:start;font-size:12.8px;font-family:sans-serif;font-style:normal;font-weight:normal" x="394.618" y="505.25">
     <tspan x="394.618" y="505.25"></tspan>
   </text>
-  <g>
+  <g id="gascorp">
     <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 423.274,459.758 A 135.656,135.656 0 0 0 282.766,603.608"/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="419.311,462.411 425.508,459.842 419.734,456.426 "/>
     <path style="fill: #000000" d="M 282.766 603.608 C 281.768,603.669 280.709,602.732 280.648,601.734 C 280.586,600.736 281.523,599.677 282.522,599.615 C 283.52,599.554 284.579,600.491 284.64,601.49 C 284.701,602.488 283.764,603.547 282.766,603.608z"/>
     <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 282.766 603.608 C 281.768,603.669 280.709,602.732 280.648,601.734 C 280.586,600.736 281.523,599.677 282.522,599.615 C 283.52,599.554 284.579,600.491 284.64,601.49 C 284.701,602.488 283.764,603.547 282.766,603.608"/>
   </g>
-  <g>
+  <g id="journosunil">
     <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 586.458,354.571 A 299.608,299.608 0 0 0 150.82,295.382"/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="151.728,290.634 149.094,296.803 155.61,295.209 "/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="581.888,353.126 587.743,356.401 586.85,349.752 "/>
   </g>
-  <g>
+  <g id="ambajourno">
     <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 598.845,417.931 A 201.885,201.885 0 1 0 216.914,547.116"/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="595.054,415.014 599.446,420.084 600.867,413.528 "/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="210.932,543.395 217.743,549.192 218.294,540.265 "/>
   </g>
-  <g>
+  <g id="tatabox">
     <ellipse style="fill: #fff5e8" cx="296.116" cy="222.75" rx="38.7285" ry="16.5"/>
     <ellipse style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" cx="296.116" cy="222.75" rx="38.7285" ry="16.5"/>
   </g>
-  <g>
+  <g id="relbox">
     <ellipse style="fill: #f5ca9c" cx="318.618" cy="699.25" rx="42" ry="15.5"/>
     <ellipse style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" cx="318.618" cy="699.25" rx="42" ry="15.5"/>
   </g>
-  <g>
+  <g id="conbox">
     <ellipse style="fill: #e8fedc" cx="926.717" cy="213.007" rx="59.6935" ry="21.6242"/>
     <ellipse style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" cx="926.717" cy="213.007" rx="59.6935" ry="21.6242"/>
   </g>
-  <g>
+  <g id="dmkbox">
     <ellipse style="fill: #ffffbe" cx="984.36" cy="693.344" rx="33.2715" ry="15.5"/>
     <ellipse style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" cx="984.36" cy="693.344" rx="33.2715" ry="15.5"/>
   </g>
-  <g>
+  <g id="gasjourno">
     <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 621.067,339.096 A 225.94,225.94 0 0 0 292.409,625.24"/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="616.289,339.379 622.929,340.334 619.708,334.449 "/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="286.198,621.922 293.379,627.255 293.337,618.311 "/>
   </g>
-  <g>
+  <g id="relkids">
     <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 220.823,572.907 A 77.0866,77.0866 0 0 0 268.996,690.689"/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="264.79,693.204 271.178,691.158 265.708,687.274 "/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="220.831,577.866 222.052,571.043 215.861,574.161 "/>
@@ -172,7 +172,7 @@
       <tspan x="511.766" y="268.025">Rashmi</tspan>
     </text>
   </g>
-  <g>
+  <g id="jcong">
     <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 690.898,350.797 A 163.395,163.395 0 0 0 916.715,236.629"/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="919.011,240.904 917.196,234.446 913.119,239.773 "/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="697.797,349.723 688.854,349.89 694.354,356.944 "/>
@@ -195,7 +195,7 @@
       <tspan x="934.762" y="619.975">Kanimozhi</tspan>
     </text>
   </g>
-  <g>
+  <g id="nitav">
     <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 453.27,581.608 A 98.9704,98.9704 0 0 0 641.339,571.594"/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="457.21,584.27 452.47,579.522 451.516,586.162 "/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="643.566,575.936 641.912,569.435 637.704,574.659 "/>
@@ -242,7 +242,7 @@
       <tspan x="310.254" y="562.2">K.R. Raja</tspan>
     </text>
   </g>
-  <image x="806.388" y="630.25" width="25" height="25" xlink:href="black_heart.png"/>
+  <image id="heartpng" x="806.388" y="630.25" width="25" height="25" xlink:href="black_heart.png"/>
   <text style="fill: #0000ff;text-anchor:middle;font-size:16.1883px;font-family:sans-serif;font-style:normal;font-weight:normal" x="296.116" y="228.35">
     <tspan x="296.116" y="228.35">TATA</tspan>
   </text>
@@ -292,7 +292,7 @@
       <tspan x="304.388" y="199.275">Ratan Tata</tspan>
     </text>
   </g>
-  <g>
+  <g id="airline">
     <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 344.752 190.221 C 551,85.25 642,309.25 731.764,264.495"/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="346.745,185.841 342.759,191.236 349.467,191.188 "/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="729.734,268.86 733.765,263.498 727.057,263.49 "/>
@@ -321,7 +321,7 @@
       <tspan x="598.388" y="217.1">Upender</tspan>
     </text>
   </g>
-  <g>
+  <g id="gasvir">
     <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 814.206,336.902 A 232.68,232.68 0 0 0 571.388,315.25"/>
     <path style="fill: #000000" d="M 571.388 315.25 C 570.942,314.355 571.391,313.014 572.286,312.568 C 573.181,312.122 574.522,312.571 574.968,313.465 C 575.414,314.36 574.965,315.702 574.07,316.148 C 573.175,316.594 571.834,316.145 571.388,315.25z"/>
     <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 571.388 315.25 C 570.942,314.355 571.391,313.014 572.286,312.568 C 573.181,312.122 574.522,312.571 574.968,313.465 C 575.414,314.36 574.965,315.702 574.07,316.148 C 573.175,316.594 571.834,316.145 571.388,315.25"/>
@@ -346,7 +346,7 @@
   <text style="fill: #ab730c;text-anchor:middle;font-size:13.5467px;font-family:sans-serif;font-style:normal;font-weight:normal" x="440.388" y="693.2">
     <tspan x="440.388" y="693.2">Iron Ore</tspan>
   </text>
-  <path style="fill: none; fill-opacity:0; stroke-width: 1.8; stroke-dasharray: 20 8 4 8; stroke: #000000" d="M 788.766 551.5 C 763,594.25 806,698.25 926,627.25"/>
+  <path id="loveline" style="fill: none; fill-opacity:0; stroke-width: 1.8; stroke-dasharray: 20 8 4 8; stroke: #000000" d="M 788.766 551.5 C 763,594.25 806,698.25 926,627.25"/>
   <g>
     <rect style="fill: #ffffff" x="376.491" y="228" width="110.55" height="13"/>
     <text style="fill: #0000ff;text-anchor:middle;font-size:11.1083px;font-family:sans-serif;font-style:normal;font-weight:normal" x="431.766" y="238.35">
@@ -359,7 +359,7 @@
       <tspan x="1016.93" y="649.071">Rajathi Ammal</tspan>
     </text>
   </g>
-  <g>
+  <g id="polcab">
     <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 831.737,479.512 A 119.185,119.185 0 0 0 1050.39,463.753"/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="835.976,481.686 830.714,477.525 830.543,484.231 "/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="1052.25,468.252 1051.12,461.64 1046.51,466.513 "/>
@@ -382,7 +382,7 @@
       <tspan x="898.766" y="540.225">R.K.Chandolia</tspan>
     </text>
   </g>
-  <g>
+  <g id="paakani">
     <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 973.078,615.242 A 51.9744,51.9744 0 0 0 989.766,542.858"/>
     <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="975.209,611.042 971.176,616.403 977.885,616.412 "/>
   </g>
diff --git a/radia.js b/radia.js
index 879b96e..e801a00 100644
--- a/radia.js
+++ b/radia.js
@@ -14,6 +14,20 @@ $(function() {
   $.getJSON("radia.json", {}, function(data) {
     var R = data;
     var $texts = [];
+    $('g').each(function() {
+ //     console.log("hi");
+      if (typeof($(this).attr("id")) === 'undefined') {
+        return;
+      }
+
+      $(this).click(function() {
+        console.log($(this).attr("id"));
+      });
+      $(this).mouseover(function() {
+        console.log($(this).attr("id"));
+      });
+    });
+
     $('text').each(function() {
       $(this).css({'cursor': 'pointer'});
       var $tspan = $(this).children('tspan').eq(0);