gistfile1.txt

<script>
    var Slides = {};

    Slides.tDuration = 1.75 * 1000;

    Slides.bgLg = "https://yachtering.eu/img/slides_20min_big.png?201903031805";
    Slides.bgSm = "https://yachtering.eu/img/slides_20min.png?201903031805";

    Slides.imgHSm = 75;
    Slides.imgWSm = 75;

    Slides.imgHLg = 149;
    Slides.imgWLg = 149;

    Slides.imgSm = 520;
    Slides.imgLg = 1040;

    Slides.selected = null;
    Slides.selectedRow = null;

    Slides.menus = {
        '20min': {
            'slide-11': {'id': 'slide-11', 'row': 1, 'title': 'Meal Title 1-1', 'description': 'Text text text text. Text text text.' }, 
            'slide-12': {'id': 'slide-12', 'row': 1, 'title': 'Meal Title 1-2', 'description': 'UIi,2m2 32jds -23,m,fds 2vddkf.' }, 
            'slide-13': {'id': 'slide-13', 'row': 1, 'title': 'Meal Title 1-3', 'description': '<span class="text-size-14" style="background-color: red">Text text text</span>' }, 
            'slide-14': {'id': 'slide-14', 'row': 1, 'title': 'Meal Title 1-4', 'description': ''  }, 
            'slide-15': {'id': 'slide-15', 'row': 1, 'title': 'Meal Title 1-5', 'description': ''  }, 
            'slide-16': {'id': 'slide-16', 'row': 1, 'title': 'Meal Title 1-6', 'description': ''  }, 
            'slide-17': {'id': 'slide-17', 'row': 1, 'title': 'Meal Title 1-7', 'description': ''  },

            'slide-21': {'id': 'slide-21', 'row': 2, 'title': '', 'description': ''  }, 
            'slide-22': {'id': 'slide-22', 'row': 2, 'title': '', 'description': ''  }, 
            'slide-23': {'id': 'slide-23', 'row': 2, 'title': '', 'description': ''  }, 
            'slide-24': {'id': 'slide-24', 'row': 2, 'title': '', 'description': ''  }, 
            'slide-25': {'id': 'slide-25', 'row': 2, 'title': '', 'description': ''  }, 
            'slide-26': {'id': 'slide-26', 'row': 2, 'title': '', 'description': ''  }, 
            'slide-27': {'id': 'slide-27', 'row': 2, 'title': '', 'description': ''  },

            'slide-31': {'id': 'slide-31', 'row': 3, 'title': '', 'description': ''  }, 
            'slide-32': {'id': 'slide-32', 'row': 3, 'title': '', 'description': ''  }, 
            'slide-33': {'id': 'slide-33', 'row': 3, 'title': '', 'description': ''  }, 
            'slide-34': {'id': 'slide-34', 'row': 3, 'title': '', 'description': ''  }, 
            'slide-35': {'id': 'slide-35', 'row': 3, 'title': '', 'description': ''  }, 
            'slide-36': {'id': 'slide-36', 'row': 3, 'title': '', 'description': ''  }, 
            'slide-37': {'id': 'slide-37', 'row': 3, 'title': '', 'description': ''  },

            'slide-41': {'id': 'slide-41', 'row': 4, 'title': '', 'description': ''  }, 
            'slide-42': {'id': 'slide-42', 'row': 4, 'title': '', 'description': ''  }, 
            'slide-43': {'id': 'slide-43', 'row': 4, 'title': '', 'description': ''  }, 
            'slide-44': {'id': 'slide-44', 'row': 4, 'title': '', 'description': ''  }, 
            'slide-45': {'id': 'slide-45', 'row': 4, 'title': '', 'description': ''  }, 
            'slide-46': {'id': 'slide-46', 'row': 4, 'title': '', 'description': ''  }, 
            'slide-47': {'id': 'slide-47', 'row': 4, 'title': '', 'description': ''  },

            'slide-51': {'id': 'slide-51', 'row': 5, 'title': '', 'description': ''  }, 
            'slide-52': {'id': 'slide-52', 'row': 5, 'title': '', 'description': ''  }, 
            'slide-53': {'id': 'slide-53', 'row': 5, 'title': '', 'description': ''  }, 
            'slide-54': {'id': 'slide-54', 'row': 5, 'title': '', 'description': ''  }, 
            'slide-55': {'id': 'slide-55', 'row': 5, 'title': '', 'description': ''  }, 
            'slide-56': {'id': 'slide-56', 'row': 5, 'title': '', 'description': ''  }, 
            'slide-57': {'id': 'slide-57', 'row': 5, 'title': '', 'description': ''  },
        }
    };

    Slides.cols = Slides.menus['20min'];

    slidesInit = function(slides)
    {
        jQuery.each(slides, function(elt) {
            var slide = $('#'+elt);
            var slideData = slides[elt];
            $('#'+elt+'>.slide-descr>h1').html(slideData['title']);
            $('#'+elt+'>.slide-descr>p').html(slideData['description']);
        });
    }

    slidesInit(Slides.cols);

    changeBgImg = function(image, bgImg) {
        image.css({'background-image': 'url('+ bgImg +')'});
    }

    resizeImg = function(elt, bgSize, width, height, bgImg)
    {
        var image = $('.'+elt+' .slide-img');
        image.animate(
            {
                'background-size': bgSize+'px',
                'width': width+'px',
                'height': height+'px'
            }
            , (1.75 * 250)
            , changeBgImg(image, bgImg)
        );
    }

    fadeText = function(elt, m, d)
    {
        if ('in' === m)
        {
            $('.'+elt+' .slide-descr').slideDown("slow").fadeIn(parseInt(d));
        }
        
        if ('out' === m)
        {
            $('.'+elt+' .slide-descr').slideUp("slow").fadeOut(parseInt(d));
        }
    }

    slideBack = function(elt) {
        var id = Slides.selected;
        if(null === id) return;
        var row = Slides.cols[id].row;
        jQuery.each(Slides.cols, function(elt) {
            if(row === Slides.cols[elt].row)
            {
                if(elt === id)
                {
                    if($('.'+elt).hasClass('slide-prop')) {
                        $('.'+elt).removeClass('slide-prop');
                    }
                    $('.'+elt).addClass('slide-prop');

                    if($('.'+elt).hasClass('slide-wide')) {
                        $('.'+elt).removeClass('slide-wide');
                    }
                }
                else
                {
                    if(!$('.'+elt).hasClass('slide-prop')) {
                        $('.'+elt).addClass('slide-prop');
                    }

                    if($('.'+elt).hasClass('slide-narrow')) {
                        $('.'+elt).removeClass('slide-narrow');
                    }
                }
            }
            else
            {
                if(!$('.'+elt).hasClass('slide-prop')) {
                    $('.'+elt).removeClass('slide-prop');
                }
                $('.'+elt).addClass('slide-prop');

                if($('.'+elt).hasClass('slide-wide')) {
                    $('.'+elt).removeClass('slide-wide');
                }

                if($('.'+elt).hasClass('slide-narrow')) {
                    $('.'+elt).removeClass('slide-narrow');
                }
            }

            if($('#row-'+row).hasClass('row_tall')) {
                $('#row-'+row).removeClass('row_tall');
            }

            if($('#row-'+row).hasClass('row_short')) {
                $('#row-'+row).removeClass('row_short');
            }
            $('#row-'+row).addClass('row_short');

            resizeImg(elt, Slides.imgSm, Slides.imgWSm, Slides.imgHSm, Slides.bgSm);
            fadeText(elt, 'out', 100);
        });
    };

    $('.slide-col').click(function(elt) {
        var selected_id = $(this).attr('id');
        if(Slides.selected === selected_id)
        {
            slideBack(elt);
            Slides.selected = null;
            return;
        }
        else
        {
            Slides.selected = selected_id;
        }

        var rows = 0;
        var row = Slides.cols[Slides.selected].row;
        jQuery.each(Slides.cols, function(elt) {
            var row_elt = Slides.cols[elt].row;
            
            if($('.'+elt).hasClass('slide-wide')) {
                $('.'+elt).removeClass('slide-wide');
            }

            if($('.'+elt).hasClass('slide-narrow')) {
                $('.'+elt).removeClass('slide-narrow');
            }

            if(rows < row_elt) {
                rows = row_elt;
            }

            if(row === row_elt)
            {
                if(elt === Slides.selected)
                {
                    $('.'+elt).removeClass('slide-prop');
                    $('.'+elt).addClass('slide-wide');
                    resizeImg(elt, Slides.imgLg, Slides.imgWLg, Slides.imgHLg, Slides.bgLg);
                    fadeText(elt, 'in', Slides.tDuration);
                }
                else
                {
                    $('.'+elt).removeClass('slide-prop');
                    $('.'+elt).addClass('slide-narrow');
                    resizeImg(elt, Slides.imgSm, Slides.imgWSm, Slides.imgHSm, Slides.bgSm);
                    fadeText(elt, 'out', Slides.tDuration);
                }
            }
            else
            {
                if($('.'+elt).hasClass('slide-prop')) {
                    $('.'+elt).removeClass('slide-prop');
                }
                $('.'+elt).addClass('slide-prop');

                resizeImg(elt, Slides.imgSm, Slides.imgWSm, Slides.imgHSm, Slides.bgSm);
                fadeText(elt, 'out', Slides.tDuration);
            }
        });

        for(i=1;i<=rows;i++) {
            if(i != row) {
                if($('#row-'+i).hasClass('row_short')) {
                    $('#row-'+i).removeClass('row_short');
                }
                $('#row-'+i).addClass('row_short');
            }
        }

        if($('#row-'+row).hasClass('row_short')) {
            $('#row-'+row).removeClass('row_short');
        }
        if($('#row-'+row).hasClass('row_tall')) {
            $('#row-'+row).removeClass('row_tall');
        }
        $('#row-'+row).addClass('row_tall');
    });

    
})();
</script>