/*
 +-----------------------------------------------------------------------+
 | js/animation.js                                                       |
 |                                                                       |
 | This file is part of the Phusion Webengine                            |
 | Copyright (C) 2008-2009, Roman Gruber                                 |
 | Licensed under the GNU GPL                                            |
 |                                                                       |
 | PURPOSE:                                                              |
 |   Provides miscellaneous animation objects to switch between content  |
 |                                                                       |
 +-----------------------------------------------------------------------+
 | Author: Roman Gruber <roman@phusion.ch>                               |
 +-----------------------------------------------------------------------+
*/

var id;
var newvalue;
var proc;


//setopacity
//sets the opacity of the object with the given id to "value"
function setopacity(id, value){
	this.id = id;
	this.value = value;
	document.getElementById(id).style.opacity = value/10;
	document.getElementById(id).style.filter = 'alpha(opacity=' + value*10 + ')';
}

function getopacity(id){
	if(document.getElementById(id).style.opacity){
		var value = document.getElementById(id).style.opacity*10;
	}else if(document.getElementById(id).style.filter){
		var value = document.getElementById(id).style.filter;
	}else{
		var value = 10;
	}
	return value;
}


// move
// moves the object with the given id, to direction "direction"
// id: id of the object to be moved
// direction: up/down/left/right
// step: -n,n pixels
function move(id, direction, step){
	this.id = id;
	this.direction = direction;
	this.step = step;
	//alert("id:"+this.id+" direction:"+this.direction+" step:"+this.step);
	if(document.getElementById(this.id) != null){
		if(this.direction == "down" || this.direction == "up"){
			document.getElementById(this.id).style.top = document.getElementById(this.id).offsetTop + parseInt(this.step);
		}else if(this.direction == "left" || this.direction == "right"){
			document.getElementById(this.id).style.left = document.getElementById(this.id).offsetLeft + parseInt(this.step);
		}
	}
}


/* object scroll */
//calc_pix_to_scroll: calculates the number of pixels we want to scroll if we scroll in the given direction
//start: starts the autoscrolling
//changecontent: updates the html content to the new content
//onfinish: sets the code, that should be executed after finishing scrolling
function scroll(direction, oldvalue, newvalue, id, did, proc){
	this.direction = direction;
	this.oldvalue = oldvalue;
	this.newvalue = newvalue;
	this.id = id;
	this.did = did;
	this.proc = proc;
	this.placeholder = "";
	this.onfinish_function = "";
	this.scroll_speed = 45;	//milliseconds
	this.steps = 10;	//pixels
	this.oldheight = document.getElementById(this.id).offsetHeight;
	this.oldwidth = document.getElementById(this.id).offsetWidth;
}

