﻿/*
 * jsImageBox - slim and simple image modal viewer for webpages http://www.jsimagebox.ru
 * Copyright (C) 2008 c0rr, p_ann
 *
 * Licensed under the terms of GNU General Public License Version 2 or later (the "GPL")
 *    http://www.gnu.org/licenses/gpl.html
 */
// Глобальный обьект в нем хранятся настройки и закешированы ссылки на DOM узлы и переменные состояния
var jsiBox = {
	// НАСТРОЙКИ //	
	imgBgColor     : '#fff',          // Цвет подложки изображения
	statusString   : '<b>[num]/[total]</b>', // Строка описания текущего со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('colorbox.js')) {
				jsiBox.selfDir = scriptNodes[i].src.split('colorbox.js')[0];
				break;
			}
		}
	}
	var boxHTML =  '<style type="text/css">#jsiMainBox * {margin: 0; padding: 0; border: 0; text-decoration: none;} #jsiMainBox p{min-width:160px;} #jsiMainBox .jsiBtn {margin:7px 7px 7px 0; float:right; vertical-align: middle;} #shadowTable, #shadowTable td {padding:0; margin:0 auto; border-width: 0px; border:0 none; border-collapse:collapse;} .tl{background: url(/myjs/colorbox/img/tl.png) no-repeat; height:20px; width:20px;} .top{background: url(/myjs/colorbox/img/top.png) repeat-x;} .tr{background: url(/myjs/colorbox/img/tr.png) no-repeat; width:20px;} .left{background: url(/myjs/colorbox/img/left.png) repeat-y;} .right{background: url(/myjs/colorbox/img/right.png) repeat-y;} .bl{background: url(/myjs/colorbox/img/bl.png) no-repeat; height:20px;} .bottom{background: url(/myjs/colorbox/img/bottom.png) repeat-x;} .br{background: url(/myjs/colorbox/img/br.png) no-repeat;}</style>'
+'<div id="wrapJsiBox" style="position: absolute; top:0; left:0; display: none; z-index: 2000; background:black; opacity: 0.5; filter: alpha(opacity=\'50\');"></div>'
+'<div style="position: absolute; top: 0; left: 0; width: 100%; z-index: 3000;">'
+'  <div id="jsiMainBox" style="font:13px Tahoma; color:grey; text-align:center; position: relative; display: none; margin: auto; z-index: 2; width: 400px; background:'+jsiBox.boxBgColor+'; padding-bottom: 4px;">'
+'<table id="shadowTable" display:none;"><tr><td class="tl"></td><td class="top"></td><td class="tr"></td></tr><tr><td class="left"></td><td style="background: white;">'
+'      <p style="text-align: right; font: bold 10px Tahoma; padding-top: 0;width:100%;overflow:hidden;padding-bottom:0;">'
+'        <img src="'+jsiBox.selfDir+'img/ajax-loader2.gif" id="jsiBoxLoading" style="float:left; display:inline; margin:7px 5px 0 8px;" />'
+'        <a href="#" onclick="return jsiBoxClose();"><img class="jsiBtn" src="/myjs/colorbox/img/exit.png" /></a>'
+'          <a href="#" id="nextJsiBoxLink" onclick="return jsiBoxNext();"><img class="jsiBtn" src="/myjs/colorbox/img/next.png" /></a>'
+'          <a href="#" id="prevJsiBoxLink" onclick="return jsiBoxPrev();"><img class="jsiBtn" src="/myjs/colorbox/img/prev.png" /></a>'
+'      <div id="jsiBoxMainImageWrap" style="background:'+jsiBox.imgBgColor+'; margin: 0 8px 4px 8px; overflow: hidden; position: relative;">'
+'        <img src="'+jsiBox.selfDir+'img/blank.gif" id="jsiBoxMainImage" alt="" style="display:none;" />'
+'      </div>'
+'      <div id="jsiBoxTitle" style="margin:12px; font-size:15px; color:grey;"></div>'
+'        <p id="jsiBoxNumberOfImage" style="margin:7px;"></p>'
+'</td><td class="right"></td></tr> <tr><td class="bl"></td><td class="bottom"></td><td class="br"></td></tr></table>'
+'  </div>'

+'</div>';
	jsiBox.wrapNode = document.getElementById('wrapJsiBox');
	if (!jsiBox.wrapNode) {
		document.write(boxHTML);
	}
	// Создание контейнера для предзагрузки изображений
	jsiBox.preloadImg        = new Image();
	jsiBox.preloadImg.onload = jsiBoxDisplayMainImg;
	// Кеширование (ссылок на) DOM узлов составных элементов бокса внутри объекта
	jsiBox.shadowNode	 = document.getElementById('shadowTable');
	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;


		// Стопорим и "добиваем" нужные значения, т.к. в процессе анимации они могли быть вычислены не точно
		jsiBox.boxNode.style.width      = jsiBox.preloadImg.width + leftInnerMargin + rightInnerMargin + 40+'px';
		jsiBox.mainImg.style.width      = jsiBox.preloadImg.width + 'px';
		jsiBox.wrapImgNode.style.height = jsiBox.preloadImg.height + 15+'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';
	jsiBox.shadowNode.style.display	 = 'none';
	jsiBox.mainImg.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;
	jsiBox.boxNode.style.top         = (top + 90) + 'px';
	jsiBox.mainImg.src               = jsiBox.selfDir+'img/blank.gif';	
	jsiBox.mainImg.style.border = '1px solid lightgrey';
	jsiBox.wrapImgNode.style.height  = '20px';	
	jsiBox.boxNode.style.display     = 'block';
	jsiBox.shadowNode.style.display	 = 'block'; // Для ИЕ7
	//jsiBox.shadowNode.style.display	 = 'table';
	jsiBox.preloadImg.src=""; //Для Хрома - фикс повторного нажатия.
	jsiBox.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;
	} 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();

function initLightbox(){
if (!document.getElementsByTagName){ return; }
	var anchors = document.getElementsByTagName("a");
	// loop through all anchor tags
	for (var i=0; i<anchors.length; i++){
		var anchor = anchors[i];

		if (anchor.getAttribute("href") && (anchor.getAttribute("class") == "box")){
			//alert(anchor.getAttribute("href"));
			anchor.onclick = function () {return jsiBoxOpen(this);}
		}	
	}
}
function addLoadEvent(func)
{	
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
    	window.onload = func;
	} else {
		window.onload = function(){
		oldonload();
		func();
		}
	}
}
addLoadEvent(initLightbox);	// run initLightbox onLoad
