/*
This library manages a "wheel" display of thumbnail images, allowing the user to spin the wheel
back & forth, and click on an image that he wants to view.  In order for this to work, the page
containing the wheel must have the following aspects:
 - Full-sized and thumbnail versions of the images must be available in the same directory,
   with the same image name.  Thumbnail versions must have an "_thumb" suffix.  For example,
   consider "http://fred.com/myImage.jpg".  This code also expects to find a thumbnail version
   named "http://fred.com/myImage_thumb.jpg".  Note that there must be at least 8 images.
   (This library assumes that all images are JPEG, with ".jpg" filename extension.)
 - The page must contain the javascript array "document.thumbs", which is an array containing
   each of the image names to display, in the order in which they should be displayed.  Each
   element in this array must be a 3-element array with:
    - The image URI, without the "_thumb" suffix, and without the ".jpg" filename extension.
      (those are added dynamically as needed...)
    - The image description (which will be displayed below the image).
    - The copyright year.
    - (Optional) The pixel width to set for the "nav" and "content" divs. Default is 700px.
 - A table containing the 8 images to display in the wheel.  It should be initialized as follows:
     <table>
       <tr>
         <td><a id="a1" href="x.html"><img id="img1" src="dummy.jpg" width="33px" height="80px" /></a></td>
         <td><a id="a2" href="x.html"><img id="img2" src="dummy.jpg" width="33px" height="80px" /></a></td>
         <td><a id="a3" href="x.html"><img id="img3" src="dummy.jpg" width="33px" height="80px" /></a></td>
         <td><a id="a4" href="x.html"><img id="img4" src="dummy.jpg" width="33px" height="80px" /></a></td>
         <td><a id="a5" href="x.html"><img id="img5" src="dummy.jpg" width="33px" height="80px" /></a></td>
         <td><a id="a6" href="x.html"><img id="img6" src="dummy.jpg" width="33px" height="80px" /></a></td>
         <td><a id="a7" href="x.html"><img id="img7" src="dummy.jpg" width="33px" height="80px" /></a></td>
         <td><a id="a8" href="x.html"><img id="img8" src="dummy.jpg" width="33px" height="80px" /></a></td>
       </tr>
     </table>
   Style the elements as necessary; it is important that the ID's are exact since this code refers
   to them.  The image height and width works well as an initial size.
 - The controls to roll the wheel left or right, placed where you want them displayed, calling the
   appropriate navigation functions.  For example:
     <span id="rollLeft" onmousedown="rollLeft()" onmouseup="stopRollLeft()">&lt;&lt;</span>
     <span id="rollRight" onmousedown="rollRight()" onmouseup="stopRollRight()">&gt;&gt;</span>
 - Also "single-step" links to go to the previous image and the next image, placed where you want
   them displayed, calling the appropriate navigation functions.  For example:
     <a id="prev" href="javascript:setImage(13, -1);">&lt; Previous image</a> &#8226;
     <a id="next" href="javascript:setImage(15, 1);">Next image &gt;</a>
 - Finally, the main full-sized image to display.  This image element must have an id="pic".  There
   should also be a text element with id="desc" to hold the text description, and also a text element
   with id="year" to hold the year the photo was taken.
*/

// Initialize the relative image widths for a projection on the edge of a wheel.  The number of elements
// in each of these arrays determines how many different "positions" the wheel can be in.  More positions
// results in a smoother "roll", but also slows it down.  I think 8 positions works pretty well; less and
// it feels too "jerky", more seemed unnecessary...
document.img1w = new Array(.171311, .126292, .087957, .056425, .031798, .014151, .00354, 0);
document.img2w = new Array(.579584, .532871, .484482, .434568, .383287, .3308, .277272, .222872);
document.img3w = new Array(.876604, .848059, .816847,  .783065, .746818, .708222, .667398, .624473);
document.img4w = new Array(1, .995278, .987425, .976465, .962432,  .945371, .925336, .902389);

// Helper function to encapsulate some common styling code.
// imageObject = the thumbnail image to style.
// o = the opacity to set (I was trying to add some "shading" to get a minor 3D effect).
// m = the image margin (images on the edges should have a narrower margin than towards the center).
// w = the width to set on the image (which should be based on the projection arrays initialized above).
function setImageStyle(imageObject, o, w) {
    imageObject.style.filter = 'alpha(opacity=' + o + ')';
    imageObject.style.opacity = o/100;
    imageObject.width = w;
}

