/** @file 
 * @brief JavaScript-Functions basic visual effects
 * @author Stefan Rohde
 */

var effectClasses = new Array;	
var effectClassesCounter = 0;

function moveBoxClass() {
	var currentValue = false;
	var iterations = 0;
	this.init = function() {
		if(!this.speed) {
			this.speed = 40;
		}
	}
	
	this.start = function() {
		this.move();
	}
	
	this.stop = function() {
	
	}
	
	this.move = function() {
		iterations++;
		
		if(this.type=='left' || this.type=='right') {
			currentValue = Math.round(this.box.style.left.replace(/px/, ""));
		} else {
			currentValue = Math.round(this.box.style.top.replace(/px/, ""));		
		}
		
		if(this.type=='right' || this.type=='down') {
			currentValue = currentValue + this.speed;
									
			if(currentValue > this.moveTo) {
				if(this.type == 'right') {
					this.box.style.left = this.moveTo + "px";	
				} else {
					this.box.style.top = this.moveTo + "px";					
				}
				
				if(this.call) {
					eval(this.call);
				}
				
				stopMoveBoxEffect(this.effectClassId);				
			} else {
				if(this.type == 'right') {
					this.box.style.left = currentValue + "px";	
				} else {
					this.box.style.top = currentValue + "px";					
				}
				
				setTimeout(this.name + '.move()', 30);			
			}			
		} else {
			currentValue = currentValue - this.speed;
					
			if(currentValue < this.moveTo) {
			
				if(this.type == 'left') {
					this.box.style.left = this.moveTo + "px";	
				} else {
					this.box.style.top = this.moveTo + "px";					
				}
				
				if(this.call) {
					eval(this.call);
				}
				
				stopMoveBoxEffect(this.effectClassId);
				
			} else {
				if(this.type == 'left') {
					this.box.style.left = currentValue + "px";	
				} else {
					this.box.style.top = currentValue + "px";					
				}
				
				setTimeout(this.name + '.move()', 30);			
			}			
		}
	}
}

function changeBoxSizeClass() {
	var currentValue = false;
	var iterations = 0;
	this.init = function() {
		if(!this.speed) {
			this.speed = 25;
		}
	}
	
	this.start = function() {
		this.changeSize();
	}
	
	this.stop = function() {
	
	}
	
	this.changeSize = function() {
		iterations++;
		
		if(this.type=='increaseHeight' || this.type=='decreaseHeight') {
			currentValue = Math.round(this.box.style.height.replace(/px/, ""));
		} else {
			currentValue = Math.round(this.box.style.width.replace(/px/, ""));		
		}
		
		if(this.type=='increaseHeight' || this.type=='increaseWidth') {
			currentValue = currentValue + this.speed;
									
			if(currentValue > this.changeTo) {
				if(this.type == 'increaseHeight') {
					this.box.style.height = this.changeTo + "px";	
				} else {
					this.box.style.width = this.changeTo + "px";					
				}
				
				if(this.call) {
					eval(this.call);
				}
				
				stopChangeBoxSizeEffect(this.effectClassId);				
			} else {
				if(this.type == 'increaseHeight') {
					this.box.style.height = currentValue + "px";	
				} else {
					this.box.style.width = currentValue + "px";					
				}
				
				setTimeout(this.name + '.changeSize()', 30);			
			}			
		} else {
			currentValue = currentValue - this.speed;
					
			if(currentValue < this.changeTo) {
				if(this.type == 'decreaseHeight') {
					this.box.style.height = this.changeTo + "px";	
				} else {
					this.box.style.width = this.changeTo + "px";					
				}
				
				if(this.call) {
					eval(this.call);
				}
				
				stopChangeBoxSizeEffect(this.effectClassId);				
			} else {
				if(this.type == 'decreaseHeight') {
					this.box.style.height = currentValue + "px";	
				} else {
					this.box.style.width = currentValue + "px";					
				}
				
				setTimeout(this.name + '.changeSize()', 30);			
			}		
		}
	}
}

function startMoveBoxEffect(box, type, toValue, speed, call) {
	effectClasses[effectClassesCounter] = new moveBoxClass();
	effectClasses[effectClassesCounter].box = box;
	effectClasses[effectClassesCounter].type = type;
	effectClasses[effectClassesCounter].speed = speed;
	effectClasses[effectClassesCounter].moveTo = toValue;
	effectClasses[effectClassesCounter].name = 'effectClasses[' + effectClassesCounter + ']';
	effectClasses[effectClassesCounter].effectClassId = effectClassesCounter;
	effectClasses[effectClassesCounter].call = call;
	effectClasses[effectClassesCounter].init(); 
	effectClasses[effectClassesCounter].start();

	effectClassesCounter++;
}