scroll.prototype={
	calc_pix_to_scroll:function(){
		document.getElementById(this.id).innerHTML += "<div class='scroll_div_dummy' id='scroll_div_dummy'></div>";

		if(this.direction == "down"){ this.placeholder = this.oldvalue + this.newvalue; }
		else if(this.direction == "up"){ this.placeholder = this.newvalue + this.oldvalue; }
		else if(this.direction == "right"){ this.placeholder = "<table cellspacing='0' cellpadding='0'><tr><td><div>" + this.oldvalue + "</div></td><td><div>" + this.newvalue + "</div></td></tr></table>"; }
		else if(this.direction == "left"){ this.placeholder = "<table cellspacing='0' cellpadding='0'><tr><td><div>" + this.newvalue + "</div></td><td><div>" + this.oldvalue + "</div></td></tr></table>"; }
		
		document.getElementById("scroll_div_dummy").innerHTML=this.placeholder;
		this.divheight = document.getElementById("scroll_div_dummy").offsetHeight;
		this.divwidth = document.getElementById("scroll_div_dummy").offsetWidth;
		document.getElementById(this.id).innerHTML = "<div id='scroll_container'><div class='scroll_div_dummy' id='scroll_div_dummy'>" + this.placeholder + "</div></div>";
		
		document.getElementById("scroll_container").style.height = this.oldheight;
		document.getElementById("scroll_container").style.width = this.oldwidth;
		document.getElementById("scroll_container").style.overflow = "hidden";
		document.getElementById("scroll_container").style.position = "relative";

		document.getElementById("scroll_div_dummy").style.visibility = "visible";
		document.getElementById("scroll_div_dummy").style.height = this.oldheight;
		document.getElementById("scroll_div_dummy").style.width = this.oldwidth;
		
		if(this.direction == "down"){
			this.scrollpixels = this.divheight-this.oldheight;
			this.scrollpixels = document.getElementById('scroll_div_dummy').offsetTop - this.scrollpixels;
		}else if(this.direction == "up"){
			this.scrollpixels = this.divheight-this.oldheight;
			//this.puffer = document.getElementById('scroll_div_dummy').offsetTop; //0?
			this.scrollpixels = document.getElementById('scroll_div_dummy').offsetTop + this.scrollpixels;
			document.getElementById('scroll_div_dummy').style.top = document.getElementById('scroll_div_dummy').offsetTop - this.scrollpixels;
			this.scrollpixels = this.scrollpixels*-1;
		}else if(this.direction == "right"){
			this.scrollpixels = document.getElementById('scroll_div_dummy').offsetLeft-this.oldwidth;
		}else if(this.direction == "left"){
			this.scrollpixels = this.divwidth-this.oldwidth;
			this.puffer = document.getElementById('scroll_div_dummy').offsetLeft;
			document.getElementById('scroll_div_dummy').style.left = document.getElementById('scroll_div_dummy').offsetLeft - this.scrollpixels;
			this.scrollpixels = this.scrollpixels*-1;
		}
	},

	start:function(){
		thisscrollObj = this;
		this.numberofsteps = this.scrollpixels/this.steps*-1;
		//alert("nos:"+this.numberofsteps+" = "+this.scrollpixels+"/"+this.steps);
		this.numberofsteps = Math.round(this.numberofsteps);
		if(this.direction == "down"){
			for(this.i=0; this.i<this.numberofsteps; this.i++){
				setTimeout("move('scroll_div_dummy', 'down', '"+this.steps*-1+"')", this.scroll_speed*this.i);
			}
			setTimeout(function() { thisscrollObj.changecontent(); }, this.scroll_speed*this.i+1);
			setTimeout(function() { eval(thisscrollObj.onfinish_function); }, this.scroll_speed*this.i+1);
		}else if(this.direction == "up"){
			for(this.i=0; this.i<this.numberofsteps; this.i++){
				setTimeout("move('scroll_div_dummy', 'up', '"+this.steps+"')", this.scroll_speed*this.i);
			}
			setTimeout(function() { thisscrollObj.changecontent(); }, this.scroll_speed*this.i+1);
			setTimeout(function() { eval(thisscrollObj.onfinish_function); }, this.scroll_speed*this.i+1);
		}else if(this.direction == "right"){
			for(this.i=0; this.i<this.numberofsteps; this.i++){
				setTimeout("move('scroll_div_dummy', 'right', '"+this.steps*-1+"')", this.scroll_speed*this.i);
			}
			setTimeout(function() { thisscrollObj.changecontent(); }, this.scroll_speed*this.i+1);
			setTimeout(function() { eval(thisscrollObj.onfinish_function); }, this.scroll_speed*this.i+1);
		}else if(this.direction == "left"){
			for(this.i=0; this.i<this.numberofsteps; this.i++){
				setTimeout("move('scroll_div_dummy', 'left', '"+this.steps+"')", this.scroll_speed*this.i);
			}
			setTimeout(function() { thisscrollObj.changecontent(); }, this.scroll_speed*this.i+1);
			setTimeout(function() { eval(thisscrollObj.onfinish_function); }, this.scroll_speed*this.i+1);
		}
	},

	changecontent:function(){
		document.getElementById(this.id).innerHTML = this.newvalue;
	},

	onfinish:function(onfinish_function){
		this.onfinish_function = onfinish_function;
	}
}


/* object fade */
//out_in: starts the fadeing to full lucency, changes the content and fades back to no transparency. Thereafter it executes the onfinish_function
//colortolucency: starts the fadeing to full lucency Thereafter it executes the onfinish_function
//changecontent: changes the content to resonseText in the container with the id "id".
//onfinish: sets the code, that should be executed after finishing the fade
function fade(resonseText, id){
	this.resonseText = resonseText;
	this.id = id;
	thisfadeObj = this;
	this.fade_speed = 40;
	this.onfinish_function = "";
}

