/*! Backstretch - v2.0.4 - 2013-06-19
 * http://srobbin.com/jquery-plugins/backstretch/
 * Copyright (c) 2013 Scott Robbin; Licensed MIT */

;(function ($, window, undefined) {
    'use strict';

    /* PLUGIN DEFINITION
     * ========================= */

    $.fn.backstretch = function (images, options) {
        // We need at least one image or method name
        if (images === undefined || images.length === 0) {
            $.error("No images were supplied for Backstretch");
        }

        /*
         * Scroll the page one pixel to get the right window height on iOS
         * Pretty harmless for everyone else
         */
        if ($(window).scrollTop() === 0 ) {
            window.scrollTo(0, 0);
        }

        return this.each(function () {
            var $this = $(this)
                , obj = $this.data('backstretch');

            // Do we already have an instance attached to this element?
            if (obj) {

                // Is this a method they're trying to execute?
                if (typeof images == 'string' && typeof obj[images] == 'function') {
                    // Call the method
                    obj[images](options);

                    // No need to do anything further
                    return;
                }

                // Merge the old options with the new
                options = $.extend(obj.options, options);

                // Remove the old instance
                obj.destroy(true);
            }

            obj = new Backstretch(this, images, options);
            $this.data('backstretch', obj);
        });
    };

    // If no element is supplied, we'll attach to body
    $.backstretch = function (images, options) {
        // Return the instance
        return $('body')
            .backstretch(images, options)
            .data('backstretch');
    };

    // Custom selector
    $.expr[':'].backstretch = function(elem) {
        return $(elem).data('backstretch') !== undefined;
    };

    /* DEFAULTS
     * ========================= */

    $.fn.backstretch.defaults = {
        centeredX: true   // Should we center the image on the X axis?
        , centeredY: true   // Should we center the image on the Y axis?
        , duration: 5000    // Amount of time in between slides (if slideshow)
        , fade: 0           // Speed of fade transition between slides
    };

    /* STYLES
     *
     * Baked-in styles that we'll apply to our elements.
     * In an effort to keep the plugin simple, these are not exposed as options.
     * That said, anyone can override these in their own stylesheet.
     * ========================= */
    var styles = {
        wrap: {
            left: 0
            , top: 0
            , overflow: 'hidden'
            , margin: 0
            , padding: 0
            , height: '100%'
            , width: '100%'
            , zIndex: -999999
        }
        , img: {
            position: 'absolute'
            , display: 'none'
            , margin: 0
            , padding: 0
            , border: 'none'
            , width: 'auto'
            , height: 'auto'
            , maxHeight: 'none'
            , maxWidth: 'none'
            , zIndex: -999999
        }
    };

    /* CLASS DEFINITION
     * ========================= */
    var Backstretch = function (container, images, options) {
        this.options = $.extend({}, $.fn.backstretch.defaults, options || {});

        /* In its simplest form, we allow Backstretch to be called on an image path.
         * e.g. $.backstretch('/path/to/image.jpg')
         * So, we need to turn this back into an array.
         */
        this.images = $.isArray(images) ? images : [images];

        // Preload images
        $.each(this.images, function () {
            $('<img />')[0].src = this;
        });

        // Convenience reference to know if the container is body.
        this.isBody = container === document.body;

        /* We're keeping track of a few different elements
         *
         * Container: the element that Backstretch was called on.
         * Wrap: a DIV that we place the image into, so we can hide the overflow.
         * Root: Convenience reference to help calculate the correct height.
         */
        this.$container = $(container);
        this.$root = this.isBody ? supportsFixedPosition ? $(window) : $(document) : this.$container;

        // Don't create a new wrap if one already exists (from a previous instance of Backstretch)
        var $existing = this.$container.children(".backstretch").first();
        this.$wrap = $existing.length ? $existing : $('<div class="backstretch"></div>').css(styles.wrap).appendTo(this.$container);

        // Non-body elements need some style adjustments
        if (!this.isBody) {
            // If the container is statically positioned, we need to make it relative,
            // and if no zIndex is defined, we should set it to zero.
            var position = this.$container.css('position')
                , zIndex = this.$container.css('zIndex');

            this.$container.css({
                position: position === 'static' ? 'relative' : position
                , zIndex: zIndex === 'auto' ? 0 : zIndex
                , background: 'none'
            });

            // Needs a higher z-index
            this.$wrap.css({zIndex: -999998});
        }

        // Fixed or absolute positioning?
        this.$wrap.css({
            position: this.isBody && supportsFixedPosition ? 'fixed' : 'absolute'
        });

        // Set the first image
        this.index = 0;
        this.show(this.index);

        // Listen for resize
        $(window).on('resize.backstretch', $.proxy(this.resize, this))
            .on('orientationchange.backstretch', $.proxy(function () {
                // Need to do this in order to get the right window height
                if (this.isBody && window.pageYOffset === 0) {
                    window.scrollTo(0, 1);
                    this.resize();
                }
            }, this));
    };

    /* PUBLIC METHODS
     * ========================= */
    Backstretch.prototype = {
        resize: function () {
            try {
                var bgCSS = {left: 0, top: 0}
                    , rootWidth = this.isBody ? this.$root.width() : this.$root.innerWidth()
                    , bgWidth = rootWidth
                    , rootHeight = this.isBody ? ( window.innerHeight ? window.innerHeight : this.$root.height() ) : this.$root.innerHeight()
                    , bgHeight = bgWidth / this.$img.data('ratio')
                    , bgOffset;

                // Make adjustments based on image ratio
                if (bgHeight >= rootHeight) {
                    bgOffset = (bgHeight - rootHeight) / 2;
                    if(this.options.centeredY) {
                        bgCSS.top = '-' + bgOffset + 'px';
                    }
                } else {
                    bgHeight = rootHeight;
                    bgWidth = bgHeight * this.$img.data('ratio');
                    bgOffset = (bgWidth - rootWidth) / 2;
                    if(this.options.centeredX) {
                        bgCSS.left = '-' + bgOffset + 'px';
                    }
                }

                this.$wrap.css({width: rootWidth, height: rootHeight})
                    .find('img:not(.deleteable)').css({width: bgWidth, height: bgHeight}).css(bgCSS);
            } catch(err) {
                // IE7 seems to trigger resize before the image is loaded.
                // This try/catch block is a hack to let it fail gracefully.
            }

            return this;
        }

        // Show the slide at a certain position
        , show: function (newIndex) {

            // Validate index
            if (Math.abs(newIndex) > this.images.length - 1) {
                return;
            }

            // Vars
            var self = this
                , oldImage = self.$wrap.find('img').addClass('deleteable')
                , evtOptions = { relatedTarget: self.$container[0] };

            // Trigger the "before" event
            self.$container.trigger($.Event('backstretch.before', evtOptions), [self, newIndex]);

            // Set the new index
            this.index = newIndex;

            // Pause the slideshow
            clearInterval(self.interval);

            // New image
            self.$img = $('<img />')
                .css(styles.img)
                .bind('load', function (e) {
                    var imgWidth = this.width || $(e.target).width()
                        , imgHeight = this.height || $(e.target).height();

                    // Save the ratio
                    $(this).data('ratio', imgWidth / imgHeight);

                    // Show the image, then delete the old one
                    // "speed" option has been deprecated, but we want backwards compatibilty
                    $(this).fadeIn(self.options.speed || self.options.fade, function () {
                        oldImage.remove();

                        // Resume the slideshow
                        if (!self.paused) {
                            self.cycle();
                        }

                        // Trigger the "after" and "show" events
                        // "show" is being deprecated
                        $(['after', 'show']).each(function () {
                            self.$container.trigger($.Event('backstretch.' + this, evtOptions), [self, newIndex]);
                        });
                    });

                    // Resize
                    self.resize();
                })
                .appendTo(self.$wrap);

            // Hack for IE img onload event
            self.$img.attr('src', self.images[newIndex]);
            return self;
        }

        , next: function () {
            // Next slide
            return this.show(this.index < this.images.length - 1 ? this.index + 1 : 0);
        }

        , prev: function () {
            // Previous slide
            return this.show(this.index === 0 ? this.images.length - 1 : this.index - 1);
        }

        , pause: function () {
            // Pause the slideshow
            this.paused = true;
            return this;
        }

        , resume: function () {
            // Resume the slideshow
            this.paused = false;
            this.next();
            return this;
        }

        , cycle: function () {
            // Start/resume the slideshow
            if(this.images.length > 1) {
                // Clear the interval, just in case
                clearInterval(this.interval);

                this.interval = setInterval($.proxy(function () {
                    // Check for paused slideshow
                    if (!this.paused) {
                        this.next();
                    }
                }, this), this.options.duration);
            }
            return this;
        }

        , destroy: function (preserveBackground) {
            // Stop the resize events
            $(window).off('resize.backstretch orientationchange.backstretch');

            // Clear the interval
            clearInterval(this.interval);

            // Remove Backstretch
            if(!preserveBackground) {
                this.$wrap.remove();
            }
            this.$container.removeData('backstretch');
        }
    };

    /* SUPPORTS FIXED POSITION?
     *
     * Based on code from jQuery Mobile 1.1.0
     * http://jquerymobile.com/
     *
     * In a nutshell, we need to figure out if fixed positioning is supported.
     * Unfortunately, this is very difficult to do on iOS, and usually involves
     * injecting content, scrolling the page, etc.. It's ugly.
     * jQuery Mobile uses this workaround. It's not ideal, but works.
     *
     * Modified to detect IE6
     * ========================= */

    var supportsFixedPosition = (function () {
        var ua = navigator.userAgent
            , platform = navigator.platform
        // Rendering engine is Webkit, and capture major version
            , wkmatch = ua.match( /AppleWebKit\/([0-9]+)/ )
            , wkversion = !!wkmatch && wkmatch[ 1 ]
            , ffmatch = ua.match( /Fennec\/([0-9]+)/ )
            , ffversion = !!ffmatch && ffmatch[ 1 ]
            , operammobilematch = ua.match( /Opera Mobi\/([0-9]+)/ )
            , omversion = !!operammobilematch && operammobilematch[ 1 ]
            , iematch = ua.match( /MSIE ([0-9]+)/ )
            , ieversion = !!iematch && iematch[ 1 ];

        return !(
            // iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5)
        ((platform.indexOf( "iPhone" ) > -1 || platform.indexOf( "iPad" ) > -1  || platform.indexOf( "iPod" ) > -1 ) && wkversion && wkversion < 534) ||

            // Opera Mini
        (window.operamini && ({}).toString.call( window.operamini ) === "[object OperaMini]") ||
        (operammobilematch && omversion < 7458) ||

            //Android lte 2.1: Platform is Android and Webkit version is less than 533 (Android 2.2)
        (ua.indexOf( "Android" ) > -1 && wkversion && wkversion < 533) ||

            // Firefox Mobile before 6.0 -
        (ffversion && ffversion < 6) ||

            // WebOS less than 3
        ("palmGetResource" in window && wkversion && wkversion < 534) ||

            // MeeGo
        (ua.indexOf( "MeeGo" ) > -1 && ua.indexOf( "NokiaBrowser/8.5.0" ) > -1) ||

            // IE6
        (ieversion && ieversion <= 6)
        );
    }());

}(jQuery, window));