var photoCategoryTitleSelector = "a";
var progressBarSelector = "#progressBar";
var thumbnailsSelector = "#thumbnailsHolder";

var jThumbnailsSelector = null;
var jThumbnailsSelectorCssList = null;

var jImagePlaceholderCurrent = null;
var jImagePlaceholderPrevious = null;
var jImageNavigation = null;

var thumbnailsMaskSelector = "#thumbnailsMask";
var thumbnailsMask = null;
var thumbnailsMaskWidth = null; // $( thumbnailsMaskSelector ).width();
// var thumbnailsMaskOffset = null; // $( thumbnailsMaskSelector ).offset();

var detachedContent = null;

var jCurrentThumbnail = null;

var defaultPhotoId = null;

var thumbnailBarWidth = 4200;
var thumbnailWidth = 90;

var thumbnailsList = [];

var thumbnailsScrollSpeedFactor = 5.0;
var thumbnailScrollInterval = 30;
var thumbnailScrollCurrentDelta = 0;
var thumbnailScrollIntervalHandler = null;

var thumbnailsDisableMouseScrolling = false;

var thumbnailDefaultOpacity = 0.5;
var imageLoader = null;
var categoryResourceData = null;
var menuHorizontalPadding = 15;

var onItemLoadedCallback = null;


function initGallery()
{
	thumbnailsMask = $(thumbnailsMaskSelector);
	
	thumbnailsMaskWidth = thumbnailsMask.width();
	
	jThumbnailsSelector = $( thumbnailsSelector );
	
	jImageNavigation = $( "#imageNavigation" );
	jImagePlaceholderCurrent = $( "#imagePlaceholder .current" );
	jImagePlaceholderPrevious = $( "#imagePlaceholder .previous" );
	
	jThumbnailsSelectorCssList = jThumbnailsSelector[0].style;
	
	$("#menuContainer > ul a.photoCategory").click( onMainMenuCategoryClick );
	
	$("#imageNavigation .prev").click( onPreviousThumbnailClick );
	$("#imageNavigation .next").click( onNextThumbnailClick );	
	
}

function onMainMenuCategoryClick()
{
	
	var parentLi = $(this).parent();
	var parentUl = ( parentLi.parent() );
	var childUl = $("ul:first", parentLi);
	
	
	$(photoCategoryTitleSelector, parentUl).removeClass("selected");
	
	$(this).addClass("selected");		
	
	$("ul", parentUl).css("display", "none");

	
	var leftPosition = ( menuHorizontalPadding + parentUl.width() );
	
	// childUl.show().css("left", leftPosition +"px" );
	
	childUl.stop( true, true).css( { left: parentUl.width() + "px", opacity : 0 , display : "block"  } );
	
	childUl.animate( { left : ( leftPosition + "px" ) , opacity : 1 }, 1000 , 'easeInOutQuint' );
	
	unloadCurrentCategory();

	
	var id = $(this).attr("id").replace(/photoCategory/,"");
	
	if( $(this).hasClass('hasResources') )
	{
		loadPhotosForCategory( id );
	}
	else if( $(this).hasClass('hasPage') )
	{
		loadPage( id );
	}
	else if ( $(this).hasClass('externalLink') )
	{
		
	}
	
	jImageNavigation.hide();
	
	return false;
	
}

function unloadCurrentCategory()
{
	jThumbnailsSelector.html("");
//	jImagePlaceholderPrevious.html("").removeClass("page");
//	jImagePlaceholderCurrent.html("").removeClass("page");
	
	jImagePlaceholderPrevious.html("");
	jImagePlaceholderCurrent.html("");
	
	endThumbnailScrolling();	
}

function hideProgressBar()
{
	$(progressBarSelector).hide();
}

function showProgressBar()
{
	$(progressBarSelector).show();
}

function setLoadProgress( progress )
{
	$(progressBarSelector + " > div").css("width", ( Math.round( 100* parseFloat(progress) ) )+"%");
}

function loadPhotosForCategory(categoryId, _defaultPhotoId )
{
	
	showProgressBar();
	setLoadProgress(0);

	defaultPhotoId = ( _defaultPhotoId == undefined ) ? null : _defaultPhotoId;  
	
	/*
	showProgressBar();
	setLoadProgress(0);
	
	jThumbnailsSelector.html("");
	jImagePlaceholderPrevious.html("").removeClass("page");
	jImagePlaceholderCurrent.html("").removeClass("page");
	
	endThumbnailScrolling();
	*/
	
	$.get(baseUrl+ "configs/media/" + categoryId , { }, onCategoryDataLoaded );
}

