var myEffects = {
  fade: function(elid) {
    var opacs = ['0','10','20','30','40','50','60','70','80','90','100'];
    if (document.getElementById(elid).style.display == 'none') {
      changeOpac(0, elid);
      document.getElementById(elid).style.display = '';
      for (var i = 0; i < opacs.length; i++) {
        setTimeout('changeOpac(' + opacs[i] + ',"' + elid + '")', i * 40);
      }
    }
    else {
      opacs.reverse();
      for (var i = 0; i < opacs.length; i++) {
        setTimeout('changeOpac(' + opacs[i] + ',"' + elid + '")', i * 40);
      }
      setTimeout('document.getElementById(\''+elid+'\').style.display = "none";', i * 40);
    }
  },
  
  wavy: function(elid) {
    var R = 0;
    wavy = setInterval( function () {
      var letters = getElementsByClassName(document, "span", "wavy");

      var y1 = .07, y2 = 0.75, y3 = 0.24, y4 = 3.0;

      for (var i = 0; i < letters.length; i++) {
        var y = (Math.cos(R*y1 + i*y2 + y3)*y4);

//        letters[i].style.top = y + "px";
        letters[i].style.top = y/100 + "em";
      }
      R++;
    },
    5);

  },

  wavyOff: function(elid) {
    clearInterval(wavy);
    var letters = getElementsByClassName(document, "span", "wavy");
    for (var i = 0; i < letters.length; i++)
      letters[i].style.top = "";
  }

}


// change the opacity for different browsers
// Precondition: opacity is a percentage, id is id of element to change
function changeOpac(opacity, id) {
  var object = document.getElementById(id).style;
  object.opacity = (opacity / 100);
  object.MozOpacity = (opacity / 100);
  object.KhtmlOpacity = (opacity / 100);
  object.filter = "alpha(opacity=" + opacity + ")";
}
