// jQuery.bbrk.home.preloader.js

(function ($) {
  
  if (typeof $.bbrk === "undefined") {
    $.bbrk = {};
  }
  
  if (typeof $.bbrk.home === "undefined") {
    $.bbrk.home = {};
  }
  
  $.bbrk.home.preloader = function () {

    var $preloader;
    
    var $scene1;
    var $base;
    var $baseLogo;
    var $baseText1;
    var $baseText2;
    var $baseText3;
    var $baseBear1;
    var $baseBear2;
    var $baseBear3;
    var $baseBear4;
    var $baseBear5;
    var $baseBear6;
    var $baseBear7;
    var $baseBear8;
    var $baseBear9;
    var $baseBear10;
    var $baseBear11;
    var $baseBear12;

    var $scene2;
    var $fill;
    var $fillLogo;
    var $fillText1;
    var $fillText2;
    var $fillText3;
    var $fillBear1;
    var $fillBear2;
    var $fillBear3;
    var $fillBear4;
    var $fillBear5;
    var $fillBear6;
    var $fillBear7;
    var $fillBear8;
    var $fillBear9;
    var $fillBear10;
    var $fillBear11;
    var $fillBear12;
        
    var hideList = [];
    
    var events = $.bbrk.home.preloader.events;
      
    var visible = true;
    var timer;
    
    $preloader = $("<div class=\"preloader\">");

    $base = $("<div class=\"scene base\">");
    $baseLogo = $("<div class=\"item logo\">");
    $baseLogo.html("<img src=\"assets/img/preloader/logo-symbol-blue.png\" alt=\"\">");
    $baseArrow1 = $("<div class=\"item arrow1\">");
    $baseArrow1.html("<img src=\"assets/img/preloader/shape-arrow-right-blue.png\" alt=\"\">");
    $baseArrow2 = $("<div class=\"item arrow2\">");
    $baseArrow2.html("<img src=\"assets/img/preloader/shape-arrow-right-blue.png\" alt=\"\">");
    $baseText1 = $("<div class=\"item text1\">");
    $baseText1.html("<img src=\"assets/img/preloader/text-bearbrick-blue.png\" alt=\"\">");
    $baseText2 = $("<div class=\"item text2\">");
    $baseText2.html("<img src=\"assets/img/preloader/text-series23-blue.png\" alt=\"\">");
    $baseText3 = $("<div class=\"item text3\">");
    $baseText3.html("<img src=\"assets/img/preloader/text-loading_contents-blue.png\" alt=\"\">");
    $baseBear1 = $("<div class=\"item bear1\">");
    $baseBear1.html("<img src=\"assets/img/preloader/shape-bear-blue.png\" alt=\"\">");
    $baseBear2 = $("<div class=\"item bear2\">");
    $baseBear2.html("<img src=\"assets/img/preloader/shape-bear-blue.png\" alt=\"\">");
    $baseBear3 = $("<div class=\"item bear3\">");
    $baseBear3.html("<img src=\"assets/img/preloader/shape-bear-blue.png\" alt=\"\">");
    $baseBear4 = $("<div class=\"item bear4\">");
    $baseBear4.html("<img src=\"assets/img/preloader/shape-bear-blue.png\" alt=\"\">");
    $baseBear5 = $("<div class=\"item bear5\">");
    $baseBear5.html("<img src=\"assets/img/preloader/shape-bear-blue.png\" alt=\"\">");
    $baseBear6 = $("<div class=\"item bear6\">");
    $baseBear6.html("<img src=\"assets/img/preloader/shape-bear-blue.png\" alt=\"\">");
    $baseBear7 = $("<div class=\"item bear7\">");
    $baseBear7.html("<img src=\"assets/img/preloader/shape-bear-blue.png\" alt=\"\">");
    $baseBear8 = $("<div class=\"item bear8\">");
    $baseBear8.html("<img src=\"assets/img/preloader/shape-bear-blue.png\" alt=\"\">");
    $baseBear9 = $("<div class=\"item bear9\">");
    $baseBear9.html("<img src=\"assets/img/preloader/shape-bear-blue.png\" alt=\"\">");
    $baseBear10 = $("<div class=\"item bear10\">");
    $baseBear10.html("<img src=\"assets/img/preloader/shape-bear-blue.png\" alt=\"\">");
    $baseBear11 = $("<div class=\"item bear11\">");
    $baseBear11.html("<img src=\"assets/img/preloader/shape-bear-blue.png\" alt=\"\">");
    $baseBear12 = $("<div class=\"item bear12\">");
    $baseBear12.html("<img src=\"assets/img/preloader/shape-bear-blue.png\" alt=\"\">");
    $base.append($baseLogo, $baseArrow1, $baseArrow2, $baseText1, $baseText2, $baseText3, $baseBear1, $baseBear2, $baseBear3, $baseBear4, $baseBear5, $baseBear6, $baseBear7, $baseBear8, $baseBear9, $baseBear10, $baseBear11, $baseBear12);

    hideList = [
      $baseLogo,
      $baseArrow1,
      $baseArrow2,
      $baseText1,
      $baseText2,
      $baseText3,
      $baseBear1,
      $baseBear2,
      $baseBear3,
      $baseBear4,
      $baseBear5,
      $baseBear6,
      $baseBear7,
      $baseBear8,
      $baseBear9,
      $baseBear10,
      $baseBear11,
      $baseBear12
    ];
      
    for (var i = 0; i < hideList.length; ++i) {
      hideList[i].css({
        left: "-50%"
      });
    }

    $fill = $("<div class=\"scene fill\">");
    $fillLogo = $("<div class=\"item logo\">");
    $fillLogo.html("<img src=\"assets/img/preloader/logo-symbol-yellow.png\" alt=\"\">");
    $fillArrow1 = $("<div class=\"item arrow1\">");
    $fillArrow1.html("<img src=\"assets/img/preloader/shape-arrow-right-yellow.png\" alt=\"\">");
    $fillArrow2 = $("<div class=\"item arrow2\">");
    $fillArrow2.html("<img src=\"assets/img/preloader/shape-arrow-right-yellow.png\" alt=\"\">");
    $fillText1 = $("<div class=\"item text1\">");
    $fillText1.html("<img src=\"assets/img/preloader/text-bearbrick-yellow.png\" alt=\"\">");
    $fillText2 = $("<div class=\"item text2\">");
    $fillText2.html("<img src=\"assets/img/preloader/text-series23-yellow.png\" alt=\"\">");
    $fillText3 = $("<div class=\"item text3\">");
    $fillText3.html("<img src=\"assets/img/preloader/text-loading_contents-yellow.png\" alt=\"\">");
    $fillBear1 = $("<div class=\"item bear1\">");
    $fillBear1.html("<img src=\"assets/img/preloader/shape-bear-yellow.png\" alt=\"\">");
    $fillBear2 = $("<div class=\"item bear2\">");
    $fillBear2.html("<img src=\"assets/img/preloader/shape-bear-yellow.png\" alt=\"\">");
    $fillBear3 = $("<div class=\"item bear3\">");
    $fillBear3.html("<img src=\"assets/img/preloader/shape-bear-yellow.png\" alt=\"\">");
    $fillBear4 = $("<div class=\"item bear4\">");
    $fillBear4.html("<img src=\"assets/img/preloader/shape-bear-yellow.png\" alt=\"\">");
    $fillBear5 = $("<div class=\"item bear5\">");
    $fillBear5.html("<img src=\"assets/img/preloader/shape-bear-yellow.png\" alt=\"\">");
    $fillBear6 = $("<div class=\"item bear6\">");
    $fillBear6.html("<img src=\"assets/img/preloader/shape-bear-yellow.png\" alt=\"\">");
    $fillBear7 = $("<div class=\"item bear7\">");
    $fillBear7.html("<img src=\"assets/img/preloader/shape-bear-yellow.png\" alt=\"\">");
    $fillBear8 = $("<div class=\"item bear8\">");
    $fillBear8.html("<img src=\"assets/img/preloader/shape-bear-yellow.png\" alt=\"\">");
    $fillBear9 = $("<div class=\"item bear9\">");
    $fillBear9.html("<img src=\"assets/img/preloader/shape-bear-yellow.png\" alt=\"\">");
    $fillBear10 = $("<div class=\"item bear10\">");
    $fillBear10.html("<img src=\"assets/img/preloader/shape-bear-yellow.png\" alt=\"\">");
    $fillBear11 = $("<div class=\"item bear11\">");
    $fillBear11.html("<img src=\"assets/img/preloader/shape-bear-yellow.png\" alt=\"\">");
    $fillBear12 = $("<div class=\"item bear12\">");
    $fillBear12.html("<img src=\"assets/img/preloader/shape-bear-yellow.png\" alt=\"\">");
    $fill.append($fillLogo, $fillArrow1, $fillArrow2, $fillText1, $fillText2, $fillText3, $fillBear1, $fillBear2, $fillBear3, $fillBear4, $fillBear5, $fillBear6, $fillBear7, $fillBear8, $fillBear9, $fillBear10, $fillBear11, $fillBear12);
    
    $scene1 = $("<div class=\"mask base\">");
    $scene1.html($base);
    
    $scene2 = $("<div class=\"mask fill\">");
    $scene2.html($fill);
    
    $scene2.css({
      display: "none"
    });
    
    $preloader.append($scene1, $scene2);
    
    function play() {
      timer = setInterval(chikachika, 20);
    }
    
    function stop() {
      clearInterval(timer);
      $scene2.css({
        opacity: 1
      });
    }
    
    function chikachika() {
      if (visible) {
        $scene2.css({
          opacity: 0.8
        });
        visible = false;
      }
      else {
        $scene2.css({
          opacity: 1
        });
        visible = true;
      }
    }
    
    $preloader.show = function () {
      
      move($baseLogo, 600);
      move($baseArrow1, 400);
      move($baseArrow2, 500);
      move($baseText1, 200);
      move($baseText2, 300);
      move($baseText3, 500);
      move($baseBear1, 530);
      move($baseBear2, 500);
      move($baseBear3, 470);
      move($baseBear4, 440);
      move($baseBear5, 410);
      move($baseBear6, 380);
      move($baseBear7, 350);
      move($baseBear8, 320);
      move($baseBear9, 290);
      move($baseBear10, 260);
      move($baseBear11, 230);
      move($baseBear12, 200);

      function move($obj, interval) {
        setTimeout(function () {
          $obj.stop().animate({
            left: "50%"
          }, {
            duration: 250,
            easing: "easeOutExpo"
          });
        }, interval);
      }
      
      setTimeout(function () {
        $preloader.trigger(events.SHOW_COMPLETE);
        $scene2.css({
          display: "block"
        });
        play();
      }, 900);
    };
    
    $preloader.hide = function () {
      
      move($fillLogo, 500);
      move($fillArrow1, 200);
      move($fillArrow2, 300);
      move($fillText1, 300);
      move($fillText2, 400);
      move($fillText3, 500);
      move($fillBear1, 530);
      move($fillBear2, 500);
      move($fillBear3, 470);
      move($fillBear4, 440);
      move($fillBear5, 410);
      move($fillBear6, 380);
      move($fillBear7, 350);
      move($fillBear8, 320);
      move($fillBear9, 290);
      move($fillBear10, 260);
      move($fillBear11, 230);
      move($fillBear12, 200);

      function move($obj, interval) {
        setTimeout(function () {
          $obj.stop().animate({
            left: "150%"
          }, {
            duration: 250,
            easing: "easeOutExpo"
          });
        }, interval);
      }
      
      setTimeout(function () {
        $preloader.css({
          display: "none"
        });
        $preloader.trigger(events.HIDE_COMPLETE);
      }, 800);
    };
    
    $preloader.setPercentage = function (per) {

      var height = 286;
      
      if (per < 1) {
        $scene1.stop().animate({
          height: height - (height * per)
        }, {
          duration: 1200
        });
      }
      else {
        $scene1.stop().animate({
          height: 0
        }, {
          duration: 800,
          complete: function () {
            stop();
            $preloader.trigger(events.COMPLETE);
          }
        });
      }
    };
    
    return $preloader;
  };
  
  $.bbrk.home.preloader.events = {
    COMPLETE: "complete",
    SHOW_COMPLETE: "showComplete",
    HIDE_COMPLETE: "hideComplete"
  };
  
})(jQuery);