$(document).ready(function() {
	var slideshow = $('.slideshow'),
		slideshow_arrows = slideshow.find('.arrows:first'),
		slideshow_items = slideshow.find('.grid-item'),
		slideshow_large_image = slideshow.find('.large-image:first');
	
	
	slideshow_items.hide().eq(0).show();
	
	slideshow.click(function(e) {
		var target = $(e.target).closest('li');
		
		if(!target.length){return;}
		
		var offset = target.offset(),
			large_image_src = target.find('a').attr('href'),
			description = target.find('.description').html(),
			hasTooltip = target.find('.tooltip'),
			tooltip = $('<div class="section tooltip"><div class="tooltip-inner inner loading"><span class="image"><img src="'+large_image_src+'" alt=""></span><p class="description">'+description+'</p></div><span class="arrow"></span></div>'),
			tooltip_inner = tooltip.find('.inner'),
			tooltip_image = tooltip.find('img').hide(),
			tooltip_description = tooltip.find('.description').hide(),
			tooltip_arrow = tooltip.find('.arrow');
	
		(!hasTooltip.length
			&& slideshow_items.filter(":visible").find("img:first").css("opacity",0.4)
			&& target.parent('ol').find('img').css('opacity',1).end().find('.tooltip').remove()
			&& target.find('img').css('opacity',0.5)
			&& tooltip.appendTo(target)
			&& tooltip.css({
					left: - tooltip.outerWidth() / 2 ,
					top: - tooltip.outerHeight()
				})
			&& tooltip_image.load(function() {
				var width = tooltip_image.outerWidth(),
					height = tooltip_image.outerHeight(),
					willOffsetBy = (offset.left + (width/2) + target.width()) - (slideshow.outerWidth() + slideshow.offset().left),
					willOffsetByLeft = offset.left - (width/2);
 				
				willOffsetBy = (willOffsetBy < 0)
									? 0
									: - willOffsetBy;

				willOffsetBy = (willOffsetByLeft < slideshow.offset().left)
									? slideshow.offset().left-willOffsetByLeft
									: willOffsetBy;
				
				tooltip_inner
					.removeClass("loading")
					.animate({
						width: width ,
						height: height 
					},500);
				
				tooltip.animate({
						left: - (width / 2) + willOffsetBy + 20 ,
						top: - height - 20
				},{duration:500, complete: function() {
					tooltip_image.fadeIn(function() {
						tooltip_description.slideDown();
					});
				}});
				
				willOffsetBy && tooltip_arrow.css('backgroundPosition', ((width/2) - willOffsetBy)+'px 0px');
				
			})
		)
		|| hasTooltip.remove()
			&& slideshow_items.filter(":visible").find("img:first").css("opacity",1)
			&& target.find('img').css('opacity',1);
		
		return false;
	});
	
	slideshow_arrows
		.removeClass('hide')
		.bind('click',function(e) {
			var $self = $(this),
				target = $(e.target).closest('.left,.right'),
				hide = slideshow_items.filter(':visible'),
				going_left = target.is('.left'),
				show;
			
			if(!target.length || $self.data('sliding')) {
				return;	}
			
			if(going_left) {
				show = hide.prev('.grid-item');
				!show.length && (show = slideshow_items.filter(':last')); }
				
			else {
				show = hide.next('.grid-item');
				!show.length && (show = slideshow_items.filter(':first')); }
			
			$self.data('sliding',true);
			
			show
				.css({'position':'absolute','top':'0','zIndex':0})
				.show();
				
			hide
				.css('zIndex',1)
				.animate({	left: going_left && '-50px' || '50px' },{
					duration:300
				})
				.animate({
					left: going_left && hide.width() || -hide.width()
				},{
					duration: 300,
					complete: function() {
						show.css('position','relative').css('zIndex',0);
						hide.hide().css('left',0).css('zIndex',0);
						$self.data('sliding',false);
					}
				});
			
			
		});


});