function startChangeBoxSizeEffect(box, type, toValue, speed, call) {
	effectClasses[effectClassesCounter] = new changeBoxSizeClass();
	effectClasses[effectClassesCounter].box = box;
	effectClasses[effectClassesCounter].type = type;
	effectClasses[effectClassesCounter].speed = speed;
	effectClasses[effectClassesCounter].changeTo = toValue;
	effectClasses[effectClassesCounter].name = 'effectClasses[' + effectClassesCounter + ']';
	effectClasses[effectClassesCounter].effectClassId = effectClassesCounter;
	effectClasses[effectClassesCounter].call = call;
	effectClasses[effectClassesCounter].init(); 
	effectClasses[effectClassesCounter].start();

	effectClassesCounter++;
}

function stopMoveBoxEffect(effectClassId) {
	effectClasses[effectClassId] = null;
}

function stopChangeBoxSizeEffect(effectClassId) {
	effectClasses[effectClassId] = null;
}

function moveBoxRight (box, currentValue, newValue, call) {
	currentValue = currentValue + 100; // +15
	if(currentValue > newValue) {
		document.getElementById(box).style.left = newValue + "px";	
			
		if(call) {
			eval(call);
		}
				
	} else {
		document.getElementById(box).style.left = currentValue + "px";
		setTimeout('moveBoxRight ("' + box + '", ' + currentValue + ', ' + newValue + ', "' + call + '")',2);			
	}
}

function moveBoxLeft (box, currentValue, newValue, call) {
	currentValue = currentValue - 100; // -15
	if(currentValue < newValue) {
		document.getElementById(box).style.left = newValue + "px";	
		
		if(call) {
			eval(call);
		}
		
	} else {
		document.getElementById(box).style.left = currentValue + "px";
		setTimeout("moveBoxLeft ('" + box + "', " + currentValue + ", " + newValue + ", '" + call + "')",2);			
	}
}

function moveBoxUp (box, currentValue, newValue, call) {
	currentValue = currentValue - 40;
	if(currentValue < newValue) {
		document.getElementById(box).style.top = newValue + "px";	
		
		if(call) {
			eval(call);
		}
		
	} else {
		document.getElementById(box).style.top = currentValue + "px";
		setTimeout('moveBoxUp ("' + box + '", ' + currentValue + ', ' + newValue + ', "' + call + '")',3);			
	}
}

function moveBoxDown (box, currentValue, newValue, call) {
	currentValue = currentValue + 40;
	if(currentValue > newValue) {
		document.getElementById(box).style.top = newValue + "px";	
		
		if(call) {
			eval(call);
		}
		
	} else {
		document.getElementById(box).style.top = currentValue + "px";
		setTimeout('moveBoxDown ("' + box + '", ' + currentValue + ', ' + newValue + ', "' + call + '")',3);			
	}
}

function increaseBoxHeight (box, currentValue, newValue, call) {
	currentValue = currentValue + 25;
	if(currentValue > newValue) {
		document.getElementById(box).style.height =  newValue + "px";
		if(call) {
			eval(call);
		}
	} else {
		document.getElementById(box).style.height =  currentValue + "px";				
		setTimeout('increaseBoxHeight ("' + box + '", ' + currentValue + ', ' + newValue + ', "' + call + '")',3);
	}
}

function decreaseBoxHeight (box, currentValue, newValue, call) {
	currentValue = currentValue - 25;
	if(currentValue < newValue) {
		document.getElementById(box).style.height =  newValue + "px";
		if(call) {
			eval(call);
		}
	} else {
		document.getElementById(box).style.height =  currentValue + "px";				
		setTimeout('decreaseBoxHeight ("' + box + '", ' + currentValue + ', ' + newValue + ', "' + call + '")',3);
	}
}

function setBoxOpacity(box, value) {
	document.getElementById(box).style.opacity=value;
	
  	if(document.getElementById(box).style.opacity) {
  		document.getElementById(box).style.opacity = String(Number(value));
  	} else if(document.getElementById(box).style.MozOpacity) {
  		document.getElementById(box).style.MozOpacity = String(Number(value));
  	} else if(document.getElementById(box).style.KhtmlOpacity) {
  		document.getElementById(box).style.KhtmlOpacity = String(Number(value));
  	} else if(document.getElementById(box).style.filter) {
  		document.getElementById(box).style.filter = "alpha(opacity=" + Math.ceil(value * 100) + ")";
  	}	
}

function setBoxVisibility(box, value) {
  	document.getElementById(box).style.visibility=value;
}	

/**
 * Fades in a div-container
 * @param box string id of the div-container
 * @param value integer opacity value when the fade-in-process is about to be stopped
 * @param call string name of JS-Function that is called after the div-container is fully faded in   
 */ 
