// The current galley we are browsing, when having several galleries on the same page.
currentGalleryId = null;

function showPicture (pictureNumber) {
	jQuery("object").css("visibility", "hidden"); 
	jQuery("embed").css("visibility", "hidden"); 
	currentIndex = pictureNumber;
	// We hide next button when we reach the end of coolboxGallery
	if(pictureNumber == imgSources[currentGalleryId].length - 1) {
		$("#gallery_next_bt").css("visibility", "hidden");
	} else {
		$("#gallery_next_bt").css("visibility", "visible");
	}
	
	// We hide prev button when we reach the begin of coolboxGallery
	if(pictureNumber == 1) {
		$("#gallery_prev_bt").css("visibility", "hidden");
	} else {
		$("#gallery_prev_bt").css("visibility", "visible");
	}
	// We set the transparent dark background */
	jQuery(document).height();
	jQuery(document).width();
	jQuery("#opaque_bg").css("height", jQuery(document).height());
	jQuery("#opaque_bg").css("width", jQuery(document).width());
	jQuery("#opaque_bg").css("visibility", "visible");
	jQuery("#opaque_bg").css("z-index", 1000);
	jQuery("#opaque_bg").css("opacity", 0.60);
	
	/* We clean the previous image then add the loader image */
	$("#gallery_img").html("");
	$("#gallery_img").addClass("gallery_loader");
	
	/* We show the image container if not yet visible. */
	if($("#gallery_img_container").css("visibility") == "hidden")
	{
		g_top = parseInt($(document).scrollTop()) + 10;
		g_left = (parseInt($(window).width()) - parseInt($("#gallery_img_container").css("width"))) / 2;
		$("#gallery_img_container").css("top", g_top);
		$("#gallery_img_container").css("left", g_left);
		
		$("#gallery_img_container").css("visibility", "visible");		
	}
	/* the image src to load */
	img_to_load = imgSources[currentGalleryId][pictureNumber];
	//jQuery("#coolBoxImg-" + pictureNumber).attr('href');
	var img = new Image();
	
	// wrap our new image in jQuery, then:
	$(img)
	// once the image has loaded, execute this code
	.load(function () {
	// set the image hidden by default    
	$(this).hide();
	// with the holding div #loader, apply:
	$('#gallery_img')
	// remove the loading class (so no background spinner), 
	.removeClass('gallery_loader')
	// then insert our image
	.html(this);
	
	// We set gallery_img_container, gallery_img, gallery_img_label & gallery_img_navigation
	// according the new picture width & height
	$("#gallery_img_container").css("width", $(this).width() + 20);
	$("#gallery_img").css("width", $(this).width());
	$("#gallery_img").css("height", $(this).height());

	$("#gallery_img_label").css("width", $(this).width() + 10);
	$("#gallery_img_navigation").css("width", $(this).width() + 10);
	
	gallery_img_container_h = $(this).height() + 20 
		+ $("#gallery_img_label").height() + $("#gallery_img_navigation").height();
	
	$("#gallery_img_container").css("height", gallery_img_container_h);
	$("#gallery_img_container").css("z-index", 1000);
	
	g_top = parseInt($(document).scrollTop()) + 10;
	g_left = (parseInt($(window).width()) - parseInt($("#gallery_img_container").css("width"))) / 2;
		
	$("#gallery_img_container").css("top", g_top);
	$("#gallery_img_container").css("left", g_left);
	$("#gallery_img_label").html(jQuery("#coolBoxImg-" + pictureNumber).attr('title'));
	
	// fade our image in to create a nice effect
	$(this).fadeIn();
	})

	// if there was an error loading the image, react accordingly
	.error(function () {
	// notify the user that the image could not be loaded
	alert("The image could not be loaded!")
	})
	
	// *finally*, set the src attribute of the new image to our image
	.attr('src', img_to_load);
			
}

function coolBoxInitialize() {

	// This is the close button behaviour of the image container
	$("#gallery_close_bt").click(function () { 
		jQuery("object").css("visibility", "visible"); 
		jQuery("embed").css("visibility", "visible");
		$("#gallery_img_container").css("visibility", "hidden");
		$("#gallery_prev_bt").css("visibility", "hidden");
		$("#gallery_next_bt").css("visibility", "hidden");
		jQuery("#opaque_bg").css("visibility", "hidden");
	});
	
	// This is the next button behaviour of the image container
	$("#gallery_next_bt").click(function () {
		currentIndex++;
		showPicture(currentIndex);
	});
	
	// This is the prev button behaviour of the image container
	$("#gallery_prev_bt").click(function () {
		currentIndex--;
		showPicture(currentIndex);
	});
	
	// When clicking a thumbnail, we set currentGalleryId, and pass the id of the image to show.
	$(".coolBoxImg").click(function () {
		id = $(this).attr('id').split('-');
		id = id[1];
		gallery = $(this).parents('.coolBoxGallery');
		currentGalleryId = jQuery(gallery).attr('id');

		showPicture(id);
		return false;
	});	
}