/* jsImageBox - slim and simple image modal viewer for webpages http://www.jsimagebox.ru */

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

// Ф-ция добавляет HTML код бокса к текущему документу и кеширует ссылки на составные элементы
function jsiBoxInit(){
  var boxHTML = '<div id="wrapJsiBox"></div>'
              + '<div id="container">'
              + ' <div id="jsiMainBox">'
              + '  <div id="jsiBoxMainImageWrap"><img src="/oldbatist/templates/images/z.gif" id="jsiBoxMainImage" alt="" /></div>'
              + '  <img src="/oldbatist/templates/images/ajax-loader.gif" alt="" id="jsiBoxLoading" />'
              + '  <p class="tools">'
              + '   <a href="#" onclick="return jsiBoxPrev();" id="prevJsiBoxLink"><img src="/oldbatist/templates/images/larr.gif" alt="Предыдущее" /></a>'
              + '   <span id="jsiBoxNumberOfImage"></span>'
              + '   <a href="#" onclick="return jsiBoxNext();" id="nextJsiBoxLink"><img src="/oldbatist/templates/images/rarr.gif" alt="Следущее" /></a>'
              + '   <span id="jsiBoxTitle"></span>'
              + '   <a href="#" onclick="return jsiBoxClose();" class="close"><img src="/oldbatist/templates/images/close.gif" alt="Закрыть" /></a>'
              + ' </p>'
              + ' </div>'
              + '</div>';
  jsiBox.wrapNode = document.getElementById('wrapJsiBox');
  if(!jsiBox.wrapNode){
    document.write(boxHTML);
  }
  // Создание контейнера для предзагрузки изображений
  jsiBox.preloadImg        = new Image();
  jsiBox.preloadImg.onload = jsiBoxDisplayMainImg;
  // Кеширование (ссылок на) DOM узлов составных элементов бокса внутри объекта
  jsiBox.wrapNode      = document.getElementById('wrapJsiBox');
  jsiBox.boxNode       = document.getElementById('jsiMainBox');
  jsiBox.progressImg   = document.getElementById('jsiBoxLoading');
  jsiBox.prevLinkNode  = document.getElementById('prevJsiBoxLink');
  jsiBox.nextLinkNode  = document.getElementById('nextJsiBoxLink');
  jsiBox.infoNode      = document.getElementById('jsiBoxNumberOfImage');
  jsiBox.wrapImgNode   = document.getElementById('jsiBoxMainImageWrap');
  jsiBox.mainImg       = document.getElementById('jsiBoxMainImage');
  jsiBox.titleNode     = document.getElementById('jsiBoxTitle');
 
  jsiBox.currentImgIndex = 0;           // Порядковый номер отображаемого в текущий момент изображения "галлереи"
  jsiBox.linkNodesArray  = new Array(); // Массив DOM узлов ссылок на изображения текущей галлереи  
}

