jQuery.fn.quickEach = (function() {
	var jq = jQuery([1]);
	return function(c) {
		var i = -1,
		el, len = this.length;
		try {
			while (++i < len && (el = jq[0] = this[i]) && c.call(jq, i, el) !== false);
		} catch (e) {
		delete jq[0];
		throw e;
	}
	delete jq[0];
	return this;
	};
}());

$(function(){
	
	// Width of first slide
	//var slide_width = first_slide.outerWidth();
	var slide_width = 235;
	
	var prev = $('#slider_control a.prev'), // Next Button
		next = $('#slider_control a.next'), // Previous Button
		wrapper = $('#grid_slide'), // Slides Wrapper Div
		slides = wrapper.children(), // All Slides 
		first_slide = $(slides[0]),
		total_width = parseInt(slide_width) * slides.length; // Total width of all slides

	$('.js_show').show();
	wrapper.width(total_width);
	first_slide.addClass('active');
		
/* 	The selector was getting dodgy heights when the page was hard refreshed by measuring 
	all the heights once the first image was loaded, so only the div with the first image 
	loaded got the correct height.
	
	I used a normal .height below, and replaced document.ready with window.load - which 
	waits for all images etc to load rather then just the document itself. - Craig
	
	
	$('#grid_slide img').load(function(){
		var heights = new Array();
		
		slides.quickEach(function(){
			heights[heights.length] = $('#grid_slide .grid_item').height();
		})
					
		var height = heights.sort()[0];
		wrapper.parent().height(height)
		slides.height(height)
	})
*/	

	var top_height = 0;
	
	$('#grid_slide .grid_item').quickEach(function(index) {
		var heightval = $(this).outerHeight();
		if(heightval > top_height) {
			top_height = heightval;
		}
	});
	
	$('#slide_wrapper, #grid_slide .grid_item').quickEach(function(index) {
			var final_height = top_height;
			$(this).css("height",final_height);	
	});	

	
	$(slides).click(function(){
		window.location = $(this).find('a').attr('href');
	})
	
	
	var last_slide = wrapper.children(':last-child');
	wrapper.prepend($(last_slide)).css('left', -slide_width);
	
	var animating = false;
	next.click(function(){
		var current_position = wrapper.css('left'),
			next_position = parseInt(current_position)-slide_width;

		if(!animating){
			animating = true;
			wrapper.animate({
				left: next_position
			}, 800, function(){
				animating = false;
				
				var curr_active = wrapper.find('.active');
				wrapper.find('.active').removeClass('active');
				curr_active.next().addClass('active');
								
				if(wrapper.find('.active').index() == parseInt(slides.length)-4){
					var first_slide = wrapper.children(':first-child'),
						jump_position = parseInt(wrapper.css('left')) + slide_width;
					wrapper.append($(first_slide)).css('left', jump_position)
				}
			})
		}
	})
	
	prev.click(function(){
		var current_position = wrapper.css('left'),
			next_position = parseInt(current_position)+slide_width;

		if(!animating){
			animating = true;
			wrapper.animate({
				left: next_position
			}, 800, function(){
				var curr_active = wrapper.find('.active');
				wrapper.find('.active').removeClass('active');
				curr_active.prev().addClass('active')
				animating = false;
				
				if(wrapper.find('.active').index() == 0){
					var last_slide = wrapper.children(':last-child'),
						jump_position = parseInt(wrapper.css('left')) - slide_width;
					wrapper.prepend($(last_slide)).css('left', jump_position)
				}
			})
		}
	})
})