/*Image Slider (non-looping) Plugin:*/
$.fn.imageSlider = function (add_arrows) {
	add_arrows = typeof(add_arrows) != 'undefined' ? add_arrows : true; //if not set, by default add arrows
	/*For each input element (hopefully only one), perform the setup:*/
	this.each(function () {
		/*Initialize variables:*/
		var $wrapper = $(this); //get the wrapper div we're using
		var $slides_div = $wrapper.find('> div'); //get the holding div
		var $slides_ul = $slides_div.find('> ul'); //get the ul holding the slides
		var $slides_lis = $slides_ul.find('> li'); //get the li's holding the slides
		var current_slide = 1; //the current slide at the left of the scroll area
		$slides_lis.each(function () { //for all of the li's
			$(this).css('float', 'left'); //float them left
			$(this).css('display', 'inline'); //set to inline display
		});
	
		/*Initialize the elements:*/
		var num_slides = $('> li', $slides_ul).size();
		var li_width = $('> li:first', $slides_ul).outerWidth(true); //get the li width (including margins) for calculations
		var ul_width = num_slides*li_width; //calculate the width of the ul
		$slides_ul.css('width', ul_width); //set the ul to that width

		/*Add arrows (if necessary):*/
		if(add_arrows) { //if we want to add arrows
			$slides_div.before('<a class="back slider_arrow disabled">&laquo;</a>'); //add the back arrow before the main slides
			$slides_div.after('<a class="forward slider_arrow available">&raquo;</a>'); //add the forward arrow after the main slides
		}
		var $back = $wrapper.find('> a.back'); //get the back arrow
		var $forward = $wrapper.find('> a.forward'); //get the forward arrow
		var arrow_width = $back.outerWidth(true); //get the width of the arrows
		var no_arrows = false; //we are, by default, using arrows
		if(num_slides == num_slides_show) { //if the number of slides to show is all of the slides
			$back.after('<div style="width: '+arrow_width+'px; float: left">&nbsp;</div>'); //insert a div to replace the left arrow when not needed
			$back.remove(); //remove the back arrow
			$forward.after('<div style="width: '+arrow_width+'px; float: left">&nbsp;</div>'); //insert a div to replace the right arrow when not needed
			$forward.remove(); //remove the forward arrow
			no_arrows = true; //set the no_arrows flag to true
		}

		/*Initialize the widths of displayed areas:*/
		var wrapper_width = $wrapper.innerWidth(); //get the inner width of the container div
		var container_width = wrapper_width - 2*arrow_width; //calculate the width of the container that holds the ul
		$slides_div.css('width', container_width); //set the container to the appropriate width
		$slides_div.css('overflow-x', 'hidden'); //hide x-overflow
		$slides_div.css('overflow-y', 'hidden'); //hide y-overflow
		$slides_div.css('float', 'left'); //float the div to the left
		$slides_ul.css('white-space', 'nowrap'); //disable wrapping in the ul
		var num_slides_show = Math.floor(container_width/li_width);

		/*React to arrow clicks:*/
		$back.click(function() {
			if(current_slide <= num_slides_show) { //if we're within num_slides_show slides of the beginning
				current_slide = 1; //go to the first slide
			}
			else {
				current_slide = current_slide - num_slides_show; //otherwise, just go to the left num_slides_show slides
			}
			$slides_div.animate({scrollLeft : (current_slide - 1)*li_width}, 500); //scroll to the desired slide
			if(!no_arrows) { //if we are using arrows, change the colors as necessary:
				$forward.addClass('available'); //make the arrow available
				$forward.removeClass('disabled'); //remove the disabled class
				if( current_slide == 1) { //if we're at the start of the scroller
					$back.addClass('disabled'); //make the arrow disabled
					$back.removeClass('available'); //remove the available class
				}
			}
		});

		$forward.click(function() {
			if((current_slide + num_slides_show) >= (num_slides - num_slides_show)) { //if we're within num_slides_show slides of the end
				current_slide = num_slides - num_slides_show + 1; //set it so the last slide is on the far right
			}
			else {
				current_slide = current_slide + num_slides_show; //otherwise, just increment it by num_slides_show
			}
			$slides_div.animate({scrollLeft : (current_slide - 1)*li_width}, 500);
			if(!no_arrows) { //if we are using arrows, change the colors appropriately:
				$back.addClass('available'); //make the arrow available
				$back.removeClass('disabled'); //remove the disabled class
				if( current_slide == (num_slides - num_slides_show + 1)) { //if we're at the end of the scroller
					$forward.addClass('disabled'); //make the arrow disabled
					$forward.removeClass('available'); //remove the available class
				}
			}
		});
	});
};