// FADING

function show(element) {
	document.getElementById(element).style.display = "block";
	}
	
function hide(element) {
	document.getElementById(element).style.display = "none";
	}

function setOpacity(element,value) {
	document.getElementById(element).style.opacity = value/100;
	document.getElementById(element).style.filter = 'alpha(opacity=' + value + ')';
	}
	
var fadeTimer = null;
function killFade() {
	if(fadeTimer != null)
		clearTimeout(fadeTimer);
	}
	
function fadeIn(element) {
	killFade();
	
	show(element);
	var currentOpacity = document.getElementById(element).style.opacity;
	currentOpacity *= 100;
	if(currentOpacity < 96) {
		currentOpacity += 5;
		setOpacity(element,currentOpacity);
		fadeTimer = setTimeout("fadeIn('"+element+"')",10);
		}
	}

function fadeOut(element) {
	killFade();
	
	var currentOpacity = document.getElementById(element).style.opacity;
	if(!currentOpacity)
		currentOpacity = 1;
	if(currentOpacity == 0)
		hide(element);
	currentOpacity *= 100;
	if(currentOpacity > 19) {
		currentOpacity -= 20;
		setOpacity(element,currentOpacity);
		fadeTimer = setTimeout("fadeOut('"+element+"')",10);
		}
	}
	
// MOVING (horizontally)

var moveTimer = null;
function killMove() {
	if(moveTimer != null)
		clearTimeout(moveTimer);
	}
	
function moveHor(element,x,speed) {
	killMove();
		
	var xstart = document.getElementById(element).offsetLeft;
	
	// left
	if (xstart > x) {
		xstart -= speed;
		document.getElementById(element).style.left = xstart+"px";
		document.getElementById(element).style.margin = 0;
		moveTimer = setTimeout("moveHor('"+element+"',"+x+","+speed+")",10);
		}
	// right
	else if (xstart < x) {
		xstart += speed;
		document.getElementById(element).style.left = xstart+"px";
		document.getElementById(element).style.margin = 0;
		moveTimer = setTimeout("moveHor('"+element+"',"+x+","+speed+")",10);
		}
	}
	
function moveThumbsLeft() {
	var xstart = document.getElementById('thumbs').offsetLeft;
	
	var thumbsWidth = document.getElementById('thumbs').offsetWidth;
	var docWidth = document.getElementById('all').offsetWidth;
	var way = docWidth-thumbsWidth-150;
	if (xstart > way)
		moveHor('thumbs',way,3);
	}

function moveThumbsRight() {
	var xstart = document.getElementById('thumbs').offsetLeft;
	
	if (xstart < 150)
		moveHor('thumbs',150,3);
	}
	
function moveThumbsCenter(x) {
	killMove();
	
	var xstart = document.getElementById('thumbs').offsetLeft;
	var distance = xstart-x;
	distance = Math.abs(distance);
	
	var speed = 20;
	if (distance < 111) {
		speed = 1;
		}
	
	// left
	if (xstart > x) {
		xstart -= speed;
		document.getElementById('thumbs').style.left = xstart+"px";
		moveTimer = setTimeout("moveThumbsCenter("+x+")",10);
		}
	// right
	else if (xstart < x) {
		xstart += speed;
		document.getElementById('thumbs').style.left = xstart+"px";
		moveTimer = setTimeout("moveThumbsCenter("+x+")",10);
		}
	}
	
// HANDLING PICTURES

bild = new Image();

function picChange(pic) {

	docHeight = document.getElementById('all').offsetHeight;
	docWidth = document.getElementById('all').offsetWidth;
	
	var picHeight = bild[pic].height;
	var picWidth  = bild[pic].width;
	var picRatio  = picWidth/picHeight;
	
	document.getElementById('slideshow').src = bild[pic].src;
	
	// fitting the pic and text
	var spaceY = docHeight-200;
	if(picHeight > spaceY) {
		picHeight = spaceY;
		picWidth = spaceY*picRatio;	
		}
	
	var spaceX = docWidth-100;	
	if(picWidth > spaceX) {
		picWidth = spaceX;
		picHeight = spaceX/picRatio;
		}

	picWidth = Math.round(picWidth);
	picHeight = Math.round(picHeight);
	
	document.getElementById('slideshow').style.height = picHeight+"px";	
	document.getElementById('slideshow').style.width = picWidth+"px";
	
	document.getElementById('text').style.height = picHeight+"px";	
	document.getElementById('text').style.width = picWidth+"px";
	
	// positioning the pic and text
		
		// top
		var picTop = spaceY-picHeight;
		picTop = picTop/2+50;
		picTop = Math.round(picTop);
		
		document.getElementById('slideshow').style.top = picTop+"px";
		document.getElementById('text').style.top = picTop+2+"px";
		
		// left
		var picLeft = docWidth-picWidth;
		picLeft = picLeft/2;
		picLeft = Math.round(picLeft);
		
		document.getElementById('slideshow').style.left = picLeft+"px";
		document.getElementById('text').style.left = picLeft+2+"px";
	}

function galChange(pic) {
	// changing borders
	var picId = "thumbs"+currentPic;
	document.getElementById(picId).style.border = "0px";
	document.getElementById(picId).style.padding = "2px";
	picId = "thumbs"+pic;
	document.getElementById(picId).style.border = "2px solid #fff";
	document.getElementById(picId).style.padding = "0px";

	// moving choice to center
	var thumbsLeft = docWidth/2+25-pic*50;
	thumbsLeft = Math.round(thumbsLeft);
	moveThumbsCenter(thumbsLeft);
	}

function commentChange(pic) {
	if (directory == "menschen") {
		var newText = document.createTextNode(comments[pic]);
		document.getElementById('comment').replaceChild(newText,document.getElementById('comment').firstChild);
		}
	else {
		var newText = document.createTextNode(" ");
		document.getElementById('comment').replaceChild(newText,document.getElementById('comment').firstChild);
		}
	}

function picSelect(pic) {
	picChange(pic);
	galChange(pic);
	commentChange(pic);
	currentPic = pic;
	}

function picLoadCheck(pic) {
	if(bild[pic].complete) {
		clearInterval(timerid);
		picSelect(pic);
		document.getElementById('loading').style.display = 'none';
		}
	}

var timerid = null;
function picLoad(pic) {
	clearInterval(timerid);
	document.getElementById('loading').style.display = 'block';
	
	bild[pic] = new Image();
	bild[pic].src = directory+"/"+pictures[pic];
	
	timerid = setInterval("picLoadCheck("+pic+")",333);
	}

function windowChange() {
	picChange(currentPic);
	
	var thumbsLeft = docWidth/2+25-currentPic*50;
	thumbsLeft = Math.round(thumbsLeft);
	document.getElementById('thumbs').style.left = thumbsLeft+"px";
	}

window.onresize = windowChange;

// BUTTONS

function buttonIn(element) {
	element.style.border = "2px solid #fff";
	element.style.margin = "1px";
	}

function buttonOut(element) {
	element.style.border = "0";
	element.style.margin = "3px";
	}