jQuery(document).ready(function ($) {
    
    /* Initialise the theme functions
    ----------------------------------------------- */
    themeoraWelcomeScreenEffects();
    themeoraDropDownMenus();
    themeoraButtonStyling();

    /* Fade the header in
    ----------------------------------------------- */
    
    function themeoraWelcomeScreenEffects(){
  
        //load the main bg image when it has finished loading
        var imagePath = $('.welcome-screen').data('welcome-background');
        var welcomeScreen = $('.welcome-screen');
        var welcomeContent = $('.welcome-content');
        var pageWrapper = $('.page-wrapper');
        
        var headerImage = new Image();
        headerImage.src = imagePath;
        
        //check if there is an image to load, if there is, try to load it, it not, just show the content
        if ( imagePath ){
            headerImage.onload = function() {
                //set the background of the welcome screen now we know it has loaded
                $(welcomeScreen).css('background-image', 'url('+ imagePath +')').fadeIn('slow');
                //fade the welcome screen in now that the image is loaded
                $(welcomeScreen).fadeIn('slow', function(){
                    //now the image is loaded, show the content as well
                    $(welcomeContent).fadeIn('slow');
                });
            };
        }
        else {
            //show the content if the image fails for any reason
            $(welcomeContent, welcomeScreen).fadeIn('slow');
        }
        headerImage.onerror = function () {
            //if the image fails to load we should still load the content!
            $(welcomeContent).fadeIn('fast'); //show the content
        }
    }
    
    /* Setup dropdowns
    ----------------------------------------------- */
    function themeoraDropDownMenus(){
        
        $('.menu-item-has-children').each(function(){
            var dropdownLink = jQuery(this);
            $(dropdownLink).find('a:first').attr('data-toggle', 'dropdown');
            $(dropdownLink).find('a:first').attr('data-hover', 'dropdown');

            $(dropdownLink).find('a:first').append('<b class="caret"></b>').addClass('dropdown-toggle');
            $(dropdownLink).find('a:first').parent('li').addClass('dropdown');
        });
        
         /* Add slideup & fadein animation to dropdown */
        $('.dropdown').on('show.bs.dropdown', function(e){
            var $dropdown = $(this).find('.dropdown-menu');
            var orig_margin_top = parseInt($dropdown.css('margin-top'));
            $dropdown.css({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}).animate({'margin-top': orig_margin_top + 'px', opacity: 1}, 300, function(){
                $(this).css({'margin-top':''});
            });
        });

        /* Add slidedown & fadeout animation to dropdown */
        $('.dropdown').on('hide.bs.dropdown', function(e){
            var $dropdown = $(this).find('.dropdown-menu');
            var orig_margin_top = parseInt($dropdown.css('margin-top'));
            $dropdown.css({'margin-top': orig_margin_top + 'px', opacity: 1, display: 'block'}).animate({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}, 300, function(){
                $(this).css({'margin-top':'', display:''});
            });
        });
    }


});

jQuery(window).load(function($){

    // set the height on each item so we can align the hover effect
    themeoraPortfolioHover(); 
});


jQuery(window).resize(function(){
    //Recalculate the height of the portfolio items
    themeoraPortfolioHover();
    
});

/* Simple helpers to add useful CSS classes to hard to change Wordpress markup */
function themeoraButtonStyling(){
    jQuery('#commentform #submit').addClass('btn btn-primary btn-lg');
    jQuery('.post-password-form input[type="submit"]').addClass('btn btn-primary btn-lg');
    jQuery('.search-form .search-submit').addClass('btn btn-success');
}

/* Apply a hover effect to the portfolio items */
function themeoraPortfolioHover(){
    // Fist, reset any height added
    jQuery( '.masonry-item' ).css('height', '');
    jQuery( '.portfolio-item' ).css('height', '');
    // Now set a height on each portfolio item
    var masonryItem = jQuery('.masonry-item');
    var portfolioItem = jQuery('.portfolio-item');
    
    jQuery( masonryItem ).each( function(){
        var height = jQuery(this).height();
        jQuery( this ).css('height', height + 'px');
        jQuery( this ).find('.portfolio-details').css('height', height + 'px');
    });
    
    jQuery( portfolioItem ).each( function(){
        var height = jQuery(this).height();
        jQuery( this ).css('height', height + 'px');
        jQuery( this ).find('.portfolio-details').css('height', height + 'px');
    });
}