/*
*	Ejemplo HTML para $("#slider").xpressSliderInit();
*	
* 	<div id="slider">
*		<ul>
*			<li><img src="images/01.jpg" alt="" onload="xSliderLoading=false" /></li>
*			<li><img src="images/02.jpg" alt="" /></li>
*			<li><img src="images/03.jpg" alt="" /></li>
*			<li><img src="images/04.jpg" alt="" /></li>
*			<li><img src="images/05.jpg" alt="" /></li>
*		</ul>
*	</div>
*
*/

(function($) {

    $.fn.xpressSliderImgOnload = function() {

        // aņade en la primera imagen un semaforo para controlar la carga de la imagen
        if (typeof ($(this)[0].xSliderLoadingCount) == 'undefined' || $(this)[0].xSliderLoadingCount == null) {
            // no funciona con IE6, el img del HTML debe tener este codigo.
            $(this)[0].xSliderLoadingCount = 0;
        }

        $(this)[0].xSliderLoadingCount++;

    }

    // Inicia el slider
    $.fn.xpressSliderInit = function(sliderObj) {

        // guardamos el objeto 'slider' para recuperarlo en el setTimeout
        if (typeof (sliderObj) == 'undefined') sliderObj = $(this);

        // aņade en la primera imagen un semaforo para controlar la carga de la imagen
        if (typeof (sliderObj[0].xSliderLoadingCount) == 'undefined' || sliderObj[0].xSliderLoadingCount == null) {
            sliderObj[0].xSliderLoadingCount = 0;
        }

        // esperamos mientras estamos cargando las imagenes
        if (sliderObj[0].xSliderLoadingCount < $("li", sliderObj).length) { 
            setTimeout(function() { sliderObj.xpressSliderInit(sliderObj); }, 1000);
            return;
        }

        // asignamos el ancho del slider con la primera imagen
        sliderObj.width(sliderObj.find("ul li img:first").width());

        // inicia el slider
        sliderObj.xpressSlider({ speed: 500 });

    }

    // Constructor del slider
    $.fn.xpressSlider = function(options) {

        // default configuration properties
        var defaults = {
            prevId: 'prevBtn',
            prevText: 'Previous',
            nextId: 'nextBtn',
            nextText: 'Next',
            orientation: '', //  'vertical' is optional;
            speed: 800,
            timeSlide: 10000
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
            var obj = $(this);

            var timer_id = null;
            var timer_index = 0;
            var s = $("li", obj).length;
            var w = obj.width();
            var h = obj.height();
            var ts = s - 1;
            var t = 0;
            var vertical = (options.orientation == 'vertical');
            var i = 0;

            // contenedor
            $("ul", obj).css('width', s * w);
            if (!vertical) $("li", obj).css('float', 'left');

            // botones
            var sbuttons = '<div class="xslyder_buttons ' + $(obj).attr('id') + '"><ul>';
            for (i = 0; i < s; i++) sbuttons += '<li class="xslyder_button_item xslyder_button' + i + ' ' + $(obj).attr('id') + '"><a href="javascript:void(0);">' + (i + 1) + '</a></li>';
            $(obj).after(sbuttons + '</ul></div>');
            for (i = 0; i < s; i++) { eval('$(".xslyder_button' + i + '.' + $(obj).attr('id') + '").click(function(){ step(' + i + '); });'); }

            // play
            step(0);
            timer_id = setTimeout(play, options.timeSlide);

            // mostramos la imagen segun el indice
            function step(i, play) {

                // si el usuario selecciona un paso paramos el play.
                if (typeof (play) == 'undefined' && timer_id) clearTimeout(timer_id);

                // selecciona el boton del paso actual
                $('.xslyder_button_item.' + $(obj).attr('id')).each(function() {
                    $(this).removeClass('selected');
                });
                $('.xslyder_button_item.xslyder_button' + i + '.' + $(obj).attr('id')).addClass('selected');

                // muestra la imagen seleccionada
                var direc = i < t ? 'prev' : 'next';
                var diff = i < t ? t - i : i - t;
                animate(direc, diff, play);

            }

            // muestra la imagen con un efecto
            function animate(dir, i, play) {
                if (typeof (i) == 'undefined') i = 1;

                // calculamos el indice
                if (dir == "next") {
                    t = (t >= ts) ? ts : t + i;
                } else {
                    t = (t <= 0) ? 0 : t - i;
                };

                // movemos el slider aplicando el efecto
                if (!vertical) {
                    p = (t * w * -1);
                    if (play == 1) {
                        $("ul", obj).css('marginLeft', p);
                    } else {
                        $("ul", obj).animate(
							{ marginLeft: p },
							options.speed
						);
                    }
                } else {
                    p = (t * h * -1);
                    if (play == 1) {
                        $("ul", obj).css('marginLeft', p);
                    } else {
                        $("ul", obj).animate(
							{ marginTop: p },
							options.speed
						);
                    }
                }
            };

            // timer para mostrar las imagenes automaticamente
            function play() {
                timer_index = ((timer_index + 1) < s) ? timer_index + 1 : 0;
                step(timer_index);
                timer_id = setTimeout(play, options.timeSlide);
            }

        });

    };

})(jQuery);