function onCategoryDataLoaded( data, textStatus, XMLHttpRequest )
{
	categoryResourceData = data;
	
	if( $("category", data).children().length )
	{
		if( imageLoader )
		{
			imageLoader.stop();
		}
		// load resources
		imageLoader = new ImageLoader();
		
		
		if( $("image" , data).length )
		{
			$("image", data).each( function(i, data) {
				imageLoader.add( $(this).attr("src") , $(this).attr("alt") , 'image' ) ;
				imageLoader.add( $(this).attr("thumbnail") , "" , 'thumbnail'  ) ;
			});
			// video
			
			imageLoader.load( onCategoryResourcesLoadComplete , onCategoryImagesLoadProgress );
		}
		else
		{
			onCategoryResourcesLoadComplete();
		}
		
		
	}
}

function loadPage(id)
{
	jImagePlaceholderPrevious.html("");
	jImagePlaceholderCurrent
		.html("")
//		.removeClass("page")
		.load( baseUrl +"pages/ajax_get/" + id );
//		.addClass('page');
	
}

function loadPageWithText(text)
{
	jImagePlaceholderPrevious.html("");
	jImagePlaceholderCurrent
		.html(text);
//		.removeClass("page")
//		.addClass('page');	
}

function onCategoryImagesLoadProgress(progress)
{
	// console.log(progress);
	setLoadProgress(progress);
}

function onCategoryResourcesLoadComplete()
{
	setLoadProgress(1);
	hideProgressBar();
	
	var images = [];
	thumbnailsList = [];
	
	$( "category", categoryResourceData).children().each( function(i, data){ images.push( $(this) ) } );
	
	var cumulativeWidth = 0;
	var imagesCount = images.length;
	var imagesAdd = 0;
	var defaultElement = null;
	
	jThumbnailsSelector.hide();
	
	while( ( cumulativeWidth < thumbnailBarWidth ) || ( imagesAdd < imagesCount )  )
	{
		currentImage = images[ imagesAdd % imagesCount  ];
		
		var tagName = currentImage[0].tagName;
		
		var a = $('<a>')
			.attr({ id: ( tagName + currentImage.attr("id")) , href:"#" })
			.addClass( 'thumbnail_' +  currentImage[0].tagName )
			.css( { left : ( imagesAdd*thumbnailWidth + "px" ) , opacity : thumbnailDefaultOpacity } )
			.click( onThumbnailClick )
			.mouseover( onThumbnailMouseOver )
			.mouseout( onThumbnailMouseOut )
			.mousedown( function(){ return false; } ); // disable image drag
	
		var resourceThumbnail = null; 
		
		if( ( tagName == "image" ) || ( tagName == "video" ) )
		{
			resourceThumbnail = $("<img>").attr({ 
				src: currentImage.attr("thumbnail"), 
				alt: currentImage.attr("alt") 
			});
		}
		else if( tagName == "text" )
		{
			resourceThumbnail = $("<span>").text( currentImage.attr("alt") );
		}
		
		a.append( resourceThumbnail );
		
		thumbnailsList.push( a );
		
		jThumbnailsSelector.append( a );
		
		a.data( 'resource', {
			src						: currentImage.attr("src"), 
			alt						: currentImage.attr("alt"), 
			thumbnail				: currentImage.attr("thumbnail"), 
			id						: currentImage.attr("id"),
			thumbnailListIndex		: imagesAdd % imagesCount,
			type					: tagName,
			isDefault				: !!currentImage.attr("default"),
			content					: currentImage.text()
		});		
		
		imagesAdd++;
		cumulativeWidth += thumbnailWidth;
		
		if( defaultPhotoId && ( defaultPhotoId == currentImage.attr("id") ) )
		{
			defaultElement = a;
		}
		else if( currentImage.attr("default") )
		{
			defaultElement = a;
		}		
		
		if( imagesCount == 1)
		{
			loadResourceByThumbnail( a[0] , true );
			return;
		}
		
	}
	
	jThumbnailsSelector.width( thumbnailsList.length*thumbnailWidth );
	
	// initial positioning
	/*
	for( var i = 0; i < thumbnailsList.length; i++)
	{
		thumbnailsList[i].css("left", i*thumbnailWidth + "px")
	}
	*/
	
	var wW = thumbnailsMaskWidth;
	
	// jThumbnailsSelector.css( "left", ( ( $(window).width() - jThumbnailsSelector.width() )/2 ) +"px" );
	jThumbnailsSelector.css( "left", ( ( wW - jThumbnailsSelector.width() )/2 ) +"px" );
	
	

	// animation on load  
	
	var currentList = $( "a" , jThumbnailsSelector );
	var center = Math.round( currentList.length / 2 );
	
	loadResourceByThumbnail( defaultElement ? defaultElement[0] :  currentList[ center ]  , true );

	
	// reinit list
	currentList = $( "a" , jThumbnailsSelector );
	center = Math.round( currentList.length / 2 );
	
	
	// show effects
	for( var i = 0; i < currentList.length; i++)
	{
		var delay = Math.min( 3000, 2000*Math.abs( ( center - i )/center ) );
		
		
		
		if( !$(currentList[i]).data("selected") )
		{
			$(currentList[i])
				.css( { opacity: 0 } )
				.delay( delay )
				.animate( { opacity: thumbnailDefaultOpacity } , 1000 );

		}
	}
	
	jImageNavigation.show();
	jThumbnailsSelector.show();
	
	startThumbnailScrolling();		
	
	
	
}