// This function sets the widths of each thumbnail image in the wheel, according to what position the
// wheel should be in.
// newPos = the new position (0 to the max number of positions).
function setWidths(newPos) {
    var w = document.w;
    var maxPos = document.img1w.length - 1; // calculate how many positions there are.
    if (newPos > maxPos) newPos = 0; // if newPos exceeds the max number, flip around to 0.
    if (newPos < 0) newPos = maxPos; // if newPos is less than 0, flip around to the max number.
    document.pos = newPos; // reset the global position variable.

    // set width, opacity, and margin for thumbnail images
    setImageStyle(document.getElementById("img1"), 20+2*(newPos+1), document.img1w[newPos]*w);
    setImageStyle(document.getElementById("img2"), 20+2*(maxPos-newPos+1), document.img2w[newPos]*w);
    setImageStyle(document.getElementById("img3"), 40+3*(maxPos-newPos+1), document.img3w[newPos]*w);
    setImageStyle(document.getElementById("img4"), 65+3*(maxPos-newPos+1), document.img4w[newPos]*w);
    setImageStyle(document.getElementById("img5"), 88+3*(maxPos-newPos+1), document.img4w[maxPos-newPos]*w);
    setImageStyle(document.getElementById("img6"), 92+2*(newPos+1), document.img3w[maxPos-newPos]*w);
    setImageStyle(document.getElementById("img7"), 75+2*(newPos+1), document.img2w[maxPos-newPos]*w);
    setImageStyle(document.getElementById("img8"), 60+2*(newPos+1), document.img1w[maxPos-newPos]*w);
}

// Helper function to set the sources and hrefs for the thumbnails as the wheel is rotated.
function setSrc() {
    var idx = document.thumbIndex;
    document.getElementById("a1").href = "javascript:setImage(" + idx + ");";
    document.getElementById("img1").src = document.thumbs[idx++][0] + "_thumb.jpg";
    if (idx >= document.thumbs.length) idx=0;
    document.getElementById("a2").href = "javascript:setImage(" + idx + ");";
    document.getElementById("img2").src = document.thumbs[idx++][0] + "_thumb.jpg";
    if (idx >= document.thumbs.length) idx=0;
    document.getElementById("a3").href = "javascript:setImage(" + idx + ");";
    document.getElementById("img3").src = document.thumbs[idx++][0] + "_thumb.jpg";
    if (idx >= document.thumbs.length) idx=0;
    document.getElementById("a4").href = "javascript:setImage(" + idx + ");";
    document.getElementById("img4").src = document.thumbs[idx++][0] + "_thumb.jpg";
    if (idx >= document.thumbs.length) idx=0;
    document.getElementById("a5").href = "javascript:setImage(" + idx + ");";
    document.getElementById("img5").src = document.thumbs[idx++][0] + "_thumb.jpg";
    if (idx >= document.thumbs.length) idx=0;
    document.getElementById("a6").href = "javascript:setImage(" + idx + ");";
    document.getElementById("img6").src = document.thumbs[idx++][0] + "_thumb.jpg";
    if (idx >= document.thumbs.length) idx=0;
    document.getElementById("a7").href = "javascript:setImage(" + idx + ");";
    document.getElementById("img7").src = document.thumbs[idx++][0] + "_thumb.jpg";
    if (idx >= document.thumbs.length) idx=0;
    document.getElementById("a8").href = "javascript:setImage(" + idx + ");";
    document.getElementById("img8").src = document.thumbs[idx++][0] + "_thumb.jpg";
}

// Helper function to shift the images to the right as the wheel is rotated.
function shiftRightSrc() {
    if (--document.thumbIndex < 0) document.thumbIndex = document.thumbs.length - 1;
    setSrc();
}

// Helper function to shift the images to the left as the wheel is rotated.
function shiftLeftSrc() {
    if (++document.thumbIndex >= document.thumbs.length) document.thumbIndex = 0;
    setSrc();
}

// Shift the wheel right by one "click".
function shiftRight() {
    setWidths(document.pos - 1);
}

// Shift the wheel left by one "click".
function shiftLeft() {
    setWidths(document.pos + 1);
}

