(function() {
	
	var counter = 0;
	var auto = document.querySelector('.auto');
	
	// gets the figure elements
	var img = document.querySelectorAll('.rotator figure');
	
	// caches the number of figure elements
	var numItems = img.length;
	
	// event utility used to deal with IE8 junk
	var eventUtility = {
		
		addEvent: function(el, type, fn)
	    {
	        if (typeof addEventListener !== 'undefined') {
	            el.addEventListener(type, fn, false);
	        } else if (typeof attachEvent !== 'undefined') {
	            el.attachEvent("on" + type, fn);
	        } else {
	            el["on" + type] = fn;
	        }
	    },
	    
	    getTarget: function(e)
	    {
	        if (typeof e.target !== 'undefined') {
	            return e.target;
	        } else {
	            return e.srcElement;
	        }
	    },
	
	    preventDefault: function(e)
	    {
	        if (typeof e.preventDefault !== 'undefined') {
	            e.preventDefault();
	        } else {
	            e.returnValue = false;
	        }
	    }
	}
	
	// enables auto advance if the auto class is found
	if (auto) {
		setInterval(next, 5000);
	} 
	
	// event delegation 
	function clickHandler(e) 
	{
		var target = eventUtility.getTarget(e);
		console.log(target);
		if (target.className == 'next') {
			next();
		} 
		
		if (target.className == 'prev') {
			prev();
		}
	}
	
	// keeps track of the count variable
	function showCurrent()
	{
		var itemToShow = Math.abs(counter % numItems);
		
		[].forEach.call( img, function(el) {
			el.classList.remove('show');
		});
		
		img[itemToShow].classList.add('show');        
	}
	
	// increments the count varialble to show the next image
	function next()
	{
		counter++;
		showCurrent();
	}
	
	// decrements the count variable to show the previous image
	function prev()
	{
		counter--;
		showCurrent();
	}

	eventUtility.addEvent(document, 'click', clickHandler);
	
})();