function startThumbnailScrolling()
{
	thumbnailScrollCurrentDelta = 0;
	
	thumbnailsMask
		.bind('mousemove', onThumbnailsBarMouseMove)
		.bind('mouseleave', onThumbnailsBarMouseLeave)
		.bind('mouseenter', onThumbnailsBarMouseEnter);	
	
	// animateCycle();
	
	
	if( thumbnailScrollIntervalHandler )
	{
		this.clearInterval( thumbnailScrollIntervalHandler );
	}	
	
	thumbnailScrollIntervalHandler = setInterval( onThumbnailScrollingIntervalTick, thumbnailScrollInterval );
}

function animateCycle()
{
	jThumbnailsSelector.animate( { left : "+=100px" } , 1000 , 'linear' , animateCycle );
}

function endThumbnailScrolling()
{
	thumbnailsMask
		.unbind('mousemove')
		.unbind('mouseleave')
		.unbind('mouseenter');
	
	if( thumbnailScrollIntervalHandler )
	{
		clearInterval( thumbnailScrollIntervalHandler );
		
		thumbnailScrollIntervalHandler = null;
	}
}

function onThumbnailsBarMouseLeave()
{
	if( thumbnailScrollIntervalHandler )
	{
		clearInterval( thumbnailScrollIntervalHandler );
		thumbnailScrollIntervalHandler = null;
	}
}

function onThumbnailsBarMouseEnter()
{
	if(! thumbnailScrollIntervalHandler)
	{
		thumbnailScrollIntervalHandler = setInterval( onThumbnailScrollingIntervalTick, thumbnailScrollInterval );
	}
}

function onThumbnailScrollingIntervalTick( )
{
	
	if( !thumbnailsDisableMouseScrolling )
	{
		// var deltaVal = parseFloat( jThumbnailsSelector.css("left") ) + thumbnailScrollCurrentDelta*thumbnailsScrollSpeedFactor;
		// jThumbnailsSelector.css( { left : deltaVal +"px"  });
		
		var currentLeft = parseFloat( jThumbnailsSelectorCssList.left );
		
		currentLeft = !!currentLeft ? currentLeft : 0;
		
		var deltaVal = currentLeft + thumbnailScrollCurrentDelta*thumbnailsScrollSpeedFactor;
		
		jThumbnailsSelectorCssList.left = deltaVal + "px";
		
		/*
		var leftRelativeValue = ((thumbnailScrollCurrentDelta>0)?"+=":"-=")+ Math.abs(thumbnailScrollCurrentDelta*thumbnailsScrollSpeedFactor)+"px";
		
		
		
		$( thumbnailsSelector )
	//		.stop( true, true)
			.animate( { left:  leftRelativeValue  } , thumbnailScrollInterval  );
		*/
	}
	
	if( Math.random() < 0.10 )
	{
		// reoder elements every tenth update approx
		reorderThumbnails();
	}
	
	
}

