{% extends app.request.get('project_setting').instance_theme_path~':'~ app.request.get('project_setting').instance_theme ~':/Banner/bannerCustomJSLayout.html.twig' %}
{# block banner_settings_javascripts %}
jQuery(document).ready(function($) { 
     if ($('#slider1_container').length > 0) { //Reference http://www.jssor.com/development/slider-with-slideshow-jquery.html
         //Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html
         var _SlideshowTransitions = [ //Rotate VFork+ out 
             , {
                 $Duration: 1200,
                 x: -3,
                 y: 1,
                 $Rows: 2,
                 $Zoom: 11,
                 $Rotate: 1,
                 $SlideOut: true,
                 $Assembly: 2049,
                 $ChessMode: {
                     $Row: 28
                 },
                 $Easing: {
                     $Left: $JssorEasing$.$EaseInExpo,
                     $Top: $JssorEasing$.$EaseInExpo,
                     $Zoom: $JssorEasing$.$EaseInExpo,
                     $Opacity: $JssorEasing$.$EaseLinear,
                     $Rotate: $JssorEasing$.$EaseInExpo
                 },
                 $Opacity: 2,
                 $Round: {
                     $Rotate: 0.7
                 }
             }
         ];
         var _height = 370;
         var _width = 1170; //Reference http://www.jssor.com/development/slider-with-caption-jquery.html
         //Reference http://www.jssor.com/development/reference-ui-definition.html#captiondefinition
         //Reference http://www.jssor.com/development/tool-caption-transition-viewer.html 
         var _CaptionTransitions = [];
         _CaptionTransitions["L"] = {
             $Duration: 900,
             x: 0.6,
             $Easing: {
                 $Left: $JssorEasing$.$EaseInOutSine
             },
             $Opacity: 2
         };
         _CaptionTransitions["R"] = {
             $Duration: 900,
             x: -0.6,
             $Easing: {
                 $Left: $JssorEasing$.$EaseInOutSine
             },
             $Opacity: 2
         };
         _CaptionTransitions["T"] = {
             $Duration: 900,
             y: 0.6,
             $Easing: {
                 $Top: $JssorEasing$.$EaseInOutSine
             },
             $Opacity: 2
         };
         _CaptionTransitions["B"] = {
             $Duration: 900,
             y: -0.6,
             $Easing: {
                 $Top: $JssorEasing$.$EaseInOutSine
             },
             $Opacity: 2
         };
         _CaptionTransitions["TR"] = {
             $Duration: 900,
             x: -0.6,
             y: 0.6,
             $Easing: {
                 $Left: $JssorEasing$.$EaseInOutSine,
                 $Top: $JssorEasing$.$EaseInOutSine
             },
             $Opacity: 2
         };
         _CaptionTransitions["L|IB"] = {
             $Duration: 1200,
             x: 0.6,
             $Easing: {
                 $Left: $JssorEasing$.$EaseInOutBack
             },
             $Opacity: 2
         };
         _CaptionTransitions["R|IB"] = {
             $Duration: 1200,
             x: -0.6,
             $Easing: {
                 $Left: $JssorEasing$.$EaseInOutBack
             },
             $Opacity: 2
         };
         _CaptionTransitions["T|IB"] = {
             $Duration: 1200,
             y: 0.6,
             $Easing: {
                 $Top: $JssorEasing$.$EaseInOutBack
             },
             $Opacity: 2
         };
         _CaptionTransitions["CLIP|LR"] = {
             $Duration: 900,
             $Clip: 3,
             $Easing: {
                 $Clip: $JssorEasing$.$EaseInOutCubic
             },
             $Opacity: 2
         };
         _CaptionTransitions["CLIP|TB"] = {
             $Duration: 900,
             $Clip: 12,
             $Easing: {
                 $Clip: $JssorEasing$.$EaseInOutCubic
             },
             $Opacity: 2
         };
         _CaptionTransitions["CLIP|L"] = {
             $Duration: 900,
             $Clip: 1,
             $Easing: {
                 $Clip: $JssorEasing$.$EaseInOutCubic
             },
             $Opacity: 2
         };
         _CaptionTransitions["MCLIP|R"] = {
             $Duration: 900,
             $Clip: 2,
             $Move: true,
             $Easing: {
                 $Clip: $JssorEasing$.$EaseInOutCubic
             },
             $Opacity: 2
         };
         _CaptionTransitions["MCLIP|T"] = {
             $Duration: 900,
             $Clip: 4,
             $Move: true,
             $Easing: {
                 $Clip: $JssorEasing$.$EaseInOutCubic
             },
             $Opacity: 2
         };
         _CaptionTransitions["WV|B"] = {
             $Duration: 1200,
             x: -0.2,
             y: -0.6,
             $Easing: {
                 $Left: $JssorEasing$.$EaseInWave,
                 $Top: $JssorEasing$.$EaseLinear
             },
             $Opacity: 2,
             $Round: {
                 $Left: 1.5
             }
         };
         _CaptionTransitions["TORTUOUS|VB"] = {
             $Duration: 1800,
             y: -0.2,
             $Zoom: 1,
             $Easing: {
                 $Top: $JssorEasing$.$EaseOutWave,
                 $Zoom: $JssorEasing$.$EaseOutCubic
             },
             $Opacity: 2,
             $During: {
                 $Top: [0, 0.7]
             },
             $Round: {
                 $Top: 1.3
             }
         };
         _CaptionTransitions["LISTH|R"] = {
             $Duration: 1500,
             x: -0.8,
             $Clip: 1,
             $Easing: $JssorEasing$.$EaseInOutCubic,
             $ScaleClip: 0.8,
             $Opacity: 2,
             $During: {
                 $Left: [0.4, 0.6],
                 $Clip: [0, 0.4],
                 $Opacity: [0.4, 0.6]
             }
         };
         _CaptionTransitions["RTT|360"] = {
             $Duration: 900,
             $Rotate: 1,
             $Easing: {
                 $Opacity: $JssorEasing$.$EaseLinear,
                 $Rotate: $JssorEasing$.$EaseInQuad
             },
             $Opacity: 2
         };
         _CaptionTransitions["RTT|10"] = {
             $Duration: 900,
             $Zoom: 11,
             $Rotate: 1,
             $Easing: {
                 $Zoom: $JssorEasing$.$EaseInExpo,
                 $Opacity: $JssorEasing$.$EaseLinear,
                 $Rotate: $JssorEasing$.$EaseInExpo
             },
             $Opacity: 2,
             $Round: {
                 $Rotate: 0.8
             }
         };
         _CaptionTransitions["RTTL|BR"] = {
             $Duration: 900,
             x: -0.6,
             y: -0.6,
             $Zoom: 11,
             $Rotate: 1,
             $Easing: {
                 $Left: $JssorEasing$.$EaseInCubic,
                 $Top: $JssorEasing$.$EaseInCubic,
                 $Zoom: $JssorEasing$.$EaseInCubic,
                 $Opacity: $JssorEasing$.$EaseLinear,
                 $Rotate: $JssorEasing$.$EaseInCubic
             },
             $Opacity: 2,
             $Round: {
                 $Rotate: 0.8
             }
         };
         _CaptionTransitions["T|IE*IE"] = {
             $Duration: 1800,
             y: 0.8,
             $Zoom: 11,
             $Rotate: -1.5,
             $Easing: {
                 $Top: $JssorEasing$.$EaseInOutElastic,
                 $Zoom: $JssorEasing$.$EaseInElastic,
                 $Rotate: $JssorEasing$.$EaseInOutElastic
             },
             $Opacity: 2,
             $During: {
                 $Zoom: [0, 0.8],
                 $Opacity: [0, 0.7]
             },
             $Round: {
                 $Rotate: 0.5
             }
         };
         _CaptionTransitions["RTTS|R"] = {
             $Duration: 900,
             x: -0.6,
             $Zoom: 1,
             $Rotate: 1,
             $Easing: {
                 $Left: $JssorEasing$.$EaseInQuad,
                 $Zoom: $JssorEasing$.$EaseInQuad,
                 $Rotate: $JssorEasing$.$EaseInQuad,
                 $Opacity: $JssorEasing$.$EaseOutQuad
             },
             $Opacity: 2,
             $Round: {
                 $Rotate: 1.2
             }
         };
         _CaptionTransitions["RTTS|T"] = {
             $Duration: 900,
             y: 0.6,
             $Zoom: 1,
             $Rotate: 1,
             $Easing: {
                 $Top: $JssorEasing$.$EaseInQuad,
                 $Zoom: $JssorEasing$.$EaseInQuad,
                 $Rotate: $JssorEasing$.$EaseInQuad,
                 $Opacity: $JssorEasing$.$EaseOutQuad
             },
             $Opacity: 2,
             $Round: {
                 $Rotate: 1.2
             }
         };
         _CaptionTransitions["DDGDANCE|RB"] = {
             $Duration: 1800,
             x: -0.3,
             y: -0.3,
             $Zoom: 1,
             $Easing: {
                 $Left: $JssorEasing$.$EaseInJump,
                 $Top: $JssorEasing$.$EaseInJump,
                 $Zoom: $JssorEasing$.$EaseOutQuad
             },
             $Opacity: 2,
             $During: {
                 $Left: [0, 0.8],
                 $Top: [0, 0.8]
             },
             $Round: {
                 $Left: 0.8,
                 $Top: 2.5
             }
         };
         _CaptionTransitions["ZMF|10"] = {
             $Duration: 900,
             $Zoom: 11,
             $Easing: {
                 $Zoom: $JssorEasing$.$EaseInExpo,
                 $Opacity: $JssorEasing$.$EaseLinear
             },
             $Opacity: 2
         };
         _CaptionTransitions["DDG|TR"] = {
             $Duration: 1200,
             x: -0.3,
             y: 0.3,
             $Zoom: 1,
             $Easing: {
                 $Left: $JssorEasing$.$EaseInJump,
                 $Top: $JssorEasing$.$EaseInJump
             },
             $Opacity: 2,
             $During: {
                 $Left: [0, 0.8],
                 $Top: [0, 0.8]
             },
             $Round: {
                 $Left: 0.8,
                 $Top: 0.8
             }
         };
         _CaptionTransitions["FLTTR|R"] = {
             $Duration: 900,
             x: -0.2,
             y: -0.1,
             $Easing: {
                 $Left: $JssorEasing$.$EaseLinear,
                 $Top: $JssorEasing$.$EaseInWave
             },
             $Opacity: 2,
             $Round: {
                 $Top: 1.3
             }
         };
         _CaptionTransitions["FLTTRWN|LT"] = {
             $Duration: 1800,
             x: 0.5,
             y: 0.2,
             $Zoom: 1,
             $Easing: {
                 $Left: $JssorEasing$.$EaseInOutSine,
                 $Top: $JssorEasing$.$EaseInWave,
                 $Zoom: $JssorEasing$.$EaseInOutQuad
             },
             $Opacity: 2,
             $During: {
                 $Left: [0, 0.7],
                 $Top: [0.1, 0.7]
             },
             $Round: {
                 $Top: 1.3
             }
         };
         _CaptionTransitions["ATTACK|BR"] = {
             $Duration: 1500,
             x: -0.1,
             y: -0.5,
             $Zoom: 1,
             $Easing: {
                 $Left: $JssorEasing$.$EaseOutWave,
                 $Top: $JssorEasing$.$EaseInExpo
             },
             $Opacity: 2,
             $During: {
                 $Left: [0.3, 0.7],
                 $Top: [0, 0.7]
             },
             $Round: {
                 $Left: 1.3
             }
         };
         _CaptionTransitions["FADE"] = {
             $Duration: 900,
             $Opacity: 2
         };
         var options = {
             $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
             $AutoPlaySteps: 1, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1 
             $AutoPlayInterval: 2000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 
             $PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
             $ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false 
             $SlideEasing: $JssorEasing$.$EaseOutQuint, //[Optional] Specifies easing for right to left animation, default value is $JssorEasing$.$EaseOutQuad 
             $SlideDuration: 800, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500 
             $MinDragOffsetToSlide: 20, //[Optional] Minimum drag offset to trigger slide , default value is 20
             //$SlideWidth: 1170, //[Optional] Width of every slide in pixels, default value is width of 'slides' container 
             //$SlideHeight: 370, //[Optional] Height of every slide in pixels, default value is height of 'slides' container 
             $SlideSpacing: 0, //[Optional] Space between each slide in pixels, default value is 0 
             $DisplayPieces: 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1 
             $ParkingPosition: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
             $UISearchMode: 1, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
             $PlayOrientation: 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1 
             $DragOrientation: 1, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
             $SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not 
                 $Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow 
                 $Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
                 $TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random 
                 $ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false 
             },
             $CaptionSliderOptions: { //[Optional] Options which specifies how to animate caption
                 $Class: $JssorCaptionSlider$, //[Required] Class to create instance to animate caption
                 $CaptionTransitions: _CaptionTransitions, //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
                 $PlayInMode: 1, //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1 
                 $PlayOutMode: 3 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1 
             },
             $ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not 
                 $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
                 $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always 
                 $AutoCenter: 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                 $Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1 
             },
             $BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not 
                 $Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always 
                 $AutoCenter: 1, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 
                 $Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1 
                 $Lanes: 1, //[Optional] Specify lanes to arrange items, default value is 1 
                 $SpacingX: 4, //[Optional] Horizontal space between each item in pixel, default value is 0
                 $SpacingY: 4, //[Optional] Vertical space between each item in pixel, default value is 0 
                 $Orientation: 1 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1 
             }
         };
         var jssor_slider1 = new $JssorSlider$("slider1_container", options);
         var is_resize = false;

         function resetBanner() {
             var parentWidth = jssor_slider1.Elmt.parentNode.clientWidth;
             var parentHeight = parseInt(_height * parentWidth / _width); //alert(parentWidth);
             //$('.js-banner-dynamic-height-width').css({'width':parentWidth+'px','height':parentHeight + 'px' });
         } //responsive code begin //you canremove responsive code if you don't want the slider scales while window resizes 
         function ScaleSlider() {
             var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
             var parentHeight = parseInt(_height * parentWidth / _width);
             if (is_resize) {
                 $(jssor_slider1.$Elmt.parentNode).css({
                     'height': 'auto'
                 });
             }
             if (parentWidth) {
                 jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, _width), _height));
                 parentWidth = Math.min(parentWidth, _width);
                 jssor_slider1.$ScaleWidth(parentWidth); //temporary patch added toresolve responsive issue of banner. 
                 //jssor_slider1.$ScaleHeight(parentHeight);
                 if (!is_resize) { //var parentWidth =jssor_slider1.$Elmt.parentNode.clientWidth; 
                     var parentHeight = parseInt(_height * parentWidth / _width);
                     $(jssor_slider1.$Elmt.parentNode).css({
                         'height': parentHeight + 'px'
                     });
                     $('div:first-child', $(jssor_slider1.$Elmt.parentNode)).css({
                         'width': parentWidth + 'px',
                         'height': parentHeight + 'px',
                         'transform': 'scale(1)'
                     });
                     $('a.js-get-banner', $(jssor_slider1.$Elmt.parentNode)).css({
                         'max-width': parentWidth + 'px',
                         'max-height': parentHeight + 'px',
                         'transform': 'scale(1)'
                     });
                     $('a.js-get-banner', $(jssor_slider1.$Elmt.parentNode)).parent().css({
                         'width': parentWidth + 'px',
                         'height': parentHeight + 'px',
                         'transform': 'scale(1)'
                     });
                     $('a.js-get-banner img', $(jssor_slider1.$Elmt.parentNode)).parent().css({
                         'max-width': parentWidth + 'px',
                         'max-height': parentHeight + 'px',
                         'transform': 'scale(1)'
                     });
                     $('div.js-banner-dynamic-height-width .js-banner-dynamic-height-width', $(jssor_slider1.$Elmt.parentNode)).css({
                         'width': parentWidth + 'px',
                         'height': parentHeight + 'px',
                         'transform': 'scale(1)'
                     });
                     $('img.js-banner-dynamic-height-width', $(jssor_slider1.$Elmt.parentNode)).css({
                         'width': parentWidth + 'px',
                         'height': parentHeight + 'px',
                         'transform': 'scale(1)'
                     });
                   
                     jssor_slider1.$ScaleWidth(parentWidth);
                 }
             } else window.setTimeout(ScaleSlider, 30);
             is_resize = false;
         }

         function resizeScaleSlider() {
             is_resize = true;
             window.setTimeout(ScaleSlider, 1000);
         }
         ScaleSlider();

         //$(window).bind("load", ScaleSlider); 
         $(window).bind("resize", resizeScaleSlider);
         $(window).bind("orientationchange", ScaleSlider);
         //responsive code end 

     }
 });
{% endblock banner_settings_javascripts #}