// JavaScript Document

	function showPicture (pictureNumber) {

		currentIndex = pictureNumber;
		// We feed coolboxGallery array from index 1, so real length is length - 1
		// We hide next button when we reach the end of coolboxGallery
		if(pictureNumber == coolboxGallery.length - 1) {
			$("#gallery_next_bt").css("display", "none");
		} else {
			$("#gallery_next_bt").css("display", "block");
		}

		// We feed coolboxGallery array from index 1, so start index is 1
		// We hide prev button when we reach the begin of coolboxGallery
		if(pictureNumber == 1) {
			$("#gallery_prev_bt").css("display", "none");
		} else {
			$("#gallery_prev_bt").css("display", "block");
		}
		// 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");
		
		/* First call to this function */
		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 = jQuery("#coolbox-gallery_" + 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("#coolbox-gallery_" + 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);
				
	}
	
// close button
$(function () {
	coolboxGallery = new Array();
	g_index = 1;
	currentIndex = 1;
	jQuery('.coolbox').each(function() {
    	coolboxGallery[g_index] = $(this).attr("href");
		g_index++;
	});
	
	$("#gallery_close_bt").click(function () { 
		$("#gallery_img_container").css("visibility", "hidden");
		jQuery("#opaque_bg").css("visibility", "hidden");
	});
	
	$("#gallery_next_bt").click(function () {


		currentIndex++;
		showPicture(currentIndex);
	});
	
	$("#gallery_prev_bt").click(function () {
		currentIndex--;
		showPicture(currentIndex);
	});
	
	$(".coolbox").click(function () {
		id = $(this).attr('id').split('_');
		id = id[1];
		showPicture(id);
		return false;
	});
	
});