(function(){
    window.CanvasSlideshow4 = function(options){


    //  SCOPE
    /// ---------------------------      
    var that  =   this;


    //  OPTIONS
    //  ¿É¼Ç°ªÀ» Á¤ÀÇÇÕ´Ï´Ù.
    /// ---------------------------      


    // || = ÇÑ ÂÊÀÌ ÂüÀÏ°æ¿ì, Âü°ªÀ» ¹ÝȯÇÑ´Ù. ³í¸®¿¬»êÀÚ
    //  Á¶°Ç ? ÂüÀ϶§ÀÇ °ª : °ÅÁþÀ϶§ÀÇ °ª
    //  °´Ã¼ÀÇ ¼Ó¼º°ªÀÌ ÀԷµǸé, optionsÀÇ ÇÁ·ÎÆÛƼ·Î »ðÀÔÇÏ°í, ±×°Ô ¾Æ´Ï¶ó¸é : µÚÀÇ °ªÀ» ´ëÀÔÇÑ´Ù.
    //  Çش籸¹®Àº ÇÔ¼ö¸¦ È£ÃâÇÏ´Â °úÁ¤¿¡¼­ ÁöÁ¤Çϸç, ÁöÁ¤ÇÏÁö ¾ÊÀ»°æ¿ì ÀÌ¹Ì ÁöÁ¤µÈ °ªÀ» »ðÀÔÇÑ´Ù.


    options                     = options || {};
    options.stageWidth          = options.hasOwnProperty('stageWidth') ? options.stageWidth : 1920;
    options.stageHeight         = options.hasOwnProperty('stageHeight') ? options.stageHeight : 937;
    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;


    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);


    // HTML¿¡ ĵ¹ö½º¸¦ »ý¼ºÇÕ´Ï´Ù
    document.body.appendChild(renderer.view);
    // stage¿¡ container ÀڽĿä¼Ò¸¦ »ý¼ºÇÕ´Ï´Ù.
    stage.addChild(slidesContainer);
    // stage¿¡ filter¸¦ ¼³Á¤ÇÕ´Ï´Ù.
    stage.filters = [displacementFilter];


      //  TEXTS
      //  PIXI ÅؽºÆ®½ºÅ¸ÀÏ
      /// ---------------------------    
      var style = new PIXI.TextStyle({
        fill: options.textColor,
        wordWrap: true,
        wordWrapWidth: 400,
        letterSpacing: 20,
        fontSize: 14
      });


      /// ---------------------------
      //  INITIALISE PIXI
      //  PIXI Ãʱ⼳Á¤
      /// ---------------------------      
      this.initPixi = function() {



        // Add canvas to the HTML
        // html¿¡ ĵ¹ö½º¸¦ »ý¼ºÇÕ´Ï´Ù.
        document.querySelector('.splashimg4').appendChild(renderer.view).className="pc";


  


        // Add child container to the main container 
        // ¸ÞÀÎÄÁÅ×ÀÌ³Ê ¾È¿¡ ÀڽĿä¼Ò container¸¦ »ý¼ºÇÕ´Ï´Ù.
        stage.addChild( slidesContainer );
  
        
        console.log(renderer.view.style);
  
        // Fit renderer to the screen
        // ·»´õ·¯¸¦ È­¸é¿¡ ¸ÂÃä´Ï´Ù.
        if ( options.fullScreen === true ) {
          renderer.view.style.position = 'inherit';
          renderer.view.style.objectFit = 'cover';
          renderer.view.style.width     = '100vw';
          renderer.view.style.height    = '100vh';
          renderer.view.style.top       = '0%';
          renderer.view.style.left      = '0%';
          // renderer.view.style.webkitTransform = 'translate( -50%, -50% ) scale(1.2)';           
          // renderer.view.style.transform = 'translate( -50%, -50% ) scale(1.2)';           
        } else {
          renderer.view.style.maxWidth  = '100%';
          renderer.view.style.top       = '0';
          renderer.view.style.left      = '0';
          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 = 5;
        displacementSprite.scale.y = 5;
        // 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 );
          });        
        
      }    


        /// ---------------------------
      //  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 );  
        }
        */
        


      };


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




    // 


    };
})();