function fadeInBox(box, value, call) {
  	// Increases Opacity 
  	if(document.getElementById(box).style.opacity) {
  		document.getElementById(box).style.opacity = String(Number(document.getElementById(box).style.opacity) + 0.05);
		if(Number(document.getElementById(box).style.opacity) >= value) {
			// Clear interval, when Div-Container is completely faded out  
			window.clearInterval(fadeOutInterval);
		    // Execute given Function (eval)
		    eval(call);
		}
  	} else if(document.getElementById(box).style.MozOpacity) {
  		document.getElementById(box).style.MozOpacity = String(Number(document.getElementById(box).style.MozOpacity) + 0.05);
 		if(Number(document.getElementById(box).style.MozOpacity) >= value) {
			// Clear interval, when Div-Container is completely faded out  
			window.clearInterval(fadeOutInterval);
		    // Execute given Function (eval)
		    eval(call);
		} 		
  	} else if(document.getElementById(box).style.KhtmlOpacity) {
  		document.getElementById(box).style.KhtmlOpacity = String(Number(document.getElementById(box).style.KhtmlOpacity) + 0.05);
		if(Number(document.getElementById(box).style.KhtmlOpacity) >= value) {
			// Clear interval, when Div-Container is completely faded out  
			window.clearInterval(fadeOutInterval);
		    // Execute given Function (eval)
		    eval(call);
		}  		
  	} else if(document.getElementById(box).style.filter) {
  		document.getElementById(box).style.filter = "alpha(opacity=" + Math.ceil(value * 100) + ")";
		// Clear interval, when Div-Container is completely faded out  
		window.clearInterval(fadeOutInterval);
		// Execute given Function (eval)
		eval(call);  		
  	}
}

/**
 * Fades out a div-container
 * @param box string id of the div-container
 * @param value integer opacity value when the fade-out-process is about to be stopped
 * @param call string name of JS-Function that is called after the div-container is fully faded out   
 */ 
function fadeOutBox(box, value, call) {
  	// Decrease Opacity 
  	if(document.getElementById(box).style.opacity) {
  		document.getElementById(box).style.opacity = String(Number(document.getElementById(box).style.opacity) - 0.05);
		if(Number(document.getElementById(box).style.opacity) <= value) {
			// Clear interval, when Div-Container is completely faded out  
			window.clearInterval(fadeOutInterval);
		    // Execute given Function (eval)
		    eval(call);
		}
  	} else if(document.getElementById(box).style.MozOpacity) {
  		document.getElementById(box).style.MozOpacity = String(Number(document.getElementById(box).style.MozOpacity) - 0.05);
 		if(Number(document.getElementById(box).style.MozOpacity) <= value) {
			// Clear interval, when Div-Container is completely faded out  
			window.clearInterval(fadeOutInterval);
		    // Execute given Function (eval)
		    eval(call);
		} 		
  	} else if(document.getElementById(box).style.KhtmlOpacity) {
  		document.getElementById(box).style.KhtmlOpacity = String(Number(document.getElementById(box).style.KhtmlOpacity) - 0.05);
		if(Number(document.getElementById(box).style.KhtmlOpacity) <= value) {
			// Clear interval, when Div-Container is completely faded out  
			window.clearInterval(fadeOutInterval);
		    // Execute given Function (eval)
		    eval(call);
		}  		
  	} else if(document.getElementById(box).style.filter) {
  		document.getElementById(box).style.filter = "alpha(opacity=" + Math.ceil(value * 100) + ")";
		// Clear interval, when Div-Container is completely faded out  
		window.clearInterval(fadeOutInterval);
		// Execute given Function (eval)
		eval(call);  		
  	}
}

/**
 * Positions a div-container on a certain position on screen
 * @param box string id of the div-container
 * @param top integer top-value of the position
 * @param left integer left-value of the position
 */ 
function position_box(box, top, left) {
  // Set Top-Style-Values
  document.getElementById(box).style.top = top + 'px';
  // Set left-Style-Values
  document.getElementById(box).style.left = left + 'px';            
}

/**
 * positions a box on the screen
 * position-values are given in percent 
 * @param box string-id of the specific box
 * @param top top value in percent
 * @param left left value in percent
*/ 
function position_box_percent(box, top, left) {
  // Positions a given Div-Container (Box) to given Coordinates (top, left)
  // Set Top-Style-Values
  document.getElementById(box).style.top = top + '%';
  // Set left-Style-Values
  document.getElementById(box).style.left = left + '%';            
}

/**
 * positions a box on the screen and lets choose if position is valued with pixels or percentage
 * @param box string-id of the specific box
 * @param top top value
 * @param left left value
*/ 
function position_box_choose(box, top, left) {
  // Set Top-Style-Values
  document.getElementById(box).style.top = top;
  // Set left-Style-Values
  document.getElementById(box).style.left = left;            
}