// Глобальный обьект в нем хранятся настройки и закешированы ссылки на DOM узлы и переменные состояния
var iBox = {
 // НАСТРОЙКИ //
 statusString   : '[num] из [total]' // Строка описания текущего соcтояния
};

// Ф-ция добавляет HTML код бокса к текущему документу и кеширует ссылки на составные элементы
function iBoxInit(){
  var boxHTML = '<div id="wrapiBox"></div>'
              + '<div id="iBoxContainer">'
              + ' <div id="iMainBox">'
              + '  <img src="/templates/images/close.gif" alt="Закрыть" onclick="return iBoxClose();" class="close" />'
              + '  <img src="/templates/images/ajax-loader.gif" alt="" id="iBoxLoading" />'
              + '  <table id="iBoxMainImageWrap"><tr><td align="center" valign="middle"><img src="/templates/images/z.gif" id="iBoxMainImage" alt="" /></td></tr></table>'
              + '  <img src="/templates/images/z.gif" id="previBoxLink" />'
              + '  <img src="/templates/images/z.gif" id="nextiBoxLink" />'
              + '  <span id="iBoxNumberOfImage"></span>'
              + '  <span id="iBoxTitle"></span>'
              + ' </div>'
              + '</div>';

  iBox.wrapNode = document.getElementById('wrapiBox');
  if(!iBox.wrapNode){ document.write(boxHTML); }

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

  // Кеширование (ссылок на) DOM узлов составных элементов бокса внутри объекта
  iBox.wrapNode    = document.getElementById('wrapiBox');
  iBox.boxNode     = document.getElementById('iMainBox');
  iBox.progressImg = document.getElementById('iBoxLoading');
  iBox.infoNode    = document.getElementById('iBoxNumberOfImage');
  iBox.wrapImgNode = document.getElementById('iBoxMainImageWrap');
  iBox.mainImg     = document.getElementById('iBoxMainImage');
  iBox.titleNode   = document.getElementById('iBoxTitle');

  iBox.currentImgIndex = 0;           // Порядковый номер отображаемого в текущий момент изображения "галлереи"
  iBox.linkNodesArray  = new Array(); // Массив DOM узлов ссылок на изображения текущей галлереи
}

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

  var nextImgIndex = iBox.currentImgIndex + 1;
  document.getElementById('nextiBoxLink').style.display = (nextImgIndex < iBox.linkNodesArray.length ? '' : 'none'); // Скрыть ссылку "<="

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

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

