radiaSVG/radia.js

// var R;


$(function() {
  $(window).resize(function() {
    var svgAspect = 1220 / 560;
    var windowWidth = $(window).width();
    var svgWidth = windowWidth - 20;
    var svgHeight = parseInt(svgWidth / svgAspect);
    $('svg').attr("width", svgWidth);
    $('svg').attr("height", svgHeight);
  });
  $(window).resize();
  $.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"));
      });
    });


    $('#heartpng').hover(function() {
//      console.log("HEART damnit");
//      $('#rajakani').find('line').css({'stroke': '#ff00ff'});
      $('#loveline').css({'stroke': '#ff00ff'});
      }, function() {
      $('#loveline').css({'stroke': '#000000'});
    });

//    $('#heartpng').click(function() { alert("foo") });

    $('text').each(function() {
      $(this).css({'cursor': 'pointer'});
      var $tspan = $(this).children('tspan').eq(0);
      var key = $.trim($tspan.text());
      if (R.hasOwnProperty(key)) {
        thisData = R[key];
        var $this = $(this);
//        $this.data("r", thisData);
        $this.data("key", key);
        $this.data("name", thisData.name);
        $this.data("type", thisData.type);
        $this.data("link", thisData.link);
//        $this.addClass(thisData.type);
        $this.tooltip({
          'delay': 0,
          'showURL': false,
          'bodyHandler': function() {
            var html = "<div class='ttWrapper'>";
            html += "<div class='tooltipName'>" + $(this).data("name") + "</div>";
            html += "<div class='padmaPosters'>" + getPostersHTML(PADMA[$(this).data("key")]) + "</div>";
            html += "</div>";
            return html;
          }
        });
        $texts.push($this);

        var highlightShadow = '2px 2px 1px #666';
        var highlightCSS = {
          'fontWeight': 'bold',
          'backgroundColor': '#ffff00'
        }

        var unhighlightCSS = {
          'fontWeight': 'normal',
          'backgroundColor': '#ffffff'
        }

        $this.mouseover(function(e) {
          var typ = $(this).data("type");
          for (var i=0; i<$texts.length;i++) {
            var $t = $texts[i];
            if ($t.data("type") == typ) {
              $t.css(highlightCSS);
            }
          }
//          $('.' + cls).addClass("highlighted");
//          console.log($('.' + cls).length);
        });

        $this.mouseout(function(e) {
          var typ = $(this).data("type");
          for (var i=0; i<$texts.length;i++) {
            var $t = $texts[i];
            if ($t.data("type") == typ) {
              $t.css(unhighlightCSS);
            }
          }
//          $('.' + cls).removeClass("highlighted");
        });

        $this.click(function() {
          window.open($(this).data("link"));
//          console.log($(this).data("link"));
        });
      }
    });
  });
});

function getPostersHTML(padma_ids) {
  var limit = 1;
  var html = '';
  for (var i=0; i<padma_ids.length; i++) {
    if (i>limit) { break; }
    var posterLink = "http://pad.ma/" + padma_ids[i] + "/poster.png";
    html += "<img src='" + posterLink + "' />";    
  }
  return html;
}