fade.prototype={
	out_in:function(){
		this.o = 10;
		this.y = 0;
		for(i=0;i<23;i++){
			if(i == 11){
				//change content
				setTimeout(function() { thisfadeObj.changecontent(); }, this.fade_speed*i);
			}else if(i > 11){
				//less op
				setTimeout("setopacity('"+this.id+"', "+this.y+")", this.fade_speed*i);
				this.y++;
			}else{
				//more op
				setTimeout("setopacity('"+this.id+"', "+this.o+")", this.fade_speed*i);
				this.o--;
			}
		}
		setTimeout(function() { eval(thisfadeObj.onfinish_function); }, this.fade_speed*(i+1));
	},

	out:function(){
		this.o = 10;
		for(i=0;i<11;i++){
			setTimeout("setopacity('"+this.id+"', "+this.o+")", this.fade_speed*i);
			this.o--;
		}
		setTimeout(function() { thisfadeObj.clearcontent(); }, this.fade_speed*(i+1));
		setTimeout(function() { eval(thisfadeObj.onfinish_function); }, this.fade_speed*(i+1));
		setTimeout("setopacity('"+this.id+"', 10)", this.fade_speed*(i+1));
	},

	colortolucency:function(){
		this.o = 10;
		this.y = 0;
		for(i=0;i<11;i++){
			//more op
			setTimeout("setopacity('"+this.id+"', "+this.o+")", this.fade_speed*i);
			this.o--;
		}
		setTimeout(function() { eval(thisfadeObj.onfinish_function); }, this.fade_speed*(i+1));
	},

	changecontent:function(){
		document.getElementById(this.id).innerHTML = this.resonseText;
	},

	clearcontent:function(){
		document.getElementById(this.id).innerHTML = "";
	},

	onfinish:function(onfinish_function){
		this.onfinish_function = onfinish_function;
	}
}


/* object banner_rotation */
//start: starts the rotation with the given rotation_speed until stop() is called
//startafterloading: preloads all images from the pics-array and shows progress in the container id. After loading it starts the rotation same like start()
//stop: stops the rotation and calls the onfinish_function
//next: initiates the animation to the next image in row
//add_pic: adds a picture to the pics array, this image is 	henceforward related to the rotation
//new_pic_array: replaces the pics-array with the given one
//onfinish: sets the code, that should be executed after finishing the rotation (when called stop())
function banner_rotation(id, pics){
	this.id = id;
	this.pics = pics;
	this.rotation_speed = 10000;
	this.fade_speed = 40;
	this.count = 0;
	this.onfinish_function = "";
	this.pics_loaded = new Array();
	this.running = 0;
	this.loading_id = "";
}

