/* ####  КЛАССЫ - ИНСТРУМЕНТЫ ДЛЯ РАБОТЫ С ИЗОБРАЖЕНИЯМИ ####*/
/* Inetua ImagesTools v3.0 */

/* ГЛАВНЫЙ КЛАСС */
function ImagesTools(){
  var _this = this;
  this._imagesArray = new Array();         // Массив изображений
  this._totalImagesInArray = 0;            // Всего изображений в массиве
  this._numberVisibleImages = 5;           // Максимальное количество уменьшенных изображений, видимых в списке
  this.currentImgIndex = 0;                // Текущий индекс отображаемого в текущий момент изображения "галлереи"
  this.indexFirst = 0;                     // Стартовый индекс видимого изображения
  this.indexLast = 0;                      // Конечный индекс видимого изображения
  this.suffix = '';                        // Суффикс додаток для обозначения ID изображений
  this._isLink = true;                     // Флаг определяющий существование ссылок у изображения, определяет тип галереи

  // ПЕРЕМЕННЫЕ ПРЕВЬЮ БЛОКА
  this._columnsInPreviewBlock = 3;         // Количество столбцов в списке
  this._rowsInPreviewBlock =    3;         // Количество строк в списке
  this.alignmentImages = 'col'             // Выстраивание изображений - по столбцам / по строкам  


  this.wnd_maxwidth = 689;                 // максимальная ширина окна
  this.wnd_maxheight = 478;                // максимальная высота окна
  this.style_on   = "img_on";
  this.style_off  = "img_off";

  /* #### ПОЛЬЗОВАТЕЛЬСКИЕ МЕТОДЫ */
  // Метод инициализирует массив изображений.
  // Метод принимает 3 параметра, родительский объект в котором находятся изображения, есть ли ссылка на изображение и метка изображения.
  this.initImages = function(parentObj, islink, tag){
    var parentObj = (parentObj || false);
    this._isLink = (typeof islink == 'undefined' ? true : islink);
    var tag = (tag || "thumbs");

    // Режим парсинга ссылок и изображений внутри ссылки
    if(this._isLink){
      // Находим все ссылки в заданном блоке либо по всему документу
      var docLinks = parentObj ? document.getElementById(parentObj).getElementsByTagName('a') : document.getElementsByTagName('a');

      // Проходим весь список ссылок, ищем элементы с заданным rel и наполняем массив изображений
      for(var i = 0; i < docLinks.length; i++){
        // Добавим найденный элемент в массив
        if(docLinks[i].rel == tag){
          var smallImg = docLinks[i].getElementsByTagName('img');
          this.addImage(smallImg[0].id, docLinks[i].href, smallImg[0].src, smallImg[0].alt, docLinks[i].title);
        }
      }
    }else{
      var images = document.getElementById(parentObj).getElementsByTagName('img');
      for(var i = 0; i < images.length; i++){
        this.addImage('img'+i, '#', images[i].src, images[i].alt, images[i].alt);
      }
    }

    // Вычисляем количество изображений в массиве
    this._totalImagesInArray = this._imagesArray.length;
  }

  // Метод перелистывает страницы с превью
  this.selectPage = function(limit){
    var limit = (limit || "0,"+this._numberVisibleImages);
    limit = limit.split(",");
    
    // Запускаем построитель блока превью изображений
    this.createThumbsImageBlock(parseInt(limit[0]), parseInt(limit[1])+1);
  }

  // Метод формирует / перестраивает блок превью изображений
  this.createThumbsImageBlock = function(positionStart, positionEnd){
    // Если массив не содержит данных то прекращаем работу
    if(this._totalImagesInArray == 0){ return false; }

    var positionStart = (positionStart||0);                             // Позиция первого элемента
    var positionEnd   = (positionEnd||(this._numberVisibleImages - 1)); // Позиция последнего элемента

    //## Раскладываем изображения по строкам и столбцамм
    var image_block = "";
    var array_index = positionStart;
    for(i = 0; i < this._columnsInPreviewBlock; i++){
      // Открываем столбец / Если нет ссылки то добавляем класс определяющий длинный блок
      if(i == 0 && !this._isLink) image_block += '<li class="long"><ul>';
      else image_block += "<li><ul>";

      // Формируем строки
      for(j = 0; j < this._rowsInPreviewBlock; j++){
        // Если элемент не пустой, то формируем строку
        if(this._imagesArray[array_index] != null && (array_index - positionStart) < this._numberVisibleImages){
          if(this._isLink){
            image_block += '<li><a href="' + this._imagesArray[array_index].filePuthBig + '" onclick="return imgTools.showBigImage(this);" title="' + this._imagesArray[array_index].description + '" id="imagelink' + array_index + '" target="_blank"><img id="thumbs' + this.suffix + array_index +'" src="' + this._imagesArray[array_index].filePuthThumbs + '" alt="' + this._imagesArray[array_index].title + '" /></a></li>';
          }else{
            image_block += '<li><img id="thumbs' + this.suffix + array_index +'" src="' + this._imagesArray[array_index].filePuthThumbs + '" alt="' + this._imagesArray[array_index].title + '" /></li>';
          }
        }else{
          // Добавляем ячейку для постраничной навигации либо пустую ячейку при отсутствии каких либо данных
          image_block += (array_index == positionEnd && this._isLink) ? '<li class="pager" id="pagerBar"></li>' : '<li></li>';
        }

        array_index++;
      }

      // Закрываем столбец
      image_block += "</ul></li>";
    }
    // Вставляем полученный блок в страницу
    document.getElementById("gallery_thumbs").innerHTML = image_block;

    //## Формируем страничную навигацию по списку изображений
    var pagerbar = document.getElementById("pagerBar");
    if(pagerbar != null){
      var pager = new Array();
      var total_page = Math.ceil(this._totalImagesInArray / this._numberVisibleImages);
      for(n = 1; n <= total_page; n++){
        var start = (n-1) * this._numberVisibleImages;
        pager[n-1] = (start == positionStart ? "<b>"+ n +"</b>" : '<a href="#" onclick="imgTools.selectPage(\'' + start + ',' + (start + (this._numberVisibleImages - 1)) + '\');">' + n + '</a>');
      }
      pagerbar.innerHTML = pager.join("<span>|</span>");
    }
  }

  // Метод перемещающий маленькие изображения в видимом списке
  this.scrollImages = function(direct){
    var el;
    // Проходим циклом место положения изображений в блоке изображений
    for(j = 0; j < this._numberVisibleImages; j++){
      if(direct < 0){
        // Устанавливаем стартовый индекс изображению
        if(j == 0){ this.currentImgIndex = this._totalImagesInArray - this.indexFirst; }
        this.currentImgIndex++;  // увеличиваем индекс для сдвига изображений вправо

        // Если стартовый индекс меньше нуля, то приравниваем 0 и все начинаем сначала
        if(this.currentImgIndex < 0){ this.currentImgIndex = this._totalImagesInArray + this.currentImgIndex; this.indexFirst = 0; }

        // Если стартовый индекс равен кол-ву изображений, то приравниваем 0 и все начинаем сначала
        if(this.currentImgIndex == this._totalImagesInArray){ this.currentImgIndex = 0;}

        // Если стартовый индекс больше кол-ва изображений, то приравниваем 0 и все начинаем сначала
        if(this.currentImgIndex > this._totalImagesInArray){ this.currentImgIndex = this.currentImgIndex - this._totalImagesInArray; }

        // Если последня иттерация цикла, то запоминаем индекс 
        if(j == (this._numberVisibleImages - 1)){ this.indexFirst++; }
      }else if(direct > 0){
        // Устанавливаем стартовый индекс изображению
        if(j == 0){ this.currentImgIndex = this.indexFirst; }
        this.currentImgIndex++;  // увеличиваем индекс для сдвига изображений влево

        // Если достигнут конец массива, то индекс приравнивается 0 и все начинается сначала
        if(this.currentImgIndex == this._totalImagesInArray){ this.currentImgIndex = 0;}

        // Если последня иттерация цикла, то увеличиваем стартовый индекс 
        if(j == (this._numberVisibleImages - 1)){
          this.indexFirst++;
          // Если стартовый индекс равен кол-ву изображений, то приравниваем 0 и все начинаем сначала
          if(this.indexFirst == this._totalImagesInArray){ this.indexFirst = 0;}
        }
      }
      // Присваиваем текущему местоположению новое изображение и ссылку на увеличенное изображение
      el = document.getElementById("thumbs" + this.suffix + j);
      if(el != null){
        el.src = this._imagesArray[this.currentImgIndex].filePuthThumbs;
        document.getElementById("mainImg" + this.suffix + j).href = this._imagesArray[this.currentImgIndex].filePuthBig;
      }
    }
  }

  // Метод открывает всплывающий windows popup окно при просмотре картинок
  this.ShowBigImg = function(index_place){
    // Вычисляем текущий индекс изображения согласно ее положения в списке отображения.
    index = this.indexFirst + parseInt(index_place);

    // Определяем размеры текущего окна
    var img_width = (this._imagesArray[index].width != null ? this._imagesArray[index].width : this.wnd_maxwidth);
    var img_height = (this._imagesArray[index].height != null ? this._imagesArray[index].height : this.wnd_maxheight);

    // Вычисляем середину экрана по вертикали и горизонтали
    var left = parseInt((document.body.clientWidth/2) - (img_width/2));
    var top = parseInt((document.body.clientHeight/2) - (img_height/2));

    newWindow = window.open("","imgWindow","width="+img_width+",height="+img_height+",left="+left+",top="+top);
    newWindow.document.open();
    newWindow.document.write('<html><head><title>ФОТО</title>');
    newWindow.document.write('</head><body style="margin:0;">');
    newWindow.document.write('<div><img id="img_big" src="'+ this._imagesArray[index].filePuthBig +'" width="'+ img_width +'" height="'+ img_height +'" alt="" />');
    newWindow.document.write('</div></body></html>');
    newWindow.document.close();
    newWindow.focus();
  }

  // Показываем избражение при клике на превью
  this.showBigImage = function(iObj){
    var index = parseInt(iObj.id.slice(9));
   
    // Определяем браузер
    nn = (document.getElementById && navigator.appName == "Netscape") ? 1 : 0;
    ns = (document.layers) ? 1 : 0;
    op = (!nn && !ns && ( navigator.appName == "Opera" || navigator.userAgent.indexOf('Opera') != -1)) ? 1 : 0;
    ie = (!nn && !op && !ns && document.all) ? 1 : 0; 

    // Назначаем объекту изображение
    el = document.getElementById("bigImage");
    if(el != null){
      var new_img = this._imagesArray[index].filePuthBig;
      if(ie){
        el.style.filter = "blendTrans(duration=0.8) revealTrans(duration=0.3,transition=10)";
        el.filters(0).apply();
        el.filters(1).apply();
        el.src = new_img;
        el.onload = function(){
          el.filters(0).play();
          el.filters(1).play();
        }
      }else{
        el.src = new_img;
      }
      
      //#### ЕСЛИ НЕ ПУСТОЙ ТИТЛ ССЫЛКИ, ТО ПАРСИМ ОПИСАНИЕ ИЗОБРАЖЕНИЯ
      this.setImageDescription(index);
    }
    return false;
  }

  /* #### АКСЕССОРЫ */
  // Аксессор позволяет установить какой количество изображений показывать в превью блоке
  this.setNumberVisibleImages = function(value){
    this._numberVisibleImages = parseInt(value);
  }

  // Аксессор позволяет назначить размеры (кол-во столбцов и строк) для блока с превью изображениями
  this.setSizePreviewBlock = function(cols, rows){
    this._columnsInPreviewBlock = parseInt(cols);
    this._rowsInPreviewBlock    = parseInt(rows);
  }

  // Аксессор - добавляет новое изображение в массив изображений
  this.addImage = function(id, puthBig, puthThumbs, title, description){
    this._imagesArray.push({ "id":id, "filePuthBig":puthBig, "filePuthThumbs":puthThumbs, "title":title, "description":description });
  }

  /* #### СЛУЖЕБНЫЕ МЕТОДЫ */
  // Вспомогательный метод получения размера документа
  this._getPageSizeWithScroll = function(){
    if(window.innerHeight && window.scrollMaxY){  // Firefox 
      pageWidth = document.body.clientWidth + window.scrollMaxX;
      pageHeight = window.innerHeight + window.scrollMaxY;
    }else if(document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
      pageWidth = document.body.scrollWidth;
      pageHeight = document.body.scrollHeight;
    }else{ // works in Explorer 6 Strict, Mozilla (not FF) and Safari
      pageWidth = document.body.offsetWidth + document.body.offsetLeft;
      pageHeight = document.body.offsetHeight + document.body.offsetTop;
    }
    arrayPageSizeWithScroll = new Array(pageWidth, pageHeight);
    return arrayPageSizeWithScroll;
  }

  // Метод парсит свойство title тега A и формируем разделенное описание изображения
  this.setImageDescription = function(index){
    var vars_arr = document.getElementById("imagelink"+index).title.split(';');
    var len = vars_arr.length;
    if(len > 1){
      for(var a=0; a<=len; a++){
        var node = document.getElementById("var"+a);
        if(node != null){
          node.innerHTML = vars_arr[a].replace( /^\s+/g, '');
          node.innerHTML = node.innerHTML.replace( /\s+$/g, '');
        }
      }
    }
  }
}
var imgTools = new ImagesTools();

