// PLUGIN DEFINITION.
// Este Slider es parecido al que ya tenemos, salvo porque en vez de crear los elementos, espera que ya esten creados
// como una lista de li con clases li-0, li-1, etc...
(function($) {
    // SLIDER DEFINITION
    $.fn.mangiroSliderAdvanced = function(options) {
        // build main options
        var settings = $.extend({}, $.fn.mangiroSliderAdvanced.defaults, options);

        this.each(function() {
            $this = $(this);

            if (settings.totalItems > 0) {
                // CREATE LAYOUT
                var containerElement = $("<ul></ul>").addClass("nav-items");

                // PREVIOUS BUTTON
                if (settings.showPreviousButton) {
                    var previousElement = $("<li></li>").addClass(settings.previousButtonClass)
                            .bind("click", function() { sliderLoadPreviousItem($this, settings); return false; });
                    var previousLinkElement = $("<a><span>" + settings.previousButtonName + "</span></a>")
                            .attr({ title: settings.previousButtonName, href: "#" })
                            .bind("mouseover", function() { $(this).animate({ opacity: settings.overOpacity }, settings.buttonAnimationTime, function() { $(this).clearQueue(); }); })
                            .bind("mouseout", function() { $(this).animate({ opacity: settings.outOpacity }, settings.buttonAnimationTime, function() { $(this).clearQueue(); }); })
                            .css('opacity', settings.outOpacity);
                    previousElement.append(previousLinkElement);

                    containerElement.append(previousElement);
                }

                // NEXT BUTTON
                if (settings.showNextButton) {
                    var nextElement = $("<li></li>").addClass(settings.nextButtonClass)
                            .bind("click", function() { sliderLoadNextItem($this, settings); return false; });
                    var nextLinkElement = $("<a><span>" + settings.nextButtonName + "</span></a>")
                            .attr({ title: settings.nextButtonName, href: "#" })
                            .bind("mouseover", function() { $(this).animate({ opacity: settings.overOpacity }, settings.buttonAnimationTime, function() { $(this).clearQueue(); }); })
                            .bind("mouseout", function() { $(this).animate({ opacity: settings.outOpacity }, settings.buttonAnimationTime, function() { $(this).clearQueue(); }); })
                            .css('opacity', settings.outOpacity);
                    nextElement.append(nextLinkElement);

                    containerElement.append(nextElement);
                }

                // NAVIGATION: LIST OF NUMBERED ITEMS
                if (settings.showNumberButtons) {
                    //Solo queremos los li que cuelgan directamente de ul.items (para el caso de la lista de autores)
                    $this.find('ul.items > li').each(
                        function(i, item) {
                            var iElement = $("<li></li>").addClass(settings.numberButtonClassPrefix + i)
                                    .bind("click", function() { sliderLoadItemAt($this, settings, i); return false; });
                            var iLinkElement = $("<a><span>" + (i + 1) + "</span></a>")
                                    .attr({ title: "Producto " + $(item).find('h3').text(), href: "#" });

                            iElement.append(iLinkElement);

                            containerElement.append(iElement);
                        });
                }



                // ADDING THUMB ITEMS
                if (settings.showThumbs) {
                    $(settings.list).each(function(i, item) {
                        var itemElement = $("<li></li>");
                        var anchorElement = $("<a></a>").attr({ href: settings.list[i][settings.urlKey] })
                                .bind("click", function() { sliderLoadItemAt($this, settings, i); return false; })
                                .addClass(settings.itemClass + i);
                        var imageElement = $("<img />").attr({ src: settings.list[i][settings.thumbKey] })
                                .bind("load", function() { $(this).fadeIn(settings.itemAnimationTime); })
                                .addClass(settings.thumbClass);

                        anchorElement.append(imageElement);
                        itemElement.append(anchorElement);

                        containerElement.append(itemElement);
                    });
                }

                if ((settings.showNumberButtons) || (settings.showPreviousButton) || (settings.showNextButton) || (settings.showThumbs)) {
                    $this.append(containerElement);
                }

                sliderCleanAnchors($this, settings);

                $this.find('ul.items > li').each(function(i, item) {
                    if ($(item).hasClass('li-0')) {
                        $(item)
							.css('opacity', 0)
							.css('display', 'block');
                    }
                    else {
                        $(item).css('display', 'none')
                                .css('opacity', 0);
                    }
                });

                $('li.li-0').animate({ opacity: 1 }, 2500);
                sliderSetSelectedThumb($this, settings);


                // START THE SLIDE IF NOT STARTED IN FIRST ITEM
                if (settings.sliding) if (settings.totalItems > 1) { sliderStart($this, settings); }
            } else {
                $this.remove();
            }
        });
        return (this);
    };

    // private functions
    function sliderStart($obj, settings) {
        $obj.everyTime(settings.sliderAnimationTime, settings.id, function() {
            sliderLoadNextItem($obj, settings);
        });
    }

    function sliderStop($obj, settings) {
        $obj.stopTime(settings.id);
    }

    //Muestra un elemento que este en la posicion indicada por index
    //Se diferencia de sliderLoadItem en que esta ultima solo carga elementos correlativos
    function sliderLoadItemAt($obj, settings, index) {
        //Si clickamos sobre el mismo numero, reiniciamos el contador
        if (index == settings.actualItem) {
            sliderStop($obj, settings);
            sliderStart($obj, settings);
            return;
        }

        sliderStop($obj, settings);

        var prevItem = settings.actualItem;
        settings.actualItem = index % settings.totalItems;

        itemAnimate($obj, settings, settings.actualItem, prevItem);

        sliderStart($obj, settings);

        sliderSetSelectedThumb($obj, settings);
    }

    //Muestra un nuevo item en la posicion index_actual con un efecto de fade.
    //El elemento que lo hace es el anterior, index_previo, con un fadeOut
    function itemAnimate($obj, settings, index_actual, index_previo) {
        var liactual = "li.li-" + index_actual;

        if (index_previo < 0) index_previo = settings.totalItems - 1;
        index_previo = index_previo % settings.totalItems;

        var liprev = "li.li-" + index_previo;

        //Se realizan dos animaciones simultaneas, el fade in del elemento entrante
        //y el fade out del elemento saliente, de manera que no da el efecto de estar 
        //superpuestos y ya no se hace necesario ponerle un fondo.
        $(function() {
            $(liprev).animate({ opacity: 0 },
                {
                    duration: 'slow',
                    queue: false,
                    complete: function() {
                        $(liprev).css('display', 'none');
                    }
                });

            $(liactual).css('display', 'block')
                       .css('opacity', 0);

            $(liactual).animate({ opacity: 1 },
                {
                    duration: 'slow',
                    queue: false
                });

        });
    }

    function sliderShowActualItem($obj, settings) {
        var prevItem = settings.actualItem - 1;
        if (prevItem < 0) prevItem = settings.totalItems - 1;
        prevItem = prevItem % settings.totalItems;

        itemAnimate($obj, settings, settings.actualItem, prevItem);

        sliderSetSelectedThumb($obj, settings);
    }

    function sliderLoadNextItem($obj, settings) {
        sliderStop($obj, settings);

        settings.actualItem++;
        settings.actualItem = settings.actualItem % settings.totalItems;

        sliderShowActualItem($obj, settings);

        sliderStart($obj, settings);
    }

    function sliderLoadPreviousItem($obj, settings) {
        sliderStop($obj, settings);

        settings.actualItem--;
        if (settings.actualItem < 0) settings.actualItem = settings.totalItems - 1;
        settings.actualItem = settings.actualItem % settings.totalItems;

        sliderShowActualItem($obj, settings);

        sliderStart($obj, settings);
    }

    function sliderCleanSelectedThumb($obj, settings) {
        if (settings.showThumbs)
            $obj.find("ul li a." + settings.thumbSelectedClass).removeClass(settings.thumbSelectedClass);
        if (settings.showNumberButtons)
            $obj.find("ul.nav-items li." + settings.thumbSelectedClass).removeClass(settings.thumbSelectedClass);
    }

    function sliderSetSelectedThumb($obj, settings) {
        if (settings.showThumbs) {
            if ((settings.actualItem >= 0) && (settings.actualItem < settings.totalItems)) {
                sliderCleanSelectedThumb($obj, settings);
                $obj.find("ul li a." + settings.itemClass + settings.actualItem).addClass(settings.thumbSelectedClass);
            }
        }

        if (settings.showNumberButtons) {
            if ((settings.actualItem >= 0) && (settings.actualItem < settings.totalItems)) {
                sliderCleanSelectedThumb($obj, settings);
                $obj.find("ul.nav-items li." + settings.numberButtonClassPrefix + settings.actualItem).addClass(settings.thumbSelectedClass);
            }
        }
    }

    function sliderCleanAnchors($obj, settings) {
        if (typeof $obj != "undefined") {
            $obj.find("a").each(function(i, item) {
                item.onfocus = new Function("if(this.blur)this.blur()");
            });
        }
    }

    $.fn.mangiroSliderAdvanced.defaults = {
        id: "slider",
        name: "Mangiro Slider",
        list: [],
        actualItem: 0,
        totalItems: 0,
        showPreviousButton: false,
        showNextButton: false,
        showThumbs: false,
        showNumberButtons: true,
        // Inner status
        sliding: true,
        // Slider animations
        sliderAnimationTime: 5000,
        buttonAnimationTime: 200,
        itemAnimationTime: 500,
        overOpacity: 0.8,
        outOpacity: 0.0,
        // JSON Data key
        urlKey: "url",
        imageKey: "image",
        thumbKey: "thumb",
        // CSS Clases and Lang Text
        previousButtonClass: "slideshow-prev",
        previousButtonName: "anterior",
        nextButtonClass: "slideshow-next",
        nextButtonName: "siguiente",
        itemClass: "slider-item",
        thumbClass: "thumb",
        thumbSelectedClass: "selected",
        numberButtonClassPrefix: "nav-"
    };
})(jQuery);