// PLUGIN DEFINITION
(function($) {
    // SLIDER DEFINITION
    $.fn.mangiroSlider = function(options) {
        // build main options
        var settings = $.extend({}, $.fn.mangiroSlider.defaults, options);

        this.each(function() {
            $this = $(this);
            if (typeof settings.list != "undefined") {
                settings.totalItems = settings.list.length;

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

                    // 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);
                    }

                    // 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() { sliderLoadItem($this, settings, i); return false; })
                                .addClass(settings.itemClass + i);
                            var imageElement = $("<img />").attr({ src: settings.list[i][settings.thumbKey] })
                                .addClass(settings.thumbClass);
                            //IE FIX: En IE las imagenes se cachean y el evento load no se dispara en sucesivos accesos (navegando por la web)
                            //  Existe un fix que es agregar al src de la imagen la fecha y hora actual, de manera que siempre se pida la imagen
                            //  y no se cachee. Como no queremos que eso ocurra en todos los navegadores, lo que hemos hecho es deshabilitar
                            //  el load para IE 8 o menor (y por tanto, el efecto FadeIn que tenian las imagenes)
                            if (!settings.ieExplorer) {
                                imageElement.bind("load", function() { $(this).fadeIn(settings.itemAnimationTime); });
                            }
                            else {
                                // La clase del thumb lleva un display:none para el FadeIn. Lo anulamos para IE.
                                imageElement.css("display", "inline");
                                imageElement.css("filter", "alpha(opacity = 100)");
                            }

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

                            containerElement.append(itemElement);
                        });
                    }

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

                    sliderCleanAnchors($this, settings);

                    // CLEAN IMAGE DIV
                    $this.find("div.image").empty();

                    sliderShowActualItem($this, settings);

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

    function sliderFirstStart($obj, settings) {
        if (settings.sliding == false) {
            sliderStart($obj, settings);
            settings.sliding = true;
        }
    }

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

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

    function sliderShowActualItem($obj, settings) {
        if ($obj.find("div.image img").length > 1) {
            $obj.find("div.image img:first").remove();
        }
        var newElement = $("<img src='" + settings.list[settings.actualItem][settings.imageKey] + "' />")
            .bind("load", function() { $(this).fadeIn(); sliderFirstStart($obj, settings); })
            .bind("click", function() { document.location = settings.list[settings.actualItem][settings.urlKey] });

        $obj.find("div.image").append(newElement);

        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 sliderLoadItem($obj, settings, itemPosition) {
        sliderStop($obj, settings);

        if ((itemPosition >= 0) && (itemPosition < settings.totalItems)) {
            settings.actualItem = itemPosition;
            settings.actualItem = settings.actualItem % settings.totalItems;

            sliderShowActualItem($obj, settings);
        }

        sliderStart($obj, settings);
    }

    function sliderCleanSelectedThumb($obj, settings) {
        $obj.find("ul li a." + settings.thumbSelectedClass).removeClass(settings.thumbSelectedClass);
    }

    function sliderSetSelectedThumb($obj, settings) {
        if ((settings.actualItem >= 0) && (settings.actualItem < settings.totalItems)) {
            sliderCleanSelectedThumb($obj, settings);
            $obj.find("ul li a." + settings.itemClass + 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.mangiroSlider.defaults = {
        id: "slider",
        name: "Mangiro Slider",
        list: [],
        actualItem: 0,
        totalItems: 0,
        showPreviousButton: true,
        showNextButton: true,
        showThumbs: true,
        // Inner status
        sliding: false,
        // Slider animations
        sliderAnimationTime: 5000,
        buttonAnimationTime: 200,
        itemAnimationTime: 500,
        overOpacity: 0.8,
        outOpacity: 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"
    };
})(jQuery);