function onThumbnailsBarMouseMove(event)
{
	// var windowWidth = $(window).width()/2;
	
	var windowWidth = thumbnailsMaskWidth/2;
	
	var thumbnailsMaskOffset = thumbnailsMask.offset();
	
	thumbnailScrollCurrentDelta = ( windowWidth - ( event.pageX - thumbnailsMaskOffset.left ) ) / windowWidth;
	
	// console.log( event.pageX - thumbnailsMaskOffset.left );
	
	/*
	$( thumbnailsSelector )
		.stop( true, true )
		.animate( { left:  leftRelativeValue  } , 1000  );
	*/	
	
	// console.log( leftRelativeValue );

}



function reorderThumbnails()
{
	
	// var wW = $(window).width();
	
	var wW = thumbnailsMaskWidth;
	
	var tW = jThumbnailsSelector.width();
	var tLeft = parseFloat( jThumbnailsSelector.css("left") );
	
	var leftBorder = ( wW - tW )/2;
	var rightBorder = ( wW + tW ) /2;
	
	var thumbs = jThumbnailsSelector.children();
	var thumbsTotal = thumbs.length; 
	
	
	if( thumbs.length > 0 )
	{
		var i = 0;
		var movedElements = 0;
		
		while( ( i < thumbsTotal ) && ( parseFloat( thumbs[i].style.left ) + tLeft < leftBorder ) )
		{
			// move element to the end of list
			
			var e = $( thumbs[i] ).detach().css("left", ( parseFloat( jThumbnailsSelector.children(":last").css("left") ) + thumbnailWidth  ) +"px");

			jThumbnailsSelector.append( e );
			
			// $( thumbs[i] )
			
			movedElements++;
			i++;
		}
		
		if( movedElements == 0 )
		{
			var i = thumbsTotal - 1;
			
			while( (i >= 0) && ( parseFloat( thumbs[i].style.left ) + tLeft > rightBorder ) )
			{
				// move element to the end of list
				var e = $( thumbs[i] ).detach().css("left", ( parseFloat( jThumbnailsSelector.children(":first").css("left") ) - thumbnailWidth  ) +"px" );
				jThumbnailsSelector.prepend( e );
				i--;
			}		
		}
	}	
}

function centerOnElement( element, immediately )
{
	var tLeft = parseFloat( jThumbnailsSelector.css("left") );
	
	var currentElementPosition = ( parseFloat( element.style.left ) + thumbnailWidth/2 ) + tLeft;
	
	// var wW = $(window).width();
	var wW = thumbnailsMaskWidth;
	
	var currentCenterPosition = wW/2 ;
	
	var newLeft = tLeft + ( currentCenterPosition - currentElementPosition );
	 
	
	thumbnailsDisableMouseScrolling = true; 
	
	// console.log("CLICK ANIMATE FROM "+ tLeft +" TO " + newLeft);
	
	if( immediately )
	{
		jThumbnailsSelector.css("left", newLeft + "px" );
		
		reorderThumbnails();
		
		thumbnailsDisableMouseScrolling = false;
		
		
	}
	else
	{
		jThumbnailsSelector.stop(true, true);
		
		jThumbnailsSelector.animate( { left : newLeft }, 
		{ 
				'duration' 			: 1000, 
				'easing'			: 'easeInOutQuint', 
				'complete'			: function(){ thumbnailsDisableMouseScrolling = false; reorderThumbnails(); }
//				'step'				: function(){ console.log('LEFT ' + this.style.left ); }
		
		});		
			
	}
}

function onThumbnailClick()
{
	loadResourceByThumbnail(this);
	
	return false;	

}

function loadResourceByThumbnail( self, immediately )
{
	centerOnElement( self, !!immediately );
	
	$( "a" , jThumbnailsSelector ).data('selected', false ).css("opacity", thumbnailDefaultOpacity );
	
	$(self).data('selected' , true );
	
	$(self).stop(true, true).css( "opacity", 1 );
	
	jCurrentThumbnail = $(self);
	
	loadResource( self );
	
	
}

