//Global variables
var thumbs = null;
var galleryRight = null;
var imageDir = "media/pics/";
var index = 0;
var num = 0;
var imageNum = 0;
var images = new Array(document.getElementById("thumbs").getElementsByTagName("img").length);

//Browser is IE4+
var isIE = (document.all) ? true : false;

//Browser supports DOM
var supportsDOM = ((document.getElementById) && (!isIE)) ? true : false;

//Sets all elements in an array to null
function initializeArray(arr) {
    for (var i = 0; i < arr.length; i++) {
        arr[i] = null;
    }
}

//Function to deal with the infamous document.all issue
function setEventById(id, event, func) {
  if (isIE) {
    document.getElementById(id).attachEvent('on' + event, func);
  } else if (supportsDOM) {
    document.getElementById(id).addEventListener(event, func, false);
  } 
} 

//Accociate each <img> click with openGallery and showImageInfo
function setEventsOnThumbs() {
    galleryRight = document.getElementById("thumbs");
    thumbs = galleryRight.getElementsByTagName("img");
    for (var i = 0; i < thumbs.length; i++) {
        setEventById(thumbs[i].getAttribute("id"), 'click', openGallery);
        setEventById(thumbs[i].getAttribute("id"), 'mouseover', changeCursorToHand);
    }
}

//Changes cursor to hand
function changeCursorToHand(event) {
    if (isIE) {
        document.getElementById(window.event.srcElement.id).className = "cursor-hand";
    } else if(supportsDOM) {
        document.getElementById(event.target.id).className = "cursor-hand";
    }
}

//Image item constructor
function imageItem(imageLocation, text) {
    this.imageItem = new Image();
    this.imageItem.src = imageLocation;
    this.imageText = text;
}

//Check which image was clicked and show it, create it if it has not yet been created
function openGallery(event) {
    if (isIE) {
        index = parseInt(window.event.srcElement.id.match(/\d/));
    } else if (supportsDOM) {
        index = parseInt(event.target.id.match(/\d/));
    }
    if (images[index] == null) {
        if (isIE) {
            images[index] = new imageItem(imageDir + window.event.srcElement.alt, 
                window.event.srcElement.title);
        } else if (supportsDOM) {
            images[index] = new imageItem(imageDir + event.target.alt, event.target.title);
        }
    }
    viewImage(index);
}

//Check which image to show, create it if it has not yet been created
function viewNextImage(event) {
    if (imageNum < images.length - 1) {
        imageNum++;
    } else {
        imageNum = 0;
    }
    if (images[imageNum] == null) {
        images[imageNum] = new imageItem(imageDir + document.getElementById("t" + imageNum).alt, 
            document.getElementById("t" + imageNum).title);
    }    
    document.getElementById("imageArea").src = images[imageNum].imageItem.src;
}

//Check which image to show, create it if it has not yet been created
function viewPrevImage(event) {
    if (imageNum > 0) {
        imageNum--;
    } else {
        imageNum = images.length - 1;
    }
    if (images[imageNum] == null) {
        images[imageNum] = new imageItem(imageDir + document.getElementById("t" + imageNum).alt, 
            document.getElementById(("t" + imageNum)).title);
    }    
    document.getElementById("imageArea").src = images[imageNum].imageItem.src;
}

//Show image with index num in image array
function viewImage(num) {
    document.getElementById("gallery").style.visibility = "visible";
    imageNum = num;
    document.getElementById("imageArea").src = images[imageNum].imageItem.src;
}

//Hides gallery layer
function hideGallery(event) {
    document.getElementById("gallery").style.visibility = "hidden";
}

setEventById("menu1", 'click', hideGallery);
setEventById("menu2", 'click', viewPrevImage);
setEventById("menu3", 'click', viewNextImage);
setEventsOnThumbs();
initializeArray(images);