/*
 Tonatiuh Núñez (tonatiuhN@hotmail.es)

<script type="text/javascript" src="htm/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="htm/js/jQuery.slider.js"></script>
<script>
$(document).ready(function(){
	$('#theSlider').slider({width:269,length:3,speed:200,duration:4000});
});
</script>

<div id="theSlider">
		<div id="prev" style="" class="floatl"><a href="#"><img src="" /></a></div>
		<div id="slider" class="floatl">
			<div class="sliderContainer">
				<div class="slide"></div>
				<div class="slide"></div>
			</div>
		</div>
		<div id="next" style="" class="floatl"><a href="#"><img src="" /></a></div>
		<div class="clear"></div>
	</div>
</div>


*/

jQuery.fn.slider = function (options) {
    var defaults = {
        speed: 500,
        duration: 5000,
		length: 1,
		position: 0,
        width: 'auto',
        height: 'auto',
		space: 0 //space for the space btween the slides and to fix the extra space generated by including the padding of the slide on the width
    };
    var options = jQuery.extend(defaults, options);
    var slides, timer;
    speed = options.speed;
    duration = options.duration;
    x = $(this).attr('id');
    $('#slider', this).css({ 'width': (options.width * options.length) - options.space, 'height': options.height, 'overflow': 'hidden' }); //Styling the slider
    slides = $('#slider .sliderContainer > .slide', this); // Getting the slide's collection
    slides.each(function () {
        $(this).css({ 'width': options.width, 'height': options.height, 'float': 'left' }); //Styling each slide
    });
    $('#slider .sliderContainer', this).css('width', slides[0].offsetWidth * slides.length); // Growing the slidesContainer which is gonna be moving
	
    var oThis = $(this);
    function sliderScroll(direction) {
        position = $('#slider', oThis).scrollLeft();
        totalWidth = (slides.length * slides[0].offsetWidth) - slides[0].offsetWidth

        switch (direction) {
            case 'right':
                if (position + (slides[0].offsetWidth * options.length) > totalWidth) {
                    $('#slider:not(:animated)', oThis).animate({ scrollLeft: 0 }, speed * (slides.length / 3));
                } else {
                    $('#slider:not(:animated)', oThis).animate({ scrollLeft: position + slides[0].offsetWidth }, speed);
                }
                break;

            case 'left':
                if (position - slides[0].offsetWidth < 0) {
                    $('#slider:not(:animated)', oThis).animate({ scrollLeft: totalWidth }, speed * (slides.length / 3));
                } else {
                    $('#slider:not(:animated)', oThis).animate({ scrollLeft: position - slides[0].offsetWidth }, speed);
                }
                break;
        }

    }

	$('#slider:not(:animated)', oThis).animate({ scrollLeft: options.position*slides[0].offsetWidth }, 0);

    function initTimer() {
        timer = setInterval(function () { sliderScroll('right'); }, options.duration);
    }

    $('#next', this).click(function () {
        clearInterval(timer);
        sliderScroll('right');
        initTimer();
        return false;
    });

    $('#prev', this).click(function () {
        clearInterval(timer);
        sliderScroll('left');
        initTimer();
        return false;
    });

    initTimer();
}