/* Формируем дочерний класс для работы с iBox */
function imageBox(){
  this._statusString  = '[num] из [total]' // Строка описания текущего соcтояния iBox

  // HTML код бокса к текущему документу
  var boxHTML = '<div id="wrapiBox"></div>'
              + '<div id="iBoxContainer">'
              + ' <div id="iMainBox">'
              + '  <div id="iBoxMainImageWrap"><img src="/templates/images/z.gif" id="iBoxMainImage" alt="" /></div>'
              + '  <img src="/templates/images/ajax-loader.gif" alt="" id="iBoxLoading" />'
              + '  <p class="tools">'
              + '   <a href="#" onclick="return obj' + this.suffix + '.iBoxPrev();" id="previBoxLink"><img src="/templates/images/ibox_arrl.gif" alt="Предыдущее" /></a>'
              + '   <span id="iBoxNumberOfImage"></span>'
              + '   <a href="#" onclick="return obj' + this.suffix + '.iBoxNext();" id="nextiBoxLink"><img src="/templates/images/ibox_arrr.gif" alt="Следущее" /></a>'
              + '   <span id="iBoxTitle"></span>'
              + '   <a href="#" onclick="return obj' + this.suffix + '.iBoxClose();" class="close"><img src="/templates/images/close.gif" alt="Закрыть" /></a>'
              + '  </p>'
              + ' </div>'
              + '</div>';
  this._wrapNode = document.getElementById('wrapiBox');
  if(!this._wrapNode){ document.write(boxHTML); }

  // Кеширование (ссылок на) DOM узлов составных элементов бокса внутри объекта
  this._boxNode       = document.getElementById('iMainBox');
  this._progressImg   = document.getElementById('iBoxLoading').style.display;   // Индикатор загрузки изображения
  this._infoNode      = document.getElementById('iBoxNumberOfImage');
  this._wrapImgNode   = document.getElementById('iBoxMainImageWrap');
  this._mainImg       = document.getElementById('iBoxMainImage');
  this._titleNode     = document.getElementById('iBoxTitle');

  // Создание контейнера для предзагрузки изображений
  this._preloadImg        = new Image();
  this._preloadImg.onload = this.iBoxDisplayMainImg;

  /* #### ПОЛЬЗОВАТЕЛЬСКИЕ МЕТОДЫ */
  // Метод открывает бокс-слой и отправляет изображение на просмотр
  this.iBoxOpen = function(domNode){
    this._progressImg = 'block'; // Показать индикатор загрузки

    this._infoNode.innerHTML  = '&#160;';
    this._titleNode.innerHTML = '';

    // Сделать общий темный фон
    var pagesize                 = this._getPageSizeWithScroll();
    this._wrapNode.style.display = 'block';
    this._wrapNode.style.height  = pagesize[1] + 'px';
    this._wrapNode.style.width   = pagesize[0] + 'px';

    // Вычисляем расстояние от верхнего края (с учетом прокрутки)
    var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
    // var top = parseInt((pagesize[1] / 2) - (img_height/2));

    this._boxNode.style.top         = (top + 70) + 'px';
    this._mainImg.src               = '/templates/images/z.gif';
    this._wrapImgNode.style.height  = '30px';
    this._boxNode.style.width       = '200px';
    this._boxNode.style.display     = 'block';
    this._preloadImg.src            = domNode.href; // Добавим изображение в очередь загрузки
    return false;
  }

  // Запуск анимации и инициализации навигации
  this.iBoxDisplayMainImg = function(){
    // инициализация навигации
    document.getElementById('previBoxLink').style.display = ((this.currentImgIndex - 1) >= 0 ? '' : 'none'); // Скрыть ссылку "=>"
    document.getElementById('nextiBoxLink').style.display = ((this.currentImgIndex + 1) < this._totalImagesInArray ? '' : 'none'); // Скрыть ссылку "<="

    if(this._totalImagesInArray > 1){
      // Нарисовать порядковый номер в навигации
      var info = this._statusString.replace('[num]', this.currentImgIndex + 1);
      this._infoNode.innerHTML = info.replace('[total]', this._totalImagesInArray);
    }
    this.iBoxDimMainImage(10);              // Запускаем анимацию "растворения"
    this._progressImg = 'none';             // Убираем индикатор загрузки
    this._titleNode.innerHTML     = '';
    this._titleNode.style.display = 'none'; // Убираем тайтл изображения
  }

  // Метод анимации растворения - увеличивает прозрачность изображения от заданного в opacity значения до нуля (диапазон opacity [0-10])
  this.iBoxDimMainImage = function(opacity){
    var newOpacity;
    if(opacity){
      newOpacity = opacity; // первый вызов ф-ции, задаем свойство
    }else{
      var step   = 2;     // Шаг изменения 
      newOpacity = this._mainImg.style.opacity*10 - step; // Изменяем значение
    }
    this._mainImg.style.opacity = newOpacity/10;                          // для всех нормальных броузеров
    this._mainImg.style.filter  = 'alpha(opacity=' + newOpacity*10 + ')'; // для IE
    if(this._mainImg.style.opacity > 0){
      setTimeout('this.iBoxDimMainImage', 35); // продолжим анимацию
    }else{
      this._mainImg.style.display = 'none';
      this._mainImg.style.opacity = 0;
      this._mainImg.style.filter  = 'alpha(opacity=100)';
      this.iBoxResize(); // Запуск анимации ресайза бокса
    }
  }

  // Ф-ция анимирует изменение размеров блока при разнице размеров загружаемых изображений
  this.iBoxResize = function(){
    var leftInnerMargin   = parseInt(this._wrapImgNode.style.marginLeft, 10) || 0;
    var rightInnerMargin  = parseInt(this._wrapImgNode.style.marginRight, 10) || 0;
    var leftBorder        = parseInt(this._boxNode.style.borderLeftWidth, 10) || 0;
    var rightBorder       = parseInt(this._boxNode.style.borderRightWidth, 10) || 0;
    // Изменение ширины относительно внутреннего блока, однако ширину менять будем внешенему
    var deltaWidth  = this._wrapImgNode.offsetWidth - this._preloadImg.width;
    // Вычисляется изменение высоты только для блока вокруг изображения, внешние блоки отресайзятся сами при изменении высоты внутреннего
    var deltaHeight = this._wrapImgNode.offsetHeight - this._preloadImg.height;

    // Шаг изменения поставим в зависимость от расстояния, чтобы "сначала быстро, потом медленно"
    var widthResizeStep  = deltaWidth / 4;
    var heightResizeStep = deltaHeight / 4;
    widthResizeStep      = (widthResizeStep > 0) ? Math.ceil(widthResizeStep) : Math.floor(widthResizeStep);
    heightResizeStep     = (heightResizeStep > 0) ? Math.ceil(heightResizeStep) : Math.floor(heightResizeStep);

    if(Math.abs(deltaWidth) > Math.abs(widthResizeStep)){
      var newWidth              = this._boxNode.offsetWidth - leftBorder - rightBorder - widthResizeStep;
      this._boxNode.style.width = newWidth + 'px'; // Изменение ширины внешнего блока, внутренние блоки отресайзятся сами
    }
    if(Math.abs(deltaHeight) > Math.abs(heightResizeStep)){
      var newHeight                  = this._wrapImgNode.offsetHeight - heightResizeStep;
      this._wrapImgNode.style.height = newHeight + 'px'; // Изменение высоты внутреннего блока
    }

    if((Math.abs(deltaHeight) > Math.abs(heightResizeStep)) || (Math.abs(deltaWidth) > Math.abs(widthResizeStep))) {
      setTimeout('this.iBoxResize', 35); // Анимируем дальше
    }else{
      // Стопорим и "добиваем" нужные значения, т.к. в процессе анимации они могли быть вычислены не точно
      this._boxNode.style.width      = this._preloadImg.width + leftInnerMargin + rightInnerMargin + 'px';
      this._mainImg.style.width      = this._preloadImg.width + 'px';
      this._wrapImgNode.style.height = this._preloadImg.height + 'px';
      this._mainImg.src              = this._preloadImg.src;
      this._mainImg.style.display    = 'block';
      // Нарисуем тайтл изображения
      var imageTitle = (this._imagesArray[this.currentImgIndex]) ? this._imagesArray[this.currentImgIndex].title : '';
      if(imageTitle != ''){
        // this._titleNode.style.display = 'block';
        this._titleNode.innerHTML     = imageTitle;
      }
      iBoxLightenMainImage(); // Запускаем анимацию "проявления" изображения
      //iBoxAnimSglOverlay('animation3.gif');
      //iBoxAnimMultiOverlay('animation3.gif');
    }
  }

  // Уменьшает прозрачность изображения от текщего значения до полностью непрозрачного - эффект проявления
  this.iBoxLightenMainImage = function(){
    var step        = 2;
    var newOpacity  = this._mainImg.style.opacity*10 + step;

    this._mainImg.style.opacity = newOpacity/10;
    this._mainImg.style.filter  = 'alpha(opacity=' + newOpacity*10 + ')';

    if(this._mainImg.style.opacity < 1){
      setTimeout('this.iBoxLightenMainImage', 35);
    }else{
      this._mainImg.style.opacity = '';
      this._mainImg.style.filter  = '';
    }
  }

  // Показ предыдущего изображения "галлереи"
  this.iBoxNext = function(){
    this._progressImg = 'block'; // Показать индикатор загрузки

    var nextImgIndex = this.currentImgIndex + 1;
    if(nextImgIndex < this._imagesArray.length){
      this.currentImgIndex = nextImgIndex;
      this._preloadImg.src  = this._imagesArray[nextImgIndex].href;
    }
    return false;
  }

  // Показ следующего изображения "галлереи"
  this.iBoxPrev = function(){
    this._progressImg = 'block'; // Показать индикатор загрузки

    var prevImgIndex = this.currentImgIndex - 1;
    if(prevImgIndex >= 0){
      this.currentImgIndex = prevImgIndex;
      this._preloadImg.src  = this._imagesArray[prevImgIndex].href;
    }
    return false;
  }

  // Метод закрытия слой-бокса
  this.iBoxClose = function(){
    this._wrapNode.style.display   = 'none';
    this._boxNode.style.display    = 'none';
    return false;
  }
}
imageBox.prototype = new ImagesTools();  // Наследуем свойства и методы от родительского класса
var imgBox = new imageBox();