// Запуск анимации и инициализации навигации 
function jsiBoxDisplayMainImg(){
 // инициализация навигации
 var previousImgIndex = jsiBox.currentImgIndex - 1;
 if (previousImgIndex >= 0){
  jsiBox.prevLinkNode.style.display = '';
 } else {
  jsiBox.prevLinkNode.style.display = 'none'; // Скрыть ссылку "=>"
 }
 var nextImgIndex = jsiBox.currentImgIndex + 1;
 if (nextImgIndex < jsiBox.linkNodesArray.length) {
  jsiBox.nextLinkNode.style.display = '';
 } else { 
  jsiBox.nextLinkNode.style.display = 'none'; // Скрыть ссылку "<="
 } 

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

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

// Ф-ция анимирует изменение размеров блока при разнице размеров загружаемых изображений
function jsiBoxResize(){
 var leftInnerMargin   = parseInt(jsiBox.wrapImgNode.style.marginLeft, 10) || 0; 
 var rightInnerMargin  = parseInt(jsiBox.wrapImgNode.style.marginRight, 10) || 0;
 var leftBorder        = parseInt(jsiBox.boxNode.style.borderLeftWidth, 10) || 0;
 var rightBorder       = parseInt(jsiBox.boxNode.style.borderRightWidth, 10) || 0;
 // Изменение ширины относительно внутреннего блока, однако ширину менять будем внешенему 
 var deltaWidth  = jsiBox.wrapImgNode.offsetWidth - jsiBox.preloadImg.width;
 // Вычисляется изменение высоты только для блока вокруг изображения, внешние блоки отресайзятся сами при изменении высоты внутреннего
 var deltaHeight = jsiBox.wrapImgNode.offsetHeight - jsiBox.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              = jsiBox.boxNode.offsetWidth - leftBorder - rightBorder - widthResizeStep;
  jsiBox.boxNode.style.width = newWidth + 'px'; // Изменение ширины внешнего блока, внутренние блоки отресайзятся сами
 }  
 if (Math.abs(deltaHeight) > Math.abs(heightResizeStep)) {
  var newHeight                  = jsiBox.wrapImgNode.offsetHeight - heightResizeStep;
  jsiBox.wrapImgNode.style.height = newHeight + 'px'; // Изменение высоты внутреннего блока
 }
 
 if ((Math.abs(deltaHeight) > Math.abs(heightResizeStep)) || (Math.abs(deltaWidth) > Math.abs(widthResizeStep))) {
  setTimeout('jsiBoxResize()', 35); // Анимируем дальше
 } else {
  // Стопорим и "добиваем" нужные значения, т.к. в процессе анимации они могли быть вычислены не точно
  jsiBox.boxNode.style.width      = jsiBox.preloadImg.width + leftInnerMargin + rightInnerMargin + 'px';
  jsiBox.mainImg.style.width      = jsiBox.preloadImg.width + 'px';
  jsiBox.wrapImgNode.style.height = jsiBox.preloadImg.height + 'px';
  jsiBox.mainImg.src              = jsiBox.preloadImg.src;
  jsiBox.mainImg.style.display    = 'block';
  // Нарисуем тайтл изображения
  var imageTitle = (jsiBox.linkNodesArray[jsiBox.currentImgIndex]) ? jsiBox.linkNodesArray[jsiBox.currentImgIndex].title : '';
  if (imageTitle != '') {
  // jsiBox.titleNode.style.display = 'block';
   jsiBox.titleNode.innerHTML     = imageTitle;
  }
  jsiBoxLightenMainImage(); // Запускаем анимацию "проявления" изображения
  //jsiBoxAnimSglOverlay('animation3.gif');
  //jsiBoxAnimMultiOverlay('animation3.gif');
 }  
}

// Уменьшает прозрачность изображения от текщего значения до полностью непрозрачного - эффект проявления
function jsiBoxLightenMainImage(){
 var step        = 2; 
 var newOpacity  = jsiBox.mainImg.style.opacity*10 + step;
 
 jsiBox.mainImg.style.opacity = newOpacity/10;
 jsiBox.mainImg.style.filter  = 'alpha(opacity=' + newOpacity*10 + ')';
 
 if (jsiBox.mainImg.style.opacity < 1) {
  setTimeout('jsiBoxLightenMainImage()', 35);
 } else {
  jsiBox.mainImg.style.opacity = '';
  jsiBox.mainImg.style.filter  = '';
 }
}

// Показ предыдущего изображения "галлереи"
function jsiBoxNext(){
 jsiBox.progressImg.style.display = 'block'; // Показать индикатор загрузки
 
 var nextImgIndex = jsiBox.currentImgIndex + 1;
 if (nextImgIndex < jsiBox.linkNodesArray.length) {
  jsiBox.currentImgIndex = nextImgIndex;
  jsiBox.preloadImg.src  = jsiBox.linkNodesArray[nextImgIndex].href;
 }
 return false;
}

// Показ следующего изображения "галлереи"
function jsiBoxPrev(){
 jsiBox.progressImg.style.display = 'block'; // Показать индикатор загрузки
 
 var prevImgIndex = jsiBox.currentImgIndex - 1;
 if (prevImgIndex >= 0) {
  jsiBox.currentImgIndex = prevImgIndex;
  jsiBox.preloadImg.src  = jsiBox.linkNodesArray[prevImgIndex].href;
 }
 return false;
}

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

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

  // Сделать общий темный фон
  var pagesize                 = getPageSizeWithScroll();
  jsiBox.wrapNode.style.display = 'block';
  jsiBox.wrapNode.style.height  = pagesize[1] + 'px';
  jsiBox.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));
 
  jsiBox.boxNode.style.top         = (top + 70) + 'px';
  jsiBox.mainImg.src               = '/oldbatist/templates/images/z.gif';
  jsiBox.wrapImgNode.style.height  = '30px';
  jsiBox.boxNode.style.width       = '200px';
  jsiBox.boxNode.style.display     = 'block';
  jsiBox.preloadImg.src            = domNode.href; // Добавим изображение в очередь загрузки
  //alert('thatsit');
  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;
  }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;
}

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