var currentImg;

$(function(){
	$('#largeImage').hide();
	
	$('#thumbs').delegate('img','click', function(){
		$('#largeImage').attr('src',$(this).attr('src').replace('_thumb',''));		
		var data = imageData[$(this).attr('alt') - 1];		
		$('#Artist').html(data.Artist);
		$('#Track').html(data.Track);
		$('#Location').html(data.Location);
		$('#Lenth').html(data.Lenth);
		$('#Date').html(data.Date);
		
		
		$('#textContent').hide();
		$('.textBox').show();		
		$('#largeImage').show();
		
		$('.thumbBox').removeClass('border');
		$(this).parent().addClass('border');
		currentImg = $(this);
	});
	
	$('#header').click(function(){
		 $('#largeImage').hide();	
		 $('#textContent').show();
		 $('.textBox').hide();
		 currentImg = null;
		 $('.thumbBox').removeClass('border');
		 });
		 
	$('#email').click(function(){window.location.href = "mailto:cathholmes_uk@hotmail.com"; });
	
	var images = [];
	$.each(imageData, function(i, data) {
		$('#thumbs').append('<div class="thumbBox"><img src="'+data.path+'" alt="'+(i+1)+'" /></div>');
		images.push(data.path.replace('_thumb',''));
	});
	
	if ($.browser.mozilla) {
    	$(document).keypress (checkKey);
	} else {
    	$(document).keydown (checkKey);
	}
	preLoadImges(images);
});

var checkKey = function(e) 
{
	  switch(e.keyCode) { 
		case 37: navigate('left');
			break;
		case 38: navigate('up');
			break;
		case 32:
		case 39:
		case 0:
		case 13: navigate('right');
			break;
		case 40: navigate('down');
			break;
		case 36: navigate('beginning');
			break;
		case 35: navigate('end');
			break;
	}
};

var navigate = function(dir)
{
	if(!currentImg)
		return;		
	var idx = parseInt(currentImg.attr('alt')) -1;
	var newIdx = 0;	
	switch(dir)
	{
		case 'up': newIdx = idx - 5;
			break;
		case 'down': newIdx = idx + 5;
			break;
		case 'right': newIdx = idx + 1;
			break;
		case 'left': newIdx = idx - 1;
			break;
		case 'beginning': newIdx = 0;
			break;
		case 'end': newIdx = imageData.length - 1;
			break;
	}	
	if(newIdx < 0)
		newIdx = 0;	
	if(newIdx >= imageData.length)
		newIdx = imageData.length - 1;
	$('.thumbBox img[alt="'+(newIdx + 1)+'"]').click();
};

var cache = [];
var preLoadImges = function(imageArray) {
	for (var i = imageArray.length; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = imageArray[i];
      cache.push(cacheImage);    
  }
}