// Helper method for continuous rolling to the right.
function continuousRollRight(ms) {
    shiftRight();
    if (--document.roll > 0) setTimeout("continuousRollRight()", ms);
    if (document.pos == document.img1w.length-1) shiftRightSrc();
}

// Helper method for continuous rolling to the left.
function continuousRollLeft(ms) {
    shiftLeft();
    if (--document.roll > 0) setTimeout("continuousRollLeft()", ms);
    if (document.pos == 0) shiftLeftSrc();
}

// This helper function rolls the wheel to a specified image.
// i = the index of the image to roll to in the image array (document.thumbs).
function rollToImage(i) {
	// determine which direction to roll, depending on which is closer to the current wheel index.
	x = document.thumbIndex+3 - i;
	if (x == 0) dir = 0;
	else {
		if (x > document.thumbs.length/2) x = x - document.thumbs.length;
	    dir = (x > 0) ? -1 : 1;
    }
    if (dir == -1) {
        //shiftLeft();
        document.roll = document.roll + (8 * Math.abs(x));
        continuousRollRight(20);
    }
    if (dir == 1) {
        document.roll = document.roll + (8 * Math.abs(x));
        continuousRollLeft(20);
    }
}

// Function to roll wheel to the right 2 images.
function rollRight() {
    document.roll = document.roll + 16;
    continuousRollRight(10);
}

// Function to roll wheel to the left 2 images.
function rollLeft() {
    document.roll = document.roll + 16;
    continuousRollLeft(10);
}

// This function rolls the wheel to a specified image, and then displays the full-sized version of
// that image in the page.  The navigation controls are also updated.
// i = the index of the image to roll to in the image array (document.thumbs).
function setImage(i) {
    document.currentImage = i;
    document.loaded = false;
    rollToImage(i);
    document.getElementById("msg").style.visibility = "visible";
    image = document.getElementById("pic");
    image.src = document.thumbs[i][0] + ".jpg";
    image.onload = function() {
                       document.counter = 0;
                       document.loaded = true;
                       document.getElementById("msg").style.visibility = "hidden";
                       document.getElementById("content").style.width = document.thumbs[i][3] ? document.thumbs[i][3] : "700px";
                       document.getElementById("footer").style.width = document.thumbs[i][3] ? document.thumbs[i][3] : "700px";
                       document.getElementById("desc").innerHTML = document.thumbs[i][1];
                       document.getElementById("year").innerHTML = "Andrew Zenk &#169; " + document.thumbs[i][2];
                       prev = ((i-1) < 0) ? i-1+document.thumbs.length : i-1;
                       next = ((i+1) >= document.thumbs.length) ? i+1-document.thumbs.length : i+1;
                       document.getElementById("prev").href = "javascript:setImage(" + prev + ");";
                       document.getElementById("next").href = "javascript:setImage(" + next + ");";
                   };
}

// Start slideshow - move to the next image every 3.5 seconds.
function play(skip) {
    //alert("play: document.playing = "+document.playing);
    if (!document.playing) {
        document.getElementById("play").src = "images/play_disabled.jpg";
        document.getElementById("pause").src = "images/pause_active.jpg";
        document.playing = true;
        //document.getElementById("content").style.background = '#000';
        if (skip != "false") {
            // advance one slide right away
            x = document.currentImage;
            setImage(((x+1) >= document.thumbs.length) ? x+1-document.thumbs.length : x+1);
        }
        // now start slide show
        document.slideshow = setInterval(
            function() {
                if (document.loaded) {
                    if (document.counter++ > 20) {
                        x = document.currentImage;
                        setImage(((x+1) >= document.thumbs.length) ? x+1-document.thumbs.length : x+1);
                    }
                }
            }, 200);
    }
}

// Stop slideshow.
function pause() {
    //alert("pause: document.playing = "+document.playing);
    if (document.playing) {
        clearInterval(document.slideshow);
        document.getElementById("play").src = "images/play_active.jpg";
        document.getElementById("pause").src = "images/pause_disabled.jpg";
        document.playing = false;
    }
}

// Initial setup to position wheel at a specific starting image.
function setup(i, show) {
    document.w = 60; // set the max thumbnail width
    document.thumbIndex = (i - 3 < 0) ? document.thumbs.length + i - 3 : i - 3;
    document.roll = 0;
    document.playing = false;
    setSrc();
    setWidths(0);
    setImage(i);
    if (show == "true") play("false");
}