<? if ( is_array( $this -> images ) ):?>
  <div class="gallery <? if ( $this -> article['pixieset'] ):?>pixieset<? endif;?>">
    <? if ( $this -> article['pixieset'] ):?>
      <div class="buttons">
        <a id="gallery-download-<?= $this -> article['id'];?>" class="btn btn-success"><?= \S::lang( 'pobierz-wszystkie' );?></a>
        <? if ( $this -> article['pixieset'] == 2 ):?>
          <a id="gallery-favorite-submit-<?= $this -> article['id'];?>" class="btn btn-info"><?= \S::lang( 'zatwierdz-wybrane-fotografie' );?></a>
        <? endif;?>
      </div>
    <? endif;?>
    <div class="row">
      <? foreach ( $this -> images as $img ):?>
        <div class="col-xs-12 col-sm-4 col-md-3">
          <? if ( $this -> article['pixieset'] ):?>
            <div class="image" download-link="/pixieset/<?= md5( $img['id'] . $img['src'] );?>" image-id="<?= $img['id'];?>" counter="<?= (int)++$i;?>" favorite="<?= !$img['favorite'] ? '0' : '1';?>">
              <img src="<?= $img['src'];?>" alt="<?= $img['alt'];?>">
              <div class="image-options">
                <a href="/pixieset/<?= md5( $img['id'] . $img['src'] );?>" target="_blank" class="download">
                  <i class="fa fa-download"></i>
                </a>
                <? if ( $this -> article['pixieset'] == 2 ):?>
                  <a href="#" image-id="<?= $img['id'];?>" class="image-favorite" id="image-favorite-<?= $img['id'];?>"><i class="fa <?= !$img['favorite'] ? 'fa-heart-o' : 'fa-heart';?>"></i></a>
                <? endif;?>
              </div>
            </div>
          <? else:?>
            <a class="image" rel="article-<?= $this -> article['id'];?>" href="<?= $img['src'];?>" title="">
              <img src="<?= $img['src'];?>" alt="<?= $img['alt'];?>">
            </a>
          <? endif;?>
        </div>
      <? endforeach;?>
    </div>
  </div>
<? endif;?>
<? if ( $this -> article['pixieset'] ):?>
  <div class="pixieset-image-big">
    <a href="#" class="close" title="<?= \S::lang( 'zamknij' );?>">
      <i class="fa fa-times"></i>
    </a>
    <div class="buttons">
      <a href="#" class="download">
        <i class="fa fa-download"></i>
      </a>
      <? if ( $this -> article['pixieset'] == 2 ):?>
        <a href="#" class="favorite" image-id="">
          <i class="fa fa-heart-o"></i>
        </a>
      <? endif;?>
    </div>
    <img src="#">
    <a href="#" class="next">
      <i class="fa fa-angle-right"></i>
    </a>
    <a href="#" class="prev">
      <i class="fa fa-angle-left"></i>
    </a>
  </div>
