jQuery(document).ready(function ($) {
	if( jQuery(".ill-quotes-rotator-wrapper").length > 0 ) {

		// place in function so we can recall it on resize
		function rotator_width() {
			// find the number of quotes
			var i = $('.ill-quotes-quote').length;
			var percent = 100 / i;

			// width of the area = width of a single quote
			var rotate_width = $('.ill-quotes-rotator-wrapper').outerWidth();

			// get the total width
			var total_width = i * rotate_width;

			$('.ill-quotes-rotator-wrap').css({
				'width' : total_width + 'px'
			});
			$('.ill-quotes-quote').css({
				'width' : percent + '%'
			});

			// assign the margin left based on the chosen item
			var active_now = $('.ill-quotes-pagination ul li.active').attr('id');
				active_now = active_now.replace('page-', '');
				active_now = parseInt(active_now);
			var margin_left = (active_now * rotate_width);
			$('.ill-quotes-rotator-wrap').css({
				'margin-left' : '-' + margin_left + 'px'
			});

			// clicking functionality
			$('.ill-quotes-pagination ul li').click(function(){
				// get the deets on what was clicked
				var newpage = $(this).attr('id');
					newpage = newpage.replace('page','quote');
				// we need the number
				var number = newpage.replace('quote-', '');
					number = parseInt(number);
				// remove active
				$('.ill-quotes-pagination ul li.active').removeClass('active');
				$('.ill-quotes-quote.active').removeClass('active');

				// now add it to the right one
				$(this).addClass('active');
				$('#'+newpage).addClass('active');

				// we need to move the container so we can actually see the active item
				var margin_left = (number * rotate_width);
				$('.ill-quotes-rotator-wrap').css({
					'margin-left' : '-' + margin_left + 'px'
				});
			});
		}

		// get the width and reget it on window resize
		rotator_width();

		$(window).resize(function() { 
            rotator_width();
        }); 

		
	}

});