/*
	Easy Slider 1.0 by Craig Janis of Fubeca Studio (http://fube.ca)
	
	I'd love to hear from people who use this code. Please let me know! Email support@fube.ca.	
	If you find bugs, have suggestions, or have useful modifications to share, please send them to support@fube.ca.
	
	Slider Behavior
	- The slider will start automatically on page load, and will cycle through the slides until the user clicks on the navigation buttons.
	- The slider will restart automatically when the page is resized.
	- The slider will resize itself to fit the page dimensions, but will not size itself larger than the maximum width you specify in the css file.
	
	Instructions
	1) Set the following variables in this js file: sliderDelay, sliderSpeed, and slideImgAspect
	2) In the css file, set the max-width of div.easy_slider_wrapper to be the width of your slide images
	3) In the css file, make sure that the file path to sprite.png is correct.
	4) Insert the html code into your document, put each slide image into an <li> in <ul> inside of div.easy_slider
	5) Call jquery.js, easy_slider.css, and easy_slider.js
	
*/


/* Easy Slider */
$(document).ready(function() {

	/* slider variables */
	sliderDelay = 4700; // delay between slides, must be at at least equal to sliderSpeed
	sliderSpeed = 700; // transition speed
	slideImgAspect = 0.3830; // slide image height divided by width, up to 4 decimal places

	/* get slide count */
	slideCount = $('div.easy_slider ul li').size();
	
	/* slider positioning */
	initSliderVar = function() {

		// get number of slides

		// slide size
		wrapperW = $('div.easy_slider').width();
		wrapperW = parseInt(wrapperW);
		$('div.easy_slider ul li img').css('width', wrapperW)
		
		// slider size
	   	sliderW = wrapperW * slideCount;
	   	minSliderX = (slideCount - 1) * wrapperW * -1;
	   	maxSliderX = 0;
		$('div.easy_slider ul').css('width', sliderW);
		
		// slider x
		$('div.easy_slider ul').css('left', 0);
		sliderX = $('div.easy_slider ul').css('left');
		sliderX = parseInt(sliderX);	
		
		// nav elements
		sliderBtnH = $('#slider_leftBtn').height();
		sliderBtnY = Math.round(((wrapperW * slideImgAspect) - sliderBtnH) / 2);
		$('#slider_leftBtn, #slider_rightBtn').css('top', sliderBtnY);

		// slide indicators
		$('ol#slide_indicators li').css('background-position', '0 -42px');
		$('#indicatorNum0').css('background-position', '-17px -42px');
		
		// hide nav if only one slide
		if (slideCount <= 1) {
			$('#slider_leftBtn, #slider_rightBtn, ol#slide_indicators').css('display', 'none');
		}
		
	}
	
	/* slide it */
	slideIt = function(a,b) {
	
		// which direction?
		if (a == 'left') {
			newSliderX = sliderX + wrapperW;
			if (newSliderX > maxSliderX) {
				newSliderX = minSliderX;
			}
		} else if (a == 'right') {
			newSliderX = sliderX - wrapperW;
			if (newSliderX < minSliderX) {
				newSliderX = 0;
			}
		} else if (a == 'jump') {
			newSliderX = b * wrapperW * -1;
		}
		sliderX = newSliderX;
	
		// animate it
		$('div.easy_slider ul').animate({left: newSliderX}, sliderSpeed, function() {
			currentSlide = '#indicatorNum' + Math.abs(newSliderX / wrapperW);
			$('ol#slide_indicators li').css('background-position', '0 -42px');
			$(currentSlide).css('background-position', '-17px -42px');
		});
	
	}

	/* slider nav buttons */
	$('div.easy_slider').prepend('<div id="slider_leftBtn"></div><div id="slider_rightBtn"></div>');
	$('#slider_leftBtn, #slider_rightBtn').css('opacity', 0.65);
	// show buttons
	$('div.easy_slider').mouseover(function() {
		$('#slider_leftBtn, #slider_rightBtn').css('visibility', 'visible');
	});
	$('div.easy_slider').mouseout(function() {
		$('#slider_leftBtn, #slider_rightBtn').css('visibility', 'hidden');
	});
	// mouseover/out
	$('#slider_leftBtn, #slider_rightBtn').mouseover(function() {
		$(this).css('opacity', 1);
	});
	$('#slider_leftBtn, #slider_rightBtn').mouseout(function() {
		$(this).css('opacity', 0.65);
	});
	// button clicks
	$('#slider_leftBtn').click(function() {
		clearInterval(slideTimer);
		slideIt('left');
	});
	$('#slider_rightBtn').click(function() {
		clearInterval(slideTimer);
		slideIt('right');
	});
	
	/* slide indicators */
	indicatorsCode = new Array();
	for (var i=0;i<slideCount;i++) {
		indicatorsCode[i] = '<li id="indicatorNum' + i + '" jumpto="' + i + '"></li>';
	}
	slideIndicators = indicatorsCode.join('');
	$('div.easy_slider').prepend('<ol id="slide_indicators">' + slideIndicators + '</ol>');
	$('ol#slide_indicators li').css('opacity', 0.65);
	// mouseover/out
	$('ol#slide_indicators li').mouseover(function() {
		$(this).css('opacity', 1);
	});
	$('ol#slide_indicators li').mouseout(function() {
		$(this).css('opacity', 0.65);
	});
	// indicator clicks
	$('ol#slide_indicators li').click(function() {
		clearInterval(slideTimer);
		indicatorNum = $(this).attr('jumpto');
		slideIt('jump',indicatorNum);
	});

	/* initialize slider */
	initSlideIt = function() {
		slideIt('right');
	}
	slideTimer = setInterval(initSlideIt, sliderDelay);
	initSliderVar();
	
	/* reload when window resizes */
	$(window).resize(function() {
		clearInterval(slideTimer);
		slideTimer = setInterval(initSlideIt, sliderDelay);
		initSliderVar();
	});

});