layout = function(){
	
	width = 1024;
	height = 768;
	marginLeft = -15;
	marginTop = -15;
	
	windowWidth = $(window).width();
	windowHeight = $(window).height();
	
	
	html = $("html")
	topDiv = $("#top");
	bottomDiv = $("#bottom");
	leftDiv = $("#left");
	rightDiv = $("#right");
	
	// calculate the size of window which is to much
	hd = (Math.ceil((windowHeight - height)/2));
	wd = (Math.ceil((windowWidth - width)/2));
	
	if (windowWidth <= width) {
		wd = 0;
	}
	
	if (windowHeight <= height) {
		hd = 0;
	}
	
	// calculat the div positions and sizes
	topDivTopPos = marginTop
	topDivLeftPos = wd;
	topDivWidth = width;
	topDivHeight = hd - marginTop;
	
	bottomDivTopPos = topDivTopPos + height + topDivHeight
	bottomDivLeftPos = topDivLeftPos;
	bottomDivWidth = topDivWidth;
	bottomDivHeight = hd;
	
	leftDivTopPos = topDivTopPos + topDivHeight
	leftDivLeftPos = marginLeft;
	leftDivWidth = wd - marginLeft;
	leftDivHeight = height;
	
	rightDivTopPos = leftDivTopPos
	rightDivLeftPos = leftDivLeftPos + width + leftDivWidth;
	rightDivWidth = leftDivWidth;
	rightDivHeight = leftDivHeight;
	
	centerDivTopPos = leftDivTopPos
	centerDivLeftPos = topDivLeftPos;
	centerDivWidth = width;
	centerDivHeight = height;
	
	if (windowWidth <= width) {
		html.css("overflow-x", "auto");
		leftDivWidth = 0;
		leftDivHeight = 0;
		rightDivWidht = 0;
		rightDivHeight = 0;
	} else {
		html.css("overflow-x", "hidden");
	}
	
	if (windowHeight <= height) {
		html.css("overflow-y", "auto");
		topDivWidth = 0;
		topDivHeight = 0;
		bottomDivWidht = 0;
		bottomDivHeight = 0;
		
	} else {
		html.css("overflow-y", "hidden");
	}
	
	loadDiv = $("#loading");
	loadDiv.css("width", windowWidth + "px");
	loadDiv.css("height", windowHeight + "px");
	
	impressumDiv = $("#impressum");
	impressumDiv.css("width", windowWidth + "px");
	impressumDiv.css("height", windowHeight + "px");
	
	centerDiv = $("#content");
	
	centerDiv.css({top: centerDivTopPos + "px", left: centerDivLeftPos + "px" , width: centerDivWidth + "px", height: centerDivHeight + "px"});
	rightDiv.css({top: rightDivTopPos + "px", left: rightDivLeftPos + "px" , width: rightDivWidth + "px", height: rightDivHeight + "px"});
	leftDiv.css({top: leftDivTopPos + "px", left: leftDivLeftPos + "px" , width: leftDivWidth + "px", height: leftDivHeight + "px"});
	bottomDiv.css({top: bottomDivTopPos + "px", left: bottomDivLeftPos + "px" , width: bottomDivWidth + "px", height: bottomDivHeight + "px"});
	topDiv.css({top: topDivTopPos + "px", left: topDivLeftPos + "px" , width: topDivWidth + "px", height: topDivHeight + "px"});
	
}

isSliding = false;

slide = function(direction) {
	if (isSliding)
		return;
	isSliding = true;
	steps = 4;
	viewportDiv = $("#work_viewport");
	sliderDiv = $("#work_slider");
	holderDiv = $(".work_holder");
	viewportWidth = parseInt(viewportDiv.css("width"));
	sliderWidth = parseInt(sliderDiv.css("width"));
	movement = parseInt(holderDiv.css("width"))* steps;
	marginLeft = parseInt(sliderDiv.css("margin-left"));
	newMarginLeft = marginLeft + (movement * direction);
	
	
	maxMarginLeft = 0;
	minMarginLeft = viewportWidth - sliderWidth;
	
	if (newMarginLeft > maxMarginLeft) {
		newMarginLeft = maxMarginLeft;
	}
	
	if (newMarginLeft < minMarginLeft) {
		newMarginLeft = minMarginLeft;
	}
	sliderDiv.animate({
		marginLeft: newMarginLeft + "px"
	}, 1000, "linear", function(){isSliding = false;});

}

fadeContainerIn = function() {
	cont = $(".container");
	cont.fadeIn(1000);
}

showImpressum = function() {
 	impressumDiv = $("#impressum");
 	impressumDiv.show();
}

hideImpressum = function() {
	impressumDiv = $("#impressum");
 	impressumDiv.hide(1000);
}

doOnLoad = function() {
	loadDiv = $("#loading");
	loadDiv.fadeOut(500);
	fadeContainerIn();
}

init = function() {
	$.fn.lightbox();
	impressumDiv = $("#impressum");
	impressumDiv.hide();
	cont = $(".container");
	cont.hide();
	layout();
}


$(window).load(function() {
	doOnLoad();
});

$(document).ready(function(){
	init();
});

$(window).resize(function(){
	layout();
});