// javascript for a stone's throw glass

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



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



//find object position relative to page
//source: http://www.quirksmode.org/js/findpos.html
function getcoordinates(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}



function loadport() {
 // check to make sure port is present.
 if (document.getElementById('port')) {

  // initialize thumbnails. thumbnails are used to switch between panels.
  var portthumbs = []; // declare array.
  var portthumbtags = document.getElementsByTagName('li'); // check all lis...
  for (var i=0; i<portthumbtags.length; i++) {
   var portthumbtag = portthumbtags[i];
   var classes = portthumbtag.className.split(" "); // ...check for multiple classes...
   for (var j=0; j<classes.length; j++) {
    thisclass = classes[j];
    if (thisclass == "portthumb") { // ...and put any with a class "thumb" in the 'thumbs' array.
     portthumbs.push(portthumbtag);
    }
   }
  }
  // 'numberofthumbs' is a global variable and is used in other functions.
  numberofportthumbs = portthumbs.length;

  // assign thumb ids and mouse events.
  for(var i=0; i<numberofportthumbs; i++) {
   portthumbs[i].id = 'portthumb'+(i+1); // i+1 so that numbering starts with 1 instead of 0

   portthumbs[i].onmouseover = function() {
    var thisportthumbimages = this.getElementsByTagName('img');
    if ((this.className != 'portthumb current-page-link') && (thisportthumbimages.length > 0)) {
     var currentthumboffset = 27; /* needs to correspond to width of port thumbnails, plus or minus a couple of pixels.  */
     var thisportthumbsrc = thisportthumbimages[0].src;
     var thisportthumbtitle = thisportthumbimages[0].alt;
     var portthumbposition = getcoordinates(this); // coors[0] = top, coors[1] = left.
     var portposition =  getcoordinates(document.getElementById('port'));
     document.getElementById('portloupe').style.display = 'block';
     document.getElementById('portloupe').style.left = (portthumbposition[0] - portposition[0] - currentthumboffset) + 'px';
     document.getElementById('portloupe').innerHTML = '<img src="' + thisportthumbsrc + '" /><p>' + thisportthumbtitle + '</p>';
     document.getElementById('portloupezoom').style.display = 'block';
     document.getElementById('portloupezoom').style.left = (portthumbposition[0] - portposition[0] - currentthumboffset) + 'px';
    }
   };

   portthumbs[i].onmouseout = function() {
    var thisportthumbimages = this.getElementsByTagName('img');
    if ((this.className != 'portthumb current-page-link') && (thisportthumbimages.length > 0)) {
     document.getElementById('portloupe').style.display = 'none';
     document.getElementById('portloupe').innerHTML = '';
     document.getElementById('portloupezoom').style.display = 'none';
    }
   };
  }
 }
}



function loadpanels() {
 // check to make sure this is a portfolio post.
 if (document.getElementById('portfolio-body') && (!(document.getElementById('emptygallerywarning')))) {
 
  // initialize panels, which are used to display different groups of content on the same page.
  var panels = []; // declare array.
  var paneltags = document.getElementsByTagName('div'); // check all divs...
  for (var i=0; i<paneltags.length; i++) {
   var paneltag = paneltags[i];
   var classes = paneltag.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(paneltag);
    }
   }
  }
  // '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. thumbnails are used to switch between panels.
  var thumbs = []; // declare array.
  var thumbtags = document.getElementsByTagName('div'); // check all imgs...
  for (var i=0; i<thumbtags.length; i++) {
   var thumbtag = thumbtags[i];
   var classes = thumbtag.className.split(" "); // ...check for multiple classes...
   for (var j=0; j<classes.length; j++) {
    thisclass = classes[j];
    if (thisclass == "thumb") { // ...and put any with a class "thumb" in the 'thumbs' array.
     thumbs.push(thumbtag);
    }
   }
  }
  // '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';
 }
 document.getElementById('panel'+thisid).style.display = 'block';
 document.getElementById('portfolio-postsubtitle').innerHTML = document.getElementById('panel'+thisid).title;
}



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



// highlight a given page tab.
function highlightpage(pagename) {
 if (document.getElementById('menu')) {

  // build menu array.
  var menulis = []; // declare array.
  var lis = document.getElementsByTagName('li'); // check all lis...
  for (var i=0; i<lis.length; i++) {
   var li = lis[i];
   var classes = li.className.split(" "); // ...check for multiple classes...
   for (var j=0; j<classes.length; j++) {
    thisclass = classes[j];
    if (thisclass == "page_item") { // ...and put any with a class "page_item" in the 'menulis' array.
     menulis.push(li);
    }
   }
  }

  numberofmenulis = menulis.length;

  for(var i=0; i<numberofmenulis; i++){
   if (menulis[i].firstChild.innerHTML == pagename) {
    menulis[i].className = menulis[i].className + ' current_category_top';
   }
  }
 }
}



// initalize drop-down navigation boxes.
function loaddropboxes() {
 var dropboxes = []; // declare array.
 var dropboxestags = document.getElementsByTagName('select'); // check all selects...
 for (var i=0; i<dropboxestags.length; i++) {
  var dropboxestag = dropboxestags[i];
  var classes = dropboxestag.className.split(" "); // ...check for multiple classes...
  for (var j=0; j<classes.length; j++) {
   thisclass = classes[j];
   if (thisclass == "dropbox") { // ...and put any with a class "dropbox" in the array.
    dropboxes.push(dropboxestag);
   }
  }
 }
 // 'numberofdropboxes' is a global variable and is used in other functions.
 numberofdropboxes = dropboxes.length;

 // assign thumb ids and mouse events.
 for(var i=0; i<numberofdropboxes; i++) {
  dropboxes[i].onchange = function() {
   if (this.options[this.selectedIndex].value != '') {
    document.location.href=this.options[this.selectedIndex].value;
   }
  };
 }
}



// 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 = 4;

 // controls fading speed (use 50-90) and smoothness; smoothness was .05, but slides did not quite reach 100% opacity.
 slideshow_fadingspeed = 60; // 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();
}