jQuery(document).ready(function () {
   /*
    1. Следить за размером экрана
    2. Маштабировать изображения, они должны полностью помещаться на экране и центрироваться (по обоим осям)
    3. Перелистывать
    4. Отображать страницу
    5. Стрелки вправо-влево
    6. Запуск слайдшоу

    Логика и условия:
    1. HTML должен содержать только список картинок
    2. Отображаться будут только 2 изображения, поэтому нам нужен
    а. Анимированный бокс (.animated)
    б. Статичный бокс (.static)
    3. Скрипт в галлерее должен:
    а. Спрятать контент страницы
    б. Отобразить галерею на весь экран.
    в. Вставить следующую картинку (установить номер страницы)
    г. Поставить в загрузку следующую картинку
    д. Когда картинка уже загружена, запустить анимацию
    е. По завершению анимации перенести картинку из анимированого блока в статический
    ё. Все картинки от `в` до `ё`

    Также необходимо для всего процесса:
    а. отслеживать размер экрана и при изменении перемаштабировать изображения (по высоте, если они меньше чем надо)
    ??? этот пункт под вопросом, вероятно все изображения будут height:100%; или width:100%;
    б. по тапу
    - остановить анимацию
    - отобразить стрелки вперед-назад
    - отобразить значек запуска слайдшоу
    */
   jQuery(window).resize(function () {
      /* logic here */
   });

   var Gallery = function (fImageList, fConfig) {
      /* check if image list is not empty */
      if (!jQuery.isArray(fImageList) || fImageList.length < 1) {
         alert('The Gallery is empty.');
         return false;
      }

      var tConfig = fConfig || [];

      /* Fields */
      var pThis = this;
      var pIsPlay = true;
      var pCurrentImage = 0;
      var pTimeOutTime = 5000;
      var pTimeOutHandler = false;
      var pAnimationHandler = Gallery.animations.getHandler(fConfig.animation || 'Default');

      /* Elements */
      var tViewer = jQuery('<div />').addClass('gallery-viewer');
      var tNavigation = jQuery('<div />').addClass('navigation');
      var tViewport = jQuery('<div />').addClass('gallery-viewport');
      var tPreloader = jQuery('<div><div><span class="highlight" /><div /></div></div>').addClass('preloader');
      var tFrameStatic = jQuery('<div />').addClass('frame');
      var tFrameAnimated = jQuery('<div />').addClass('animated');
      var tDescription = jQuery('<div />').addClass('description');

      tViewport.append(tFrameStatic);
      tViewer.append(tViewport).append(tNavigation).append(tDescription);

      tNavigation.append('<div class="control play-pause"><span class="txt">' + (pIsPlay ? 'stop' : 'play') + '</span></div>')
         .append('<div class="control close">close</div>')
         .append('<div class="control move-left"><div /></div>')
         .append('<div class="control move-right"><div /></div>');

      tNavigation.find('.control').prepend('<span class="highlight" />');

      jQuery('body').append(tViewer);

      pAnimationHandler = pAnimationHandler(tViewport, tFrameStatic, tFrameAnimated);

      var tImagePushToLoad = function (fDirection) {
         var tDirection = fDirection || 1;
         pCurrentImage = (fImageList.length + pCurrentImage + tDirection) % fImageList.length;
         tImageLoad(fImageList[pCurrentImage]);
      };

      /* try to load image */
      var tImageLoad = function (fImage) {
         /* необходимо предусмотреть таймаут */
         tViewer.append(tPreloader);
         if (tFrameAnimated.find('img').length > 0) {
            tFrameStatic.empty().append(tFrameAnimated.find('img')).show(); //.removeClass('hidden');
            tFrameAnimated.remove();
         }
         jQuery('<img />').data('x-gallery-info', fImage).load(tImageLoaded).attr('src', fImage.image);
      };

      /* try to image loaded */
      var tImageLoaded = function () {
         pAnimationHandler.animate(jQuery(this));

         if (pIsPlay)
            pTimeOutHandler = setTimeout(tImagePushToLoad, pTimeOutTime);

         var tImageInfo = jQuery(this).data('x-gallery-info');
         if(tImageInfo && tImageInfo.title && tImageInfo.title.length > 0)
            tDescription.text(tImageInfo.title).show(100);
         else
            tDescription.hide(100);

         tPreloader.remove();
      };

      /* close gallery action */
      this.close = function () {
         tViewer.remove();
         if (jQuery.isFunction(tConfig.onclose))
            tConfig.onclose(pThis);
      };
      tNavigation.find('.close').click(this.close);

      /* play-pause gallery actions */
      this.play = function () {
         tHandlePlayPause(false);
      };

      this.stop = function () {
         tHandlePlayPause(false);
      };

      var tHandlePlayPause = function (fState) {
         pIsPlay = fState;
         if (pIsPlay)
            tImagePushToLoad(1);
         else if (pTimeOutHandler)
            clearTimeout(pTimeOutHandler);
         if (pIsPlay) {
            tNavigation.find('.play-pause').find('.txt').text('stop');
            tViewer.addClass('slide-show');
            if (jQuery.isFunction(tConfig.onplay))
               tConfig.onplay(pThis);
         } else {
            tNavigation.find('.play-pause').find('.txt').text('play');
            tViewer.removeClass('slide-show');
            if (jQuery.isFunction(tConfig.onstop))
               tConfig.onstop(pThis);
         }
      };

      tHandlePlayPause(pIsPlay);

      tNavigation.find('.play-pause').click(function (fEvent) {
         fEvent.stopPropagation();
         tHandlePlayPause(!pIsPlay);
      });

      tViewer.click(function (fEvent) {
         fEvent.stopPropagation();
         if (pIsPlay) tHandlePlayPause(false);
      });

      /* forward-backward gallery actions */
      tNavigation.find('.move-right').click(function (fEvent) {
         fEvent.stopPropagation();
         if (!tViewer.hasClass('slide-show'))
            tImagePushToLoad(1);
      });
      tNavigation.find('.move-left').click(function (fEvent) {
         fEvent.stopPropagation();
         if (!tViewer.hasClass('slide-show'))
            tImagePushToLoad(-1);
      });

      return this;
   };

   var putBlockInCenter = function (fContainer, fBlock) {
      var tCoefWidth = fContainer.width() / fBlock.get(0).width;
      var tCoefHeight = fContainer.height() / fBlock.get(0).height;
      var tHeight = fBlock.get(0).height * Math.min(1, Math.min(tCoefWidth, tCoefHeight));

      if (fContainer.height() > tHeight)
         fBlock.css('margin-top', (fContainer.height() - tHeight) / 2);
   };

   /* animations */
   Gallery.animations = {
      getHandler:function (fName) {
         if (jQuery.isFunction(Gallery.animations[fName]))
            return Gallery.animations[fName];
      },
      'Default':function (fViewPort, fStaticFrame, fAnimationFrame) {
         this.animate = function (fImage) {
            fAnimationFrame.addClass('default');
            fAnimationFrame.empty().append(fImage);

            putBlockInCenter(fViewPort, fImage);

            fViewPort.append(fAnimationFrame);
            fStaticFrame.fadeOut(1500);
         };
         return this;
      },
      'FadeInFadeOut':function (fViewPort, fStaticFrame, fAnimationFrame) {
         this.animate = function (fImage) {
            fAnimationFrame.addClass('fadein-fadeout');
            fAnimationFrame.empty().append(fImage);
            fViewPort.append(fAnimationFrame);
            fStaticFrame.fadeOut(800);
            fImage.addClass('js-animate');
            putBlockInCenter(fViewPort, fImage);
         };
         return this;
      }
   };


   jQuery('.js-start-animated-gallery').each(
      function () {
         try {
            if (navigator.userAgent.match(/^blackberry/i))
               jQuery(this).remove();
            else
               jQuery(this).parents('.gallery:first').find('.gallery-navigation').hide();
         } catch (tError) {
            /* Do Nothing */
            ;
         }
      }).click(function () {
         var tImageList = jQuery(this).parents('.gallery:first').find('.gallery-photo-item').map(
            function () {
               return { title:jQuery(this).find('h4').text(), image:jQuery(this).find('a').attr('href') };
            }).get();

         var tPage = jQuery('.content-mobile').hide();
         var tGallery = new Gallery(tImageList, { onclose:function () {
            tPage.show();
         }, animation:jQuery(this).data('animation') });
         if (!tGallery)
            tPage.show();
      });

});