/* Prototype of banner_rotation class */
banner_rotation.prototype={
	start:function(){
		this.running = 1;
		this.next();
		thisrotObj = this;
		this.interval = setInterval(function() { thisrotObj.next(); }, this.rotation_speed);
	},

	startafterloading:function(){
		thisrotObj = this;
		this.imageObj = new Array();
		document.getElementById(thisrotObj.id).innerHTML = "<div id='banner_loading' class='banner_loading_div'><font style='color:#D6D6D6; display: table-cell; vertical-align: middle; text-align: center;'>Bilder werden geladen... (" + thisrotObj.pics_loaded.length + "/" + thisrotObj.pics.length + ")</font></div>";
		//preload banner images
		for(this.i=0; this.i<this.pics.length; this.i++){
			this.imageObj[this.i] = new Image();
			this.imageObj[this.i].src = this.pics[this.i];
			this.imageObj[this.i].onload=function(){
				thisrotObj.pics_loaded.push("dummy");
				document.getElementById(thisrotObj.id).innerHTML = "<div id='banner_loading' class='banner_loading_div'><font style='color:#D6D6D6; display: table-cell; vertical-align: middle; text-align: center;'>Bilder werden geladen... (" + thisrotObj.pics_loaded.length + "/" + thisrotObj.pics.length + ")</font></div>";
				if(thisrotObj.pics_loaded.length == thisrotObj.pics.length){
					this.fadeobj = new fade(null, "banner_loading");
					this.fadeobj.fade_speed = 60;
					this.fadeobj.colortolucency();
					thisrotObj.start();
					return;
				}
			}
		}
	},

	loadduringrotation:function(){
		this.running = 1;
		this.next_after_loading();
		thisrotObj = this;
		this.interval = setInterval(function() { thisrotObj.next_after_loading(); }, this.rotation_speed);
	},

	stop:function(){
		if(this.loading_id != ""){
			document.getElementById(this.loading_id).style.visibility = "hidden";
			document.getElementById(this.loading_id).innerHTML = "";
		}
		this.running = 0;
		clearInterval(this.interval);
		eval(this.onfinish_function);
	},

	stop_without_onfinish:function(){
		if(this.loading_id != ""){
			document.getElementById(this.loading_id).style.visibility = "hidden";
			document.getElementById(this.loading_id).innerHTML = "";
		}
		this.running = 0;
		clearInterval(this.interval);
	},

	loading_id_is:function(id){
		this.loading_id = id;
		setopacity(this.loading_id, 7);
	},

	next_after_loading:function(){
		thisrotObj = this;
		if(this.loading_id == ""){
			alert("Loading_id is empty");
		}
		//document.getElementById(this.loading_id).style.visibility = "visible";
		document.getElementById(this.loading_id).innerHTML = "<font style='color:#D6D6D6; display: table-cell; vertical-align: middle; text-align: center;'>Bild wird geladen...</font>";
		this.nextimageObj = new Image();
		this.nextimageObj.src = this.pics[this.count];
		if(this.nextimageObj.complete == true){
			thisrotObj.next();
			return;
		}else{
			this.nextimageObj.onload=function(){
				thisrotObj.next();
				return;
			}
		}
	},

	next:function(){
		if(this.loading_id != ""){
			//document.getElementById(this.loading_id).style.visibility = "hidden";
			document.getElementById(this.loading_id).innerHTML = "";
		}
		this.value = 9;
		this.o = 10;
		this.y = 0;
		this.a = 20;
		for(i=0;i<23;i++){
			if(i == 11){
				//change content
				setTimeout("document.getElementById('"+this.id+"').style.background = \"url(" + this.pics[this.count] + ")\";", this.fade_speed*i);
			}else if(i > 11){
				//less op
				setTimeout("setopacity('"+this.id+"', "+this.y+")", this.fade_speed*i);
				setTimeout("document.getElementById('"+this.id+"').style.backgroundPosition = \'" + this.a*2*-1 + "\' + ' 0';", this.fade_speed*i);
				this.y++;
				this.a--;
			}else{
				//more op
				setTimeout("setopacity('"+this.id+"', "+this.o+")", this.fade_speed*i);
				setTimeout("document.getElementById('"+this.id+"').style.backgroundPosition = \'" + this.o*2*-1 + "\' + ' 0';", this.fade_speed*i);
				this.o--;
			}
		}
		if(this.count < this.pics.length-1){
			this.count++;
		}else{
			this.count = 0;
		}
	},

	add_pic:function(picurl){
		this.pics.push(picurl);
	},

	new_pic_array:function(arr){
		this.pics = arr;
		this.count = 0;
	},

	reinit:function(id, pics){
		//first: clean the old location
		this.stop_without_onfinish();
		document.getElementById(this.id).style.background = "";
		document.getElementById(this.id).style.backgroundColor = "white";
		setTimeout("document.getElementById('"+this.id+"').style.background = '';", this.fade_speed*30);
		setTimeout("document.getElementById('"+this.id+"').style.backgroundColor = 'white';", this.fade_speed*30);

		this.id = id;
		this.pics = pics;
		this.count = 0;
		this.pics_loaded = new Array();
		this.running = 0;
		this.loading_id = "";
	},

	onfinish:function(onfinish_function){
		this.onfinish_function = onfinish_function;
	}
}

/* changes the banner-text with an animation (first initialisation) */
function change_banner_text_init(newtext){
	this.newtext = newtext;
	this.speed = 30;
	this.height = 35;
	this.y = 0;
	document.getElementById('banner_text_font').innerHTML = unescape(this.newtext);
	for(i=0;i<11;i++){
		this.e = this.height/10*this.y+1;
		setTimeout("document.getElementById('banner_text').style.height = \"" + this.e + "\";", this.speed*i);
		this.y++;
	}
}


/* changes the banner-text with an animation */
function change_banner_text(newtext, pre){
	this.pre = pre;
	this.newtext = newtext;
	this.speed = 30;
	this.height = 35;
	this.o = 10;
	this.y = 0;
	for(i=0;i<23;i++){
		if(i == 11){
			//change content
			if(this.pre != ""){
				setTimeout("document.getElementById('banner_text_font').innerHTML = \"" + this.pre + "&nbsp;<img src='img/icons/arrow_right.gif'>&nbsp;" + this.newtext + "\";", this.speed*i);
			}else{
				setTimeout("document.getElementById('banner_text_font').innerHTML = '" + this.newtext + "';", this.speed*i);
			}
		}else if(i > 11){
			//up
			this.e = this.height/10*this.y+1;
			setTimeout("document.getElementById('banner_text').style.height = \"" + this.e + "\";", this.speed*i);
			y++;
		}else{
			//down
			this.e = this.height/10*this.o+1;
			setTimeout("document.getElementById('banner_text').style.height = \"" + this.e + "\"; ", this.speed*i);
			this.o--;
		}
	}
}


