/**
    * @package stability responsive html5 template
    * 
    * template scripts
    * created by dan fisher

    init js
    
    1. main navigation
    2. isotope
    3. magnific popup
    4. flickr
    5. carousel (based on owl carousel plugin)
    6. content slider (based on owl carousel plugin)
    7. fitvid (responsive video)
    -- misc
    8. sticky header
*/

jquery(function($){



    /* ----------------------------------------------------------- */
    /*  1. main navigation
    /* ----------------------------------------------------------- */


    $(".flexnav").flexnav({
        'animationspeed':     200,            // default for drop down animation speed
        'transitionopacity':  true,           // default for opacity animation
        'buttonselector':     '.navbar-toggle', // default menu button class name
        'hoverintent':        true,          // change to true for use with hoverintent plugin
        'hoverintenttimeout': 50,            // hoverintent default timeout
        'calcitemwidths':     false,          // dynamically calcs top level nav item widths
        'hover':              true            // would you like hover support?      
    });


    /* ----------------------------------------------------------- */
    /*  2. isotope
    /* ----------------------------------------------------------- */

    (function() {


        // portfolio settings
        var $container          = $('.project-feed');
        var $filter             = $('.project-feed-filter');

        $(window).smartresize(function(){
            $container.isotope({
                filter              : '*',
                resizable           : true,
                layoutmode: 'sloppymasonry',
                itemselector: '.project-item'
            });
        });

        $container.imagesloaded( function(){
            $(window).smartresize();
        });

        // filter items when filter link is clicked
        $filter.find('a').click(function() {
            var selector = $(this).attr('data-filter');
            $filter.find('a').removeclass('btn-primary');
            $(this).addclass('btn-primary');
            $container.isotope({ 
                filter             : selector,
                animationoptions   : {
                animationduration  : 750,
                easing             : 'linear',
                queue              : false
                }
            });
            return false;
        });
       
    })();



    /* ----------------------------------------------------------- */
    /*  3. magnific popup
    /* ----------------------------------------------------------- */
    $('.popup-link').magnificpopup({
        type:'image',
        // delay in milliseconds before popup is removed
        removaldelay: 300,

        // class that is added to popup wrapper and background
        // make it unique to apply your css animations just to this exact popup
        mainclass: 'mfp-fade'
    });



    /* ----------------------------------------------------------- */
    /*  4. flickr
    /* ----------------------------------------------------------- */
    
    $('.flickr-feed').jflickrfeed({
        limit: 9,
        qstrings: {
            id: '52617155@n08'
        },
        itemtemplate: '<li><a href="{{link}}" target="_blank"><img src="{{image_s}}" alt="{{title}}" /></a></li>'
    }, 
    function(data) {
        $(".flickr-feed li:nth-child(3n)").addclass("nomargin");
    });



    /* ----------------------------------------------------------- */
    /*  5. carousel (based on owl carousel plugin)
    /* ----------------------------------------------------------- */
    var owl = $("#owl-carousel");

    owl.owlcarousel({
        items : 3, //4 items above 1000px browser width
        itemsdesktop : [1000,4], //4 items between 1000px and 901px
        itemsdesktopsmall : [900,2], // 4 items betweem 900px and 601px
        itemstablet: [600,2], //2 items between 600 and 0;
        itemsmobile : [480,1], // itemsmobile disabled - inherit from itemstablet option
        pagination : false
    });

    // custom navigation events
    $("#carousel-next").click(function(){
        owl.trigger('owl.next');
    });
    $("#carousel-prev").click(function(){
        owl.trigger('owl.prev');
    });



    /* ----------------------------------------------------------- */
    /*  6. content slider (based on owl carousel plugin)
    /* ----------------------------------------------------------- */
    $(".owl-slider").owlcarousel({

        navigation : true, // show next and prev buttons
        slidespeed : 300,
        paginationspeed : 400,
        singleitem:true,
        navigationtext: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
        pagination: true

    });



    /* ----------------------------------------------------------- */
    /*  7. fitvid (responsive video)
    /* ----------------------------------------------------------- */
    $(".video-holder").fitvids();


    /* ----------------------------------------------------------- */
    /*  -- misc
    /* ----------------------------------------------------------- */

    $('.title-accent > h3').each(function(){
        var me = $(this);
        me.html(me.html().replace(/^(\w+)/, '<span>$1</span>'));
    });

    // back to top
    $("#back-top").hide();
    
    if($(window).width() > 991) {
        $('body').append('<div id="back-top"><a href="#top"><i class="fa fa-chevron-up"></i></a></div>')
        $(window).scroll(function () {
            if ($(this).scrolltop() > 100) {
                $('#back-top').fadein();
            } else {
                $('#back-top').fadeout();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function(e) {
            e.preventdefault();
            $('body,html').animate({
                scrolltop: 0
            }, 400);
            return false;
        });
    };

    // animation on scroll
    var ismobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.useragent);
    if (ismobile == false) {
        
        $("[data-animation]").each(function() {

        var $this = $(this);

        $this.addclass("animation");

        if(!$("html").hasclass("no-csstransitions") && $(window).width() > 767) {

            $this.appear(function() {

                var delay = ($this.attr("data-animation-delay") ? $this.attr("data-animation-delay") : 1);

                if(delay > 1) $this.css("animation-delay", delay + "ms");
                $this.addclass($this.attr("data-animation"));

                settimeout(function() {
                    $this.addclass("animation-visible");
                }, delay);

            }, {accx: 0, accy: -170});

        } else {

            $this.addclass("animation-visible");

        }

    });  
    }


    /* ----------------------------------------------------------- */
    /*  8. sticky header
    /* ----------------------------------------------------------- */
    if($("body").hasclass("boxed"))
        return false;

    var header = $("header.header"),
        headh = header.height(),
        logoholder = header.find(".logo"),
        logo = header.find(".logo img"),
        logow = logo.width(),
        logoh = logo.height(),
        logosmh = 28,
        $this = this;

    logo.css("height", logosmh);

    var logosmw = logo.width();
    logo.css("height", "auto").css("width", "auto");

    $this.stickyheader = function() {

        if($("body").hasclass("boxed") || header.hasclass("header-menu-fullw"))
            return false;

        if($(window).scrolltop() > (headh) && $(window).width() > 991) {

            if($("body").hasclass("sticky-header"))
                return false;

            logo.stop(true, true);

            $("body").addclass("sticky-header").css("padding-top", headh);

            logoholder.addclass("logo-sticky");

            logo.animate({
                width: logosmw,
                height: logosmh
            }, 300, function() {});

        } else {

            if($("body").hasclass("sticky-header")) {

                $("body").removeclass("sticky-header").css("padding-top", 0);

                logoholder.removeclass("logo-sticky");

                logo.animate({
                    width: logow,
                    height: logoh,
                }, 300, function() {

                    logo.css({
                        width: "auto",
                        height: "auto"
                    });

                });
            }
        }
    }

    $(window).on("scroll", function() {
        $this.stickyheader();
    });
    $this.stickyheader();
});



// parallax background
$(window).load(function () {

    if($(".parallax-bg").get(0) && $(window).width() > 991) {
        if(!modernizr.touch) {
            $(window).stellar({
                responsive:true,
                scrollproperty: 'scroll',
                parallaxelements: false,
                horizontalscrolling: false,
                horizontaloffset: 0,
                verticaloffset: 0
            });
        } else {
            $(".parallax-bg").addclass("disabled");
        }
    }
});