<? endif;?>
<script class="footer" type="text/javascript" src="/libraries/jquery/lozad.js"></script>
<script class="footer" type="text/javascript">
  var pixieset_image  = $( '.pixieset-image-big' );
  $( function()
  {
    const observer = lozad();
    observer.observe();

    <? if ( $this -> article['pixieset'] ):?>
      $( 'body' ).on( click_event, '.gallery .image img', function()
      {
        var image_container = $( this ).parent( '.image' );

        var src           = $( this ).attr( 'data-src' );
        var download_link = image_container.attr( 'download-link' );

        <? if ( $this -> article['pixieset'] == 2 ):?>
        var image_id        = image_container.attr( 'image-id' );
        var favorite_status = image_container.attr( 'favorite' );
        <? endif;?>

        pixieset_image.find( 'img' ).attr( 'src', src );
        pixieset_image.find( '.download' ).attr( 'href', download_link );

        <? if ( $this -> article['pixieset'] == 2 ):?>
          pixieset_image.find( '.favorite' ).attr( 'image-id', image_id );
          if ( favorite_status === '1' )
            pixieset_image.find( '.favorite' ).children( 'i' ).removeClass( 'fa-heart-o' ).addClass( 'fa-heart' );
          else
            pixieset_image.find( '.favorite' ).children( 'i' ).removeClass( 'fa-heart' ).addClass( 'fa-heart-o' );
        <? endif;?>

        pixieset_image.show();

        return false;
      });

      $( 'body' ).on( click_event, '.pixieset-image-big .close', function()
      {
        pixieset_image.hide();
        return false;
      });

      $( 'body' ).on( click_event, '.pixieset-image-big .prev', function()
      {
        var src   = pixieset_image.find( 'img' ).attr( 'src' );
        var index = $( 'img[data-src="' + src+ '"]' ).parent( '.image' ).attr( 'counter' );
        index = parseInt( index );

        if ( index <= 1 )
          var image_index     = $( '.image[counter="<?= $i;?>"]' );
        else
          var image_index     = $( '.image[counter="' + ( index - 1 ) + '"]' );

        var image_current   = image_index.children( 'img' );

        var src           = image_current.attr( 'data-src' );
        var download_link = image_index.attr( 'download-link' );

        pixieset_image.find( '.download' ).attr( 'href', download_link );

        <? if ( $this -> article['pixieset'] == 2 ):?>
          var image_id        = image_index.attr( 'image-id' );
          var favorite_status = image_index.attr( 'favorite' );

          pixieset_image.find( '.favorite' ).attr( 'image-id', image_id );

          if ( favorite_status === '1' )
            pixieset_image.find( '.favorite' ).children( 'i' ).removeClass( 'fa-heart-o' ).addClass( 'fa-heart' );
          else
            pixieset_image.find( '.favorite' ).children( 'i' ).removeClass( 'fa-heart' ).addClass( 'fa-heart-o' );
        <? endif;?>

        var image = $( ".pixieset-image-big img" );
        image.hide();
        image.attr( 'src', src );
        image.show();

        return false;
      });

      $( 'body' ).on( click_event, '.pixieset-image-big .next', function()
      {
        var src   = pixieset_image.find( 'img' ).attr( 'src' );
        var index = $( 'img[data-src="' + src+ '"]' ).parent( '.image' ).attr( 'counter' );
        index = parseInt( index );

        if ( index >= <?= $i;?> )
          var image_index     = $( '.image[counter="1"]' );
        else
          var image_index     = $( '.image[counter="' + ( index + 1 ) + '"]' );

        var image_current   = image_index.children( 'img' );

        var src           = image_current.attr( 'data-src' );
        var download_link = image_index.attr( 'download-link' );

        pixieset_image.find( '.download' ).attr( 'href', download_link );

        <? if ( $this -> article['pixieset'] == 2 ):?>
          var image_id        = image_index.attr( 'image-id' );
          var favorite_status = image_index.attr( 'favorite' );

          pixieset_image.find( '.favorite' ).attr( 'image-id', image_id );

          if ( favorite_status === '1' )
            pixieset_image.find( '.favorite' ).children( 'i' ).removeClass( 'fa-heart-o' ).addClass( 'fa-heart' );
          else
            pixieset_image.find( '.favorite' ).children( 'i' ).removeClass( 'fa-heart' ).addClass( 'fa-heart-o' );
        <? endif;?>

        var image = $( ".pixieset-image-big img" );
        image.hide();
        image.attr( 'src', src );
        image.show();

        return false;
      });

      $( 'body' ).on( click_event, '#gallery-download-<?= $this -> article['id'];?>', function()
      {
        var button = $( this );
        $.ajax(
        {
          type: 'POST',
          cache: false,
          url: '/ajax.php',
          data:
          {
            a: 'pixieset_gallery_download',
            hash: '<?= md5( $this -> article['id'] . $this -> article['date_add'] );?>'
          },
          beforeSend: function()
          {
            button.addClass( 'disabled' ).html( '<?= \S::lang( 'zaczekaj-trwa-tworzenie-pliku' );?>' );
          },
          success: function( response )
          {
            data = jQuery.parseJSON( response );
            window.location = '/' + data.url;
            button.removeClass( 'disabled' ).html( '<?= \S::lang( 'pobierz-wszystkie' );?>' );
          }
        });
      });
    <? endif;?>

    <? if ( $this -> article['pixieset'] == 2 ):?>
      $( 'body' ).on( click_event, '#gallery-favorite-submit-<?= $this -> article['id'];?>', function()
      {
        var button = $( this );

        $.ajax(
        {
          type: 'POST',
          cache: false,
          url: '/ajax.php',
          data:
          {
            a: 'pixieset_save_favorite_images',
            hash: '<?= md5( $this -> article['id'] . $this -> article['date_add'] );?>'
          },
          beforeSend: function()
          {
            button.addClass( 'disabled' );
          },
          success: function( response )
          {
            data = jQuery.parseJSON( response );

            if ( data.status === true )
            {
              $.alert(
              {
                title: '<?= ucfirst( \S::lang( 'informacja' ) );?>',
                content: '<?= \S::lang( 'lista-wybranych-zdjec-zostala-zatwierdzona' );?>',
                type: 'orange',
                closeIcon: true,
                closeIconClass: 'fa fa-close',
                typeAnimated: true,
                animation: 'opacity',
                autoClose: 'confirm|10000',
                columnClass: 'col-sm-8',
                theme: 'modern',
                buttons:
                {
                  confirm:
                  {
                    text: '<?= \S::lang( 'zamknij' );?>',
                    btnClass: 'btn-blue',
                    keys: ['enter'],
                    action: function() {}
                  }
                }
              });
            }

            button.removeClass( 'disabled' );
          }
        });
      });

      $( 'body' ).on( click_event, '.image-favorite', function()
      {
        var button = $( this );

        $.ajax(
        {
          type: 'POST',
          cache: false,
          url: '/ajax.php',
          data:
          {
            a: 'pixieset_image_favorite',
            hash: '<?= md5( $this -> article['id'] . $this -> article['date_add'] );?>',
            image_id: button.attr( 'image-id' )
          },
          beforeSend: function()
          {
            button.addClass( 'disabled' );
          },
          success: function( response )
          {
            data = jQuery.parseJSON( response );

            if ( data.status === false )
            {
              button.children( 'i' ).removeClass( 'fa-heart' ).addClass( 'fa-heart-o' );
              button.parents( '.image' ).attr( 'favorite', '0' );
            }
            else
            {
              button.children( 'i' ).removeClass( 'fa-heart-o' ).addClass( 'fa-heart' );
              button.parents( '.image' ).attr( 'favorite', '1' );
            }

            button.removeClass( 'disabled' );
          }
        });
        return false;
      });

      $( 'body' ).on( click_event, '.pixieset-image-big .favorite', function()
      {
        var button = $( this );
        var image_id = button.attr( 'image-id' );

        $.ajax(
        {
          type: 'POST',
          cache: false,
          url: '/ajax.php',
          data:
          {
            a: 'pixieset_image_favorite',
            hash: '<?= md5( $this -> article['id'] . $this -> article['date_add'] );?>',
            image_id: image_id
          },
          beforeSend: function()
          {
            button.addClass( 'disabled' );
          },
          success: function( response )
          {
            data = jQuery.parseJSON( response );

            if ( data.status === false )
            {
              button.children( 'i' ).removeClass( 'fa-heart' ).addClass( 'fa-heart-o' );
              $( '.image[image-id="' + image_id + '"]' ).attr( 'favorite', 0 );
              $( '.image[image-id="' + image_id + '"]' ).find( '.image-favorite' ).children( 'i' ).removeClass( 'fa-heart' ).addClass( 'fa-heart-o' );
            }
            else
            {
              button.children( 'i' ).removeClass( 'fa-heart-o' ).addClass( 'fa-heart' );
              $( '.image[image-id="' + image_id + '"]' ).attr( 'favorite', 1 );
              $( '.image[image-id="' + image_id + '"]' ).find( '.image-favorite' ).children( 'i' ).removeClass( 'fa-heart-o' ).addClass( 'fa-heart' );
            }

            button.removeClass( 'disabled' );
          }
        });
        return false;
      });
    <? endif;?>
  });
</script>