(function() {

  window.canvasslideshow = function( options ) {



      //  scope
      /// ---------------------------
      var that  =   this;



      //  options
      /// ---------------------------
      options                     = options || {};
      options.parent              = options.parent;
      options.stagewidth          = options.hasownproperty('stagewidth') ? options.stagewidth : 1920;
      options.stageheight         = options.hasownproperty('stageheight') ? options.stageheight : 1080;
      options.pixisprites         = options.hasownproperty('sprites') ? options.sprites : [];
      options.centersprites       = options.hasownproperty('centersprites') ? options.centersprites : false;
      options.texts               = options.hasownproperty('texts') ? options.texts : [];
      options.autoplay            = options.hasownproperty('autoplay') ? options.autoplay : true;
      options.autoplayspeed       = options.hasownproperty('autoplayspeed') ? options.autoplayspeed : [10, 3];
      options.fullscreen          = options.hasownproperty('fullscreen') ? options.fullscreen : true;
      options.displacescale       = options.hasownproperty('displacescale') ? options.displacescale : [200, 70];
      options.displacementimage   = options.hasownproperty('displacementimage') ? options.displacementimage : '';
      options.navelement          = options.hasownproperty('navelement')  ?  options.navelement : document.queryselectorall( '.scene-nav' );
      options.displaceautofit     = options.hasownproperty('displaceautofit')  ?  options.displaceautofit : false;
      options.wacky               = options.hasownproperty('wacky') ? options.wacky : false;
      options.interactive         = options.hasownproperty('interactive') ? options.interactive : false;
      options.interactionevent    = options.hasownproperty('interactionevent') ? options.interactionevent : '';
      options.displacescaleto     = ( options.autoplay === false ) ? [ 0, 0 ] : [ 20, 20 ];
      options.textcolor           = options.hasownproperty('textcolor') ? options.textcolor : '#fff';
      options.displacementcenter  = options.hasownproperty('displacementcenter') ? options.displacementcenter : false;
      options.dispatchpointerover = options.hasownproperty('dispatchpointerover') ? options.dispatchpointerover : false;



      //  pixi variables
      /// ---------------------------
      var renderer            = new pixi.autodetectrenderer( options.stagewidth, options.stageheight, { transparent: true });
      var stage               = new pixi.container();
      var slidescontainer     = new pixi.container();
      var displacementsprite  = new pixi.sprite.fromimage( options.displacementimage );
      var displacementfilter  = new pixi.filters.displacementfilter( displacementsprite );



      //  texts
      /// ---------------------------
      var style = new pixi.textstyle({
          fill: options.textcolor,
          wordwrap: true,
          wordwrapwidth: 400,
          letterspacing: 20,
          fontsize: 14
      });



      //  slides array index
      /// ---------------------------
      this.currentindex = 0;



      /// ---------------------------
      //  initialise pixi
      /// ---------------------------
      this.initpixi = function() {

          // add canvas to the html
          options.parent.appendchild( renderer.view );


          // add child container to the main container
          stage.addchild( slidescontainer );


          // enable interactions
          stage.interactive = true;

          // fit renderer to the screen
          if ( options.fullscreen === true ) {
              renderer.view.style.objectfit = 'cover';
              renderer.view.style.width     = '100%';
              renderer.view.style.height    = '100%';
              renderer.view.style.top       = '50%';
              renderer.view.style.left      = '50%';
              renderer.view.style.webkittransform = 'translate( -50%, -50% ) scale(1.05)';
              renderer.view.style.transform = 'translate( -50%, -50% ) scale(1.05)';
          } else {
              renderer.view.style.maxwidth  = '100%';
              renderer.view.style.top       = '50%';
              renderer.view.style.left      = '50%';
              renderer.view.style.webkittransform = 'translate( -50%, -50% )';
              renderer.view.style.transform = 'translate( -50%, -50% )';
          }


          displacementsprite.texture.basetexture.wrapmode = pixi.wrap_modes.repeat;


          // set the filter to stage and set some default values for the animation
          stage.filters = [displacementfilter];

          if ( options.autoplay === false ) {
              displacementfilter.scale.x = 0;
              displacementfilter.scale.y = 0;
          }

          if ( options.wacky === true ) {

              displacementsprite.anchor.set(0.5);
              displacementsprite.x = renderer.width / 2;
              displacementsprite.y = renderer.height / 2;
          }

          displacementsprite.scale.x = 2;
          displacementsprite.scale.y = 2;

          // pixi tries to fit the filter bounding box to the renderer so we optionally bypass
          displacementfilter.autofit = options.displaceautofit;

          stage.addchild( displacementsprite );

      };



      /// ---------------------------
      //  load slides to canvas
      /// ---------------------------
      this.loadpixisprites = function( sprites ) {


          var rsprites = options.sprites;
          var rtexts   = options.texts;

          for ( var i = 0; i < rsprites.length; i++ ) {

              var texture   = new pixi.texture.fromimage( sprites[i] );
              var image     = new pixi.sprite( texture );

              if ( rtexts ) {
                  var richtext = new pixi.text( rtexts[i], style);
                  image.addchild(richtext);

                  richtext.anchor.set(0.5);
                  richtext.x = image.width / 2;
                  richtext.y = image.height / 2;
              }

              if ( options.centersprites === true ) {
                  image.anchor.set(0.5);
                  image.x = renderer.width / 2;
                  image.y = renderer.height / 2;
              }
              // image.transform.scale.x = 1.3;
              // image.transform.scale.y = 1.3;



              if ( i !== 0  ) {
                  tweenmax.set( image, { alpha: 0 } );
              }

              slidescontainer.addchild( image );

          }

      };



      /// ---------------------------
      //  default render/animation
      /// ---------------------------
      if ( options.autoplay === true ) {

          var ticker = new pixi.ticker.ticker();

          ticker.autostart = options.autoplay;

          ticker.add(function( delta ) {

              displacementsprite.x += options.autoplayspeed[0] * delta;
              displacementsprite.y += options.autoplayspeed[1];

              renderer.render( stage );

          });

      }  else {

          var render = new pixi.ticker.ticker();

          render.autostart = true;

          render.add(function( delta ) {
              renderer.render( stage );
          });

      }


      /// ---------------------------
      //  transition between slides
      /// ---------------------------
      var isplaying   = false;
      var slideimages = slidescontainer.children;
      this.moveslider = function( newindex ) {

          isplaying = true;


          var basetimeline = new timelinemax( { oncomplete: function () {
                  that.currentindex = newindex;
                  isplaying = false;
                  if ( options.wacky === true ) {
                      displacementsprite.scale.set( 1 );
                  }
              },onupdate: function() {

                  if ( options.wacky === true ) {
                      displacementsprite.rotation += basetimeline.progress() * 0.02;
                      displacementsprite.scale.set( basetimeline.progress() * 3 );
                  }

              } });

          basetimeline.clear();

          if ( basetimeline.isactive() ) {
              return;
          }

          basetimeline
              .to(displacementfilter.scale, 0.5, { x: options.displacescale[0], y: options.displacescale[1]  })
              .to(slideimages[that.currentindex], 0.5, { alpha: 0 })
              .to(slideimages[newindex], 0.5, { alpha: 1 },0.5)
              .to(displacementfilter.scale, 0.5, { x: options.displacescaleto[0], y: options.displacescaleto[1] },1 );

      };



      /// ---------------------------
      //  click handlers
      /// ---------------------------
      var nav = options.navelement;

      for ( var i = 0; i < nav.length; i++ ) {

          var navitem = nav[i];

          navitem.onclick = function( event ) {

              // make sure the previous transition has ended
              if ( isplaying ) {
                  return false;
              }

              if ( this.getattribute('data-nav') === 'next' ) {

                  if ( that.currentindex >= 0 && that.currentindex < slideimages.length - 1 ) {
                      that.moveslider( that.currentindex + 1 );
                  } else {
                      that.moveslider( 0 );
                  }

              } else if ( this.getattribute('data-nav') === 'previous' ) {

                  if ( that.currentindex > 0 && that.currentindex < slideimages.length ) {
                      that.moveslider( that.currentindex - 1 );
                  } else {
                      that.moveslider( spriteimages.length - 1 );
                  }

              }else{
                  var aa=parseint(this.getattribute('data-nav'));
                  if ( that.currentindex != aa ) {
                      that.moveslider( aa );
                  } else {

                  }
              }

              return false;

          }

      }



      /// ---------------------------
      //  init functions
      /// ---------------------------

      this.init = function() {


          that.initpixi();
          that.loadpixisprites( options.pixisprites );

          /*
          if ( options.fullscreen === true ) {
            window.addeventlistener("resize", function( event ){
              scaletowindow( renderer.view );
            });
            scaletowindow( renderer.view );
          }
          */


      };




      /// ---------------------------
      //  interactions
      /// ---------------------------
      function rotatespite() {
          displacementsprite.rotation += 0.001;
          rafid = requestanimationframe( rotatespite );
      }

      if ( options.interactive === true ) {

          var rafid, mousex, mousey;

          // enable interactions on our slider
          slidescontainer.interactive = true;
          slidescontainer.buttonmode  = true;

          // hover
          if ( options.interactionevent === 'hover' || options.interactionevent === 'both'  )  {

              slidescontainer.pointerover = function( mousedata ){
                  mousex = mousedata.data.global.x;
                  mousey = mousedata.data.global.y;
                  tweenmax.to( displacementfilter.scale, 1, { x: "+=" + math.sin( mousex ) * 100 + "", y: "+=" + math.cos( mousey ) * 100 + ""  });
                  rotatespite();
              };

              slidescontainer.pointerout = function( mousedata ){
                  tweenmax.to( displacementfilter.scale, 1, { x: 0, y: 0 });
                  cancelanimationframe( rafid );
              };

          }

          // click
          if ( options.interactionevent === 'click' || options.interactionevent === 'both'  ) {

              slidescontainer.pointerup = function( mousedata ){
                  if ( options.dispatchpointerover === true ) {
                      tweenmax.to( displacementfilter.scale, 1, { x: 0, y: 0, oncomplete: function() {
                              tweenmax.to( displacementfilter.scale, 1, { x: 20, y: 20  });
                          } });
                  } else {
                      tweenmax.to( displacementfilter.scale, 1, { x: 0, y: 0 });
                      cancelanimationframe( rafid );
                  }

              };

              slidescontainer.pointerdown = function( mousedata ){
                  mousex = mousedata.data.global.x;
                  mousey = mousedata.data.global.y;
                  tweenmax.to( displacementfilter.scale, 1, { x: "+=" + math.sin( mousex ) * 1200 + "", y: "+=" + math.cos( mousey ) * 200 + ""  });
              };

              slidescontainer.pointerout = function( mousedata ){
                  if ( options.dispatchpointerover === true ) {
                      tweenmax.to( displacementfilter.scale, 1, { x: 0, y: 0, oncomplete: function() {
                              tweenmax.to( displacementfilter.scale, 1, { x: 20, y: 20  });
                          } });
                  } else {
                      tweenmax.to( displacementfilter.scale, 1, { x: 0, y: 0 });
                      cancelanimationframe( rafid );
                  }

              };

          }

      }


      /// ---------------------------
      //  center displacement
      /// ---------------------------
      if ( options.displacementcenter === true ) {
          displacementsprite.anchor.set(0.5);
          displacementsprite.x = renderer.view.width / 2;
          displacementsprite.y = renderer.view.height / 2;
      }


      /// ---------------------------
      //  start
      /// ---------------------------
      this.init();


      /// ---------------------------
      //  helper functions
      /// ---------------------------
      function scaletowindow( canvas, backgroundcolor ) {
          var scalex, scaley, scale, center;

          //1. scale the canvas to the correct size
          //figure out the scale amount on each axis
          scalex = window.innerwidth / canvas.offsetwidth;
          scaley = window.innerheight / canvas.offsetheight;

          //scale the canvas based on whichever value is less: `scalex` or `scaley`
          scale = math.min(scalex, scaley);
          canvas.style.transformorigin = "0 0";
          canvas.style.transform = "scale(" + scale + ")";

          //2. center the canvas.
          //decide whether to center the canvas vertically or horizontally.
          //wide canvases should be centered vertically, and
          //square or tall canvases should be centered horizontally
          if (canvas.offsetwidth > canvas.offsetheight) {
              if (canvas.offsetwidth * scale < window.innerwidth) {
                  center = "horizontally";
              } else {
                  center = "vertically";
              }
          } else {
              if (canvas.offsetheight * scale < window.innerheight) {
                  center = "vertically";
              } else {
                  center = "horizontally";
              }
          }

          //center horizontally (for square or tall canvases)
          var margin;
          if (center === "horizontally") {
              margin = (window.innerwidth - canvas.offsetwidth * scale) / 2;
              canvas.style.margintop = 0 + "px";
              canvas.style.marginbottom = 0 + "px";
              canvas.style.marginleft = margin + "px";
              canvas.style.marginright = margin + "px";
          }

          //center vertically (for wide canvases)
          if (center === "vertically") {
              margin = (window.innerheight - canvas.offsetheight * scale) / 2;
              canvas.style.margintop = margin + "px";
              canvas.style.marginbottom = margin + "px";
              canvas.style.marginleft = 0 + "px";
              canvas.style.marginright = 0 + "px";
          }

          //3. remove any padding from the canvas  and body and set the canvas
          //display style to "block"
          canvas.style.paddingleft = 0 + "px";
          canvas.style.paddingright = 0 + "px";
          canvas.style.paddingtop = 0 + "px";
          canvas.style.paddingbottom = 0 + "px";
          canvas.style.display = "block";

          //4. set the color of the html body background
          document.body.style.backgroundcolor = backgroundcolor;

          //fix some quirkiness in scaling for safari
          var ua = navigator.useragent.tolowercase();
          if (ua.indexof("safari") != -1) {
              if (ua.indexof("chrome") > -1) {
                  // chrome
              } else {
                  // safari
                  //canvas.style.maxheight = "100%";
                  //canvas.style.minheight = "100%";
              }
          }

          //5. return the `scale` value. this is important, because you'll nee this value
          //for correct hit testing between the pointer and sprites
          return scale;
      } // http://bit.ly/2y1yk2k


  };

})();