$(document).ready(
    function(){
    BarrGallery();
    });


function BarrGallery(){
	
	//add hook
	$('#content').after('<div id="arrows"><a href="#"><img id="back" src="previous-arrow.jpg"></a><a href="#"><img id="next" src="next-arrow.jpg"></a><div id="outof"></div></div>');

	//setting how much the thumbnails peakout when in the hidden position
	var thumbNailPeaking = 5;
	
	//thumbarea slide animation
	var thumbBarWidth = $('#gallery').outerWidth(true);
	thumbBarWidth *= -1;
	thumbBarWidth += thumbNailPeaking;
	
	//alert(thumbBarWidth);
	$('ul#gallery').animate({left: thumbBarWidth }, 1000);
	$('#thumbarea').mouseenter(function(){$('ul#gallery').animate({left: '0px'}, 500, 'swing');})
	$('#thumbarea').mouseleave(function(){$('ul#gallery').animate({left: thumbBarWidth }, 500, 'swing');})
	
	//enable scrolling on thumbnails
	enable();
	
	//fade in first image
	var theImage = $('.thumb:first').attr('name');
	$('#content').append('<img id="theImage" src="' + theImage + '">');
	$('#theImage').hide();
	$('#theImage').bind('load', function(){ $('#theImage').fadeIn(500); })
	
	//images array
	var theImages = new Array();
	
	//thumb handler
	$('.thumb').each(function(){
		
		theImages.push($(this).attr('name'));
		
		//AJAX in content
		$(this).bind("click", function(){
			theImage = $(this).attr('name');
			$('#theImage').fadeOut(500,function(){
				$('#theImage').remove();
				//alert (theImage);
				$('#content').append('<img id="theImage" src="' + theImage + '" >');
				$('#theImage').hide();
				$('#theImage').bind('load', function(){
					$('#theImage').fadeIn(500);
				});
				
				$('#wack').remove();
				$('#outof').append('<div id="wack">' + (theImages.indexOf(theImage)+1) + '/'+ theImages.length + '</div>');
			});
		});
	});
	
	$('#outof').append('<div id="wack">' + 1 + '/'+ theImages.length + '</div>');
	
	var inDex = 0;
	
	$('#back').bind("click", function(){
		inDex = theImages.indexOf(theImage) - 1;
		if(inDex>=0){
			$('#theImage').fadeOut(500,function(){
				$('#theImage').remove();
				$('#content').append('<img id="theImage" src="' + theImages[inDex] + '" >');
					$('#theImage').hide();
					$('#theImage').bind('load', function(){
						$('#theImage').fadeIn(500);
						$('#wack').remove();
						theImage = theImages[inDex];
						$('#outof').append('<div id="wack">' + (theImages.indexOf(theImage)+1) + '/'+ theImages.length + '</div>');
					});
				});
		}
	});
	
	$('#next').bind("click", function(){
		inDex = theImages.indexOf(theImage);
		inDex += 1;
		if(inDex < theImages.length){
			$('#theImage').fadeOut(500,function(){
				$('#theImage').remove();
				$('#content').append('<img id="theImage" src="' + theImages[inDex] + '" >');
					$('#theImage').hide();
					$('#theImage').bind('load', function(){
						$('#theImage').fadeIn(500);
						$('#wack').remove();
						theImage = theImages[inDex];
						$('#outof').append('<div id="wack">' + (theImages.indexOf(theImage)+1) + '/'+ theImages.length + '</div>');
					});
				});
		}
	});
	
	$(document).keydown(function(event){
		if (event.keyCode == '39'){
			inDex = theImages.indexOf(theImage);
			inDex += 1;
			if(inDex < theImages.length){
				$('#theImage').fadeOut(500,function(){
					$('#theImage').remove();
					$('#content').append('<img id="theImage" src="' + theImages[inDex] + '" >');
						$('#theImage').hide();
						$('#theImage').bind('load', function(){
							$('#theImage').fadeIn(500);
							$('#wack').remove();
							theImage = theImages[inDex];
							$('#outof').append('<div id="wack">' + (theImages.indexOf(theImage)+1) + '/'+ theImages.length + '</div>');
						});
					});
			}
		}else if(event.keyCode == '37'){
			inDex = theImages.indexOf(theImage) - 1;
			if(inDex>=0){
				$('#theImage').fadeOut(500,function(){
					$('#theImage').remove();
					$('#content').append('<img id="theImage" src="' + theImages[inDex] + '" >');
						$('#theImage').hide();
						$('#theImage').bind('load', function(){
							$('#theImage').fadeIn(500);
							$('#wack').remove();
							theImage = theImages[inDex];
							$('#outof').append('<div id="wack">' + (theImages.indexOf(theImage)+1) + '/'+ theImages.length + '</div>');
						});
					});
			}
		}
	});
		
}


//thumb scroller
function enable(){
  // height of area at the top at bottom, that don't respond to mousemove
  var inactiveMargin = 300;
  // Cache for performance
  var wrapperWidth = $('#thumbarea').width();
  var wrapperHeight = $('#thumbarea').height();
  // Using outer height to include padding too
  var scrollableHeight = $('#thumbareaint').outerHeight() + 2*inactiveMargin;
  // Do not cache wrapperOffset, because it can change when user resizes window
  // We could use onresize event, but it's just not worth doing that
  // var wrapperOffset = wrapper.offset();

  //When user move mouse over menu
  $('#thumbarea').mousemove(function(e){
    var wrapperOffset = $('#thumbarea').offset();
    // Scroll menu
    var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight  - inactiveMargin;

    if (top < 0){
      top = 0;
    }

    $('#thumbarea').scrollTop(top);
  });
}

Array.prototype.indexOf=function(o,i){for(var j=this.length,i=i<0?i+j<0?0:i+j:i||0;i<j&&this[i]!==o;i++);return j<=i?-1:i};