/*
 * 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 = {
	// НАСТРОЙКИ //
	boxBorderColor : '#727272',          // Цвет границы бокса
	boxBorderWidth : '1px',              // Толщина границы бокса
	boxBgColor     : '#484848',          // Цвет фона бокса
	imgBgColor     : '#fff',          // Цвет подложки изображения 
	overlayColor   : '#fff',          // Цвет затемнения страницы
	nextArrow      : '→',           // Следующее изображение
	prevArrow      : '←',         // Предыдущее изображение
	closeSymbol    : '×',          // Значок закрытия бокса
	statusString   : 'Изображение [num] из [total]', // Строка описания текущего соcтояния  
	selfDir        : '/images/jsibox_basic'	                 // Путь к каталогу кода бокса, если пустая строка то скрипт попробует автоматически вычислить путь
};

// Ф-ция добавляет 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:0px; padding:0px; border:0px; text-decoration:none;}</style>'
		+ '<div id="wrapJsiBox" style="position:absolute; top:0; left:0; display:none; z-index:1000; background-color:#1d0d03; opacity:0.65; filter:alpha(opacity=\'65\');"></div>'
		+ '<div style="position:absolute; top:0; left:0; width:100%; z-index:2000;">'
		+ '	<div id="jsiMainBox" style="position:relative;  z-index:2; text-align:left; margin:auto; display:none; width:100px;">'
		+ '		<table cellpadding="0" cellspacing="0" border="0" style="margin-top:35px; background-color:#c19675; width:100%;">'
		+ '			<tr>'
		+ '				<td><img src="' + jsiBox.selfDir + '/tbl_lt.gif"></td>'
		+ '				<td style="background:url(\'' + jsiBox.selfDir + '/tbl_t.gif\') repeat-x;"><img src="' + jsiBox.selfDir + '/spacer.gif"></td>'
		+ '				<td><img src="' + jsiBox.selfDir + '/tbl_rt.gif"></td>'
		+ '			</tr>'
		+ '			<tr>'
		+ '				<td style="background:url(\'' + jsiBox.selfDir + '/tbl_l.gif\') repeat-y;"><img src="' + jsiBox.selfDir + '/spacer.gif"></td>'
		+ '				<td style="border:solid #e5aa6a 1px; background:url(\'' + jsiBox.selfDir + '/frame_bg.gif\') repeat-y center; width:100%;">'
		+ '					<div style="position:relative; display:block; z-index:2; margin:3px 6px 0px 6px;">'
		+ '						<div style="position:absolute; right:-12px; top:-39px;"><a href="#" onclick="return jsiBoxClose();"><img src="' + jsiBox.selfDir + '/btn_close.gif" border="0"></a></div>'
		+ '						<div style="width:21px; float:left; height:17px;"><a href="#" id="prevJsiBoxLink" onclick="return jsiBoxPrev();"><img src="' + jsiBox.selfDir + '/btn_prev.gif" border="0"></a></div>'
		+ '						<div style="width:21px; float:right; height:17px;"><a href="#" id="nextJsiBoxLink" onclick="return jsiBoxNext();"><img src="' + jsiBox.selfDir + '/btn_next.gif" border="0"></a></div>'
		+ '						<div style="clear:both;"><img src="' + jsiBox.selfDir + '/spacer.gif"></div>'
		+ '						<div style="background-color:#e4ccb1;">'
		+ '							<div style="margin:2px; background:url(\'' + jsiBox.selfDir + '/photo_bg.gif\') center;">'
		+ '								<p id="jsiBoxNumberOfImage" style="display:none;"></p>'
		+ '								<div id="jsiBoxMainImageWrap" style="background:#fff; position:relative; width:100%;">'
		+ '									<img src="' + jsiBox.selfDir + '/ajax-loader2.gif" alt="" id="jsiBoxLoading" style="float:left; display:inline; margin:7px 5px 0 8px;" />'
		+ '									<img src=""' + jsiBox.selfDir + '/spacer.gif" id="jsiBoxMainImage" alt="" style="display:none; border:solid #ffffff 1px;" />'
		+ '									<div id="jsiBoxMainSWF" style="position:relative; width:100%; display:none;"></div>'
		+ '								</div>'
		+ '								<div id="jsiBoxTitle" style="height:24px; padding-top:15px; text-align:center; font-family:Verdana, Geneva, sans-serif; font-weight:bold; font-size:12px; color:#780021;"></div>'
		+ '							</div>'
		+ '						</div>'
		+ '					</div>'
		+ '					<div style="height:26px; background:url(\'' + jsiBox.selfDir + '/footer_bg.gif\') repeat-x; margin-top:5px;"><img src="' + jsiBox.selfDir + '/spacer.gif"></div>'
		+ '				</td>'
		+ '				<td style="background:url(\'' + jsiBox.selfDir + '/tbl_r.gif\') repeat-y;"><img src="' + jsiBox.selfDir + '/spacer.gif"></td>'
		+ '			</tr>'
		+ '			<tr>'
		+ '				<td><img src="' + jsiBox.selfDir + '/tbl_lb.gif"></td>'
		+ '				<td style="background:url(\'' + jsiBox.selfDir + '/tbl_b.gif\') repeat-x;"><img src="' + jsiBox.selfDir + '/spacer.gif"></td>'
		+ '				<td><img src="' + jsiBox.selfDir + '/tbl_rb.gif"></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.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.mainSWF       = document.getElementById('jsiBoxMainSWF');
	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; 
	} 

	if (!jsiBox.preloadImg.code)
	{
		var pImg = new Image();

		pImg.src = jsiBox.preloadImg.src;

		jsiBox.preloadImg.width = 	pImg.width;
		jsiBox.preloadImg.height = 	pImg.height;
	}

	jsiBoxDimMainImage(10);                    // Запускаем анимацию "растворения"
	jsiBox.progressImg.style.display = 'none'; // Убираем индикатор загрузки
	jsiBox.titleNode.innerHTML= '';
}

// Ф-ция анимации растворения - увеличивает прозрачность изображения от заданного в 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 / 2;
	var heightResizeStep = deltaHeight / 2;
	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.prevLinkNode.style.display = 'block';
		jsiBox.nextLinkNode.style.display = 'block';

		// Стопорим и "добиваем" нужные значения, т.к. в процессе анимации они могли быть вычислены не точно
		jsiBox.boxNode.style.width      = jsiBox.preloadImg.width + leftInnerMargin + rightInnerMargin + 28 + 'px';
		jsiBox.mainImg.style.width      = jsiBox.preloadImg.width + 'px';
		jsiBox.wrapImgNode.style.height = jsiBox.preloadImg.height + 'px';

		if (jsiBox.preloadImg.code)
		{
			jsiBox.mainSWF.innerHTML = 			jsiBox.preloadImg.code;
			jsiBox.mainSWF.style.display = 		'block';
			jsiBox.prevLinkNode.style.display = 'none';
			jsiBox.nextLinkNode.style.display = 'none';
		}
		else
		{
			jsiBox.mainSWF.innerHTML = '';
			jsiBox.mainSWF.style.display = 'none';

			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('/images/animation3.gif');
		//jsiBoxAnimMultiOverlay('/images/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.prevLinkNode.style.display = 'none';
	jsiBox.nextLinkNode.style.display = 'none';

	jsiBox.mainSWF.innerHTML = '';
	jsiBox.mainSWF.style.display = 'none';

	jsiBox.mainImg.style.display = 'none';
	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.prevLinkNode.style.display = 'none';
	jsiBox.nextLinkNode.style.display = 'none';

	jsiBox.mainSWF.innerHTML = '';
	jsiBox.mainSWF.style.display = 'none';

	jsiBox.mainImg.style.display = 'none';
	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()
{
	if ($.browser.msie)
		$('select').show();

	if (jsiBox.preloadImg.code)
		jsiBox.preloadImg.code = null;

	for (var i = 0; i < jsiBox.linkNodesArray.length; i++)
		if (jsiBox.linkNodesArray[i].code)
			delete(jsiBox.linkNodesArray[i]);

	jsiBox.wrapNode.style.display = 'none';
	jsiBox.boxNode.style.display = 'none';

	jsiBox.mainSWF.innerHTML = '';
	jsiBox.mainSWF.style.display = 'none';

	return false;
}

// Отправляет изображение на просмотр в боксе
function jsiBoxOpen (domNode)
{
	if ($.browser.msie)
		$('select').hide();

	jsiBox.mainImg.style.display = 'none';

	if (jsiBox.mainImg.src == domNode.href)
	{
		jsiBox.wrapNode.style.display   = 'block';
		jsiBox.boxNode.style.display    = 'block';
		jsiBox.mainImg.style.display 	= 'block';

		return false;
	}

	jsiBox.mainSWF.innerHTML = '';
	jsiBox.mainSWF.style.display = 'none';

	jsiBox.prevLinkNode.style.display = 'none';
	jsiBox.nextLinkNode.style.display = 'none';

	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 + 50) + 'px';
	jsiBox.mainImg.src               = jsiBox.selfDir + '/spacer.gif';
	jsiBox.wrapImgNode.style.height  = '130px';
	jsiBox.boxNode.style.display     = 'block';
	jsiBox.preloadImg.src            = domNode.href; // Добавим изображение в очередь загрузки

	return false;
}

// Отправляет изображение на просмотр в боксе
function jsiBoxOpenSWF (code, title, width, height)
{
	if ($.browser.msie)
		$('select').hide();

	jsiBox.mainImg.style.display = 'none';

	jsiBox.prevLinkNode.style.display = 'none';
	jsiBox.nextLinkNode.style.display = 'none';

	var docLinks = document.getElementsByTagName('a');
	jsiBox.progressImg.style.display = 'block'; // Показать индикатор загрузки
	jsiBox.linkNodesArray            = new Array(); 

	// Пройдемся по всему списку ссылок для того чтобы найти элементы с заданным rel инаполнить "галлерею"
	jsiBox.linkNodesArray.push({
		'code': 	code,
		'width': 	width,
		'height': 	height,
		'title': 	title
	});
	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 + 50) + 'px';
	jsiBox.mainImg.src               = jsiBox.selfDir + '/spacer.gif';
	jsiBox.wrapImgNode.style.height  = '130px';
	jsiBox.boxNode.style.display     = 'block';

	// Добавим изображение в очередь загрузки
	jsiBox.preloadImg.code = 	code;
	jsiBox.preloadImg.width = 	width;
	jsiBox.preloadImg.height = 	height;

	// Инициируем загрузку
	jsiBox.preloadImg.onload();

	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();