j$(document).ready(function(){
	var currentPosition = 0;
	var itemWidth = 150;
	var slideWidth = 170;
	var slides = j$('.newsItem');
	var numberOfSlides = slides.length;

	// Remove scrollbar in JS
	j$('#newsContainer').css('overflow', 'hidden');

	// Wrap all .slides with #slideInner div
	slides
		.wrapAll('<div id="slideInner"></div>')
		// Float left to display horizontally, readjust .slides width
	.css({
			'float' : 'left',
			'width' : itemWidth
		});

	// Set #slideInner width equal to total width of all slides
	j$('#slideInner').css('width', slideWidth * numberOfSlides);

	// Insert controls in the DOM
	j$('#newsSlider')
		.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
		.append('<span class="control" id="rightControl">Clicking moves right</span>');

	// Hide left arrow control on first load
	manageControls(currentPosition);

	// Create event listeners for .controls clicks
	j$('.control')
		.bind('click', function(){
		// Determine new position
	currentPosition = (j$(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

	// Hide / show controls
		manageControls(currentPosition);
		// Move slideInner using margin-left
		j$('#slideInner').animate({
			'marginLeft' : slideWidth*(-currentPosition)
		});
	});

	// manageControls: Hides and Shows controls depending on currentPosition
	function manageControls(position){
		// Hide left arrow if position is first slide
	if(position==0){ j$('#leftControl').hide() } else{ j$('#leftControl').show() }
	// Hide right arrow if position is last slide
		if(position==numberOfSlides-3){ j$('#rightControl').hide() } else{ j$('#rightControl').show() }
	}
});