//properties
var galeryTimerLength = 5;			//how often should the timer run (like framerate)
var galeryFadeTime = 200;
var galerySlideTime = 300;
var minGalerySlideHeight = 73;
var maxGalerySlideHeight = 262;
var galeryMoveId = "galery";
var galeryFadeId = "galery-container";
var pointerFadeId = "pointer";

//variables
var galeryMove;
var galeryFade;
var galeryPointer;

var galeryTimer;						//the timer running the animation
var galeryMoving;						//is the animation busy?
var galeryStartTime;					//the exact time the animation starts
var galeryEndValue;
var prevAlbum = 0;
var curAlbum = 0;
var galerySlideDifference;

function changeGalery(_album) {
	if(galeryMoving) {
		//if it's already moving, do nothing
		return;	
	}
	//else, just continue and set moving to true
	galeryMoving = true;
	prevAlbum = curAlbum;
	curAlbum = _album;
	galeryMove = document.getElementById(galeryMoveId);
	galeryFade = document.getElementById(galeryFadeId);
	galeryPointer = document.getElementById(pointerFadeId);
	
	
	//fade the current galery out
	fadeGalery("out");
}

function fadeGalery(_direction) {
	if(_direction == "in") {
		galeryEndValue = 1;
	} else if(_direction == "out") {
		galeryEndValue = 0;
	} else {
		return;	
	}
	
	//record the starttime
	galeryStartTime = (new Date()).getTime();
	//set the timer. each tick it will call the onFadeTick function
	galeryTimer = setInterval("onFadeGaleryTick(" + "'" + _direction + "'" + ");", galeryTimerLength);
}

function onFadeGaleryTick(_direction) {
	var _elapsed = (new Date()).getTime() - galeryStartTime;
	
	if(_elapsed > galeryFadeTime) {
		//if the elapsed time exeeds the maximum fade time, stop the animation
		endFadeGalery(_direction);	
		return;
	}
	
	//calculate the amount the galery should fade this tick
   var _fade = _elapsed / galeryFadeTime;
	if(_direction == "out") {
		_fade = 1 - _fade;	
	}
	
	if(_fade == galeryEndValue) {
		endFadeGalery(_direction);	
		return;
	}
	
	//set the galery opacity
	galeryFade.style.opacity = _fade;
	//set the galery opacity in IE
	galeryFade.style.filter = "alpha(opacity = "  + (_fade*100) + ")";
	if(galeryPointer != null) {
		//set the pointer opacity. Else it will not fade because its display propertie is set to relative
		galeryPointer.style.filter = "alpha(opacity = "  + (_fade*100) + ")";
	}
	return;
}

function endFadeGalery(_direction) {
	//clear timer;
	clearInterval(galeryTimer);
	galeryTimer = null;
	//set the galery opacity to the end value. Just to make sure.
	galeryFade.style.opacity = galeryEndValue;
	galeryFade.style.filter = "alpha(opacity = "  + (galeryEndValue*100) + ")";
	if(galeryPointer != null) {
		//set the pointer opacity. Else it will not fade because its display property is set to relative
		galeryPointer.style.filter = "alpha(opacity = "  + (galeryEndValue*100) + ")";
	}
	
	//set moving to false
	if(_direction == "in") {
		//if fading in is complete, the animation is completed
		movingGaleryFinished();
	} else {
		//let's move the galery
		slideGalery();
	}
}

function slideGalery() {
	var _direction;
		
	if(!prevAlbum && curAlbum) {
		//if previous galery was closed and current galery isn't, expand
		galeryEndValue = maxGalerySlideHeight;
		_direction = "down";
	} else if(prevAlbum && !curAlbum){
		//if the previous galery was opened and the current galery isn't, collapse
		galeryEndValue = minGalerySlideHeight;
		_direction = "up";
	} else {
		//just end the slide without animating
		if(!curAlbum) {
			galeryEndValue = minGalerySlideHeight;
		} else {
			galeryEndValue = maxGalerySlideHeight;
		}
		endSlideGalery();	
		return;
	}
	
	galeryStartTime = (new Date()).getTime();
	galeryTimer = setInterval("onSlideGaleryTick(" + "'" + _direction + "'" + ");", galeryTimerLength);
}

function onSlideGaleryTick(_direction) {
	var _elapsed = (new Date()).getTime() - galeryStartTime;
	
	if(_elapsed > galerySlideTime) {
		//if the elapsed time exeeds the maximum fade time, stop the animation
		endSlideGalery();	
		return;
	}
	
	var _slide = Math.round(_elapsed / galerySlideTime * (maxGalerySlideHeight - minGalerySlideHeight))	
	if(_direction == "up") {
		//when moving up, subtract the animation from the max height
		_slide = maxGalerySlideHeight - _slide;
	} else {
		_slide += minGalerySlideHeight
	}
	
	galeryMove.style.height = _slide + "px";
	return;
}

function endSlideGalery() {
	
	//clear timer;
	clearInterval(galeryTimer);
	galeryTimer = null;
	
	galeryMove.style.height = galeryEndValue + "px";
	
	loadGalery();
}

function loadGalery(){
	var ajaxRequest = getRequest();  // The variable that makes Ajax possible!
	
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			// Get the data from the server's response
			
			galeryFade.innerHTML = ajaxRequest.responseText;	
			
			fadeGalery("in");
		}
	}
	
	ajaxRequest.open("GET", "include/galery.php?album=" + curAlbum, true);
	ajaxRequest.send(null); 
}

function movingGaleryFinished(){
//executed when all the moving animations are finished
	galeryMoving = false;
}



function trace(_trace) { 
	setTimeout(function(){throw _trace}, 0)
}