//javascript for david morrish / deadcat press


//these functions will run when each page loads.
function onloads() {
 hideloading();
 loadpanels();
 shadows();
 tocbookmark();
}


//hides the 'loading' animation.
function hideloading() {
 if (document.getElementById('loading')) {
  document.getElementById('loading').style.display = 'none';
 }
}


/* initalize panels (if there are any).
 * Panels are used to store multiple "pages" in one html file
 * and display them individually using javascript.
 */
function loadpanels() {
 if (document.getElementById && document.getElementsByTagName && document.getElementById('panel1')) {

  //first, determine how many panels there are, and display the first one.
  var panels = []; //declare array.
  var divs = document.getElementsByTagName('div');
  for (var i=0; i<divs.length; i++) {
   var div = divs[i];
   var classes = div.className.split(" ");
   for (var j=0; j<classes.length; j++) {
    thisclass = classes[j];
    if (thisclass == "panel") {
     panels.push(div);
    }
   }
  }
  numberofpanels = panels.length; //this is a global variable and is used in other functions.
  displaypanel(1);
  
  /* initialize thumbnails (if there are any).
   * Thumbnails are used to switch between panels.
   */
  if (document.getElementById('thumb1')) {
   var thumbs = []; //declare array.
   var imgs = document.getElementsByTagName('img');
   for (var i=0; i<imgs.length; i++) {
    var img = imgs[i];
    if (img.className == "thumb") {
     thumbs.push(img);
    }
   }
   numberofthumbs = thumbs.length;
   
   //set up thumbnail events. "this.id.substring(5)" returns just the id number ("1" from "thumb1").
   for(var i=0; i<numberofthumbs; i++){
    thumbs[i].onmouseover = function() {
     displaypanel(this.id.substring(5));
     rememberthumb(this.id.substring(5));
    };
   }
   
   //when the page loads, the first thumbnail should be lit even though it hasn't been moused over yet.
   rememberthumb(1);
  }
  
  
  /* initialize index page table of contents list elements (if applicable).
   * These are used to switch between panels on the index page.
   */
  if (document.getElementById('tocindex') && document.getElementById('tocli1')) {
   var toclis = []; //declare array.
   var lis = document.getElementsByTagName('li');
   for (var i=0; i<lis.length; i++) {
    var li = lis[i];
    if (li.className == "tocli") {
     toclis.push(li);
    }
   }
   numberoftoclis = toclis.length;

   //set up list item events. "this.id.substring(5)" returns just the id number ("1" from "tocli1").
   for(var i=0; i<numberoftoclis; i++){
    toclis[i].onmouseover = function() {
     //only try to display a panel if there is a panel to match the li id.
     //also, even though the "News" link is "tocli1", it shouldn't match "panel1" (the frontispiece)
     if ((this.id != "tocli1") && document.getElementById('panel'+this.id.substring(5))) {
      displaypanel(this.id.substring(5));
      remembertocli(this.id.substring(5));
     } else {
      //if there is no panel to match the list item (like for the "News" and "Biography" links)
      //just display "panel1" (the frontispiece), and do not "remember" the list item.
      displaypanel(1);
      remembertocli(0);
     }
    };
   }
  }
 }
 
 /* initialize expandable lists (used on links page)
 */
 if (document.getElementById('expandable')) {
  //"nodes" is an array of ul items which are children of the ul with id 'expandable'.
  var nodes = document.getElementById('expandable').getElementsByTagName('ul');
  numberofnodes = nodes.length;

  //set up expandable list events.
  for (var i=0; i<numberofnodes; i++) {
   nodes[i].parentNode.onclick = function() {

    //this is the onclick event for each list node
    if (this.getElementsByTagName('a')[0].className == 'links-subheader-selected') {
     this.getElementsByTagName('ul')[0].style.display = 'none';
     this.getElementsByTagName('a')[0].className = 'links-subheader';
    } else {
     var nodes2 = document.getElementById('expandable').getElementsByTagName('ul');
     numberofnodes2 = nodes2.length;
     for (var j=0; j<numberofnodes2; j++) {
      nodes2[j].style.display = 'none';
      //nodes2[j].parentNode.getElementsByTagName('a')[0] is the a tag preceeding the ul node.
      nodes2[j].parentNode.getElementsByTagName('a')[0].className = 'links-subheader';
     }
     this.getElementsByTagName('ul')[0].style.display = 'block';
     this.getElementsByTagName('a')[0].className = 'links-subheader-selected';
    }
   };
  }
  //when the page first loads, the first node should be expanded.
  nodes[0].style.display = 'block';
  nodes[0].parentNode.getElementsByTagName('a')[0].className = 'links-subheader-selected';
 }


  /* initialize second expandable list (so that two expandable lists can appear on a single page)
 */
 if (document.getElementById('expandable2')) {
  //"nodes" is an array of ul items which are children of the ul with id 'expandable'.
  var nodes = document.getElementById('expandable2').getElementsByTagName('ul');
  numberofnodes = nodes.length;

  //set up expandable list events.
  for (var i=0; i<numberofnodes; i++) {
   nodes[i].parentNode.onclick = function() {

    //this is the onclick event for each list node
    if (this.getElementsByTagName('a')[0].className == 'links-subheader-selected') {
     this.getElementsByTagName('ul')[0].style.display = 'none';
     this.getElementsByTagName('a')[0].className = 'links-subheader';
    } else {
     var nodes2 = document.getElementById('expandable2').getElementsByTagName('ul');
     numberofnodes2 = nodes2.length;
     for (var j=0; j<numberofnodes2; j++) {
      nodes2[j].style.display = 'none';
      //nodes2[j].parentNode.getElementsByTagName('a')[0] is the a tag preceeding the ul node.
      nodes2[j].parentNode.getElementsByTagName('a')[0].className = 'links-subheader';
     }
     this.getElementsByTagName('ul')[0].style.display = 'block';
     this.getElementsByTagName('a')[0].className = 'links-subheader-selected';
    }
   };
  }
  //when the page first loads, the first node should be expanded.
  nodes[0].style.display = 'block';
  nodes[0].parentNode.getElementsByTagName('a')[0].className = 'links-subheader-selected';
 }

}



