var images = '';
var imagesFade = '';
var image = '';

var maxImages = 3;
var imageList = new Array;
var imageListCurrentKey = 0;

var initialPageSize = '';

function setupImages() {
    var hideImagesLink = $('images-hide');
    var mainImage = $('main_image');
    var nextButton = $('images-next-button');
    var previousButton = $('images-previous-button');

    images = $('images-content');
    imagesFade = $('images-fade');
    image = $('images-image');

    initialPageSize = getPageSize();

    //fetch our array of images
    var iterationCounter = 0;
    for(i = 0; i < maxImages; i++) {
        var thumbImage = '';
        if(thumbImage = $('alt' + i + '_image')) {
            thumbImage = String(thumbImage.src);
            if(thumbImage.indexOf('blank_image') < 0) {
                imageList[iterationCounter] = thumbImage;
                iterationCounter++;
            }
        }
    }
    imageList[iterationCounter] = mainImage.src;
    imageListCurrentKey = imageList.length - 1;

    mainImage.onclick = function() {
        showImages();
        updatePane(this.src);
    }
    $('zoom').onclick = function() {
        showImages();
	updatePane(mainImage.src);
    }
    hideImagesLink.onclick = function() {
        hideImages();
    }
	if(iterationCounter > 0) {
		nextButton.onclick = function() {
			nextImage();
		}
		previousButton.onclick = function() {
			previousImage();
		}
	} else {
		nextButton.style.display = 'none';
		previousButton.style.display = 'none';
	}
    image.onclick = function() {
        hideImages();
    }
	
	images.fade('hide');
	imagesFade.fade('hide');
}

function showImages() {
	imagesFade.style.display = 'block';
	images.style.display = 'block';
	var myFx = new Fx.Elements([imagesFade,images]).start({
		'0': {
			'opacity': 0.8
		},
		'1': {
			'opacity': 1
		}
	});

    document.onkeydown = function(e) {
        keyboardNavigation(getKeyCode(e));
    }
}

function hideImages() {
	var myFx = new Fx.Elements([imagesFade,images], {
		onComplete: function(){
			window.imagesFade.style.display = 'none';
			window.images.style.display = 'none';
		}
	}).start({
		'0': {
			'opacity': 0
		},
		'1': {
			'opacity': 0
		}
	});
    document.onkeydown = function(e) { }
}

function updatePane(imageSource) {
	imagesFade.style.height = initialPageSize[1] + 'px';
	image.src = imageSource;
	
	image.fade('hide');
    
	var pageSize = getPageSize();
    //i = image
    var iW = image.width;
    var iH = image.height;
	
	//now to re-center the box
    //w = window
    wW = pageSize[2];
    wH = pageSize[3];

    if(iW < 275) iW = 275;
    if(iH < 275) iH = 275;

    //p = pane
    var pW = iW + 10;
    var pH = iH + 50;
	
	images.style.width = pW + 'px';
	images.style.height = pH + 'px';

	image.fade('in');

    images.style.left = parseInt((wW - pW) / 2) + 'px';
    images.style.top = 10 + parseInt((wH - pH) / 2) + 'px';

    if(pH > initialPageSize[1]) {
        imagesFade.style.height = pH + 50 + 'px';
    }
}

function nextImage() {
    if(imageList[imageListCurrentKey + 1]) {
        imageListCurrentKey++;
    } else {
        imageListCurrentKey = 0;
    }
    updatePane(imageList[imageListCurrentKey]);
}

function previousImage() {
    if(imageList[imageListCurrentKey - 1]) {
        imageListCurrentKey--;
    } else {
        imageListCurrentKey = imageList.length - 1;
    }
    updatePane(imageList[imageListCurrentKey]);
}

function keyboardNavigation(keyCode) {
    if(88 == keyCode || 40 == keyCode) { // x or down arrow key
        hideImages();
    } else if(78 == keyCode || 39 == keyCode) { // n or right arrow key
        nextImage();
    } else if(80 == keyCode || 37 == keyCode) { // p or left arrow key
        previousImage();
    }
}

function getKeyCode(e) {
    var evt = e || window.event;
    return parseInt(evt.keyCode);
}

//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){

	var xScroll, yScroll;

	if (window.innerHeight && window.scrollMaxY) {
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}

	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}

	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else {
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}


	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
	return arrayPageSize;
}