var home_status = 0;
//home_status == 0: no hover preview and no full screen image
//home_status == 1: displaying hover preview
//home_status == 2: displaying full screen image
//home_status == 3: loading full screen image

var home_current_image = 0;
var home_left = false;
var home_right = false;
var home_timer;
jQuery(document).ready(function($) {
	//return if not on "album_contents" page
	if (($('#preview')).length == 0)
		return;
	
	//prepare hover preview
	$('img.manipulate_images').hover(function(e) {
		if (home_status != 0) //only execute if no hover preview and no full screen image
			return;
		home_status = 1;
		
		//update hover box
		var x = $(this).parent().children('img.hidden').first();
		$('#preview img').attr('src', x.attr('src'));
		var text = $(this).parent().children('p').html();
		$('#preview pre.title_name').html(text);
		
		//position hover box
		var offsetX = 8;
		var offsetY = 11 - 6; //#preview border-top + padding-top == 11 && thumbnail image has padding-top + border-top == 6
		var width = $('#preview').outerWidth();
		var height = $('#preview').outerHeight();
		var window_width = $(window).width();
		var window_height = $(window).height();
		var obj = $(this).offset();
		
		//horizontal positioning
		if (obj.left - window.pageXOffset > window_width * 0.49) //display hover box on left side if image is on right side of page
			//0.49 ensures that if the left image is barely past the middle of the page then the hover box will be displayed to the left of the image
			$('#preview').css('left', obj.left - offsetX - width); //display preview to left of image
		else
			$('#preview').css('left', obj.left + offsetX + $(this).outerWidth()); //display preview to right of image
		
		//vertical positioning
		if (obj.top - offsetY + height > window.pageYOffset + window_height)
			$('#preview').css('top', window.pageYOffset + window_height - height);
		else if (obj.top - window.pageYOffset - offsetY < 0)
			$('#preview').css('top', window.pageYOffset); //align top border of #preview with top of window
		else
			$('#preview').css('top', obj.top - offsetY); //display preview normally
		
		//show hover box
        $('#preview').css('opacity', 0.0);
        $('#preview').animate({ 'opacity': 1.0 }, 150);
		$('#preview').show();
	}, function(e) {
		//remove hover box
		if (home_status > 1) //don't clear home_status if full screen image is being displayed
			return;
		$('#preview').hide();
		home_status = 0;
	});
	
	
	//hide lightbox on clicking background
	$('#lightbox_background').click(function(e) {
		if (home_status == 3)
			return;
		home_status = 0;
		$('.lightbox').hide();
	});
	
	//traverse images with lightbox
	$('#left_lightbox_arrow').click(function(e) {
		//set next image
		if (home_status != 2 || !home_left)
			return;
		--home_current_image;
		get_lightbox_image();
	});
	$('#right_lightbox_arrow').click(function(e) {
		//set next image
		if (home_status != 2 || !home_right)
			return;
		++home_current_image;
		get_lightbox_image();
	});
	
	//prepare lightbox image
	$('img.manipulate_images').click(function(e) {
		//display lightbox on click
		if (home_status >= 2)
			return;
		home_status = 2;
		$('#preview').hide();
		$('#lightbox_background').show(); //display background
		//get image offset
		var on_this_row = ($(this).parent().prevAll('div.album_content_images')).length;
		var number_of_prev_rows = ($(this).parent().parent().prevAll('div.album_content_frame')).length;
		home_current_image = number_of_prev_rows * 6 + on_this_row;
		
		get_lightbox_image();
	});
	$(window).resize(size_lightbox_image);
	$('#lightbox_background').height( $(document).height() );
	
	//do lightbox arrows
	$('#left_lightbox_arrow').hover(function(e) {
		if (home_status != 2 || !home_left)
			return;
		$('#left_lightbox_arrow_image').show();
	}, function(e) {
		if (home_status != 2 || !home_left)
			return;
		$('#left_lightbox_arrow_image').hide();
	});
	$('#right_lightbox_arrow').hover(function(e) {
		if (home_status != 2 || !home_right)
			return;
		$('#right_lightbox_arrow_image').show();
	}, function(e) {
		if (home_status != 2 || !home_right)
			return;
		$('#right_lightbox_arrow_image').hide();
	});
});

function get_lightbox_image() {
	//display "Loading..." box
	$('.lightbox').not('#lightbox_background').hide();
	var left = ($(window).width() - $("#message").outerWidth()) / 2;
	var top = ($(window).height() - $('#message').outerHeight()) / 2;
	$('#message').css({ 'left': left, 'top': top }).show();
		
	//process next image
	home_status = 3;
	var page_number = $('#data').html();
	var album_number = $('#album').html();
	$.ajax({ url: 'get_image.php',
           type:'POST',
           cache: false,
           data: { 
		   		   album: album_number,
	    		   page: page_number,
		   		   index_offset: home_current_image
			      },
           dataType: 'json',
           success: display_image,
           error: display_image
  });
}

function display_image(data, status)
{
	if (home_status != 3)
		return;
	if (!(data instanceof Object))
		data = new Object();
	if (!data.success || status != 'success')
	{
		//error getting image
		//return to main screen
		home_status = 0;
		home_left = false;
		home_right = false;
		$('#message').hide();
		$('.lightbox').hide();
		return;
	}
	
	//image retrieved successfully
	$('#lightbox_image').load(load_image).attr('src', data.src).css('max-height', 'none');	
	$('#lightbox_container td.title_name').html(data.title);
	home_left = data.left;
	home_right = data.right;
}

function load_image()
{	
	//unbind load-image handler
	$('#lightbox_image').unbind('load');
	
	//image fully loaded
	home_status = 2;
	$('#message').hide();
	$('.lightbox').not('.lightbox_arrow').not('#lightbox_container').show();
	size_lightbox_image();
	$('#lightbox_container').show();
	if (home_left)
		$('#left_lightbox_arrow').show();
	if (home_right)
		$('#right_lightbox_arrow').show();
}

function size_lightbox_image() {
	//resize lightbox image
	if (home_status != 2)
		return;
	
	//cap height
	maxheight = $(window).height() - 147; //remove extra space
	if (maxheight < 400)
		maxheight = 400;
	$('#lightbox_image').css('max-height', maxheight);
	
	//center image
	var container_width = $('#lightbox_container').outerWidth();
	var left = ($(window).width() - container_width) / 2;
	var container_height = $('#lightbox_container').outerHeight();
	var top = ($(window).height() - container_height) / 2;
	$('#lightbox_container').css({ 'left': left, 'top': top });
}