//displays one panel and hides the others; also positions certain panels (vertical centering, etc).
function displaypanel(thisid) {
 panel = document.getElementById('panel'+thisid);
 for (var i=1; i<(numberofpanels+1); i++) {
  document.getElementById('panel'+i).style.display = 'none';
 }
 panel.style.display = 'block';
 panel.style.visibility = 'hidden'; //temporarily hide panel to avoid jumpy movement when vertical-centering happens

 /* vertically center panels classed "vcentered" (this is only used on the index page). */
 var classes = panel.className.split(" ");
 for (var j=0; j<classes.length; j++) {
  thisclass = classes[j];
  if (thisclass == "vcentered") {
   vcenterimage = panel.getElementsByTagName('img')[0];
   vcenterimage.style.top = parseInt((550 - vcenterimage.height) / 2) + "px";
   vcenterimage.style.position = "relative";
  }
 }
 panel.style.visibility = 'visible';

 /* divs with class "doubletext" contain the caption text for images that spread across two pages ("double" layout).
    This caption text should line up with the left side of the image, yet not cross the margin of the page.
    Because the "double" image is centered, the position of the caption text differs for every image.
    This script determines the correct "margin-left" and "width" values for each "doubletext" div.
 */
 var childdivs = panel.getElementsByTagName('div'); //declare array.
 if (childdivs.length > 0) {
  for (var k=0; k<childdivs.length; k++) {
   var childdiv = childdivs[k];
   if (childdiv.className == "doubletext") {
    doubleimagewidth = panel.getElementsByTagName('img')[0].width; // note that ie will return "0" as width for images with display: none
    doubleimagedistance = parseInt((874 - doubleimagewidth) / 2); // 874 is the width of the "double" div as defined in the css file
    childdiv.style.marginLeft = (doubleimagedistance - 4) + "px";
    childdiv.style.width = (420 - doubleimagedistance) + "px";
   }
  }
 }
}


//keeps the last thumbnail moused over "lit", until another is moused over.
function rememberthumb(thisid) {
 for (var i=1; i<(numberofpanels+1); i++) {
  document.getElementById('thumb'+i).className = 'thumb';
 }
 document.getElementById('thumb'+thisid).className = 'thumb-lit';
}


//displays a white arrow graphic next to the selected menu item on the index page.
function remembertocli(thisid) {
 for (var i=1; i<(numberoftoclis+1); i++) {
  document.getElementById('tocli'+i).className = 'tocli';
 }
 if (document.getElementById('tocli'+thisid)) {
  document.getElementById('tocli'+thisid).className = 'tocli-lit';
 }
}






//sets up the drop-down table of contents navigation menu on each page.
function tocbookmark() {
 if (document.getElementById && document.getElementsByTagName && document.getElementById('tocbookmark')) {
  //document.getElementById('toclink').onmouseover = toggletoc; //replaced by "deployer" javascript below
  undeployed = true;
  deployokay = true;
  document.getElementById('toclink').onmouseover = deployer;
  /*
   * note that when setting up only one function, parentheses are not used
   * after the function name ("toggletoc" instead of "toggletoc()")
   *
   * to set up multiple functions:
   * document.getElementById('tocbookmark').onmouseover = function() {
   *  toggletoc();
   *  anotherfunction();
   * }
   *
   */
 }
}

