﻿(function ($) {
    $.fn.resizetransition = function (resizetransitionoptions) {
        var options = $.extend($.fn.resizetransition.defaults, resizetransitionoptions);
        options.selector = this;

        if ($(this).find("img").length == 1) {
            options.transition = true;
            options.carousel = false;
        }

        $.isPaused = false;

        if (options.transition) {
            $.loadedImages = new Array();
            $.loadedImagesIndex = 0;
            $.totalImages = $(this).find("img").length;

            //Lazy load the images and show them as they are ready, keep the orig height and width for ratio.
            //the jQuery height and width return zero because they are not in the DOM.
            $(this).find("img").each(function () {
                var i = new Image;
                i.src = this.src;

                if (!i.complete) {
                    $(i).load(function () {
                        $(i).attr("orig-height", $(i)[0].height);
                        $(i).attr("orig-width", $(i)[0].width);
                        $.loadedImages.push(i);
                    })
                } else {
                    $(i).attr("orig-height", $(i)[0].height);
                    $(i).attr("orig-width", $(i)[0].width);
                    $.loadedImages.push(i);
                }
            });

            $(options.selector).empty();

            $(window).bind("resize", function () {
                $(options.selector).find("img").resize();
            });

            nextSlide();
        }

        if (options.carousel) {
            $.totalImages = $(options.selector).find("img").length;

            //Create an inner div with the orig elements and the size constraints of the images.
            var d = $("<div />");
            d.css("position", "fixed");
            d.css("top", "0");
            d.css("left", "0");
            d.css("overflow", "hidden");

            var i = $(options.selector).find("img");
            var w = 0; i.each(function () { w += $(this).width(); });
            var h = i.first().height();

            //Keep the original height for the ratio and the whole divs original width.
            i.each(function () {
                var c = $(this);
                c.attr("orig-height", c.height());
                c.attr("orig-width", c.width());
            });

            d.css("width", w);

            d.append($(options.selector).children().detach());
            $(options.selector).empty();
            $(options.selector).append(d);

            $(options.selector).find("img").resize();
            d.height($(options.selector).find("img:first").height());

            $(window).bind("resize", function () {
                $(options.selector).find("img").resize();
                d.height($(options.selector).find("img:first").height());
            });

            $.slideInterval = setInterval(nextSlide, options.slide_interval);
        }
    };

    $.fn.resize = function () {
        var options = $.extend($.fn.resizetransition.defaults, $.fn.resizetransition.options);

        $(this).each(function () {
            var c = $(this);

            var ratio = c.attr("orig-height") / c.attr("orig-width");

            if (isNaN(ratio))
                return false;

            var imagewidth = c.width();
            var imageheight = c.height();
            var browserwidth = $(window).width();
            var browserheight = $(window).height();

            if (options.transition) {
                if ((browserheight / browserwidth) > ratio) {
                    c.height(browserheight);
                    c.width(browserheight / ratio);
                } else {
                    c.width(browserwidth);
                    c.height(browserwidth * ratio);
                }
            }

            if (options.carousel) {
                if ((browserheight / browserwidth) > ratio) {
                    c.width(browserwidth);
                    c.height(browserwidth * ratio);
                } else {
                    c.height(browserheight);
                    c.width(browserheight / ratio);
                }
            }

            if (options.vertical_center == 1) {
                c.css("left", (browserwidth - c.width()) / 2);
                c.css("top", (browserheight - c.height()) / 2);
            }
        });

        return false;
    };

    $.fn.resizetransition.defaults = {
        selector: null,
        carousel: true,
        transition: false,
        vertical_center: 1,
        slide_interval: 10,
        initial_transition_interval: 1000,
        transition_interval: 5000,
        transition_animation_interval: 750
    };
})(jQuery);

function stopSlides() {
    $.isPaused = true;
}

function restartSlides() {
    $.isPaused = false;
}

function nextSlide() {
    var options = $.extend($.fn.resizetransition.defaults, $.fn.resizetransition.options);

    if (options.transition) {
        if ($.loadedImages.length == 0 && $.totalImages == 1) {
            //The first pass the image might not load so we have to ensure that we come back.
            //Use timeout instead of interval so we don't stop in the fadeout and it just continues.
            $.slideInterval = setTimeout(nextSlide, options.initial_transition_interval);
            return;
        } else if ($.loadedImages.length == 0) {
            return;
        }

        if ($.loadedImagesIndex >= $.loadedImages.length - 1) {
            $.loadedImagesIndex = 0;
        } else {
            $.loadedImagesIndex++;
        }

        if ($(options.selector).find("img").length == 0 && $.loadedImages.length > 0) {
            $(options.selector).hide().empty().append($($.loadedImages[$.loadedImagesIndex]));
            $(options.selector).find("img").hide();
            $(options.selector).show();
            $(options.selector).find("img").fadeIn(options.transition_animation_interval);
            $(options.selector).find("img").resize();

            if ($.totalImages == 1) {
                //We used a timeout so that it didn't cross intervals.
                clearTimeout($.slideInterval);
                return;
            }
        } else {
            $(options.selector).find("img").fadeOut(options.transition_animation_interval, function () {
                $(options.selector).hide().empty().append($($.loadedImages[$.loadedImagesIndex]));
                $(options.selector).find("img").hide();
                $(options.selector).show();
                $(options.selector).find("img").fadeIn(options.transition_animation_interval);
                $(options.selector).find("img").resize();

                if ($.totalImages == 1) {
                    //We used a timeout so that it didn't cross intervals.
                    clearTimeout($.slideInterval);
                    return;
                }
             });
        }

        if (!$.slideInterval) {
            $.slideInterval = setInterval(nextSlide, options.transition_interval);
        }
    }

    if (options.carousel) {
        if ($.isPaused) {
            return;
        }

        var d = $(options.selector).find("div");
        var w = $(window).width();

        var t = 0; d.find("img").each(function () { t += $(this).width(); });

        //See if we have to clone the elements to the end if the front of the div is nearing.
        if (t <= Math.abs(d.offset().left) + w) {
            //Add the width of the current div again because we are cloning it.
            d.css("width", d.width() + d.width());

            //If the end is near the clone the child nodes.  This will leak memory but keep the animation from jumping.
            d.children().clone().appendTo(d);
        }

        //Animate only 1 pixel so IE redraw doesn't look like crap and the pause is in place.
        d.css("left", --d.offset().left);
    }

    if ($.totalImages == 1) {
        clearInterval($.slideInterval);
    }
}
