// If JavaScript is disabled it will look more user friendly
// and no matter how many images we add, the code will work properly

(function(){
	var container = $('div.slider').css('overflow', 'hidden').children('ul'),
		slider = new Slider(container, $('#slider-nav'));

	slider.nav.show().find('button').on('click', function(){
		slider.setCoordinates($(this).data('dir'));
		slider.transition();
	});

	setInterval(function() {
		slider.setCoordinates('next');
		slider.transition();
	}, 3000);
})();

function Slider(container, nav) {
	this.container = container;
	this.nav = nav.show();

	this.imgs = this.container.find('img');
	this.imgWidth = this.imgs[0].width;
	this.imgsLen = this.imgs.length;

	this.current = 0;
}

Slider.prototype.transition = function(coords) {
	this.container.animate({
		'margin-left': coords || -(this.current * this.imgWidth)
	});
};

Slider.prototype.setCoordinates = function(dir) {
	var pos = this.current;

	pos += ( ~~(dir === 'next') || -1); // add or substract 1
	this.current = (pos < 0) ? this.imgsLen - 1 : pos % this.imgsLen;

	return pos;
};