//shows or hides the drop-down table of contents navigation menu
//not being used anymore; replaced by "deployer" javascript below
function toggletoc() {
 document.getElementById('tocbookmark').style.display = (document.getElementById('tocbookmark').style.display == 'none' || document.getElementById('tocbookmark').style.display == '') ? 'block' : 'none';
}

//sliding effect for table of contents menu on gallery pages
function deployer() {
 if (deployokay) {
  if (undeployed) {
   deploy();
  } else {
   undeploy();
  }
 }
}

function deploy() {
 //these variables are repeated in the next function
 var speed = 10; //best way to adjust speed is by changing "i=i+2" below
 var timer = 0;
 var distance = 43; //number of pixels to shift
 var initialleft = 8; //initial "left" value of book as defined in css file
 for (i=initialleft; i<=distance; i=i+2) {
  setTimeout("document.getElementById('book').style.left = " + i + " + 'px';",(timer * speed / 10));
  timer++;
  speed = speed + 5;
 }
 document.getElementById('tocbookmark').style.display = 'block';
 undeployed = false;
}

function undeploy() {
 var speed = 10; //best way to adjust speed is by changing "i=i-2" below
 var timer = 0;
 var distance = 43; //number of pixels to shift
  var initialleft = 8; //initial "left" value of book as defined in css file
 for (i=distance; i>=initialleft; i=i-2) {
  setTimeout("document.getElementById('book').style.left = " + i + " + 'px';",(timer * speed / 10));
  timer++;
  speed = speed + 5;
 }
 document.getElementById('tocbookmark').style.display = 'none';
 undeployed = true;
}



//toggles display style (invisible or not) of an id (used for Archives link on News page).
function togglearchives() {
 document.getElementById('news-archives').style.display = (document.getElementById('news-archives').style.display == 'none' || document.getElementById('news-archives').style.display == '') ? 'block' : 'none';
 document.getElementById('news-archives-link').className = (document.getElementById('news-archives-link').className == 'closed' || document.getElementById('news-archives-link').className == '') ? 'open' : 'closed';
}




//generates e-mail link, hides address from spammers
function mailto(user,domain,linktext){
 address = user + '@' + domain;
 if (linktext == undefined) linktext = address;
 document.write('<a href="mailto:' + address + '">' + linktext + '</a>');
}





/*
generates graphics which create a 'shadow' effect around an image.
To use, set the image to class="shadow"
Note that setting the image's padding or margin with style tags will mess up the shadow placement.

source of shadows javascript:
http://theshapeofdays.com/2005/11/29/my-contribution-to-the-css-shadow-kerfuffle.html
http://theshapeofdays.com/2005/12/02/an-improved-css-shadow-technique.html
*/
function shadows() {
  var imgs = document.getElementsByTagName("img");

  for (var i = 0; i < imgs.length; i++) {
    var thisImg = imgs[i];
    var isShadow = false;
    var extraWidth = 0;

    if (thisImg.className) {

      var classTokens = thisImg.className.split(' ');
      for (var j = 0; j < classTokens.length; j++) {
        var thisToken = classTokens[j];
        if (thisToken == "shadow")
          isShadow = true;
        if (thisToken == "matte")
          extraWidth = 10;
      }

      if (isShadow) {

        var shadowDiv = document.createElement('div');
        shadowDiv.className = 'shadow';
        /* Yes, you can use setAttribute, but this way works in IE too. */

        shadowDiv.style.width = (thisImg.width + extraWidth) + "px";

        shadowDiv.appendChild(thisImg.cloneNode(false));
        /* Img elements can't have children in HTML, so no need for a deep
           clone. That's what the "false" argument means. */

        var topLeft = document.createElement('div');
        topLeft.className = "topleft";
        shadowDiv.appendChild(topLeft);

        var topRight = document.createElement('div');
        topRight.className = "topright";
        shadowDiv.appendChild(topRight);

        var bottomLeft = document.createElement('div');
        bottomLeft.className = "bottomleft";
        shadowDiv.appendChild(bottomLeft);

        var bottomRight = document.createElement('div');
        bottomRight.className = "bottomright";
        shadowDiv.appendChild(bottomRight);

        thisImg.parentNode.replaceChild(shadowDiv, thisImg);

      }
    }
  }
}