var menuPosition;
var menuIsMoving;
var currentPage;
var currentType;
var currentSource;
var currentWidth;
var currentHeight;
var currentSource2;
var currentWidth2;
var currentHeight2;
var maxPage;

var numDisplayedArrows = 0;
var maxNumDisplayedArrows = 4;
var imageIsLoading;

function isString() {
	if (typeof arguments[0] == 'string') { return true; }
	if (typeof arguments[0] == 'object') {  
		var criterion = arguments[0].constructor.toString().match(/string/i); 
		return (criterion !== null);  
	}
	return false;
}

function myParseInt(a) {
	if(isString(a)) {
		return parseInt(a,10);
	}
	else {
		return a;
	}
}

$.fn.image = function(doClear, src, f){ 
	return this.each(function(){ 
		var i = new Image(); 
		i.src = src; 
		i.onload = f;
		if(doClear) {
			if ( this.hasChildNodes() ) {
				while ( this.childNodes.length >= 1 ) {
					this.removeChild( this.firstChild );       
				} 
			}
		}
		this.appendChild(i);
	}); 
} 

function loadImage(pageNumber) {
	imageIsLoading = true;
	pageNumber = myParseInt(pageNumber);
	$('#photoContainer').fadeOut(500, function() {
		
		window.location.hash = currentPage;
		$('.navigationTab').removeClass('selectedTab');
		$('#tab'+currentPage).addClass('selectedTab');
	
		currentType = pages[pageNumber].type;
		currentSource = pages[pageNumber].source;
		currentWidth = pages[pageNumber].width;
		currentHeight = pages[pageNumber].height;
		currentSource2 = pages[pageNumber].source2;
		currentWidth2 = pages[pageNumber].width2;
		currentHeight2 = pages[pageNumber].height2;

		// show loading progress bar and load current Image			
		$('#loading').fadeIn(200, function() {
			if(currentType == 1) {
				$('#photoContainer').css('margin-left', -(currentWidth / 2));
				$('#photoContainer').css('margin-top', -(currentHeight / 2));
				$('#photoContainer').image(true, currentSource, function() {
					$('#loading').fadeOut(200);
					$('#photoContainer').fadeIn(1000, function() {
						imageIsLoading = false;
					});
				}).children().addClass("horizontalImage");
			}
			else {
				$('#photoContainer').css('margin-left', -((currentWidth + currentWidth2 + 20) / 2));
				$('#photoContainer').css('margin-top', -(currentHeight / 2));
				$('#photoContainer').image(true, currentSource, function() {
					$('#photoContainer').image(false, currentSource2, function() {
						$('#loading').fadeOut(200);
						$('#photoContainer').fadeIn(1000, function() {
							imageIsLoading = false;
						});
					}).children().addClass("verticalImage");
				}).children().addClass("verticalImage");
			}
			currentPage = pageNumber;
		});
	});
}

function flashArrows() {
	if(numDisplayedArrows < maxNumDisplayedArrows) {
		$('#leftArrow').fadeIn(200, function() {
			$('#leftArrow').fadeOut(1000);
		});
		$('#rightArrow').fadeIn(200, function() {
			$('#rightArrow').fadeOut(1000);
		});
		numDisplayedArrows++;
	}
}

function setupNavigation() {
	$('#tabs').children().remove();
	for(var cursor = 0; cursor <= maxPage; cursor++) {
		$('#tabs').append("<li><a href='#' class='navigationTab' id='tab"+cursor+"'></a></li>\n");
	}
}

function toggleAboutSlide() {
	if(!aboutIsMoving) {
		aboutIsMoving = true;
		if(aboutPosition == "open") {
			$('#aboutMe').fadeOut(500,function() {aboutPosition = "closed"; aboutIsMoving = false;});
		}
		else {
			$('#aboutMe').fadeIn(2000,function() {aboutPosition = "open"; aboutIsMoving = false;});
		}
	}
}

$(document).ready(function() {
	menuPosition = "open";
	aboutPosition = "closed";
	menuIsMoving = false;
	aboutIsMoving = false;
	maxPage = pages.length - 1;
	
	setupNavigation();

	// looks in the url for a hash value
	var imageHash = window.location.hash;
	
	// if there is a value loads that page
	if(imageHash !== "") {
		currentPage = imageHash.substring(1);
	}
	else {
		currentPage = 0;
	}
	loadImage(currentPage);

	$('#menuButton').click(function() {
		if(!menuIsMoving) {
			menuIsMoving = true;
			if(menuPosition == "open") {
				$('#header').animate({top: -45},500,"linear",function() {menuPosition = "closed"; menuIsMoving = false;});
			}
			else {
				$('#header').animate({top: 0},500,"linear",function() {menuPosition = "open"; menuIsMoving = false;});
			}
		}
	});
	
	$('#aboutMeButton').click(function() { toggleAboutSlide(); });
	$('#aboutMe').click(function() { toggleAboutSlide(); });
	
	$('#leftTile').click(function() {
		if(!imageIsLoading) {
			currentPage = myParseInt(currentPage) - 1;
			if(currentPage < 0) { currentPage = maxPage; }
			if(currentPage > maxPage) {	currentPage = 0; }
			loadImage(currentPage);
		}
	});
	
	$('#rightTile').click(function() {
		if(!imageIsLoading) {
			currentPage = myParseInt(currentPage) + 1;
			if(currentPage < 0) { currentPage = maxPage; }
			if(currentPage > maxPage) {	currentPage = 0; }
			loadImage(currentPage);
		}
	});
	
	$('.navigationTab').click(function() {
		if(!imageIsLoading) {
			currentPage = myParseInt(this.id.substring(3));
			loadImage(currentPage);
		}
	});
	
	$('#leftTile').hover(flashArrows, function() {});
	$('#rightTile').hover(flashArrows, function() {});
});
