/* Section Background Parallax Effects */
/* -------------------------------------------------------------------- */

function mk_section_parallax() {
    if (is_touch_device() || global_window_width < 800) return;

    $('.mk-page-section.parallax-true').each(function() {
        var $this = $(this),
            direction = $this.attr('data-direction');

        if (direction === 'horizontal_mouse' || direction === 'vertical_mouse' || direction === 'both_axis_mouse') {
            var yparallax = (direction === 'vertical_mouse'),
                xparallax = (direction === 'horizontal_mouse'),
                xyparallax = (direction === 'both_axis_mouse');

            if (xyparallax === true) {
                xparallax = true;
                yparallax = true;
            }

            var $parallaxContainer = $this; //our container
            var $parallaxItem = $parallaxContainer.find('.parallax-layer'); 
            var fixer = -0.002;     //experiment with the value
            var speedX = 40;                 
            var speedY = 40;

            $parallaxContainer.on('mousemove', function(event){  
                var position = $parallaxContainer.offset();                      
                var pageX =  xparallax ? (event.clientX - position.left) - ($parallaxContainer.width() * 0.5) : 0;  
                var pageY =  yparallax ? (event.pageY - position.top) - ($parallaxContainer.height() * 0.5) : 0; 

                TweenLite.to($parallaxItem, 3, { scale: 1.2 });
                TweenLite.to($parallaxItem, 1, {
                    x: (pageX * speedX)*fixer,     
                    y: (pageY * speedY)*fixer 
                });  
            });     

            $parallaxContainer.on('mouseleave', function() {
                TweenLite.to($parallaxItem, 60, { x: 0, y: 0, scale: 1 });
            });

        } else {

            var $this = $(this).find('.bg-layer > div'),
                $offset = $this.offset();
                $this.css('position', 'absolute'); // oarallax script is not really ready for position fixed as we rely on offsets. play with speed instead
            
            // Give it time to animate heights of parents
            setTimeout(function() {
                $this.each(function() {
                    $(this).parallaxScroll({ speed: 0.2, direction: direction }); 
                });
            }, 2000);
        }
    });

}


function mk_center_caption() {
    $('.mk-parent-element').each(function() {
        var $this = $(this),
            width = $this.outerWidth(),
            caption_h = $this.find('.mk-caption-item').outerHeight(),
            caption_w = width - 120;

        $this.find('.mk-caption-item').css({
            'width': caption_w,
            'margin-top': -(caption_h / 2),
            'margin-left': -(caption_w / 2)
        });
    });
}



function mk_portfolio_image() {

    $('.mk-portfolio-item').each(function() {
        var $this = $(this),
            width = $this.outerWidth(),
            caption_h = $this.find('.portfolio-meta').outerHeight(),
            caption_w = (width > 300) ? (width - 100) : (width - 20);



        $this.find('.portfolio-meta').css({
            'width': caption_w,
            'margin-top': -(caption_h / 2),
            'margin-left': -(caption_w / 2)
        }); 
        // console.log("I'm centering .portfolio-meta from mk_portfolio_image()");

        var logo = $(this).find('.portfolio-entry-logo'),
            logo_width = logo.width(),
            logo_height = logo.height();

        logo.css({
            'margin-left': -logo_width / 2,
            'margin-top': -logo_height / 2
        });


    });

}


function mk_employees() {
    $('.mk-employees.grid-style .mk-employee-item').each(function() {
        var $this = $(this),
            height = $this.outerHeight();
        $this.find('.team-info-wrapper').css({
            'height': height
        });
    });
}


function mk_gallery_image() {

    $('.mk-gallery-item').each(function() {
        var $this = $(this),
            width = $this.outerWidth(),
            caption_h = $this.find('.gallery-meta').outerHeight(),
            caption_w;

        if (width < 200) {
            caption_w = width;
        } else {
            caption_w = width - 100;
        }
        /*$this.find('.gallery-meta').css({
            'width': caption_w,
            'margin-top': -(caption_h / 2),
            'margin-left': -(caption_w / 2)
        });*/


    });

}


function bgFix() {
    if( BrowserDetect.browser !== 'IE' ) {
        return;
    }
    
    var fixMe = function() {
        var $this = $( this );

        $(window).on( 'scroll', function() {
            $this.click();
        });
    };

    $('.bg-layer').each( fixMe );
}

bgFix();


/*function mk_portfolio_masonry() {

    $('.masonry-portfolio-item').each(function() {

        var $this = $(this),
            item_height = $this.parent().find('.regular-entry').outerHeight();

        if ($this.hasClass('tall-entry') || $this.hasClass('wide-tall-entry')) {

            $this.css('height', item_height * 2 + 'px');
            $this.find('.featured-image').css('height', item_height * 2 + 'px');

        } else if ($this.hasClass('wide-entry')) {

            $this.css('height', item_height + 'px');
            $this.find('.featured-image').css('height', item_height + 'px');

        }

    });

}*/


function mk_portfolio_hovers() {

    $('.masonry-portfolio-item, .grid-portfolio-item, .mk-portfolio-scroller .mk-portfolio-item .item-holder').each(function() {
        var $this = $(this);

        $this.hover(function() {
            var bordersY = new TimelineLite();
                bordersY.set($this.find('.border-tb, .border-bt'), { opacity: 1 })
                        .to($this.find('.border-tb, .border-bt'), 1.2, { scaleY: 1, ease: Power4.easeInOut });
            var bordersX = new TimelineLite();
                bordersX.set($this.find('.border-bl, .border-tr'), { opacity: 1 })
                        .to($this.find('.border-bl, .border-tr'), 1.2, { scaleX: 1, ease: Power4.easeInOut });

        }, function() {
            var bordersY = new TimelineLite();
                bordersY.to($this.find('.border-tb, .border-bt'), .8, { scaleY: 0, ease: Power4.easeInOut })
                .set($this.find('.border-tb, .border-bt'), { opacity: 0 });
            var bordersX = new TimelineLite();
                bordersX.to($this.find('.border-bl, .border-tr'), .8, { scaleX: 0, ease: Power4.easeInOut })
                .set($this.find('.border-bl, .border-tr'), { opacity: 0 });
        });

    });


    /* Portfolio parallax */
    /* -------------------------------------------------------------------- */

    $('.mk-portfolio-item.parallax-hover .item-holder').each(function() {

        var $parallaxContainer = $(this); //our container
        var $parallaxItem = $parallaxContainer.find(".item-featured-image"); 
        var fixer = -0.004;     //experiment with the value
        var speedX = 50;                 
        var speedY = 50;

        $parallaxContainer.on("mousemove", function(event){  
            var position = $parallaxContainer.offset();                      
            var pageX =  (event.clientX - position.left) - ($parallaxContainer.width() * 0.5);  
            var pageY =  (event.pageY - position.top) - ($parallaxContainer.height() * 0.5); 
                
            TweenLite.to($parallaxItem, 1, { scale: 1.2 }); 
            TweenLite.to($parallaxItem, 1, {
                x: (pageX * speedX) * fixer,     
                y: (pageY * speedY) * fixer
              
            });  
        });     

        $parallaxContainer.on("mouseleave", function() {
            TweenLite.to($parallaxItem, .5, { x: 0, y: 0, scale: 1 });
        });

    });


}