/*
 * Что нужно сделать
 * 
 * -- Предварительную загрузку больших изображений (читать здесь: http://www.appelsiini.net/2007/6/sequentially-preloading-images )
 * -- Соптимизднуть, может что еще закешировать можно
 * -- Сделать чтоб весь хтмл код (кроме самого верхнего контейнера) генерился скриптом
 * -- разобраться с глобальными переменными, там наверно дофига ненужного
 * -- Пофиксить багу (возникает при нажатии ctrl+f5)
 * 
 * */

var thumbsCWidth, allThumsWidth, overflowWidth, sliderWinWidth;
var globalWPos			= [];
var globalCThumsPos		= [];
var globalPosOnThumb	= [];
var globalOpacityVal	= [];
var bigImages		 	= [];

$(function()
{
	if ( ! window.imgs ) {
		return;
	}
	
	var galleryC	= $('div.gallery-container');
	var thumbsC		= $('<ul><div class="slide-win"><img style="margin-left:-975px" src="s/images/win-bg.png"/></div></ul>').appendTo('div.thumbs', galleryC);
	
	var imgsSrc		= [];
	var thumbsSrc	= [];
	var tmpHTMLStr	= '';
	
	$('div.main-image').html('<span></span>');
	
	//Забиваем данные в наши массивы
	imgs = window.imgs;
	for(i in imgs)
	{
		var currE		= imgs[i];
		imgsSrc[i]		= currE.img;
		thumbsSrc[i]	= currE.thumb;
		
		$('<li><img src="' + thumbsSrc[i] + '"/></li>')
			.data('bigImg', imgsSrc[i])
			.appendTo(thumbsC);
		
		var opacity = ( i == 0 ) ? 1 : 0;
		
		$('<img src="' + imgsSrc[i] + '" />')
			.appendTo($('div.main-image span'))
			.css('opacity', opacity);
		
	}

	$("#slider").slider({
	    animate: false,
	    handle: ".ui-slider-handle",
	    slide:		function(event, ui) 
		{ 
			event.stopPropagation();
			slideGallery(ui); 
		},
		'min': 0,
		'max': 510
	  });
	
	$("#slider .ui-slider-handle").mousedown(function(event){/*event.stopPropagation();*/})
	
	var thumbs					= $('div.thumbs ul li');
	var overflowPercentPos		= 0;
	thumbsCWidth				= $('div.thumbs-c').width();
	var singleThumbWidth		= thumbs.width() + parseInt(thumbs.css('margin-left')) + parseInt(thumbs.css('margin-right'));
	allThumsWidth				= thumbs.length*singleThumbWidth;
	overflowWidth				= allThumsWidth - thumbsCWidth;
	sliderWinWidth				= $('div.slide-win').width();
	var sliderRane				= $("#slider").slider('option', 'max') - $("#slider").slider('option', 'min');
	
	
	var bigImgs = $('div.main-image img');
	for(var i=0;i<$('div.main-image img').length;i++)
	{
		bigImages[i] = bigImgs.eq(i);
	}
	
	//alert(overflowWidth)
	//Формируем массив поз.ползунка - поз. окошка
	var galleryContainerOffset = $('div.gallery-container').offset().left;
	for(var i=0;i<=sliderRane;i++)
	{
		var posPlusWidth = parseInt(i*allThumsWidth/sliderRane + sliderWinWidth);
		
		if( posPlusWidth <= thumbsCWidth )
		{
			globalWPos[i]			= parseInt(i*allThumsWidth/sliderRane);
			globalCThumsPos[i]		= 0;

			overflowPercentPos		= i;
		}
		else
		{
			globalWPos[i]				= thumbsCWidth - sliderWinWidth;
			globalCThumsPos[i]			= -( ( allThumsWidth/sliderRane )*( i-overflowPercentPos ) );
			globalCThumsPos[sliderRane]	= -overflowWidth;
		}
		
		//для каждой точки определяем два тумба и проценое покрытие. В соотв. с этим ставим прозрачность
		
		globalPosOnThumb[i] = Math.floor( (globalWPos[i]-globalCThumsPos[i])/singleThumbWidth );
		
		currThumb			= thumbs.eq(globalPosOnThumb[i]);
		currThumbWidth		= currThumb.width();
		currThumbPos		= currThumb.offset().left + currThumbWidth - galleryContainerOffset;

		prevOpacity			= ( currThumbPos - ( globalWPos[i] - globalCThumsPos[i] ) )/currThumbWidth;
		nextOpacity			= 1 - prevOpacity; // - ( singleThumbWidth - currThumbWidth );
		globalOpacityVal[i]	= { prev: prevOpacity, nex: nextOpacity };
		
	}
	
	slideGallery( {value: ($.browser.isIe ? 5 : 0 ) } );
	
});

function changeImg(clickedThumb)
{
	var clickedThumbIndex	= $('.thumbs ul li').index(clickedThumb);
	var deltaIndex			= clickedThumb.data('deltaIndex');
	var oldImgIndex			= clickedThumbIndex - deltaIndex;
	var bigImgC				= $('div.main-image span');
	var oldImg				= $('img:eq(' + oldImgIndex + ')', bigImgC);
	var newImg				= $('img:eq(' + clickedThumbIndex + ')', bigImgC);
	
	if( !bigImgC.hasClass('inAction') )
	{
		bigImgC.addClass('inAction');
		
		setTimeout("$('div.main-image span').removeClass('inAction');", 250);
		
		if( deltaIndex < 0 )
		{
			//Для перестраховки нужно занулять все остальные опасити
			newImg.attr('class', '')
				.css('opacity', 1);
			
			oldImg.attr('class', '')
				.animate(
					{
						opacity: 0
					}, 
					400, 
					function(){  }
				);
		}
		else
		{
			//Для перестраховки нужно занулять все остальные опасити
			newImg.attr('class', '')
				.animate(
					{
						opacity: 1
					}, 
					400, 
					function() { oldImg.css('opacity', 0); }
				);
		}
	}	
}


function slideGallery(ui)
{
	var newSliderPos	= ui.value;
	
	var prevThumb		= globalPosOnThumb[newSliderPos];
	var nextThumb		= prevThumb + 1;
	
	
	if( bigImages[nextThumb] && bigImages[prevThumb] )
	{
		$('div.main-image img').css('opacity', 0);
		bigImages[prevThumb].css('opacity', 1);
		bigImages[nextThumb].css('opacity', globalOpacityVal[newSliderPos].nex);
		$('div.slide-win').css('left', globalWPos[newSliderPos]);
		$('div.thumbs').css('margin-left', globalCThumsPos[newSliderPos]);
	}
	
}