pigey.js source code

$(function() {
  clear();

  // Obtained from https://jsfiddle.net/9atsffau/ with some modifications for browser detection.
  var browserName = ["Opera","Firefox","Safari","Internet Explorer","Edge","Chrome"];
  var browserFound = [];
  // Opera 8.0+
  browserFound[0] = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
  // Firefox 1.0+
  browserFound[1] = typeof InstallTrigger !== 'undefined';
  // At least Safari 3+: "[object HTMLElementConstructor]"
  browserFound[2]= Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
  // Internet Explorer 6-11
  browserFound[3] = /*@cc_on!@*/false || !!document.documentMode;
  // Edge 20+
  browserFound[4] = !browserFound[3] && !!window.StyleMedia;
  // Chrome 1+
  browserFound[5] = !!window.chrome && !!window.chrome.webstore;
  var browsers = false;
  var warning1 = "Warning: You are using ";
  var warning2 = "  which may not work correctly with SVG animation - try Firefox, Opera or Google Chrome.";
  for (var i=0; i<6; i++) {
    if (browserFound[i]) {
      if (i == 2 || i == 3 || i == 4 || i == 6)
        $("#browser").html(warning1 + browserName[i] + warning2).css("color","red");
      browsers = true;
    }
  }
  if (!browsers)
    $("#browser").text(warning1 + "an unidentified browser" + warning2).css("color","red");
	
  var cancerData;           // Stores the cancer data read in from the JSON file.
  var strColor = "#000000"; // Sets the default stroke color to black.
  var altColor = "#777777";	// If a neighboring color is the same as the stroke color, use an alternative color.
	
  $.getJSON("json/ribbons.json", function (data) {
    cancerData = data;
    var len = data.cancers.length;
     for (var i=0; i<len; i++) { // Loop through all the entries in the JSON file inserting in a list.
      // Store the colors, but if the 3rd is undefined set colors[2] to 0.
      var colors =[data.cancers[i].colors[0], data.cancers[i].colors[1], 0];
      if (typeof data.cancers[i].colors[2] !== "undefined") colors[2] = data.cancers[i].colors[2];
      $("#radio").append("<li>" + 
        "<span class='blsp' id='spana" + i + "'>&nbsp; &nbsp;</span>" +	// Reserve space for 1st color.
        "<span class='blsp' id='spanb" + i + "'>&nbsp; &nbsp;</span>" +	// Reserve space for 2nd color.
        "<span class='blsp' id='spanc" + i + "'>&nbsp; &nbsp;</span>" +	// Reserve space for any 3rd color.
        "<input type='radio' name='cancer' />" + data.cancers[i].name +	// Add radio button with cancer name.
        "</li>");
      $("#spana" + i).css("background-color",colors[0]);          // Add 1st color.
      if (colors[0] === "#ffffff")                                // If it's white add black borders
        $("#spana" + i).addClass("white-right");                  // except for white right border.
      else
        $("#spana" + i).css("border",colors[0] + " solid 1px");   // Otherwise borders are 1st color as fill.
      $("#spanb" + i).css("background-color",colors[1]);          // Add 2nd color.
      if (colors[1] === "#ffffff") {                              // If it's white and the 3rd color isn't
        if (colors[2] === 0)                                      // defined, add black borders except for
          $("#spanb" + i).addClass("white-left");                 // except for white left border.
        else
         $("#spanb" + i).addClass("white-leftright");             // Otherwise if the 3rd color is defined,
      } else                                                      // left and right borders are both white.
        $("#spanb" + i).css("border",colors[1] + " solid 1px");   // Otherwise borders are 2nd color as fill.
      if (colors[2] !== 0) {
        $("#spanc" + i).css("background-color",colors[2]);        // Add 3rd color if it's defined.
        if (colors[2] === "#ffffff")                              // If it's white, add black borders
          $("#spanc" + i).addClass("white-left");                 // except for white left border.
        else
          $("#spanc" + i).css("border",colors[2] + " solid 1px"); // Otherwise borders are 3rd color as fill.
      } else 
        $("#spanc" + i).addClass("white-all");                    // Otherwise there's no 3rd color so add all white borders.
    }
  });

  $(".text-over-graphics").click(function() {  // This is executed when a radio button is selected.
    var index = $("input:radio[name=cancer]:checked").index(":radio[name='cancer']");
    if (index < 0)
      return;
    $("#pigeycoo").trigger("load");                 // Load the pigeon sound file when a selection is made, then fast
    $("#pigeycoo").prop("currentTime",$("#pigeycoo").prop("currentTime")+0.5); // forward 0.5 sec. to skip the starting,
    $("#pigeycoo").trigger("play");                 // silence, then when the time exceeds 5.3 sec. pause the sound, otherwise
    $("#pigeycoo").bind("timeupdate",function() {   // it plays for about 30 seconds.  This code is based on the links:
      if (this.currentTime > 5.3)                   // http://codesamplez.com/programming/control-html5-audio-with-jquery and
        $("#pigeycoo").trigger("pause");            // https://sankartypo3.wordpress.com/2012/11/17/
    });                                             // javascriptjquery-to-control-html5-audio-elements/
    var color = [cancerData.cancers[index].colors[0],
                 cancerData.cancers[index].colors[1],
                 cancerData.cancers[index].colors[2]];
    if (typeof color[2] === "undefined")            // Always at least 2 colors are given even if they
      color[2] = color[1];                          // are the same, but account for possibly 3 colors.
    if (color[0] === strColor)                      // Fill outer bow color and its edges.  Here and below if a fill color
      $(".clr0").attr("fill",color[0]).attr("stroke",altColor); // is black, use the alterantive color for the edges.
    else
      $(".clr0").attr("fill",color[0]).attr("stroke",strColor);
    if (color[0] === strColor || color[1] === strColor) // Fill inner bow color its edges.
      $(".clr1").attr("fill",color[1]).attr("stroke",altColor);
    else
      $(".clr1").attr("fill",color[1]).attr("stroke",strColor);
    if (color[1] === strColor || color[2] === strColor) // Fill fasterner color and its edge.
      $(".clr2").attr("fill",color[2]).attr("stroke",altColor);
    else
      $(".clr2").attr("fill",color[2]).attr("stroke",strColor);
    $(".clr2a").attr("fill",color[2]);
    $("#cancer-name").text(cancerData.cancers[index].name);
    $("#color-names").text(cancerData.cancers[index].comments);
    $(this).addClass("hidden");
    $("#svg-pigey").removeClass("hidden");          // Remove the hidden class so the SVG code is rendered.
    $("#right-eye")[0].beginElement();              // Blink right pigeon eye.
    $("#left-eye")[0].beginElement();               // Blink left pigeon eye.
    $("#opacity")[0].beginElement();                // Increase the opacity at the top of the ribbon.
    $("#move-bow")[0].beginElement();               // Start the bow move animation.
    $("#spin-bow")[0].beginElement();               // Start the bow spin animation.
    $("#move-ribbon")[0].beginElement();            // Start the ribbon move animation.
    $("#scale-ribbon")[0].beginElement();           // Scale down the ribbon in size.
    $("#curve-right")[0].beginElement();            // Start curving the right ribbon.
    $("#curve-left")[0].beginElement();             // Start curving the left ribbon.
    $("#show-ribbon-stat").attr("class","hidden");  // Hide static image in browsers that support this
    $("#show-ribbon-anim").attr("class","");        // Render animated image in browsers that support this
  });

  $("#reset").click(function() { // Reset button is clicked.
    location.reload();
  });

  function clear() {	// Reset everything to default.
    $("input:radio[name=cancer]").attr("checked",false);
    $("#svg-pigie").addClass("hidden");
    $(".text-over-graphics").removeClass("hidden");
    $("#cancer-name").text("");
    $("#color-names").text("");
  }
});