/* object open_close */
//start: starts the opening- or the closeing-secquence
//stop: aborts a running opening- or closeing-secquence
//calc_pix_to_expand: calculates the number of pixels when the container is opened
//insertcontent: inserts the newvalue into the container
//cleancontent: emptys the container
//onfinish: sets the code, that should be executed after finishing the opening- or the closeing-secquence
//setmode: sets the mode to open or close; should be setted before the sequence starts; possible values: "open", "close"
function open_close(id, newvalue){
	this.id = id;
	this.newvalue = newvalue;
	thisocObj = this;
	this.timers = new Array();
	this.onfinish_function = "";
	this.motion_speed = 30;	//milliseconds
	this.steps = 5;	//pixels
	this.closed = "1px"; //workaround for IE-bug, 0px is not possible!?!?
	//find out if we have to open or to close the container
	if(document.getElementById(this.id).innerHTML == ""){
		//open
		this.mode = "open";
	}else{
		//close
		this.mode = "close";
	}
}

open_close.prototype={
	start:function(){
		document.getElementById(this.id).style.overflow = "hidden";
		if(this.mode == "open"){
			this.calc_pix_to_expand();

			this.numberofsteps = this.expandpixels/this.steps;
			this.numberofsteps = Math.round(this.numberofsteps);
			document.getElementById(this.id).style.height = this.closed;
			this.insertcontent();
			for(this.i=1;this.i<=this.numberofsteps;this.i++){
				this.height = this.i*this.steps;
				this.timers.push(setTimeout("document.getElementById('"+this.id+"').style.height = \"" + this.height + "\";", this.motion_speed*this.i));
			}
			this.timers.push(setTimeout("document.getElementById('"+this.id+"').style.height = \"" + this.expandpixels + "\";", this.motion_speed*(this.i+1)));
			this.timers.push(setTimeout(function() { eval(thisocObj.onfinish_function); }, this.motion_speed*(this.i+2)));
			this.timers.push(setTimeout("document.getElementById('"+this.id+"').style.overflow = 'visible';", this.motion_speed*(this.i+2)));
			this.timers.push(setTimeout("document.getElementById('"+this.id+"').style.height = '';", this.motion_speed*(this.i+2)));
		}else if(this.mode == "close"){
			this.numberofsteps = document.getElementById(this.id).offsetHeight/this.steps;
			this.numberofsteps = Math.round(this.numberofsteps);
			this.a = this.numberofsteps;
			for(this.i=1;this.i<=this.numberofsteps;this.i++){
				this.height = this.a*this.steps;
				this.timers.push(setTimeout("document.getElementById('"+this.id+"').style.height = \"" + this.height + "\";", this.motion_speed*this.i));
				this.a--;
			}
			this.timers.push(setTimeout("document.getElementById('"+this.id+"').style.height = '"+this.closed+"';", this.motion_speed*(this.i+1)));
			this.timers.push(setTimeout(function() { thisocObj.cleancontent(); }, this.motion_speed*(this.i+2)));
			this.timers.push(setTimeout(function() { eval(thisocObj.onfinish_function); }, this.motion_speed*(this.i+2)));

			this.div = document.createElement("div");
			this.div.innerHTML = this.newvalue;
			if(document.getElementById(this.id).innerHTML != this.div.innerHTML){
				this.mode = "open";
				this.timers.push(setTimeout(function() { eval(thisocObj.start()); }, this.motion_speed*(this.i+3)));
			}
		}
	},

	stop:function(){
		for(this.i=0;this.i<this.timers.length;this.i++){
			clearTimeout(this.timers[this.i]);
		}
	},

	open:function(){
		this.mode = "open";
		this.start();
	},

	close:function(){
		this.mode = "close";
		this.start();
	},

	calc_pix_to_expand:function(){
		this.div_dummy = document.createElement("div");	
		this.div_dummy.className = "scroll_div_dummy";
		this.div_dummy.id = "open_close_div_dummy";
		if(document.getElementById(this.id).offsetWidth != 0){
			this.div_dummy.style.width = document.getElementById(this.id).offsetWidth;
		}		
		this.div_dummy.innerHTML = this.newvalue;
		document.body.appendChild(this.div_dummy);
		this.expandpixels = document.getElementById('open_close_div_dummy').offsetHeight;
		document.body.removeChild(document.getElementById("open_close_div_dummy"));
	},

	insertcontent:function(){
		document.getElementById(this.id).innerHTML = this.newvalue;
	},

	cleancontent:function(){
		document.getElementById(this.id).innerHTML = "";
	},

	onfinish:function(onfinish_function){
		this.onfinish_function = onfinish_function;
	},

	setmode:function(mode){
		if(mode == "open"){
			this.mode = "open";
		}else if(mode == "close"){
			this.mode = "close";
		}
	}

}