// Ф-ция анимирует изменение размеров блока при разнице размеров загружаемых изображений
function iBoxResize(){
  var leftInnerMargin   = parseInt(iBox.wrapImgNode.style.marginLeft, 10) || 0;
  var rightInnerMargin  = parseInt(iBox.wrapImgNode.style.marginRight, 10) || 0;
  var leftBorder        = parseInt(iBox.boxNode.style.borderLeftWidth, 10) || 0;
  var rightBorder       = parseInt(iBox.boxNode.style.borderRightWidth, 10) || 0;

  // Изменение ширины относительно внутреннего блока, однако ширину менять будем внешенему
  var deltaWidth  = iBox.wrapImgNode.offsetWidth - iBox.preloadImg.width;
  // Вычисляется изменение высоты только для блока вокруг изображения, внешние блоки отресайзятся сами при изменении высоты внутреннего
  var deltaHeight = iBox.wrapImgNode.offsetHeight - iBox.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             = iBox.boxNode.offsetWidth - leftBorder - rightBorder - widthResizeStep;
    iBox.boxNode.style.width = newWidth + 'px'; // Изменение ширины внешнего блока, внутренние блоки отресайзятся сами
  }
  if(Math.abs(deltaHeight) > Math.abs(heightResizeStep)){
    var newHeight                 = iBox.wrapImgNode.offsetHeight - heightResizeStep;
    iBox.wrapImgNode.style.height = newHeight + 'px'; // Изменение высоты внутреннего блока
  }

 // if((Math.abs(deltaHeight) > Math.abs(heightResizeStep)) || (Math.abs(deltaWidth) > Math.abs(widthResizeStep))){
 //   setTimeout('iBoxResize()', 35); // Анимируем дальше
 // }else{
    // Стопорим и "добиваем" нужные значения, т.к. в процессе анимации они могли быть вычислены не точно
    iBox.boxNode.style.width      = '600px'; //iBox.preloadImg.width + leftInnerMargin + rightInnerMargin + 'px';
    iBox.mainImg.style.width      = iBox.preloadImg.width + 'px';
    iBox.wrapImgNode.style.height = '600px'; // iBox.preloadImg.height + 'px';
    iBox.wrapImgNode.style.width  = '600px'; // iBox.preloadImg.height + 'px';
    iBox.mainImg.src              = iBox.preloadImg.src;
    iBox.mainImg.style.display    = 'block';

    // Нарисуем тайтл изображения
    var imageTitle = (iBox.linkNodesArray[iBox.currentImgIndex]) ? iBox.linkNodesArray[iBox.currentImgIndex].title : '';
    if(imageTitle != ''){
      // iBox.titleNode.style.display = 'block';
      iBox.titleNode.innerHTML     = imageTitle;
    }
    iBoxLightenMainImage(); // Запускаем анимацию "проявления" изображения
 // }
}

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

  iBox.mainImg.style.opacity = newOpacity/10;
  iBox.mainImg.style.filter  = 'alpha(opacity=' + newOpacity*10 + ')';

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

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

  var nextImgIndex = iBox.currentImgIndex + 1;
  if(nextImgIndex < iBox.linkNodesArray.length){
    iBox.currentImgIndex = nextImgIndex;
    iBox.preloadImg.src  = iBox.linkNodesArray[nextImgIndex].href;
  }
  return false;
}

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

  var prevImgIndex = iBox.currentImgIndex - 1;
  if(prevImgIndex >= 0){
    iBox.currentImgIndex = prevImgIndex;
    iBox.preloadImg.src  = iBox.linkNodesArray[prevImgIndex].href;
  }
  return false;
}

// Ф-ция закрытия бокса
function iBoxClose(){
  iBox.wrapNode.style.display   = 'none';
  iBox.boxNode.style.display    = 'none';
  return false;
}

// Отправляет изображение на просмотр в боксе
function iBoxOpen(domNode){
  var docLinks = document.getElementsByTagName('a');
  iBox.progressImg.style.display = 'block'; // Показать индикатор загрузки
  iBox.linkNodesArray            = new Array();

  // Пройдемся по всему списку ссылок для того чтобы найти элементы с заданным rel инаполнить "галлерею"
  if(domNode.rel != ''){
    for(var i = 0; i < docLinks.length; i++){
      if(docLinks[i].rel == domNode.rel) {
        iBox.linkNodesArray.push(docLinks[i]); // Добавим найденный элемент в массив {TODO} IE 5 do not have push
      }
      if(docLinks[i] == domNode){
        iBox.currentImgIndex = iBox.linkNodesArray.length - 1;
      }
    }
  }else{
    iBox.linkNodesArray.push(domNode);
    iBox.currentImgIndex = 0;
  }
  iBox.infoNode.innerHTML  = '&#160;';
  iBox.titleNode.innerHTML = '';

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

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

  iBox.boxNode.style.top         = top + 'px'; //(top + 100) + 'px';
  iBox.mainImg.src               = '/templates/images/z.gif';
  iBox.wrapImgNode.style.height  = '30px';
  iBox.boxNode.style.width       = '600px';
  iBox.boxNode.style.display     = 'block';
  iBox.preloadImg.src            = domNode.href; // Добавим изображение в очередь загрузки
  return false;
}

// Вспомогательная ф-ция получения размера документа
function getPageSizeWithScroll(){
  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;
    pageHeight = document.body.offsetHeight; // + document.body.offsetTop;
  }else{ // works in Explorer 6 Strict, Mozilla (not FF) and Safari, Opera 10.53
    pageWidth = document.body.offsetWidth + document.body.offsetLeft;
    pageHeight = document.body.offsetHeight; // + document.body.offsetTop;
  }
  arrayPageSizeWithScroll = new Array(pageWidth, pageHeight);
  return arrayPageSizeWithScroll;
}

// Инициализируем бокс
iBoxInit();