$(document).ready(function (){
	function expand(container)
	{
		if (container.hasClass('expanded'))
			return;
		if (container.parent().find('li.expanded').get(0))
		{
			unexpand(container.parent().find('li.expanded'));
		}
		container.addClass('expanded');
		//------------------
		var node = container;
		var d = container.parent().parent().width()/2;
		while (node.get(0))
		{
			d-=node.width();
			node = node.prev('li');
		}

		var img_cont = container.find('div.photo');
		if (container.find('div.cont img').get(0))
		{
			img_cont.show();
		}
		else
		{
			var img= $('<img />');
			var href=container.find('a.tmbs').attr('href');
			if(href)
			{
				img.attr('src', href).css({cursor:'pointer'});
				var url = container.find('a.more_about').attr('href');
				img.click(function(){location.href=url});
				img_cont.find('div.cont').append(img);
				img_cont.show();
				if (container.find('a.prev').get(0))
				{
					container.find('a.prev').click(function()
					{
						if (!container.prev('li').get(0))
							return;
						unexpand(container);
						expand(container.prev('li'));
						position=position+container.find('a.tmbs').width();//+16;
						$("ul.previews").css({left:position+"px"});
					});
				}
				if (container.find('a.next').get(0))
				{
					container.find('a.next').click(function()
					{
						if (!container.next('li').get(0))
							return;
						position = position-container.find('a.tmbs').width();//-16;
						$("ul.previews").css({left:position+"px"});
						unexpand(container);
						expand(container.next('li'));
					});
				}
			}
		}
		container.find('a.tmbs').hide();
	}

	function unexpand(container)
	{
		container.removeClass('expanded');
		container.find('a.tmbs').css({display:'block'});
		container.find("div.photo").css({display:'none'});
	}

	$("a.tmbs").click(function(event){
		var current = $('li.expanded');
		var new_current = $(this).parent();

		if(new_current.position().left < current.position().left)
		{
			position = $("ul.previews").position().left - new_current.position().left + current.position().left;
			$("ul.previews").css({left:position+"px"});
		}

		unexpand(current);
		expand(new_current);
		
		if(new_current.position().left > current.position().left)
		{
			position = $("ul.previews").position().left - new_current.position().left + current.position().left;
			$("ul.previews").css({left:position+"px"});
		}
		return false;
	})

	var position=$(document).width()/2-217;
	$("ul.previews").css({left:position+"px "});
	expand($('ul.previews li:first').find('a.tmbs').parent());
});
