/**
 * @author Christian
 */
$(document).ready(function(){
	
	setTimeout("fadeBg(0)", startTime);
	if (document.getElementById('images')) {
		
		// scrollable inside the box. Its API is assigned to the "images" variable
		var oldItem = 0;
		var currentItem = 0; 
		
		var images = $("#images").scrollable({
			size: 1,
			api: true,
			keyboard: true,
			onSeek: function() {
				return false;
			}
		});
		
	
		// enable tooltips for the images 
		$("#images img").tooltip({
			position: "bottom center",
			offset: [-75, -30],
			opacity: 0.8,
			effect: 'fade',
			
			// position tooltips relative to the parent scrollable 
			relative: true
		});
		
		
		$.tools.overlay.addEffect("myEffect", // load function 
			function(done){
				//this.getOverlay().slideDown(this.getConf().speed, done);
				this.getOverlay().animate({width: "390px"},800,"swing", function() {
					$('.nextPage').fadeIn();
					$('.prevPage').fadeIn();
					$('.close').fadeIn();
					done.call();
				});
			}, // close function 
			function(done){
				
			
				this.getOverlay().animate({width: "0px"},800,"swing", function() {
						done.call();
					});
				
				
		});
				
		var scrollables = $("#thumbnails").scrollable({
			size: 100,
			clickable: true,
			api: true
			
		});
		
		images.onBeforeSeek(function() {
			oldItem =images.getPageIndex();
			var childs = $("#thumbnails").children().children();
			$(childs[oldItem]).removeClass("active");
			
		});
		
		images.onSeek(function() {
			
			var childs = $("#thumbnails").children().children();
			currentItem = images.getPageIndex();
			if(currentItem != oldItem) $(childs[currentItem]).addClass("active");
			return false;
		});
			
		var items = scrollables.getItems();
		items.find("img").each(function(index){
			// thumbnail images trigger the overlay 
			var myOverlay = $(this).overlay({
				effect: 'myEffect',
				closeOnEsc: false,
				closeOnClick: true,
				target: '#box',
				left: 0,
				//expose: {maskId: 'mask'}, 
				/* 
			 when box is opened, scroll to correct position (in 0 seconds)
			 the "images" variable is defined below
			 */
			
				onBeforeLoad: function() {
					$('#images').fadeIn();
					$('#imagesOverlay').fadeIn();
				},
				onLoad: function(){
					images.seekTo(index, 0);
					$('#imagesOverlay').fadeOut();
					
					currentItem = scrollables.getClickIndex();
				},
				onBeforeClose: function() {
					$('.nextPage').fadeOut();
					$('.prevPage').fadeOut();
					$('.close').fadeOut();
					$('#images').fadeOut();
				},
				onClose: function(){
					var childs = $("#thumbnails").children().children();
					$(childs[images.getPageIndex()]).removeClass("active");
					
				},
				api: true
			})
			
		});
	}
	
});


function fadeBg(thePos) {
	var folder = '/wp-content/themes/kinderzimmer-berlin/';
	var oldDir = "";
	var oldImg = "";

	if (bgImages.length > 1) {
	
		
		
		nextPos = (thePos + 1) % bgImages.length;
		
		var oldCss = {
			'background-image': 'url('+ folder + 'images/' + bgImagesDir + '' + bgImages[thePos] + ')'
		};
		
		var newCss = {
			'display': 'block',
			'background-image': 'url('+ folder +'images/' + bgImagesDir + '' + bgImages[nextPos] + ')'
		};

		$('#old_bg').css(oldCss);
		$('#new_bg').css(newCss);
		/*
		 $.ajax({
		   type: "POST",
		   url: folder + "set_session.php",
		   data: "dir="+bgImagesDir+"&image=" + bgImages[nextPos]
		 });
		*/

		$('#old_bg').fadeOut(3000, function(){
			$('#old_bg').css(newCss);
			var timeoutTime = 8000;
			setTimeout("fadeBg("+nextPos+")", timeoutTime);
		});
	}			
}