mobeets/index.html

## index.html
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Animated Variants v.1.1</title>
    <script src="styles.css"></script>
    <script src="readings.js"></script>
</head>
<body onload="getReadings()">

    <sp>
          Oh that this too too
          <app id="app0">
                 <lem></lem>
                 <rdg>sallied inside me thinking</rdg>
                 <rdg>solid and happy thinking</rdg>
          </app>
          flesh would melt,<br>
          Thaw, and resolve itself into a dew.<br>
          Thou hast it all -- King, Cawdor, Glamis, all<br>
          As the
          <app id="app1">
              <lem>weird</lem>
              <rdg>wayward yes<br> I am happy you see</rdg>
              <rdg>weyard</rdg>
          </app>
          women promised, and I fear<br>
          Thou playd'st most foully for it.
    </sp>
    <br><br>
    Version of <a href="http://individual.utoronto.ca/alangaley/visualizingvariation/"><i>Alen Galey's Animated Variants</i></a>. Ignores HTML tags.

</body>
</html>

## readings.js
/* LICENSE INFORMATION

Design and programming by Alan Galey, 4 April 2012 (alan.galey.vv@gmail.com)
Unless otherwise noted, all code licensed under Creative Commons Attribution-ShareAlike License v3.0
http://creativecommons.org/licenses/by-sa/3.0/
When reusing or adapting this code, please credit me by name and include the project link: http://individual.utoronto.ca/alangaley/visualizingvariation/

*/

// * * * USER PARAMETERS (values in milliseconds)
var letterChangeRate = 100;
var variantChangeInterval = 3000;
// * * *

var intervals = new Array();
var readings = new Array();

function readingArray() {
    this.variants = new Array();
    this.activeVariantIndex = 1;
}

function getReadings() {
//NOTE: to test individual app elements in a document, comment out the for loop just below, and manually enter the id's of the app elements you want
//to test into the readings array declaration above, ex: var readings = new Array("app.0","app.1");

   for (t=0; t < document.getElementsByTagName("app").length; t++) {
        readings.push(document.getElementsByTagName("app").item(t).id);
   }

   for (t=0; t < readings.length; t++) {
        readings[readings[t]] = new readingArray();
        theApp = document.getElementById(readings[t]);
        for (u=0; u < theApp.children.length; u++) {
            txt = theApp.children.item(u).textContent;
            readings[readings[t]].variants.push(txt);    //assumes only text within rdg elements
        }
        intervals[readings[t]] = window.setInterval("cycleVariants('" + readings[t] + "')",letterChangeRate);
    }
}

function cycleVariants(targetId, restart) {
    targetText = document.getElementById(targetId).children.item(0).innerHTML;
    variantText = readings[targetId].variants[readings[targetId].activeVariantIndex];

    var c = 0;
    var t = targetText.charAt(c);
    var v = variantText.charAt(c);
    while (t == v && c< targetText.length && c < variantText.length) {
        c++;
        var t = targetText.charAt(c);
        var v = variantText.charAt(c);
    }
    if (t != v) {
        document.getElementById(targetId).children.item(0).innerHTML = targetText.slice(0,c) + v + targetText.slice(c+1,targetText.length);
    }
    if (targetText == variantText) {
        readings[targetId].activeVariantIndex++;
        if (readings[targetId].activeVariantIndex >= readings[targetId].variants.length) {
            readings[targetId].activeVariantIndex = 0;
        }
        window.clearInterval(intervals[targetId]);
        window.setTimeout("intervals['" + targetId + "'] = window.setInterval('cycleVariants(\"" + targetId + "\")'," + letterChangeRate + ")",variantChangeInterval);
    }
}

## styles.css
sp {
  display: block;
  margin: 3em;
}

rdg {
  display: none;
}
	<?xml version="1.0" encoding="UTF-8"?>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Animated Variants v.1.1</title>
	<script src="styles.css"></script>
	<script src="readings.js"></script>
	</head>
	<body onload="getReadings()">

	<sp>
	Oh that this too too
	<app id="app0">
	<lem></lem>
	<rdg>sallied inside me thinking</rdg>
	<rdg>solid and happy thinking</rdg>
	</app>
	flesh would melt,<br>
	Thaw, and resolve itself into a dew.<br>
	Thou hast it all -- King, Cawdor, Glamis, all<br>
	As the
	<app id="app1">
	<lem>weird</lem>
	<rdg>wayward yes<br> I am happy you see</rdg>
	<rdg>weyard</rdg>
	</app>
	women promised, and I fear<br>
	Thou playd'st most foully for it.
	</sp>
	<br><br>
	Version of <a href="http://individual.utoronto.ca/alangaley/visualizingvariation/"><i>Alen Galey's Animated Variants</i></a>. Ignores HTML tags.

	</body>
	</html>
	/* LICENSE INFORMATION

	Design and programming by Alan Galey, 4 April 2012 (alan.galey.vv@gmail.com)
	Unless otherwise noted, all code licensed under Creative Commons Attribution-ShareAlike License v3.0
	http://creativecommons.org/licenses/by-sa/3.0/
	When reusing or adapting this code, please credit me by name and include the project link: http://individual.utoronto.ca/alangaley/visualizingvariation/

	*/

	// * * * USER PARAMETERS (values in milliseconds)
	var letterChangeRate = 100;
	var variantChangeInterval = 3000;
	// * * *

	var intervals = new Array();
	var readings = new Array();

	function readingArray() {
	this.variants = new Array();
	this.activeVariantIndex = 1;
	}

	function getReadings() {
	//NOTE: to test individual app elements in a document, comment out the for loop just below, and manually enter the id's of the app elements you want
	//to test into the readings array declaration above, ex: var readings = new Array("app.0","app.1");

	for (t=0; t < document.getElementsByTagName("app").length; t++) {
	readings.push(document.getElementsByTagName("app").item(t).id);
	}

	for (t=0; t < readings.length; t++) {
	readings[readings[t]] = new readingArray();
	theApp = document.getElementById(readings[t]);
	for (u=0; u < theApp.children.length; u++) {
	txt = theApp.children.item(u).textContent;
	readings[readings[t]].variants.push(txt); //assumes only text within rdg elements
	}
	intervals[readings[t]] = window.setInterval("cycleVariants('" + readings[t] + "')",letterChangeRate);
	}
	}

	function cycleVariants(targetId, restart) {
	targetText = document.getElementById(targetId).children.item(0).innerHTML;
	variantText = readings[targetId].variants[readings[targetId].activeVariantIndex];

	var c = 0;
	var t = targetText.charAt(c);
	var v = variantText.charAt(c);
	while (t == v && c< targetText.length && c < variantText.length) {
	c++;
	var t = targetText.charAt(c);
	var v = variantText.charAt(c);
	}
	if (t != v) {
	document.getElementById(targetId).children.item(0).innerHTML = targetText.slice(0,c) + v + targetText.slice(c+1,targetText.length);
	}
	if (targetText == variantText) {
	readings[targetId].activeVariantIndex++;
	if (readings[targetId].activeVariantIndex >= readings[targetId].variants.length) {
	readings[targetId].activeVariantIndex = 0;
	}
	window.clearInterval(intervals[targetId]);
	window.setTimeout("intervals['" + targetId + "'] = window.setInterval('cycleVariants(\"" + targetId + "\")'," + letterChangeRate + ")",variantChangeInterval);
	}
	}