EDU/Website/NEducation/Content/assets/js/tool-tip.js

$(document).ready(function(){

    var step = 1;
    // NEXT
    $(".tool-tip-content .tool-tip-button-next").click(function(){
        var toolTip = $(this).parents(".tool-tip-reference-layer");

        if(step == -1){
            step = 0;
        }else{
            step = parseInt($(toolTip).attr('stepCurrent')) + 1;
        }
        
        var itemNext = $('.tool-tip[toolTipStep="' + step + '"]');


        if(itemNext.length > 1){
            itemNext.each(function(index, el) {
                if($(el).parents(".tooltip-multi-item").hasClass('item-current')){
                    itemNext = $(el);
                }
            });

        }


        if(itemNext.length > 0){
			
            var iTop = $(itemNext).offset().top;
            var iLeft = $(itemNext).offset().left;
            var iWidth = $(itemNext).innerWidth();
            var iHeight = $(itemNext).innerHeight();

            $(toolTip).fadeOut(400, function() {
				if(step == 0){
					$('.tool-tip-button-next').text($('.tool-tip-button-next').attr('start'));
				}else{
					var itemLast = $('.tool-tip[toolTipStep="' + (parseInt(step) + 1) + '"]');
					if(itemLast.length == 0){
						$('.tool-tip-button-next').text($('.tool-tip-button-next').attr('complete'));
					}else{
						$('.tool-tip-button-next').text($('.tool-tip-button-next').attr('continue'));
					}
				}
                $('.tool-tip-active').removeClass('tool-tip-active');
                $('.tool-tip-overlay').remove();

                $(itemNext).parent().append('<div class="tool-tip-overlay"></div>');
            
                $(itemNext).addClass('tool-tip-active');

                // Get data tool tip
                $(toolTip).attr('stepCurrent', $(itemNext).attr('toolTipStep'));
                $(toolTip).removeClass('pos-top pos-bottom pos-left pos-right arrow-right arrow-left');
                $(toolTip).addClass('pos-' + $(itemNext).attr('toolTipPos'));
                $(toolTip).find('.tool-tip-title').html($(itemNext).attr('toolTipTitle'));
                $(toolTip).find('.tool-tip-detail').html($(itemNext).attr('toolTipContent'));

                var contentWidth = $(toolTip).find('.tool-tip-content').innerWidth();

                if($(itemNext).attr('toolTipPos') == 'left' || $(itemNext).attr('toolTipPos') == 'right'){

                    if(iLeft !== 0 && iLeft + iWidth + contentWidth + 25 >= window.innerWidth){
                        $(toolTip).removeClass('pos-right');
                        $(toolTip).addClass('pos-bottom');
                    }

                    if(iLeft !== 0 && iLeft - contentWidth - 25 <= 0){
                        $(toolTip).removeClass('pos-left');
                        $(toolTip).addClass('pos-bottom');
                    }
                }

                
                if(iLeft !== 0 && iLeft + iWidth/2 + contentWidth/2 >= window.innerWidth){
                    $(toolTip).addClass('arrow-right');
                }

                if(iLeft !== 0 && iLeft + iWidth/2 - contentWidth/2 <= 0){
                    $(toolTip).addClass('arrow-left');
                }

                iTop = (iTop==0) ? 'calc(50% + 100px)' : (iTop+'px');
                iLeft = (iLeft==0) ? '50%' : (iLeft+'px');

                $(toolTip).css({
                    top: iTop,
                    left: iLeft,
                    width: iWidth + 'px',
                    height: iHeight + 'px'
                });

                $(toolTip).fadeIn(400, function() {
                    
                });
                

                // VOCA
                var divParentVoca = $(itemNext).parents(".learning-voca-body");

                if(divParentVoca.length > 0){
                    if(step == 1){

                        $("body").append('<div class="tool-tip-overlay"></div>');
                        $(itemNext).parents("#learning-voca-kontext").addClass('tool-tip-active');
                        $(itemNext).find('.show .flash-card-box').boxSlider('showSlide', 0);
                    }
                    if(step == 2){
                        $("body").append('<div class="tool-tip-overlay"></div>');
                        $("#learning-voca-kontext .show .learning-fill").append('<div class="tool-tip-overlay"></div>');
                        $(itemNext).parents('.flash-card-viewport').addClass('tool-tip-active');
                        $(itemNext).parents("#learning-voca-kontext").addClass('tool-tip-active');
                    }

                    if(step == 3){
                        $('.tool-tip-active').removeClass('tool-tip-active');
                        $('.tool-tip-overlay').remove();
                        $(itemNext).parent().parent().append('<div class="tool-tip-overlay"></div>');
                        $(itemNext).parent().addClass('tool-tip-active');

                        $("body").append('<div class="tool-tip-overlay"></div>');
                        $(itemNext).parents("#learning-voca-kontext").addClass('tool-tip-active');
                        $(itemNext).parents("#learning-voca-kontext").find('.show .flash-card-box').boxSlider('showSlide', 2);
                    }
                }
            });


        }else{
            $(".tool-tip-content .tool-tip-button-skip").trigger('click');
        }
    });
    
    // SKIP
    $(".tool-tip-content .tool-tip-button-skip").click(function(event) {
        
        var toolTip = $(this).parents(".tool-tip-reference-layer");
        $(toolTip).fadeOut('slow', function() {
            $('.tool-tip-active').removeClass('tool-tip-active');
            $('.tool-tip-overlay').remove();
        });
    });
    $(document).on('click','.tool-tip-overlay',function(){
        $(".tool-tip-content .tool-tip-button-skip").trigger('click');
    });



    // START
    $(".button-guide").click(function(event) {
        step = -1;
        $(".tool-tip-content .tool-tip-button-next").trigger('click');
    });

    // document.addEventListener('click', function(event) {
    //     if (event.target.className === 'tool-tip-overlay') {
    //         event.stopPropagation();
    //         return;
    //     }
    // }, true);

});