<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="Random Music Vocabulary"
    thumbnail="http://pages.pianowithraymond.com/vocab_thumb.png"
    screenshot="http://pages.pianowithraymond.com/vocab_screen.png"
    width="280"
    height="200"
    description="This gadget randomly generates a music related term and its definition with each load.  A new word can be displayed by simply clicking 'new word'."
    author="Raymond May Jr." 
    author_email="raymondmay.gadgets@gmail.com"
    author_link="http://www.compender.com"
    > 
    <Require feature="dynamic-height" />
  </ModulePrefs>
  <Content type="html">
<![CDATA[ 
  
  <div id="content_div"></div>

  <script type="text/javascript">
  var itemList;
  var url = "http://pages.pianowithraymond.com-a.googlepages.com/musicterms.xml";
          
  function main() {   
      _IG_FetchXmlContent(url, function (response) {
         if (response == null || typeof(response) != "object" || response.firstChild == null) {
           _gel("content_div").innerHTML = "<i>Invalid data.</i>";
           return;
        }	  
          	
        // Get a list of the <term> element nodes in the file
        itemList = response.getElementsByTagName("term");
        
        //Random word and HTML output are in separate funtions
        //to reduce unneccessary calls to the xml file
        newWord();   		    
        });
  }
  
  function newWord(){
        //Pick Random Node
        var randNode = Math.floor(Math.random()*itemList.length);        
        
        // For our random <term> node, get child nodes.
        var nodeList = itemList.item(randNode).childNodes;
	
        // Loop through child nodes. Extract data from the text nodes.
        for (var j = 0; j < nodeList.length ; j++) {
          var node = nodeList.item(j);
          if (node.nodeName == "word") {
            var word = node.firstChild.nodeValue;
            }
          if (node.nodeName == "definition") {
            var def = node.firstChild.nodeValue;
	    }
        }
        //output html
        writeHTML(word, def);
  }
  
  function writeHTML(w,d){
        // Set the style for the <div>.
	var html = "<div style='font-size: 80%;'>";
        
        html += "<div style='border-bottom:solid 1px;'>";
        html += "Random Music Vocabulary";
        html += "</div>";
        
        html += "<div style='font-size: 175%;padding-top:15px;'>";
        html += w;
        html += "</div>";
        
        html += "<div style='padding-top:2px;'>";
        html += d;
        html += "</div>";
        
        html += "<div style='clear:both;padding-top:15px;border-bottom: dotted 1px;'>";
        html += "</div>";
        
        html += "<div style='float:left;'>";
        html += "<a onclick='newWord();' style='cursor:pointer;'>new word</a>";
        html += "</div>";
        
        html += "<div style='float:right;'>";
        html += "source: <a href='http://en.wikipedia.org/wiki/Music_terms' target='_blank'>wikipedia</a>";
        html += "</div>";
        
        html += "</div>";

	// Display HTML string in <div>
	_gel('content_div').innerHTML = html;
        //dynamic height
        _IG_AdjustIFrameHeight();
  }

  _IG_RegisterOnloadHandler(main);
  </script>

  ]]> 
  </Content>
  </Module>