Event.observe(window, 'load', function()
{
	$('content_outer').observe('click', function(event)
	{
		hide_content_block();
	});
	
	$('close').observe('custom:click', function(event)
	{
		hide_content_block();
	});
	
	$('left').observe('custom:click', function(event)
	{
		scroll_to_page($('content').page - 1);
	});
	
	$('right').observe('custom:click', function(event)
	{
		scroll_to_page($('content').page + 1);
	});
});

function center_dots()
{
	$('pages').setStyle({left: $('content_controls').getWidth()/2 - $('pages').select('canvas').length*13/2 + 'px'});
}

function show_content_block(which)
{
	new Ajax.Request('/main/' + which,
  {
    method:'get',
    onSuccess: function(transport)
    {
      var response = transport.responseText || "no response text";
      $('content_inner').innerHTML = response;
      $('content_inner').select('canvas.ie_image_hack').each(function(canvas)
			{
				canvas.image_src = canvas.attributes.image_src.value;
				try
				{
					canvas.hover = canvas.attributes.hover.value;
				}
				catch(err){}
				try
				{
					canvas.link = canvas.attributes.link.value;
				}
				catch(err){}
				set_canvas_image(canvas, canvas.image_src, true);
			});
    
			$('content_background').setStyle({backgroundImage: 'url(/images/lightbox_backgrounds/' + Math.ceil(Math.random()*4) + '.png)'});
			
			$('content_block').setOpacity(0);
			$('content_block').show();
			
			loading_overlay_effect = new Effect.Opacity('content_block',
			{
				delay: 0,
				duration: 0.6,
				from: 0,
				to: 1,
				beforeStart: function()
				{
					$('left').setOpacity(0);
					$('right').setOpacity(0);
				},
				afterFinish: function()
				{
					$$('.updater').each(function(element)
					{
						element.setStyle({
							position: 'absolute',
							top: $(element.updates).positionedOffset().top + "px",
							height: $(element.updates).getHeight() + 'px',
							left: $(element.updates).positionedOffset().left + "px",
							width: $(element.updates).getWidth() + 'px',
							cursor: $(element.updates).getStyle('cursor')
						});
					});
					
					initialize_content_block();
					
					if(which == 'from_the_street')
						$('content_controls').addClassName('gallery');
				}
			});
    },
    onFailure: function(){ alert('Something went wrong while geting page: ' + which) }
  });
}

function hide_content_block()
{
	loading_overlay_effect = new Effect.Opacity('content_block',
	{
		delay: 0,
		duration: 0.6,
		from: 1,
		to: 0,
		afterFinish: function()
		{
			$('content_block').hide();
			$('content_controls').removeClassName('gallery');
		}
	});
}

function initialize_content_block()
{
	update_content_block();
	$('content').page = 0;
	rebuild_dots();
}

function update_content_block()
{
	if($('content').scrollLeft > 0)
		fade_in_element('left');
	else
		fade_out_element('left');
	
	if($('content_inner').getWidth() > $('content').getWidth() && $('content').scrollLeft < ($('content_inner').getWidth() - $('content').getWidth()))
		fade_in_element('right');
	else
		fade_out_element('right');
}

function rebuild_dots()
{
	$('pages').childElements().each(function(element){element.remove();});
	
	for(var i = 0; i < Math.ceil($('content_inner').getWidth()/$('content').getWidth()); i++)
	{
		var dot = $(document.createElement('canvas'));
		
		if(Math.ceil($('content').scrollLeft/$('content').getWidth()) == i)
		{
			dot.image_src = '/images/lightbox/current_page_dot-normal.png';
		}
		else
		{
			dot.image_src = '/images/lightbox/page_dot-normal.png';
			dot.hover = 'true';
		}
		dot.addClassName('ie_image_hack');
		dot.addClassName('page_dot');
		$('pages').appendChild(dot);
		dot = set_canvas_image(dot, dot.image_src, true);
		
		dot.page_number = i;
		
		if(Math.ceil($('content').scrollLeft/$('content').getWidth()) != i)
		{
			dot.observe('custom:click', function(event)
			{
				var element = $(Event.element(event));
				scroll_to_page(element.page_number);
			});
		}
	}
	
	center_dots();
}

function scroll_to_page(page)
{
	if(page >= 0 && page < Math.ceil($('content_inner').getWidth()/$('content').getWidth()))
	{
		new Effect.Scroll($('content'),
		{
			x: page * $('content').getWidth() - $('content').scrollLeft,
			duration: 0.5,
			queue: { position: 'end', scope: 'scroller' },
			afterFinish: function()
			{
				$('content').page = page;
				rebuild_dots();
				update_content_block();
			}
		});
	
		fade_out_element('pages', 0);
		fade_in_element('pages', 0.5);
	}
}