var callback = 
{

  success: function(o) 
  {
    var jsMusicDiv = document.getElementById( 'jsMusic' );
    
    var pElement;
    var pText;
    var aElement;
	 
    if ( ! o.responseXML )
    {
      pElement = document.createElement( 'p' );
      jsMusicDiv.appendChild( pElement );
      
      pText = "sry- there was an error retrieving the remote data; however, you can still ";
      pElement.appendChild( document.createTextNode( pText ) );
	   
      aElement = document.createElement( 'a' );
      pElement.appendChild( aElement );
	   
      aElement.setAttribute( 'href', '/~johns/music/noScript.html' );
      aElement.appendChild( document.createTextNode( 'browse and download' ) );
	   
      pText = ' my music files.'
      pElement.appendChild( document.createTextNode( pText ) );
	 
      return;
    }
	 
    var jsMusicXML = o.responseXML.documentElement;
    var baseUrl = o.responseXML.documentElement.getAttribute( 'baseUrl' );

    var h3Element = document.createElement( 'h3' );
    jsMusicDiv.appendChild( h3Element );
    h3Element.appendChild( document.createTextNode( 'music collections' ) );
    pElement = document.createElement( 'p' );
    jsMusicDiv.appendChild( pElement );
    pText = 'Click on a button to view a collection.';
    pElement.appendChild( document.createTextNode( pText ) );

    var buttonDiv = document.createElement( 'div' );
    buttonDiv.setAttribute( 'id', 'collectionButtons' );
    jsMusicDiv.appendChild( buttonDiv );

    // parse jsMusicXML and append to jsMusicDiv
    var collectionObjs = new Array();
    collectionObjs = jsMusicXML.getElementsByTagName( 'collection' );
    var i;
    for ( i = 0; i < collectionObjs.length; i++ )
    {
	   
      var collectionFileName = collectionObjs[i].getAttribute( 'fileName' );
      var collectionTitle = collectionObjs[i].getAttribute( 'title' );
	   
      // create button
      var navButton = document.createElement( 'button' );
      buttonDiv.appendChild( navButton );
	   
      navButton.setAttribute( 'name', collectionFileName );
	   
      if ( navButton.addEventListener )
      {
        navButton.addEventListener( 'click', callback.displayThis, false );
      }
      else if ( navButton.attachEvent )
      {
        // ie
        var handler = 'callback.display_' + collectionFileName; 
        navButton.attachEvent( 'onclick', eval ( handler ) );
      }

      navButton.appendChild( document.createTextNode( collectionTitle ) ); 
	  
	  
      // div
      var collectionDiv = document.createElement( 'div' );
      jsMusicDiv.appendChild( collectionDiv );
      collectionDiv.setAttribute( 'id', collectionFileName );
	   
      // h4
      var h4Element = document.createElement( 'h4' );
      collectionDiv.appendChild( h4Element );
      h4Element.appendChild( document.createTextNode( collectionTitle ) );
	 
      var descriptionObjs = new Array();
      descriptionObjs = collectionObjs[i].getElementsByTagName( 'description' );
      
      var j;
      for ( j = 0; j < descriptionObjs.length; j++ )
      {
        pElement = document.createElement( 'p' );
        collectionDiv.appendChild ( pElement );
        pElement.appendChild( document.createTextNode( descriptionObjs[j].firstChild.nodeValue ) );
      }
	  
      var workBaseUrl = baseUrl;
      var workUrlRE = eval( '/' + collectionFileName + '$/' );
      if ( ! workUrlRE.test( baseUrl ) )
      {
        workBaseUrl += '/' + collectionFileName;
      }
	   
      // table for each work
      var workObjs = new Array();
      workObjs = collectionObjs[i].getElementsByTagName( 'work' );

      for ( j = 0; j < workObjs.length; j++ )
      {
	     
        var workDiv = document.createElement( 'div' );
        collectionDiv.appendChild( workDiv );
        workDiv.className = 'workDiv';
	     
        var tableElement = document.createElement( 'table' );
        workDiv.appendChild( tableElement );
        tableElement.setAttribute( 'cellpadding', 5 );
        tableElement.className = 'workTable';

        // caption
        var captionElement = document.createElement( 'caption' );
        tableElement.appendChild( captionElement );

        var workTitle = workObjs[j].getAttribute( 'title' );
	     
        if ( ! workTitle )
        {
          workTitle = workObjs[j].getAttribute( 'fileNameStub' );
        }
	     
        var workDate = workObjs[j].getAttribute( 'date' );
        var workUrl = workObjs[j].getAttribute( 'url' );
        var workLicense = workObjs[j].getAttribute( 'license' );
	     
        // for determining different licenses
        asaLicenseRE = /attribution-shareAlike/;
	   
        if ( workUrl )
        {
          aElement = document.createElement( 'a' );
          captionElement.appendChild( aElement );
          aElement.setAttribute( 'href', workUrl );
          aElement.appendChild( document.createTextNode( workTitle ) );

          if ( workDate )
          {
            var dateString = ' [' + workDate + ']';
            captionElement.appendChild( document.createTextNode( dateString ) );
          }
        }
        else
        {
          var titleString = workTitle;
          if ( workDate )
          {
            titleString += ' [' + workDate + ']';
          }

          captionElement.appendChild( document.createTextNode( titleString ) );
        }
	   
        // thead
        var theadElement = document.createElement( 'thead' );
        tableElement.appendChild( theadElement );

        var trElement = document.createElement ( 'tr' );
        theadElement.appendChild( trElement );

        var tableFields = new Array( 'fileName', 'fileSize', 'mimeType' );
        var k;
        var tdElement;
        for ( k = 0; k < tableFields.length; k++ )
        {
          tdElement = document.createElement( 'td' );
          trElement.appendChild( tdElement );
          tdElement.appendChild( document.createTextNode( tableFields[k] ) );
	     
          // MIME type to display differently needs its own class
          if ( tableFields[k] == 'mimeType' )
          {
            tdElement.className = tableFields[k];
          }
        }

	     
        // tbody
        var tbodyElement = document.createElement( 'tbody' );
        tableElement.appendChild( tbodyElement );
	     
        var formatObjs = new Array();
        formatObjs = workObjs[j].getElementsByTagName( 'format' );
	     
        for ( k = 0; k < formatObjs.length; k++ )
        {
          trElement = document.createElement( 'tr' );
          tbodyElement.appendChild( trElement );

          var l;
          for ( l = 0; l < tableFields.length; l++ )
          {
            tdElement = document.createElement( 'td' );
   	    trElement.appendChild( tdElement );
	    var tdText = formatObjs[k].getAttribute( tableFields[l] );
		 
	    if ( tableFields[l] == 'fileName' )
	    {
	      aElement = document.createElement( 'a' );
	      workUrl = workBaseUrl + '/' + tdText;
	      aElement.setAttribute( 'href', workUrl );
	      aElement.appendChild( document.createTextNode( tdText ) );
	      tdElement.appendChild( aElement );
	    }
	    else
	    {
	      tdElement.appendChild( document.createTextNode( tdText ) );
	    }
		 
	    if ( tableFields[l] == 'mimeType' )
	    {
	      tdElement.className = tableFields[l];
	    }
	  }
        }

        pElement = document.createElement( 'p' );
	workDiv.appendChild( pElement );
	pElement.className = 'license';
	     
	// license
	// only print something if not attribution-shareAlike
	if (
	     ( workLicense )
	      &&
	      ( ! asaLicenseRE.test ( workLicense ) )
	   )
	{
	  pElement.appendChild( document.createTextNode( workLicense ) );
	}
	else
	{
	  pElement.innerHTML = '&nbsp;';
	}
      }
    }

    // create button
    var navButton = document.createElement( 'button' );
    buttonDiv.appendChild( navButton );
	   
    navButton.setAttribute( 'name', 'none' );
    if ( navButton.addEventListener )
    {
      navButton.addEventListener( 'click', callback.displayThis, false );
    }
    else if ( navButton.attachEvent )
    {
      navButton.attachEvent( 'onclick', callback.display_none );
    }

    navButton.appendChild( document.createTextNode( 'hide all' ) ); 
  
  },

  failure: function(o) 
  {
    var jsMusicDiv = document.getElementById( 'jsMusic' );
    var pElement = document.createElement( 'p' );
    jsMusicDiv.appendChild( pElement );
	   
    var pText = "sry- there was an error retrieving the remote data; however, you can still ";
    pElement.appendChild( document.createTextNode( pText ) );
	   
    var aElement = document.createElement( 'a' );
    pElement.appendChild( aElement );
	   
    aElement.setAttribute( 'href', '/~johns/music/noScript.html' );
    aElement.appendChild( document.createTextNode( 'browse and download' ) );
	   
    pText = ' my music files.'
    pElement.appendChild( document.createTextNode( pText ) );
  },

  
  displayThis: function()
  {
    var sn = this.getAttribute( 'name' );

    callback.displayOnly( sn );
  },

  // ie requires me to do this
  display_music: function()
  {
    callback.displayOnly( 'music' );
  },

  display_parabola: function()
  {
    callback.displayOnly( 'parabola' );
  },

  display_compMus: function()
  {
    callback.displayOnly( 'compMus' );
  },

  display_bazaar: function()
  {
    callback.displayOnly( 'bazaar' );
  },

  display_oldschool: function()
  {
    callback.displayOnly( 'oldschool' );
  },

  display_none: function()
  {
    callback.displayOnly( 'none' );
  },

  displayOnly: function( selectedName )
  {
  
    var jsMusic = document.getElementById( 'jsMusic' );
    var musicCollections = jsMusic.getElementsByTagName( 'div' );
  
    var i;
    for ( i = 0; i < musicCollections.length; i++ )
    {
      var collId = musicCollections[i].getAttribute( 'id' );
   
      if ( ! collId )
      {
        // skip .workDivs [no id]
        continue;
      }
      else if ( collId == selectedName )
      {
        musicCollections[i].style.display = 'block';
      }
      else
      {
        if ( collId != 'collectionButtons' )
        {
          musicCollections[i].style.display = 'none';
        }
      }
    }
  
    var collectionButtons = document.getElementById( 'collectionButtons' );
    var buttons = collectionButtons.getElementsByTagName( 'button' );
  
    for ( i = 0; i < buttons.length; i++ )
    {
      var buttonName = buttons[i].getAttribute( 'name' );

      if ( buttonName == selectedName )
      {
        buttons[i].disabled = true;
      }
      else
      {
        buttons[i].disabled = false;
      }
    }
  }
}

var connectionObj = YAHOO.util.Connect.asyncRequest ( 'GET', '/~johns/music/jsMusic.xml', callback );