﻿/*
 * This code creates and manipulates the mouseover photograph display on photos.aspx
 * Michael Powe
 * 24 Mar 2006
 */
	var position = 0;  // globally define counter used for viewing button
	var obj = null;
	var imgDirectory = "images/"; // base image directory, day appended

    var imgNamesDayOne, imgNamesDayTwo, imgNamesDayThree, imgNamesDayFour, imgNamesDayFive;
    
function createNameArrays(){
    
/*************************************************************************
 * arrays of image filenames, used to build array of image objects 
 *************************************************************************/
	imgNamesDayOne = new Array("100_0323.jpg","100_0324.jpg","100_0325.jpg","100_0326.jpg",
						       "100_0327.jpg","100_0328.jpg","100_0329.jpg","100_0331.jpg",
						       "100_0332.jpg");
	imgNamesDayTwo = new Array("100_0333.jpg", "100_0334.jpg", "100_0336.jpg",
                               "100_0337.jpg", "100_0338.jpg");
	imgNamesDayThree = new Array("100_0339.jpg", "100_0340.jpg", "100_0341.jpg",
                                 "100_0342.jpg", "100_0344.jpg", "100_0345.jpg",
                                 "100_0346.jpg");
	imgNamesDayFour = new Array("100_0347.jpg", "100_0348.jpg", "100_0349.jpg",
                                "100_0350.jpg", "100_0351.jpg", "100_0352.jpg",
                                "100_0353.jpg", "100_0354.jpg", "100_0355.jpg");
	imgNamesDayFive = new Array("100_0356.jpg", "100_0357.jpg", "100_0358.jpg",
                                "100_0359.jpg", "100_0360.jpg", "100_0361.jpg",
                                "100_0362.jpg", "100_0363.jpg", "100_0364.jpg");
    }
    
/*************************************************************************	
 *build individual arrays of images for each day
 *************************************************************************/
	var imgArrayDayOne = new Array();
	var imgArrayDayTwo = new Array();
	var imgArrayDayThree = new Array();
	var imgArrayDayFour = new Array();
	var imgArrayDayFive = new Array();
	
function createImageArrays(){

    createNameArrays();
    
	for (var i = 0; i < imgNamesDayOne.length; i++){
	    imgDirectory = "images/day1/";
		imgArrayDayOne[i] = new Image();
		imgArrayDayOne[i].src = imgDirectory + imgNamesDayOne[i];
	}
	
    for (var i = 0; i < imgNamesDayTwo.length; i++){
        imgDirectory = "images/day2/";
        imgArrayDayTwo[i] = new Image();
        imgArrayDayTwo[i].src = imgDirectory + imgNamesDayTwo[i];
    }
    
    for (var i = 0; i < imgNamesDayThree.length; i++){
        imgDirectory = "images/day3/";
        imgArrayDayThree[i] = new Image();
        imgArrayDayThree[i].src = imgDirectory + imgNamesDayThree[i];
    }
    
    for (var i = 0; i < imgNamesDayFour.length; i++){
        imgDirectory = "images/day4/";
        imgArrayDayFour[i] = new Image();
        imgArrayDayFour[i].src = imgDirectory + imgNamesDayFour[i];
    }
    
    for (var i = 0; i < imgNamesDayFive.length; i++){
        imgDirectory = "images/day5/";
        imgArrayDayFive[i] = new Image();
        imgArrayDayFive[i].src = imgDirectory + imgNamesDayFive[i];
    }
} // end createImageArrays()

    createImageArrays();

    var imgArray = new Array();  // create a single array of all the images created above    
    var imgArrayLoad = new Array();  // create a copy of imgArray for creating the thumbnail lists
    var imgArrayCount = 0;
    imgArray = imgArray.concat(imgArrayDayOne,imgArrayDayTwo, imgArrayDayThree, imgArrayDayFour, imgArrayDayFive);
    imgArrayLoad = imgArrayLoad.concat(imgArray);
	var imgListOne, imgListTwo, imgListThree, imgListFour, imgListFive;  // strings to hold the lists
	                                                                     // of thumbnails
	    imgListOne = imgListTwo = imgListThree = imgListFour = imgListFive = ""; // can't be null
	    
function createThumbStrings(){

	var imgStrBegin = "<li><img width=\"108\" height=\"72\" src=";
	var imgStrEnd;

	// by shifting the array for each day, we don't have to keep track of where the next
	// day starts, it always starts at 0.
	
	for (var i = 0; i < imgNamesDayOne.length; i++){
	    imgStrEnd   = " onmouseover=\"loadImage('viewarea'," + imgArrayCount++ + ")\"/></li>"
	    imgListOne += imgStrBegin + imgArrayLoad.shift().src + imgStrEnd;
	}
	for (var i = 0; i < imgNamesDayTwo.length; i++){
	    imgStrEnd   = " onmouseover=\"loadImage('viewarea'," + imgArrayCount++ + ")\"/></li>"
	    imgListTwo += imgStrBegin + imgArrayLoad.shift().src + imgStrEnd;
	}

	for (var i = 0; i < imgNamesDayThree.length; i++){
	    imgStrEnd   = " onmouseover=\"loadImage('viewarea'," + imgArrayCount++ + ")\"/></li>"
	    imgListThree += imgStrBegin + imgArrayLoad.shift().src + imgStrEnd;
	}
	for (var i = 0; i < imgNamesDayFour.length; i++){
	    imgStrEnd   = " onmouseover=\"loadImage('viewarea'," + imgArrayCount++ + ")\"/></li>"
	    imgListFour += imgStrBegin + imgArrayLoad.shift().src + imgStrEnd;
	}
	for (var i = 0; i < imgNamesDayFive.length; i++){
	    imgStrEnd   = " onmouseover=\"loadImage('viewarea'," + imgArrayCount++ + ")\"/></li>"
	    imgListFive += imgStrBegin + imgArrayLoad.shift().src + imgStrEnd;
	}

}
    createThumbStrings();
    
    // each element of the array is a string of thumbnail images
	var imgListArray = new Array(imgListOne,imgListTwo,imgListThree, imgListFour, imgListFive);
    
/* 
 * A set of images for each day is displayed upon button click
 * The button text is updated to display which day is being shown
 */                        
function changeList(){
	var loc = document.getElementById("images"); 
	var thumbButton = document.getElementById("change"); // the button 

	position += 1;
		
	if (position == imgListArray.length){
		position = 0;
	}
	loc.innerHTML = imgListArray[position];
	thumbButton.changeInput.value = "Viewing Day " + (position+1) + " Photos";
}

function getElements(){
	var el = document.getElementById("images");
	alert(el.innerHTML);
}
function loadImage(obj, img){
	var obj = document.getElementById("viewarea");
    obj.innerHTML="<img width=540 height=360 src='" + imgArray[img].src + "'>";
  	return false;
}

