// Глобальный обьект в нем хранятся настройки и закешированы ссылки на DOM узлы и переменные состояния
var jsiBox = {
    // НАСТРОЙКИ //
    boxBorderColor: '#727272',          // Цвет границы бокса
    boxBorderWidth: '1px',              // Толщина границы бокса
    boxBgColor: 'white',          // Цвет фона бокса
    imgBgColor: 'white',          // Цвет подложки изображения 
    overlayColor: '#fff',          // Цвет затемнения страницы
    nextArrow: '→',           // Следующее изображение
    prevArrow: '←',         // Предыдущее изображение
    closeSymbol: '×',          // Значок закрытия бокса
    statusString: '', // Строка описания текущего соcтояния  
    selfDir: ''	                 // Путь к каталогу кода бокса, если пустая строка то скрипт попробует автоматически вычислить путь
};

// Ф-ция добавляет HTML код бокса к текущему документу и кеширует ссылки на составные элементы
function jsiBoxInit() {
    if (jsiBox.selfDir == '') {
        // Попробовать вычислить путь к коду - нужно для задания путей к изображениям
        var scriptNodes = document.getElementsByTagName('script');
        for (var i = 0; i < scriptNodes.length; i++) {
            if (scriptNodes[i].src && scriptNodes[i].src.match('jsibox_basic.js')) {
                jsiBox.selfDir = scriptNodes[i].src.split('jsibox_basic.js')[0];
                break;
            }
        }
    }
    var boxHTML = '<style type="text/css">#jsiMainBox * {margin: 0; padding: 0; border: 0; text-decoration: none;} #jsiMainBox a.jsiBtn {outline: none; float:right; color: #484848; font-size: 30px; width: 40px;  vertical-align:middle;font-weight:normal; } </style>'
                  + '<div id="wrapJsiBox" style="position: absolute; top:0; left:0; display: none; z-index: 1000; background-color:' + jsiBox.overlayColor + '; opacity: 0.6; filter: alpha(opacity=\'60\');"></div>'
                  + '<div style="position: absolute; top: 0; left: 0; width: 100%; z-index: 2000;">'
                  + '  <div id="jsiMainBox" style="color: #484848;text-align:left;position: relative; display: none; margin: auto; z-index: 2; width: 400px; background:' + jsiBox.boxBgColor + '; border: ' + jsiBox.boxBorderWidth + ' solid ' + jsiBox.boxBorderColor + '; padding-bottom: 4px;">'
                  + '      <p style="text-align: right; font: bold 10px Tahoma; padding-top: 0;width:100%;overflow:hidden;padding-bottom:0;">'
                  + '        <img src="' + jsiBox.selfDir + '/images/jsBox/ajax-loader.gif" alt="" id="jsiBoxLoading" style="float:left; display:inline; margin:12px 5px 0 8px;" />'
                  + '        <a href="#" style="padding:0 8px 0 0;width:28px;line-height:32px;margin-top:-2px" onclick="return jsiBoxClose();" class="jsiBtn">' + jsiBox.closeSymbol + '</a>'
                  + '        <span style="width: 75px; float: right; height: 37px;position:relative;">'
                  + '          <a href="#" id="nextJsiBoxLink" onclick="return jsiBoxNext();" style="position:absolute;top: 0;right: 0;line-height:30px;" class="jsiBtn">' + jsiBox.nextArrow + '</a>'
                  + '          <a href="#" id="prevJsiBoxLink" onclick="return jsiBoxPrev();" style="position:absolute;top: 0;left: 0;line-height:30px;" class="jsiBtn">' + jsiBox.prevArrow + '</a>'
                  + '        </span>'
                  + '      </p>'
                  + '        <p id="jsiImgTitle" style="margin-top:-7px; padding:0 12px 2px 0;text-align:right;"></p>'
                  + '      <div id="jsiBoxMainImageWrap" style="background:' + jsiBox.imgBgColor + '; margin: 0 8px 4px 8px; overflow: hidden; position: relative;">'
                  + '        <img src="' + jsiBox.selfDir + '/images/jsBox/blank.gif" id="jsiBoxMainImage" alt="" style="display: block;" />'
                  + '      </div>'
                  //+ '      <span id="jsiBoxTitle" style="margin:0 8px; color:#484848; font: bold 11px Tahoma;"></span>'
                  + '  </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('jsiImgTitle');
    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.infoNode.innerHTML = '';
    jsiBox.infoNode.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.infoNode.style.display = 'block';
            jsiBox.infoNode.innerHTML = imageTitle;
        }
        jsiBox.progressImg.style.display = 'none'; // Убираем индикатор загрузки
        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.infoNode.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;
    jsiBox.boxNode.style.top = (top + 200) + 'px';
    jsiBox.mainImg.src = jsiBox.selfDir + '/images/jsBox/blank.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();