function morph_init(newvalue, id){
	shared_content = newvalue;
	var speed = 30;
	oldheight = document.getElementById(id).offsetHeight;
	oldwidth = document.getElementById(id).offsetWidth;
	document.getElementById(id).style.overflow = "hidden";
	document.getElementById(id).style.height = oldheight;
	document.getElementById(id).style.width = oldwidth;
	document.getElementById(id).innerHTML += "<div class='scroll_div_dummy' id='scroll_div_dummy'></div>";
	document.getElementById("scroll_div_dummy").innerHTML=newvalue;
	newheight = document.getElementById("scroll_div_dummy").offsetHeight;
	newwidth = document.getElementById("scroll_div_dummy").offsetWidth;

//	document.getElementById(id).innerHTML=newvalue;
	diffheight = oldheight - newheight;
	diffwidth = oldwidth - newwidth;

	for(i=10;i>=1;i--){
		e = diffheight/10*i+newheight;
		o = diffwidth/10*i+newwidth;
		//alert(oldheight + " -> " + newheight + " -------- " + e + "/" + newheight);
		setTimeout("document.getElementById('" + id + "').style.height = " + e + ";", speed*i);
		setTimeout("document.getElementById('" + id + "').style.width = " + o + ";", speed*i);
	}
	//setTimeout("document.getElementById('" + id + "').style.width = newwidth;", speed*11);
//	setTimeout("document.getElementById('" + id + "').style.height = newheight;", speed*11);
	setTimeout("document.getElementById('" + id + "').style.overflow = '';", speed*11);
	//setTimeout("document.getElementById('" + id + "').innerHTML = shared_content;", speed*11);

}


/* ocswitch_str */
// Workaround function for nav_left
function ocswitch_str(id, str){
	this.id = id;
	this.str = str;
	this.list = document.getElementById(this.id).getElementsByTagName("li");
	for(i=0;i<this.list.length;i=i+2){
		this.content = this.list[i].getElementsByTagName("h2");
		if(this.content[0].childNodes[0].nodeValue == this.str){
			ocswitch(this.id, this.list[i])
		}
	}
}

