jQuery("document").ready(function() {
	
	if(jQuery(".middle_part_gradiant_bg1 .sitemap_top_box > p > img").length > 0)
	{
		// Create the container
		jQuery(".middle_part_gradiant_bg1 .sitemap_top_box").append("<div id='gallery_container'>");
		
		// Add the images to the container
		var num_images = 0;
		jQuery(".middle_part_gradiant_bg1 .sitemap_top_box > p > img").each(function() {
		
			num_images++;
			
			var src = jQuery(this).attr("src");
			var rel = jQuery(this).attr("rel");
			
			// Set the image source for the popup to the rel value if it has been set
			var bigSrc = src;
			if (rel != undefined) {
				bigSrc = rel;
			}
			
			var image = 
			jQuery("<img src='/image/resize/get?image_src="+ src +"&height=215&width=582' />")
			.attr("style", "float: left; margin-right: 10px; padding: 2px; max-width: 582px; width:582px; height:215px; margin-left:-2px; ")
			.attr("rel", num_images)
			.hide();
			
			
			jQuery("<a href='" + bigSrc + "'>")
			.append(image)
			.appendTo("#gallery_container");
			
			
			jQuery(this).remove();
			
		});
		jQuery(".middle_part_gradiant_bg1 .sitemap_top_box > p").remove();
		jQuery(".middle_part_gradiant_bg1 .sitemap_top_box").after("<div class='clear'>");
		
		
		jQuery("#gallery_container").append(
		'<div id="zoom" style="position: absolute; top: 4px; right: 25px; width: 16px; height: 16px;" href="javascript:void(0);" >'+
		'<img src="/skin/frontend/default/blank/images/megnifire.png" /></div>' + 
      	'<div class="clear"></div>');
		
		jQuery('.sitemap_top_box').append(
		'<div class="clear"></div>'+ 
		'<div id="image-nav-bar">'+
      	'	<div class="controls">'+
      	'		<div class="go-left">'+
      	'			<a href="javascript:void;">&nbsp;</a>'+
      	'		</div>'+
      	'		<div class="go-right">'+
      	'			<a href="javascript:void;">&nbsp;</a>'+
      	'		</div>'+
      	'	</div>'+
      	'	<div class="status">'+
      	'		<span class="status-current"> 1 </span>'+ 
      	'		<span class="status-text"> of </span>'+ 
      	'		<span class="status-total"> ' + num_images + ' </span>'+
      	'		<div class="status-divider"></div>'+
      	'	</div>'+
      	'</div>');
     	

		jQuery('#image-nav-bar .go-right > a').click(function(){
			if (jQuery("#gallery_container img.active").closest("a").next("a").find("img").length > 0) 
				var next_image = jQuery("#gallery_container img.active").closest("a").next("a").find("img");
			else 
				var next_image = jQuery("#gallery_container").find("img").eq(0);
			
			jQuery("#gallery_container img.active").fadeOut().removeClass("active");
			jQuery(next_image).fadeIn().addClass("active");
			
			// Update the current image number
			jQuery(".status-current").text(jQuery("img.active", jQuery("#gallery_container")).attr("rel"));
		});
		
		


		jQuery('#image-nav-bar .go-left > a').click(function ()
		{
			
			if (jQuery("#gallery_container img.active").closest("a").prev("a").find("img").length > 0) 
				var prev_image = jQuery("#gallery_container img.active").closest("a").prev("a").find("img");
			else 
				var prev_image = jQuery("#gallery_container").find("img").eq(num_images - 1);
			
			jQuery("#gallery_container img.active").fadeOut().removeClass("active");
			jQuery(prev_image).fadeIn().addClass("active");
			
			// Update the current image number
			jQuery(".status-current").text(jQuery("img.active", jQuery("#gallery_container")).attr("rel"));
		});

		var country = 'nl';
		
		jQuery('#gallery_container a').lightBox({
			imageBtnClose: '/js/jquery/lightbox/images/' + country + '/lightbox-btn-close.gif',
			imageBtnPrev: '/js/jquery/lightbox/images/' + country + '/lightbox-btn-prev.gif',
			imageBtnNext: '/js/jquery/lightbox/images/' + country + '/lightbox-btn-next.gif',
			txtImage: "image",
			txtOf: "van"
			});
			
		// Show the first image
		jQuery("#gallery_container").find("img").eq(0).addClass("active").fadeIn();
		
	}
	
});