
/* Playground Demo: Avatars */


// All data we are using for this demo we will store in the variable DemoAvatars

var DemoAvatars = {
  Avatars: ['Stephan', 'Susan', 'Jack', 'Elizabeth', 'Fungus', 'Donald', 'Gary', 'Trixi', 'Samuel', 'Maria'],
  Modals: {}
};


// All the magic happens in the function generateAvatarJBox

function generateAvatarJBox(initial)
{
  // We only need to initialize the tooltips for the avatar collection once
  // We can later refer to this jBox instance with DemoAvatars.AvatarsTooltip
  
  !DemoAvatars.AvatarsTooltip && (DemoAvatars.AvatarsTooltip = new jBox('Tooltip', {
    theme: 'TooltipBorder',             // We are using the border theme...
    addClass: 'AvatarsTooltip',         // ...and add a class so we can adjust the theme with CSS
    attach: '[data-avatar-tooltip]',    // We attach the tooltip to the elements with the attribute data-avatar-tooltip...
    getContent: 'data-avatar-tooltip',  // ... and also get the content from the same attribute
    zIndex: 12000,                      // These tooltips have the highest z-index
    animation: 'move',
    
    // Adding the liked or disliked class depending on the container the avatar is in
    onOpen: function () {
      this.wrapper.removeClass('AvatarsTooltipLike AvatarsTooltipDislike').addClass('AvatarsTooltip' + (this.source.parent().attr('id') == 'LikedAvatars' ? 'Like' : 'Dislike'));
    }
  }));
  
  
  // When we are creating the initial jBox, reset global variables
  
  if (initial) {
    DemoAvatars.clicked = false;
    DemoAvatars.current = -1;
  }
  
  
  // Increase current avatar index
  
  DemoAvatars.current++;
  
  
  // When we looped through all the avatars, show a jBox Modal with a hint that there are no more avatars nearby
  
  if (DemoAvatars.current >= DemoAvatars.Avatars.length) {
    
    DemoAvatars.Modals.AvatarsComplete = new jBox('Modal', {
      
      // We use similar options to our Avatar modal so they look similar
      id: 'AvatarsComplete',
      addClass: 'AvatarsModal',
      width: 300,
      height: 250,
      animation: 'zoomIn',
      overlay: false,
      blockScroll: false,
      closeButton: false,
      closeOnEsc: false,
      adjustDistance: {
        top: 40,
        right: 5,
        bottom: 55,
        left: 5
      },
      footer: '<button class="button-close">Close</button>',
      title: 'Whoops',
      content: '<div>There are currently no more avatars near you</div>',
      zIndex: 10000,
      
      // Once this jBox is created, we tel the close button to close the initial avatar modal
      onCreated: function () {
        this.footer.find('button').on('click', function () {
          DemoAvatars.Modals.AvatarsInitial.close();
        });
      }
    }).open();
    
    // Nothing more to do, abort here
    return null;
  }
  
  
  // We are creating a new jBox Modal with the avatars each time this function gets called
  
  var jBoxAvatar = new jBox('Modal', {
    addClass: 'AvatarsModal',
    width: 300,
    height: 250,
    animation: 'zoomIn',
    zIndex: 10000,
    
    // Adjusting the distance to the viewport so we have space for the avatar collection at the bottom and the close button of the modal at the top
    adjustDistance: {
      top: 40,
      right: 5,
      bottom: 55,
      left: 5
    },
    
    // We are setting these options differently for the initial and the following jBoxes
    id: initial ? 'AvatarsInitial' : 'AvatarsModal' + DemoAvatars.current,
    overlay: initial ? true : false,            // Only one overlay is needed
    blockScroll: initial ? true : false,        // The initial jBox will block scrolling, no need for the others to o the same
    closeButton: initial ? 'overlay' : false,   // The initial jBox will have the close button in the overlay, the others won't need one
    closeOnEsc: initial ? true : false,         // Only the inital jBox can be closed with [ESC] button
    
    // Placing the buttons in the footer area
    footer: '<div class="clearfix"><button class="button-cross cross"></button><button class="button-heart heart"></button></div>',
    
    // Open this jBox when it is being initialized
    onInit: function () {
      this.open();
      
      // Here we store the index we used for this jBox
      this.AvatarIndex = DemoAvatars.current;
    },
    
    // When the jBox is created, add the click events to the buttons
    onCreated: function () {
      
      // Create the containers for the liked or disliked avatars
      if (initial) {
        $('<div id="LikedAvatars" class="AvatarsCollection"/>').appendTo($('body'));
        $('<div id="DislikedAvatars" class="AvatarsCollection"/>').appendTo($('body'));
      }
      
      $.each(this.footer.find('button'), function (index, el) {
        
        // Adding the click events for the buttons in the footer
        $(el).on('click', function () {
          
          // Storing a global var that the user clicked on a button
          DemoAvatars.clicked = true;
          
          // When a user clicks a button close the tooltips
          DemoAvatars.AvatarsTooltipLike && DemoAvatars.AvatarsTooltipLike.close();
          DemoAvatars.AvatarsTooltipDislike && DemoAvatars.AvatarsTooltipDislike.close();
          
          // When we click a button, the jBox disappears, let's tell this jBox that we removed it
          this.AvatarRemoved = true;
          
          // Did we like or dislike the avatar?
          var liked = $(el).hasClass('button-heart');
          
          // Slide the jBox to the left or right depending on which button the user clicked
          this.animate('slide' + (liked ? 'Right' : 'Left'), {
            
            // Once the jBox is removed, hide it and show the avatar in the collection
            complete: function () {
              this.wrapper.css('display', 'none');
              
              // Which container to use
              var collectionContainer = liked ? $('#LikedAvatars') : $('#DislikedAvatars');
              
              // If there if not enough space for the avatars to show in one line remove the first one
              if (collectionContainer.find('div[data-avatar-tooltip]').length && ((collectionContainer.find('div[data-avatar-tooltip]').length + 1) * $(collectionContainer.find('div[data-avatar-tooltip]')[0]).outerWidth(true) > collectionContainer.outerWidth())) {
                $(collectionContainer.find('div[data-avatar-tooltip]')[0]).remove();
              }
              
              // Add the avatar to the collection
              this.animate('popIn', {
                element: $('<div data-avatar-tooltip="You ' + (liked ? 'liked' : 'disliked') + ' ' + DemoAvatars.Avatars[this.AvatarIndex] + '"/>').append($('<div/>').html('<img src="https://stephanwagner.me/img/jBox/avatar/' + DemoAvatars.Avatars[this.AvatarIndex] + '.svg"/>')).appendTo(collectionContainer)
              });
              
              // Attach the avatar tooltip
              DemoAvatars.AvatarsTooltip && DemoAvatars.AvatarsTooltip.attach();
              
            }.bind(this)
          });
          
          // Open another Avatar jBox
          generateAvatarJBox();
          
        }.bind(this));
      }.bind(this));
    },
    
    // When we open the jBox, set the new content and show the tooltips if it's the initial jBox
    onOpen: function () {
      
      // Set title and content depending on current index
      this.setTitle(DemoAvatars.Avatars[DemoAvatars.current]);
      this.content.css({backgroundImage: 'url(https://stephanwagner.me/img/jBox/avatar/' + DemoAvatars.Avatars[DemoAvatars.current] + '.svg)'});
      
      // If it's the inital jBox, show the tooltips after a short delay
      initial && setTimeout(function () {
        
        // We are creating the two tooltips in a loop as they are very similar
        $.each(['Dislike', 'Like'], function (index, item) {
          
          // We store the tooltips in the global var so we can refer to them later
          DemoAvatars['AvatarsTooltip' + item] = new jBox('Tooltip', {
            theme: 'TooltipBorder',
            addClass: 'AvatarsTooltip AvatarsTooltip' + item,
            minWidth: 110,
            content: item,
            position: {
              y: 'bottom'
            },
            offset: {
              y: 5
            },
            target: '#AvatarsInitial .jBox-footer .button-' + (item == 'Like' ? 'heart' : 'cross'),
            animation: 'move',
            zIndex: 11000,
            
            // Abort opening the tooltips when we clicked on a like or dislike button already
            onOpen: function () {
              DemoAvatars.clicked && this.close();
            }
          }).open();
          
        });
        
      }, 500);
    }
  });
  
  // If it's the inital jBox add onClose events
  initial && (jBoxAvatar.options.onClose = function ()
  {
    // Loop through all avatar jBoxes and close them if they are not removed yet
    $.each(DemoAvatars.Modals, function (index, jBox) {
      jBox.id != 'AvatarsInitial' && !jBox.AvatarRemoved && jBox.close();
    }.bind(this));
    
    // Remove the collection containers with a sliding animation
    $.each(['Liked', 'Disliked'], function (index, item) {
      this.animate('slide' + (item == 'Liked' ? 'Right' : 'Left'), {
        element: $('#' + item + 'Avatars'),
        complete: function () {
          $('#' + item + 'Avatars').remove();
        }
      });
    }.bind(this));
    
    // Close the tooltips
    DemoAvatars.AvatarsTooltipLike && DemoAvatars.AvatarsTooltipLike.close();
    DemoAvatars.AvatarsTooltipDislike && DemoAvatars.AvatarsTooltipDislike.close();
  });
  
  // If it's the inital jBox add onCloseComplete events
  initial && (jBoxAvatar.options.onCloseComplete = function ()
  {
    // Loop through all modal jBoxes and remove them from DOM
    $.each(DemoAvatars.Modals, function (index, jBox) {
      jBox.destroy();
      delete DemoAvatars.Modals[jBox.id];
    });
    
    // Remove the tooltips from DOM
    DemoAvatars.AvatarsTooltipLike && DemoAvatars.AvatarsTooltipLike.destroy();
    DemoAvatars.AvatarsTooltipDislike && DemoAvatars.AvatarsTooltipDislike.destroy();
  });
  
  // Store the jBox in the modal collection
  DemoAvatars.Modals[jBoxAvatar.id] = jBoxAvatar;
}


// On domready, add the click event to the button

$(document).ready(function() {
  
  $('#DemoAvatars').click(function () { generateAvatarJBox(true); });
  
});
