/*
SIMPLE IMAGE SLIDER
AUTHOR: Philip Allen
DATE: 2/16/11

______________________

To create a slider in your template, simply create an
unordered list with the class "slide", and place the
images in separate list items.  All images must be of
equal size.

*/

$(document).ready(function(){
	
	//To set slide duration, change the number below
	var slideDuration = 6500 //milliseconds

	$('.slider').wrap('<div class="sliderWrap"></div>');

	//get the image width
	var imageWidth = $('.slider li:eq(0) img').width();
	var imageHeight = $('.slider li:eq(0) img').height();
	var imageQuant = $('.slider li').length;

	$('.slider').css({
		'list-style-type' : 'none',
		'margin' : 0,
		'padding' : 0,
		'display' : 'block',
		'position' : 'relative',
		'width' : imageQuant * imageWidth,
		'right' : '0px'
	});

	$('.slider li').css({
		'float' : 'left',
		'position' : 'relative',
		'margin' : 0,
		'padding' : 0
	});

	$('.sliderWrap').css({
		'width' : imageWidth,
		'height' : imageHeight,
		'overflow' : 'hidden',
		'margin' : '0 35px 35px'
	});
	
	function slide(){
		var sliderPos = parseInt($('.slider').css('right'));
		
		if(sliderPos < imageWidth * (imageQuant - 1)) {
			$('.slider').animate({
				'right' : sliderPos + imageWidth + 'px'
			})
		} else {
			$('.slider').animate({
				'right' : 0 + 'px'
			})
		}
	}
	setInterval(slide, slideDuration);
	
});