/* object ocswitch */
//onfinish: sets the code, that should be executed after finishing the opening- or the closeing-secquence
//	parameters:
//		id:		the unique id of the ul-tag
function ocswitch(id, node){
	this.node = node;
	this.id = id;
	this.duration = 600; //milliseconds
	//this.motion_speed = 30;
	this.steps = 5;
	this.list = document.getElementById(this.id).getElementsByTagName("li");

	if(this.node == "init"){
		this.node = this.list[0];
	}

	this.cont = "";
	//alert(this.list.length);
	for (i=0; i<this.list.length; i++){
		if(this.list[i] == this.node){
			this.nextnode = this.list[i+1];
			this.nextnr = i+1;
			this.list[i].className = "ocswitch_li_title_active";
			//this.list[i].childNodes[0].className = "";
			//alert(this.list[i].innerHTML+"   ---------- "+this.node.innerHTML);
		}
	}
//	alert(this.nextnode.offsetHeight);
	this.div = this.nextnode.childNodes[0];
	
	if(this.div.offsetHeight <= 1){
		this.div.id = "oid_"+this.nextnr;
		this.div_id = "oid_"+this.nextnr;

		this.value = this.div.innerHTML;
		this.div_dummy = document.createElement("div");	
		this.div_dummy.className = "scroll_div_dummy";
		this.div_dummy.id = "ocswitch_div_dummy";
		this.div_dummy.style.width = document.getElementById(this.id).offsetWidth;
		this.div_dummy.innerHTML = this.value;
		document.body.appendChild(this.div_dummy);
		this.expandpixels = document.getElementById('ocswitch_div_dummy').offsetHeight;
		document.body.removeChild(document.getElementById("ocswitch_div_dummy"));
		this.div.innerHTML = this.value;

		this.numberofsteps = this.expandpixels/this.steps;
		this.numberofsteps = Math.round(this.numberofsteps);
		this.motion_speed = this.duration/this.numberofsteps;
		this.motion_speed = Math.round(this.motion_speed);
	

		for(this.i=1;this.i<=this.numberofsteps;this.i++){
			this.height = this.i*this.steps;
			setTimeout("document.getElementById('"+this.div_id+"').style.height = \"" + this.height + "\";", this.motion_speed*this.i);
		}
		setTimeout("document.getElementById('"+this.div_id+"').id = \"\"", this.motion_speed*this.i+1);
	}

	for (i=1; i<this.list.length; i=i+2){
		this.div = this.list[i].childNodes[0];

		if(this.div.offsetHeight > 1 && this.node != this.list[(i-1)]){
			this.list[(i-1)].className = "ocswitch_li_title";

			this.div.id = "cid_"+i;
			this.div_id = "cid_"+i;

			this.numberofsteps = this.div.offsetHeight/this.steps;
			this.numberofsteps = Math.round(this.numberofsteps);
			this.motion_speed = this.duration/this.numberofsteps;
			this.motion_speed = Math.round(this.motion_speed);

			this.a = this.numberofsteps;
			for(this.z=1;this.z<=this.numberofsteps;this.z++){
				this.height = this.a*this.steps;
				setTimeout("document.getElementById('"+this.div_id+"').style.height = \"" + this.height + "\";", this.motion_speed*this.z);
				this.a--;
			}
			setTimeout("document.getElementById('"+this.div_id+"').style.height = \"1\";", this.motion_speed*this.z+1);
			setTimeout("document.getElementById('"+this.div_id+"').id = \"\"", this.motion_speed*this.z+1);
		}
	}
}

interval_ticker = 0;
function ticker(id, text, link, container){
	clearInterval(interval_ticker);
	this.id =id;
	this.ticker_content = "<font id='ticker_font' class='ticker_font' onClick=\"ajaxFunction('"+link+"', '"+container+"');\">" + text + "</font>";


	this.div_dummy = document.createElement("div");
	this.div_dummy.className = "scroll_div_dummy";
	this.div_dummy.id = "ticker_div_dummy";
	this.div_dummy.innerHTML = this.ticker_content;
	this.div_dummy.style.width = 20000; //this is the demarcation
	document.body.appendChild(this.div_dummy);
	this.text_width = document.getElementById('ticker_font').offsetWidth;
	document.body.removeChild(document.getElementById("ticker_div_dummy"));

	this.div_width = document.getElementById(this.id).offsetWidth;

	this.innerdiv = document.createElement("div");
//	this.innerdiv.style.width = "100%";
	this.innerdiv.style.width = this.text_width;
	this.innerdiv.style.left = this.div_width;
	this.innerdiv.style.position = "relative";
	this.innerdiv.innerHTML = this.ticker_content;
	document.getElementById(this.id).innerHTML = "";
	document.getElementById(this.id).appendChild(this.innerdiv);

	interval_ticker = setInterval("ticker_run('"+this.id+"');", '100');
}

function ticker_run(id){
	this.id = id;
	if(document.getElementById(this.id)){
		this.list = document.getElementById(this.id).getElementsByTagName("div");
		this.innerdiv = this.list[0];
		this.left = parseInt(this.innerdiv.style.left, 10); //500--
		this.div_width = document.getElementById(this.id).offsetWidth; //500
		this.text_width = this.innerdiv.offsetWidth; //782
		this.limit = parseInt(this.text_width, 10)*-1;

		this.innerdiv.style.top = "3";
		if(this.left > this.limit){
			this.innerdiv.style.left = this.left-5;
		}else{
			//retstart
			this.innerdiv.style.left = this.div_width;
		}
	}else{
		//stop
		clearInterval(interval_ticker);
	}
}


/* object animation */ 
// for multiple aminations at the same time or in a sequence */
// expects an array with amination info
function amination(arr){

}