$("#explainDischargePopup").click(function () {
    $.fancybox({
    'content': '<div style="background-color:white">' +
        '<span style="color:#d0033f; font-size:1rem; font-weight:600;">' + "Informationen zur Einlösung" + '<br></span>' +
        '<span style="font-size:14px;">In nur vier Schritten zum Erlebnis-Ticket</span>' +
        '<div style="margin-top:10px; border-top:1px solid #dadada; text-align:center; height:230px;"><img src="//media.mydays.com/bundles/mydaysmaster/images/imageExplanation.jpg" style="width:100%"/></div>' +
        '</div>' +
    '<style>#fancybox-outer{background:#fff;}#fancybox-content{margin:10px !important; border:0 !important;}#fancybox-content>div{padding:0 5px;}</style>',
    'autoDimensions' : false,
    'width':'940',
    'border':'0',
    'height': 'auto',
    'centerOnScroll' : true
    })
});

$('#maxCount').change(function(){
    if ($('#maxCount').val() == 10){
        $('#amountContainer').html('<input type="number" value="10" name="amountVoucher" min="1" max="99" id="maxCount" />');
    }
});

// The slider being synced must be initialized first
$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    //directionNav: false,
    animationLoop: false,
    slideshow: false,
            itemWidth: 74,
        itemMargin: 4,
        asNavFor: '#slider'
});

$('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
});