$(document).ready(function() {
    "use strict";

    function resizeSlider() {
        var windowHeight = window.innerHeight;

        $('.wr-slider').height(windowHeight);
        $('.wr-slides').height(windowHeight);
    }

    function resetMarkets() {
        $('.wr-card-details-markets').prev('h3').text('Markets');
        $('.wr-card-details-markets .is-single-market').hide();
        $('.wr-card-details-markets .is-all-markets').show();
        $('.wr-card-details-markets .show-markets').removeClass('is-on');
    }

    var card = $('.wr-card');
    var sliderW = 0;
    var isCardOpen = false;
    var showEl;

    $.each(card, function(index, value) {
        sliderW += $(this).width();
    });

    $('.wr-slider-container').height(sliderW);

    var moved = true;

    // Scrool action of the homepage cards
    if($('.wr-slider-container').length > 0) {
        $(window).on('scroll', function(e) {
            var sliderContaier = $('.wr-slider-container');
            var sliderOffset = sliderContaier.offset();
            var sliderOffsetTop = sliderOffset.top;
            var sliderTop = sliderOffsetTop - $(window).scrollTop();
            var sliderElem = $('.wr-slider');

            var slideLeft = ((sliderW - $(window).width()) * sliderTop) / (sliderContaier.height() - window.innerHeight);

            if(sliderTop <= 0 && sliderTop >= -(sliderContaier.height() - window.innerHeight)) {
                sliderElem.addClass('slider-fixed');
                sliderElem.removeClass('slider-absolute');
                $('.wr-slides').css({'transform' : 'translate(' + slideLeft + 'px, 0px)'});
                $('.wr-slider-progress').addClass('is-active');

                var progressW = ((sliderTop - window.innerHeight) * (-1) * 100) / sliderW;
                $('.wr-slider-progress-bar span').width(progressW + '%');
            } else if(sliderTop < -(sliderContaier.height() - window.innerHeight)) {
                sliderElem.removeClass('slider-fixed');
                sliderElem.addClass('slider-absolute');
                $('.wr-slider-progress').removeClass('is-active');
            } else {
                sliderElem.removeClass('slider-fixed');
                sliderElem.removeClass('slider-absolute');
                $('.wr-slides').css({'transform' : 'translate(0px, 0px)'});
                $('.wr-slider-progress').removeClass('is-active');
            }

            moved = false;
        });
    }

    resizeSlider();
    $(window).resize(function() {
        resizeSlider();

        var windowWidth = $(window).width();

        if(windowWidth <= 991) {
            $('body').removeClass('is-ov-hidden');
            $('.new-card').remove();
            resetMarkets();
            isCardOpen = false;
            $('.open-card').removeClass('active');
            $('#top-link').show();
        }
    });

    // Click action on the homepage cards
    $('.wr-card-container').click(function(event) {
        var windowWidth = $(window).width();

        if(windowWidth > 991) {
            $(this).parent().removeClass('is-mobile');

            if(!$(this).hasClass('no-action')) {
                var me = $(this);
                var elemOffset = me.parent().offset();
                var elemLeft = elemOffset.left;

                isCardOpen = true;

                me.parent().clone().addClass('new-card').css({'left' : elemLeft + 'px'}).appendTo('body');
                $('.new-card').addClass('is-on');
                $('body').addClass('is-ov-hidden');

                setTimeout(function() {
                    $('.new-card').addClass('is-full');
                }, 300);

                setTimeout(function() {
                    $('.new-card .wr-card-details-items').fadeIn('slow');
                }, 800);

                $('.wr-slider-progress').addClass('is-active');
                
                var cardID = me.parent().attr('id');
                $('.open-card[data-target="' + cardID + '"]').addClass('active');

                $('#top-link').hide();
            }
        } else {
            $(this).parent().addClass('is-mobile');
        }
    });

    // Click action for closing active card
    $('body').on('click', '.new-card .wr-card-close',function(event) {
        $('body').removeClass('is-ov-hidden');
        $(this).parent().parent().remove();
        resetMarkets();
        isCardOpen = false;
        $('.open-card').removeClass('active');
        $('#top-link').show();
    });

    // Click action for active card navigation
    $('body').on('click', '.new-card .trigger-card',function(event) {
        var target = $(this).attr('data-target');
        var html = $('#' + target).html();

        $(this).parent().parent().parent().html(html);
        resetMarkets();
        $('.new-card .wr-card-details-items').fadeIn('slow');
        $('.open-card').removeClass('active');
        $('.open-card[data-target="' + target + '"]').addClass('active');
    });

    // Click action for cards bottom navigation items
    $('.open-card').click(function(event) {
        var target = $(this).attr('data-target');

        $('.open-card').removeClass('active');
        $(this).addClass('active');

        if(isCardOpen === false) {
            $('.new-card').remove();
            $('#' + target + ' .wr-card-container').click();
        } else {
            var html = $('#' + target).html();

            $('.new-card').html(html);
            resetMarkets();
            $('.new-card .wr-card-details-items').fadeIn('slow');
        }
    });

    // Click action for markets card elements
    $('body').on('click', '.is-all-markets li a', function(event) {
        showEl = $(this).attr('data-market');

        $('.is-all-markets').fadeOut('fast', function() {
            var title = $('#' + showEl + '.is-single-market').attr('data-title');

            $('#' + showEl + '.is-single-market').fadeIn('fast', function() {
                $('.wr-card-details-markets .show-markets').addClass('is-on');
            });

            $('.wr-card-details-markets').prev('h3').text(title);
        });
    });

    // Click action for markets card back button
    $('body').on('click', '.wr-card-details-markets .show-markets', function(event) {
        $('.wr-card-details-markets .show-markets').removeClass('is-on');
        $('#' + showEl + '.is-single-market').fadeOut('fast', function() {
            $('.is-all-markets').fadeIn('fast');
            $('.wr-card-details-markets').prev('h3').text('Markets');
        });
    });

    $('body').on('click', '.is-mobile .wr-card-close', function(event) {
        $(this).parent().parent().removeClass('is-mobile');
    });
});