function loadResource( element )
{
	var resource = $(element).data("resource");
	

	
	if( resource )
	{
		if( resource.type == "image" )
		{
			unloadPreviousResource();
			
			var previous = jImagePlaceholderCurrent.children().detach();
			
			jImagePlaceholderPrevious.append( previous );
			
			previous.css("opacity", 1).stop(true, true).animate({ opacity: 0}, 300);
			
			var newItem = $("<img>")
				.attr({	alt : resource.alt, src : resource.src })
				.css({ opacity : 0 })
				.stop(true, true)
				.animate( { opacity:1 } , 600 );
			
			// jImagePlaceholderCurrent.append( newItem ).removeClass("page");
			jImagePlaceholderCurrent.append( newItem );
			
			if( resource.content )
			{
				var newText = $("<div>")
					.html( resource.content )				
					.attr( "class", "description" )
					.css( { opacity : 0 } )
					.stop(true, true)
					.animate( { opacity:1 } , 600 );		
				
				
				jImagePlaceholderCurrent.append( newText );

			}
			
			
		}
		else if( resource.type == "video" )
		{
			unloadPreviousResource();
			jImagePlaceholderCurrent.html( resource.content );
			
			// jImagePlaceholderCurrent.removeClass("page");
			
			var video = $("video", jImagePlaceholderCurrent ).VideoJS();
			
			if( video.length && video[0].player )
			{
				video[0].player.play();
			}
		}
		else if( resource.type == "text" )
		{
			unloadPreviousResource();
			loadPageWithText( resource.content );
		}
		
		
		if( onItemLoadedCallback )
		{
			onItemLoadedCallback( $(element).data("resource") );
		}		
		
	}
	else
	{
		return false;
	}
	
	// jImagePlaceholderCurrent = 
}

function pauseResource()
{
	if( jImagePlaceholderCurrent )
	{
		
		var video = $("video", jImagePlaceholderCurrent );
		if( video.length && video[0] && video[0].player )
		{
			detachedContent = jImagePlaceholderCurrent.detach();
			// video[0].player.pause();
		}
	}
	
}

function playResource()
{
	if( detachedContent )
	{
		$("#imagePlaceholder").prepend( detachedContent );
		
		detachedContent = null;
	}
}

function unloadPreviousResource()
{
	if( jImagePlaceholderPrevious )
	{
		var video = $("video", jImagePlaceholderPrevious );
		if( video.length && ( video[0] && video[0].player ) )
		{
			video[0].player.pause();
		}		
		
		jImagePlaceholderPrevious.html("");

		
	}
}

function onThumbnailMouseOver()
{
	if( !$(this).data("selected") )
	{
		$(this).stop(true).animate({ opacity: 1}, 200);
		// $(this).css("opacity", 1);
	}
}

function onThumbnailMouseOut()
{
	if( !$(this).data("selected") )
	{
		$(this).stop(true).animate({ opacity: thumbnailDefaultOpacity}, 200);
		// $(this).css("opacity", thumbnailDefaultOpacity);
	}
}

function onPreviousThumbnailClick()
{
	if( jCurrentThumbnail )
	{
		var count = thumbnailsList.length;
		var prev = jCurrentThumbnail.prev();
		
		loadResourceByThumbnail( prev[0] );
		
	}
	return false;
}

function onNextThumbnailClick()
{
	if( jCurrentThumbnail )
	{
		var count = thumbnailsList.length;
		var next = jCurrentThumbnail.next();
		
		loadResourceByThumbnail( next[0] );
		
	}
	return false;
}


function showCategory( id )
{
	
	
	
	var category = $( "#menuContainer #photoCategory"+id );
	
	if( category.length )
	{
		var parentsLi = category.parents("li");
		
		var parentUl = $( parentsLi[ parentsLi.length - 1 ] ).parent();
		
		for(var i = parentsLi.length-2; i >= 0; i-- )
		{
			var childUl = $( parentsLi[ i ] ).parent();
			
			var leftPosition = ( menuHorizontalPadding + parentUl.width() );
			
			
			// childUl.show().css("left", leftPosition +"px" );
			
			// childUl.stop( true, true).css( { left: parentUl.width() + "px", opacity : 0 , display : "block"  } );
			
			// childUl.animate( { left : ( leftPosition + "px" ) , opacity : 1 }, 1000 , 'easeInOutQuint' );
			childUl.css( { left : ( leftPosition + "px" ), opacity : 1, display : "block" } );
			
			parentUl = $( parentsLi[ i ] ).parent();
			
		}
		

		
		$("#menuContainer a.photoCategoryTitle").removeClass("selected");
		category.addClass("selected");		
		
		
	}
}