// javascript for Martina Lantin

// these functions will run when each page loads.
function onloads() {
 hideloading();
 loadmenu();
 loadpanels();
 if (document.getElementById('slideshow')) {startslides();}
}



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



/* initalize navigation menu sub-menus (if applicable).
 */
function loadmenu() {
 if (document.getElementById && document.getElementsByTagName && document.getElementById('menu')) {
  // create an array containing all top-level menu items
  mainmenus = []; // declare array.
  allmenulis = document.getElementById('menu').getElementsByTagName('li');
  for (var i=0; i<allmenulis.length; i++) {
   menuli = allmenulis[i];
   if (menuli.id) {
    mainmenus.push(menuli);
   }
  }
  // mousing over each top-level menu item hides any submenus
  for (var i=0; i<mainmenus.length; i++) {
   mainmenus[i].onmouseover = function() {
    displaysubmenu(0);
   };
  }
  
  // create an array containing second-level menu items / submenus
  submenus = document.getElementById('menu').getElementsByTagName('ul');
  // for each submenu, create an onmouseover event in its parent list item
  for (var i=0; i<submenus.length; i++) {
   submenu = submenus[i];
   parentli = submenu.id.substring(0,submenu.id.length-4); // subtract "-sub" from the id to get the parent id
   document.getElementById(parentli).onmouseover = function() {
    displaysubmenu(this.id+'-sub');
   };
   document.getElementById(submenu.id).onmouseout = function() {
    displaysubmenu(0);
   };
  }
  
  // clear submenu when mouseover on 'head' image; this helps keep menu from hanging open.
  document.getElementById('head').onmouseover = function() {
   displaysubmenu(0);
  }
 }
}



// initalize panels and thumbnails.
function loadpanels() {
 if (document.getElementById('portfolio')) {

  // initialize panels, which are used to display different groups of content on the same page.
  var panels = []; // declare array.
  var divs = document.getElementsByTagName('div'); // check all divs...
  for (var i=0; i<divs.length; i++) {
   var div = divs[i];
   var classes = div.className.split(" "); // ...check for multiple classes...
   for (var j=0; j<classes.length; j++) {
    thisclass = classes[j];
    if (thisclass == "panel") { // ...and put any with a class "panel" in the 'panels' array.
     panels.push(div);
    }
   }
  }
  // 'numberofpanels' is a global variable and is used in other functions.
  numberofpanels = panels.length;

  // assign panel ids.
  for(var i=0; i<numberofpanels; i++) {
   panels[i].id = 'panel'+(i+1); // i+1 so that numbering starts with 1 instead of 0
  }

  // display the first panel.
  displaypanel(1);

  // initialize thumbnails, if there are any. thumbnails are used to switch between panels.
  if (document.getElementById("thumbs")) {
   var thumbs = []; // declare array.
   thumbs = document.getElementById("thumbs").getElementsByTagName("li");
  
   // 'numberofthumbs' is a global variable and is used in other functions.
   numberofthumbs = thumbs.length;

   // assign thumb ids and mouse events.
   for(var i=0; i<numberofthumbs; i++) {
    thumbs[i].id = 'thumb'+(i+1); // i+1 so that numbering starts with 1 instead of 0
    thumbs[i].onmouseover = function() {
     displaypanel(this.id.substring(5)); // "this.id.substring(5)" returns just the number "1" from the id "thumb1".
     rememberthumb(this.id.substring(5));
    };
   }

   // light up the first thumbnail.
   rememberthumb(1);
  }
 }
}



// displays panel and hides other panels
function displaypanel(thisid) {
 for (var i=1; i<(numberofpanels+1); i++) {
  document.getElementById('panel'+i).style.display = 'none';
 }

 // check for images; if there are none, panel contains only text and width must be set.
 var panelimages = document.getElementById('panel'+thisid).getElementsByTagName('img');
 if (panelimages[0]) {
  document.getElementById('panel'+thisid).style.width = panelimages[0].width + 4; // +4 because of 2px border
 } else {
  document.getElementById('panel'+thisid).style.width = 480;
 }

 document.getElementById('panel'+thisid).style.display = 'block';
}



// 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 submenu panel; call this with a thisid of 0 to clear.
function displaysubmenu(thisid) {
 for (var i=0; i<submenus.length; i++) {
  document.getElementById(submenus[i].id).style.display = 'none';
 }
 if (document.getElementById(thisid)) {
  document.getElementById(thisid).style.display = 'block';
 }
}



// creates a slideshow from <ul id="slideshow">, which should contain <li>s with <img>s.
function startslides() {
 // number of seconds between slides; use 1 for quick testing, 2 - 4 for working website
 slideshow_seconds = 3;

 // controls fading speed (use 50-90) and smoothness; smoothness was .05, but slides did not quite reach 100% opacity.
 slideshow_fadingspeed = 50; // milliseconds
 slideshow_smoothness = .05;

 // build slide array and declare global variables.
 slides = new Array();
	slides = document.getElementById("slideshow").getElementsByTagName("li");
 currentslide = 0;
	slideshow_can_continue = true;

	// set up mouse events and initial slide opacity.
	for(i=1; i<slides.length; i++) {
  slides[i].xOpacity = 0;
  slides[i].title = "Slideshow paused.";
  slides[i].onmouseover = function() { pauseslides(); };
  slides[i].onmouseout = function() { resumeslides(); };
 }
	slides[currentslide].style.display = "block";
	slides[currentslide].xOpacity = .99;

 //schedule fade to start after designated time
 slide_fading = setTimeout(fadeslide,(slideshow_seconds*1000));
}


function fadeslide() {
 nextslide = slides[currentslide+1] ? currentslide+1 : 0;
 slides[nextslide].style.display = "block";

 slides[currentslide].xOpacity -= slideshow_smoothness;
	slides[nextslide].xOpacity += slideshow_smoothness;

 setopacity(slides[currentslide]);
	setopacity(slides[nextslide]);

 // this if / else sequence provides an opportunity to pause the slideshow.
 // if it is okay to continue and the current slide has fully faded, undisplay it and continue fading the next slide.
 if (slideshow_can_continue && (slides[currentslide].xOpacity <= 0)) {
 	slides[currentslide].style.display = "none";
 	currentslide = nextslide;
 	slide_fading = setTimeout(fadeslide,(slideshow_seconds*1000));
 // else if it is not okay to continue and the current slide has fully faded, stop.
 } else if (!slideshow_can_continue && (slides[currentslide].xOpacity <= 0)) {
  return;
 // else the slide has not full faded, so continue to fade.
 } else {
	 slide_fading_out = setTimeout(fadeslide,slideshow_fadingspeed);
 }
}


// crop opacity at .99, and translate "xOpacity" variable into CSS values.
function setopacity(obj) {
	if(obj.xOpacity > .99) {	obj.xOpacity = .99; }
	obj.style.opacity = obj.xOpacity;
	obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	//obj.innerHTML = obj.style.opacity; // useful for testing
}


// pause slideshow
function pauseslides() {
 clearTimeout(slide_fading);
 //clearTimeout(slide_fading_out); // this allows slideshow to be paused mid-fade.
 slideshow_can_continue = false;
}


// resume slideshow
function resumeslides() {
 clearTimeout(slide_fading);
 clearTimeout(slide_fading_out);
 slideshow_can_continue = true;
 fadeslide();
}



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