/**
 * Functions in this bpq variable can be reused outside of this file.
 */
var bpq = {

    /**
     * Shortcut function to resize all potential stripes.
     */
    resize_all_stripes: function() {
        jQuery( '.stripe' ).each( function() {
            bpq.resize_stripe( jQuery( this ) );
        });
    },

    /**
     * Give this function the element with a class of .stripe and it will
     * resize it so that it hits the left and right edges of the window.
     */
    resize_stripe: function( stripe ) {

        //  The stripe's background has no dimension, but the stripe itself does.
        //  Use this information to give the background proper dimension.
        var background = stripe.find( '.background' );
        background.css( 'width', stripe.css( 'width' ) );
        background.css( 'height', stripe.outerHeight() + 'px' );
        //  Note: The +1 handles a weird case where there is a 1-pixel gap between stripes

        //  For specific span formats, the width should span the screen.
        var body = stripe.closest( 'body.bleed-wide, body.bleed-narrow' );
        if ( body.length > 0 ) {
            background.css( 'width', jQuery( window ).width() );
            background.css( 'margin-left', +stripe.offset().left * -1 );
        }
    },

};


/**
 * Event for when the page markup is loaded.
 */
jQuery( document ).ready( function( $ ) {

    /**
     * Event for when the page content is completely loaded.
     */
    $( window ).load( function() {

        /**
         * The comment_form() template function from WP does NOT offer a
         * way to set a class to the submit button - as such, the workaround
         * is to add the class after the fact.
         */
        $( '#comment-submit' ).addClass( 'btn btn-default' );

        /**
         * The form provided by SendPress is not styled like Bootstrap -
         * so add the appropriate classes after it has been displayed.
         */
        $( 'div.sendpress input[class^="sp_"]' ).addClass( 'form-control' );
        $( 'div.sendpress input.sendpress-submit' ).addClass( 'btn btn-default' );

        /**
         * The login page is very funky - the overrides that the system provides
         * are simply not enough.  As a result, classes must be inserted into
         * specific elements to make things a bit more BluePrint-Q/Bootstrap.
         */
        $( '#login #wp-submit' ).addClass( 'btn btn-primary' );
        $( '#user_login, #user_pass, #rememberme' ).addClass( 'form-control' );
        $( 'p.message' ).before( '<div class="alert alert-warning">' + $( 'p.message' ).text() + '</div>' );

        /**
         * Force Bootstrap classes upon some WordPress-generated elements.
         * Note: Could apply .dl-horizontal to <dl> elements, but that adversely affects gallery images too.
         */
        $( 'table' ).addClass( 'table' );

        /**
         * Videos cannot be made responsive with 'max-width: 100% / height: auto' because
         * they have explicit dimensions defined based on $content_width, work around that.
         */
        $( 'embed, iframe' ).each( function() {

            var attr_ratio = +$( this ).attr( 'height' ) / +$( this ).attr( 'width' );
            var max_width_string = $( this ).css( 'width' );
            var max_width_number = +( max_width_string.substring( 0, max_width_string.length - 'px'.length) );
            $( this ).attr( 'width', max_width_number );
            $( this ).attr( 'height', ( max_width_number * attr_ratio ) );
        });

        /**
         * The stripe backgrounds require some voodoo magic to stretch them out properly.
         */

        //  Resize the stripes when first loaded..
        bpq.resize_all_stripes();

        //  ..And resize the stripes when the window is resized.
        $( window ).resize( function() {
            bpq.resize_all_stripes();
        });

    });

});