$(document).ready(function() {
	onResize();
	
	$(window).bind("resize",function() {
		onResize();
	});
	
	$toLoad = $('#slideshow div:first');
	$toHide = null;
	$zIndex = 10;
	
	preloadImage();
	$timer = 1;
});

function preloadImage(){
	var src = $toLoad.attr('src');
	
	$imageLoaded = 0;
	var img = new Image();
	$(img)
	.load(function () {
		$imageLoaded = 1;
		checkImage();
	})
	.attr('src', src);
}

function checkImage(){
	if($timer == 1 && $imageLoaded == 1){
		startTimer();
		// volgende slide
		showImage();
	}
}

function startTimer(){
	$timer = 0;
	setTimeout("timerComplete()", 5000);
}
function timerComplete(){
	$timer = 1;
	checkImage();
}


function onResize() {
	var windowWidth = $(window).width();
	var windowHeight= $(window).height();
	
	if(windowWidth > 980){
		var leftW = Math.round((windowWidth)/100*22);
		var rightW = windowWidth - leftW;
	} else {
		var leftW = 215;
		var rightW = 765;
	}
	
	var left = leftW - 215;
	
	$(".sidebar").css("left", left);
	$(".content").css("left", leftW);
	$(".content").width(rightW);
	
	var bgLeft = leftW - 1000;
	$("body").css("background-position", bgLeft + "px 0px");
	
	
	$(".sidebar").height(windowHeight);
	$(".content").height(windowHeight);
}


function showImage() {
	// nieuwe activeren
	var toShow = $toLoad;
	
	var src = toShow.attr('src');
	toShow.css("background", 'url('+src+')');
	$zIndex++;
	toShow.css('z-index', $zIndex);
	toShow.css('display', 'block');
	toShow.css('opacity', 0);
	
    toShow.css({opacity: 0.0})
        .animate({opacity: 1}, 750, function() {
        	
			// eventuele oude desactiveren
			if($toHide != null){
				$toHide.css('display', 'none');
				//$toHide.css('z-index', 8);
				$toHide.css('opacity', 0);
			}
			$toHide = toShow;
        });
	
	// next preload
	$toLoad =  toShow.next().length ? toShow.next() : $('#slideshow div:first');
	preloadImage();
	
}