$(function() {         
//START THE JQUERY

//INITIALISE SCROLLABLE CONTENT
    $("div.scrollable").scrollable({ 
        interval: 5000, 
        loop: true,
		size:2,
		clickable:false
    });

//HERO NEWS SLIDER

	//Set the height of the container
	var hnHeight = $('div#hero_news div.hero_news_content:first').height() + ( (document.getElementById("hero_navigation")) ? 10 : -22  ) ;
	$('div#hero_news').css({height:hnHeight});

	//Find the total number of items
	hnTotal = $('div#hero_news div.hero_news_content').size();

	//This stops people madly clicking between the content and fucking things up.
	hnBusy = false;

	//NAV CLICK
	//Checks to see if it's busy, then finds the next position based on the nav index then fires a few functions
	var theA = $('div#hero_navigation li a').click(function(){
		if(hnBusy == false){
			hnBusy = true;
    		var hnNextPosition = (theA.index(this)) + 1;
			hnScroll(hnNextPosition);
			$(this).parent().addClass('on').siblings('li').removeClass('on');
			hnResize(hnNextPosition - 1);
		}else{
			//Don't do a thing
		}
		return false;
	});

	//Find the new position and then animate to it
	function hnScroll(hnDistance){
		var hnNewPosition = (hnDistance * 509) - 509 + 'px';
		$('div.hero_news_container').animate({left: '-' + hnNewPosition}, 1018, "easeOutQuart", notBusy);
	}

	//Not busy any more
	function notBusy(){
		hnBusy = false;
	}

	//Resize the container. (Just in case the content is too big...)
	//This does push down the entire page which is slow, so if possible content should try and fit in the 244px height.
	function hnResize(whichContent){
		var hnHeight = $('div#hero_news div.hero_news_content:eq(' + whichContent + ')').height() + 10;
		$('div#hero_news').animate({height:hnHeight}, 200);
	}

	//Easing equation for the animation. This can be taken out if things get slow. Should be fine though.
	jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	};

//END THE JQUERY
});