radiaSVG/radia.js

// var R;
function supportsSvg() {
    return !!document.createElementNS && !!document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect;
}


function getNode(nodeKey) {
  var ret = false;
  $('text').each(function() {
    var $this  = $(this);
    if (typeof($(this).data("key")) != 'undefined') {
      if ($this.data("key") == nodeKey) {
        ret = $this;
      }
    }
  });
  return ret;
}

$(function() {
  if (!supportsSvg) {
    $('body').text("Sorry, your browser does not support Scalable Vector Graphics (SVG), which were used to make this page. Please use Firefox 4.0+ or Google Chrome if you wish to see this page. Thanks! Sorry for the trouble...");
    return;
  }
  $(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 highlightCSS = {
      'opacity': "1.0"
//      'fontWeight': 'bold',
//      'backgroundColor': '#ffff00'
    }

    var unhighlightCSS = {
      'opacity': "0.7"
//      'fontWeight': 'normal',
//      'backgroundColor': '#ffffff'
    }

    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).hover(function() {
//        console.log("hovered " + $(this).attr("id"));
        var $this = $(this);
        var id = $this.attr("id");
        if (id.indexOf("box") != -1) {
          return; //FIXME: handle box hovers
        }
        if (RIDS.hasOwnProperty(id)) {
          $this.highlightLine();
//          console.log(id);
          if (LINES.hasOwnProperty(id)) {
            var nodes = LINES[id];
//            console.log(nodes);
            for (var i=0; i<nodes.length; i++) {
//              console.log(nodes[i]);
              var $node = getNode(nodes[i]);
              $node.highlightNode();
            }
          }
        }    
//        console.log($(this).attr("id"));
      }, function() {
        var $this = $(this);
        var id = $this.attr("id");
        if (id.indexOf("box") != -1) {
          return; //FIXME: handle box hovers
        }
        if (RIDS.hasOwnProperty(id)) {
          $this.unhighlightLine();
//          console.log(id);
          if (LINES.hasOwnProperty(id)) {
            var nodes = LINES[id];
//            console.log(nodes);
            for (var i=0; i<nodes.length; i++) {
//              console.log(nodes[i]);
              var $node = getNode(nodes[i]);
              $node.unhighlightNode();
            }
          }
        }    
      });
    });


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

//    $('#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);
        if (key == 'Journalists') {
          J = $this;
        }
//        $this.data("r", thisData);
        $this.data("key", key);
        $this.data("name", thisData.name);
        $this.data("type", thisData.type);
        $this.data("link", thisData.link);
        if (thisData.hasOwnProperty("lines")) {
          $this.data("lines", thisData.lines.split(", "));
        } else {
          $this.data("lines", []);
        }
//        $this.addClass(thisData.type);
//        console.log($this.data("key"));
//        console.log($this.hasTooltip());
        if (!$this.isLegend()) {
          $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;
            }
          });
        } else {
//          console.log(key);
        }
        $texts.push($this);

//        var highlightShadow = '2px 2px 1px #666';
 
        $this.mouseover(function(e) {
          var typ = $(this).data("type");
          if (typ === "") { return }
          for (var i=0; i<$texts.length;i++) {
            var $t = $texts[i];
            if ($t.data("type") == typ) {
              $t.highlightNode();
            }
          }

          var lines = $(this).data("lines");
          if (lines.length > 0) {
            for (var i=0; i<lines.length; i++) {
              var thisLine = lines[i];
              var $line = $('#' + thisLine);
              $line.highlightLine();
            }  
          }
//          $('.' + cls).addClass("highlighted");
//          console.log($('.' + cls).length);
        });

        $this.mouseout(function(e) {
          var typ = $(this).data("type");
          if (typ === '') { return; }
          for (var i=0; i<$texts.length;i++) {
            var $t = $texts[i];
            if ($t.data("type") == typ) {
              $t.unhighlightNode();
            }
          }

          var lines = $(this).data("lines");
          if (lines.length > 0) {
            for (var i=0; i<lines.length; i++) {
              var thisLine = lines[i];
              var $line = $('#' + thisLine);
              $line.unhighlightLine();
            }  
          }
//          $('.' + cls).removeClass("highlighted");
        });

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

function getPostersHTML(padma_ids) {
  if (typeof(padma_ids) === 'undefined') {
    return '';
  }
  var limit = 0; //limit is the no of posters to show minus one
  var html = '';
  for (var i=0; i<padma_ids.length; i++) {
    if (i>limit) { break; }
    var posterLink = "http://pad.ma/" + padma_ids[i] + "/poster.320.png";
    html += "<img src='" + posterLink + "' />";    
  }
  return html;
}


jQuery.fn.isLegend = function() {
  if (typeof(this.data("key")) == 'undefined') {
    return true;
  } 
//  console.log(parseInt(this.attr("x")));
  if (parseInt(this.attr("x")) > 1200) {
    if ($.inArray(this.data("key"), ["Journalists", "Corporates", "Vaishnavi", "Politicians", "Issues", "Mention of,"]) != -1) {
      return true;
    } else {
      return false;
    }
  }
  return false;
}

jQuery.fn.highlightLine= function() {
  this.find('line, polyline, path').css({'stroke': '#000000'});
  this.find('path').css({'strokeDasharray': '0'});
}

jQuery.fn.unhighlightLine = function() {
  this.find('line, polyline, path').css({'stroke': '#666666'});
  this.find("path").css({'strokeDasharray': '4'});
}

jQuery.fn.highlightNode = function() {
  this.css({'opacity': '1.0'});
  if (this.data("type") == 'rivalgroup') {
    this.css({'fontWeight': 'bold'});
  } else {
    var prev = this.prev();
    if (prev.is('rect')) {
      this.prev().css({'fill': '#FAFF3E'});
    }
  }
}

jQuery.fn.unhighlightNode = function() {
  this.css({'opacity': '0.7'});
  if (this.data("type") == 'rivalgroup') {
    this.css({'fontWeight': 'normal'});
  } else {
    var prev = this.prev();
    if (prev.is('rect')) {
      this.prev().css({'fill': '#ffffff'});
    }
  }
}