$( document ).ready( function()
{
  var $drawingsWrap = $( '.drawingsWrap' ),
      $loader = $( '.loading', $drawingsWrap );

  // Give the page some time to adjust for MyEntries then fadeout loader
  setTimeout( function()
  {
    $loader.fadeOut( 300, function()
    {
      $( this ).remove();
    });
  }, 1500);

  // On menu item click
  $( document ).on( 'click', '.drawBlockName', function()
  {
    var $this = $( this ),
        $parentWrap = $this.parents( '.drawingsWrap' ),
        id = $this.data( 'id' ),
        $thisDrawBlockMenuItems = $( '.drawBlockName', $parentWrap ),
        $thisDrawBlockToShow = $( '.drawblock[data-id="'+ id +'"]', $parentWrap ),
        $thisDrawBlockToHide = $( '.drawblock.active', $parentWrap );

    // Show the correct active draw block name
    $thisDrawBlockMenuItems.removeClass( 'active' );
    $this.addClass( 'active' );

    showSelectedSweeps( $thisDrawBlockToHide, $thisDrawBlockToShow );

    // if parentWrap top is off screen, we want to scroll to top
    var windowScrollTop = $( window ).scrollTop(),
        parentWrapTop =$parentWrap.offset().top;

    if ( windowScrollTop > parentWrapTop )
    {
      $( 'html, body' ).animate( {
        scrollTop: parentWrapTop - 10 // give 10 extra top padding
      }, 100 );
    }
  });

  // MOBILE ONLY: On menu item click select
  $( '.drawBlockNamesMobile' ).on( 'change', function()
  {
    var $this = $( this ),
        $parentWrap = $this.parents( '.drawingsWrap' ),
        id = $( 'option:selected', this ).data( 'id' ),
        $thisDrawBlockToShow = $( '.drawblock[data-id="'+ id +'"]', $parentWrap ),
        $thisDrawBlockToHide = $( '.drawblock.active', $parentWrap );

    showSelectedSweeps( $thisDrawBlockToHide, $thisDrawBlockToShow );
  });

  // MyEntries functionality
  var $myEntriesSwitch = $( '.myEntriesSwitch' );

  // Check if my entries option exists
  // If it does, then create sorting functionality
  if ( $myEntriesSwitch.length > 0 )
  {
    $myEntriesSwitch.on( 'change', function()
    {
      var $parentWrap = $( this ).parents( '.drawingsWrap' ),
          $sidebar = $( '.sidebar', $parentWrap ),
          $drawingsBlockWinners = $( '.drawingsBlockWinners', $parentWrap ),
          $myEntries = $( '.sweeps.myEntries', $parentWrap ),
          $thisMyEntrySwitch = $( '.myEntriesSwitch', $parentWrap ),
          $thisDrawBlockMenuItems = $( '.drawBlockName', $parentWrap ),
          $thisDrawingsBlockMenu = $( '.drawingsBlockMenu', $parentWrap ),
          $thisDrawingsBlockMenuMobile = $( '.drawBlockNamesMobile', $parentWrap ),
          $thisMobileMenuItemsOptions = $( 'option', $thisDrawingsBlockMenuMobile ),
          $noResultsMessage = $( '.noResults', $parentWrap );

      // Get and cache the id of each MyEntries drawing
      var myEntriesIds = $myEntries.map( function() {
        return $( this ).data( 'id' );
      } ).get();

      // Check if My Entries is checked
      // If it is then show only My Entries related menu items
      if ( $thisMyEntrySwitch.prop( 'checked' ) === true )
      {
        // Show draw block menu items for myEntries only, hide others
        $thisDrawBlockMenuItems.hide();

        // First check if any entries exist, if not then hide everything
        // show message and return false
        if ( myEntriesIds.length === 0 )
        {
          $sidebar.hide();
          $drawingsBlockWinners.hide();

          $noResultsMessage.text( 'You have no entries in these drawings.' ).show();
          return false;
        }

        // MOBILE: Filter out and hide all but My Entries names from select box
        $thisMobileMenuItemsOptions.filter( function()
        {
          var $self = $( this ),
              optionIsInMyEntries = myEntriesIds.indexOf( $( this ).val() ) !== -1;

          // Only show My Entries drawings names
          if ( ! optionIsInMyEntries )
          {
            $self.hide();
          }
          else
          {
            $self.show();
          }
        } );

        for ( var i = 0;  i < myEntriesIds.length; i++  )
        {
          $( '.drawBlockName[data-id="'+ myEntriesIds[i] +'"]', $parentWrap ).show();
        }
      }
      else
      {
        // First hide the No Entries Message
        $noResultsMessage.hide();

        // Show other menu items and hide My Entries
        $sidebar.show();
        $drawingsBlockWinners.show();
        $thisDrawBlockMenuItems.show();

        // Filter out My Entries names from select box
        $thisMobileMenuItemsOptions.filter( function()
        {
          var $self = $( this );

          // Get length of my entries drawings results in self
          var selfMyEntriesCount = $( '.sweeps.myEntries[data-id="'+ $self.val() +'"]', $parentWrap ).length;

          // Get length of total drawings results in self
          var selfSweepsCount = $( '.sweeps[data-id="'+ $self.val() +'"]', $parentWrap ).length;

          // Show all drawings but My Entries
          // Also if My Entries are the only sweeps in a draw, hide from menu
          if ( myEntriesIds.indexOf( $self.val() ) > -1 && selfSweepsCount === selfMyEntriesCount )
          {
            $self.hide();
          }
          else
          {
            $self.show();
          }
        } );

        // TODO: In the next update with API driven data
        // We will want to make all of this a "Sweep" object to store and hold
        // all information about these sweeps. That way the data is
        // not stored in the DOM, but in a class object.
        for ( var i = 0;  i < myEntriesIds.length; i++  )
        {
          // Get length of my entries drawings results in its own sweeps
          var selfMyEntriesCount = $( '.sweeps.myEntries[data-id="'+ myEntriesIds[i] +'"]', $parentWrap ).length;

          // Get length of total drawings results in its own sweeps
          var selfSweepsCount = $( '.sweeps[data-id="'+ myEntriesIds[i] +'"]', $parentWrap ).length;

          // If My Entries are the only sweeps in a draw, hide from menu
          if ( selfSweepsCount === selfMyEntriesCount )
          {
            $( '.drawBlockName[data-id="'+ myEntriesIds[i] +'"]', $parentWrap ).hide();
          }
        }
      }

      // Choose first VISIBLE menu item
      $thisDrawingsBlockMenu.find( ':visible' ).eq( 0 ).click();

      // Select one of the VISIBLE options
      $thisMobileMenuItemsOptions.each( function()
      {
        var $self = $( this );

        if ( $self.css( 'display' ) !== 'none' )
        {
          $self.prop( "selected", true );
          $thisDrawingsBlockMenuMobile.trigger( 'change' );
          return false;
        }
      });
    }).trigger( 'change' ); // Need to do this to hide My Entries on page load
  }

  $( document ).on( 'click', '.sweeps .sweepsDates', function()
  {
    var $parentSweep = $( this ).parents( '.sweeps' );

    toggleSweepPrizes( $parentSweep );
  });

  // Show correct sweeps tables
  function showSelectedSweeps( $toHide, $toShow )
  {
    var $toHideParentWrap = $toHide.parents( '.drawingsWrap' ),
        $toShowParentWrap = $toShow.parents( '.drawingsWrap' );

    // First remove active class from any and all drawblocks of this draw type
    $( '.drawblock', $toHideParentWrap ).removeClass( 'active' );

    $toHide.fadeOut( 300, function()
    {
      var $thisMyEntrySwitch = $( '.myEntriesSwitch', $toShowParentWrap ),
          $sweeps = $toShow.find( '.sweeps' ),
          $sweepsMyEntries = $toShow.find( '.myEntries' );

      // If my entries is checked, show only my entries
      if ( $thisMyEntrySwitch.prop( 'checked' ) === true )
      {
        $sweeps.hide();
        $sweepsMyEntries.show();
      }
      // else show the other sweeps, and hide my entries
      else
      {
        $sweeps.show();
        $sweepsMyEntries.hide();
      }

      $toShow.fadeIn( 300, function()
      {
        $( this ).addClass( 'active' );

        toggleFirstSweepsPrizes();
      });
    });
  }

  function toggleSweepPrizes( $parent )
  {
    var $thisSweepsPrizes = $( '.sweepsPrizes', $parent ),
        $toggleViewBtnDesktop = $( '.toggle-view-desktop', $parent ),
        $toggleViewBtnMobile = $( '.toggle-view-mobile', $parent ),
        isMobile = $( '.toggle-view.mobileShown' ).is(':visible');

    // toggle sweepsPrizes
    $thisSweepsPrizes.slideToggle( 100 );

    // Mobile only
    if ( isMobile )
    {
      $toggleViewBtnMobile.toggleClass( 'fa-chevron-right fa-chevron-down' );
    }
    // Desktop only
    else
    {
      $toggleViewBtnDesktop.toggleClass( 'badge-yellow badge-light' );

      // Change text based on badge class
      if ( $toggleViewBtnDesktop.hasClass( 'badge-light' ) )
      {
        $toggleViewBtnDesktop.text( 'Hide Winners' );
      }
      else
      {
        $toggleViewBtnDesktop.text( 'View Winners' );
      }
    }
  }

  // If result only has 1 sweeps then automatically show its winners
  function toggleFirstSweepsPrizes()
  {
    var $thisSweeps = $( '.sweeps:visible' ),
        $sweepsPrizes = $( '.sweepsPrizes', $thisSweeps );

    if ( $thisSweeps.length === 1 && ! $sweepsPrizes.is( ':visible' ) )
    {
      toggleSweepPrizes( $thisSweeps );
    }
  }
});