// © 2008 Селезнёв Д. Л., webmaster@volgorechensk.ru

var _drager=false;
var _deltax;
var _deltay;
var _square=null;

var dirImages='panorama/';

var panorama=[
	['1.jpg', 'Центр города', ''],
	['3.jpg', 'Возле ТЦ «Кенгуру»', ''],
	['2.jpg', 'Рядом с ТЦ «Пирамида»', ''],
	['0.jpg', 'Трубный завод', ''],
	['4.jpg', 'д. Сыданиха', ''],
	['5.jpg', 'Вид на Волгу (Кострома)', '']
];

function _dragerMouseDown(e)
{
	var x=0, y=0;

	_drager=true;
	_square=getTarget(e).id;
				
	var ev=e || window.event;
	
	if (ev.pageX)
	{
		x=ev.pageX;
		y=ev.pageY;
	}
	else if (ev.clientX)
	{
		x=ev.clientX+document.body.scrollLeft-document.body.clientLeft;
		y=ev.clientY+document.body.scrollTop-document.body.clientTop;
	}

	_deltax=x-getCSSLeft(_square);
	
	return false;
}

function _dragerMouseUp(e)
{
	_dragerMoveImg(e);
	_drager=false;
	
	return true;
}

function _dragerMoveImg(e)
{	
	var x=0, y=0;
	var ev=e||window.event;

	if (ev.pageX)
	{
		x=ev.pageX;
		y=ev.pageY;
	}
	else if (ev.clientX)
	{
		x=ev.clientX+document.body.scrollLeft-document.body.clientLeft;
		y=ev.clientY+document.body.scrollTop-document.body.clientTop;
	}
	
	if (_drager)			
	{
		if (_square=='mover')
		{
			var xx=x-_deltax;
			if(xx<0)	xx=0;
			var maxw=$('mover-image').width-$('mover').offsetWidth;
			if(xx>maxw)	xx=maxw;
			setCSSLeft('mover', xx);
			
			setCSSLeft('panorama-image', (-1)*xx*($('panorama-image').offsetWidth/$('mover-image').offsetWidth));
		}
		
		if (_square=='panorama-image')
		{
			var xx=x-_deltax;
			if(xx>0)	xx=0;
			var maxw=$('panorama-image').offsetWidth-$('measurer').offsetWidth;
			if(xx<maxw*(-1))	xx=-maxw;
			setCSSLeft('panorama-image', xx);		
			
			setCSSLeft('mover', (-1)*xx*($('mover-image').offsetWidth)/$('panorama-image').offsetWidth);
		}
		
		return false;
	}
	
	return true;
}

function moverImageClick(e)
{

	var x=0;
	var ev=e||window.event;

	if (ev.pageX)
	{
		x=ev.pageX;
	}
	else if (ev.clientX)
	{
		x=ev.clientX+document.body.scrollLeft-document.body.clientLeft;
	}
	
	var xx=Math.floor(x-getLeft('mover-image')-$('mover').offsetWidth/2);
	if (xx<0)	xx=0;
	var maxw=$('mover-image').width-$('mover').offsetWidth;
	if (xx>maxw)	xx=maxw;
	setCSSLeft('mover', xx);
	
	setCSSLeft('panorama-image', (-1)*xx*($('panorama-image').offsetWidth/$('mover-image').offsetWidth));
}

function selectPanorama(e)
{
	var numId=parseInt(getTarget(e).id.replace(/menu/, ''));
	
	if (getTarget(e).className=='inside-selected') return;
	
	var spans=$('menu').getElementsByTagName('span');
	for (var i=0; i<spans.length; i++)
	{
		spans[i].className='inside';
	}

	getTarget(e).className='inside-selected';
	
	_loadPanorama=false;
	_loadMover=false;
	
	show('loader');
	
	$('mover-container').style.visibility='hidden';
	$('panorama-image').style.visibility='hidden';
	
	$('panorama-image').src=dirImages+panorama[numId][0];
	$('mover-image').src=dirImages+'small/'+panorama[numId][0];
	
	$('panorama-image').onload=function()
	{
		_loadPanorama=true;
		initMover();
	}
	
	$('mover-image').onload=function()
	{
		_loadMover=true;
		initMover();
	}	
	
	$('mover-description').innerHTML=panorama[selectedPanorama][2];
	selectedPanorama=numId;
	
	setCSSLeft('mover', 0);
	setCSSLeft('panorama-image', 0);
}



//-------------- lib -----------------

window.$=function(id)	{return document.getElementById(id);}

function getTarget(e)
{
	return window.event ? window.event.srcElement : e.currentTarget;
} 

function setCSSLeft(id, x)
{
	$(id).style.left=''+x+'px';
}

function getCSSLeft(id)
{
	return parseInt($(id).style.left.replace(/px/, ''));
}

function getLeft(id)
{
	var e=$(id);
	var il=0;

	while(e.tagName!='BODY' && e.tagName!='HTML')
	{
		il+=e.offsetLeft;
		e=e.offsetParent;
	}

	return il;
}

function show(id)
{
	$(id).style.display='block';
}

function hide(id)
{
	$(id).style.display='none';
}


//------------ init -----------------------

_loadPanorama=false;
_loadMover=false;
selectedPanorama=0;

function initMover()
{
	if (!_loadMover || !_loadPanorama)	return false;
	$('mover').style.width=$('mover-image').offsetWidth*$('measurer').offsetWidth/$('panorama-image').offsetWidth+'px';
	$('mover-container').style.marginLeft='-'+Math.floor($('mover-image').width/2)+'px';
	
	hide('loader');
	
	$('mover-container').style.visibility='visible';
	$('panorama-image').style.visibility='visible';	
	
	return true;
}

window.onload=function()
{
	$('mover').onmousedown=_dragerMouseDown;
	$('panorama-image').onmousedown=_dragerMouseDown;
	$('mover-image').onclick=moverImageClick;

	document.body.onmouseup=_dragerMouseUp;
	document.onmousemove=_dragerMoveImg;

	_loadPanorama=true;
	_loadMover=true;
	
	var text='';
	
	for (var i=0; i<panorama.length; i++)
	{
		var cl='inside';
		if (i==selectedPanorama)
		{
			cl='inside-selected';
		}
		text+='<span id="menu'+i+'" class="'+cl+'">'+panorama[i][1]+'<\/span>';
		if (i==3)	text+='<br />';
		else	text+='&#160;&#160;&#160;';
	}
	
	$('menu').innerHTML=text;
	
	var spans=$('menu').getElementsByTagName('span');
	
	for (var i=0; i<spans.length; i++)
	{
		spans[i].onclick=selectPanorama;
	}
	
	show('menu');
	show('mover-container');
	$('mover-description').innerHTML=panorama[selectedPanorama][2];
	initMover();
}

window.onresize=function()
{
	if (!_loadMover || !_loadPanorama)	return;
	
	initMover();
}