function initStartpage (){
	// add click action to each image
	 $('div.spbox').hover(
			 function() { stopani();showUserBoxInfo($(this).attr('id'),'on'); },
			 function() { stopani();showUserBoxInfo($(this).attr('id'),'off'); }
			);
	// clone image to have img to fade
	$('#slideshow1 img').clone().appendTo( $('#slideshow1') );
	$('#slideshow1 img:first').next().fadeTo(0,0);
	// startup
	$("#spboxrow1").find(".spbox").tooltip({ effect: 'slide', opacity: 1, offset:[-5, 0], position: "bottom center"});
	$("#spboxrow2").find(".spbox").tooltip({ effect: 'slide', opacity: 1, offset:[15, 0], position: "top center"});
	 $('div.spbox').click( function() { stopani(); showBoxInfoFull ($(this).attr('id'),'on');	return false; });	 
	 $('div.spbox').css({'cursor':'pointer'});
	 showUserBoxInfo ('spbox1-0', 'on' )
	animateInfoBox ();		
	 
}
var aniInterval =null;
var aniCnt =1;
var boxLastId =false;
var boxCurrId =false;
function animateInfoBox (){
	aniInterval = setInterval(doani,5000); //time in milliseconds
}
function stopani (){
	  clearInterval(aniInterval);
}
function slideshowSwap (){
	var debug = 'slideshowSwap' ;
	var holderCurr = $('#slideshow1 img:first');
	var holderNext = $('#slideshow1 img:first').next();
	// copy imageNext into holderCurr
	holderCurr.attr("src", holderNext.attr("src")); 
	// hide holderNext
	holderNext.fadeTo(0,0)
}

function doani() {
		stopani ();
//		var debug = 'do ani:' + aniCnt;
	   if (aniCnt>9)aniCnt = 0;
	   if (aniCnt<5){
		   var myId = 'spbox1-'+aniCnt;
		   var myBoxId = 'spboxinfo1';
	   }else{
		   var myId = 'spbox2-'+(aniCnt-5);
		   var myBoxId = 'spboxinfo1';
	   }
	   // hilite Box
	   showBoxInfo ( myId, 'on' );
	   // fade image
		var nextimg = $('#'+myId).find('.infocontentimg');
		var currimg = $('#slideshow1 img:first');
		var holderNext = $('#slideshow1 img:first').next();
		holderNext.fadeTo(0,0)
		// load next image in holderNext
		holderNext.attr("src",nextimg.attr('src'));
		holderNext.attr("title",nextimg.attr('title'));
		holderNext.attr("alt",nextimg.attr('alt'));
		// fadeOut holderNext
		// and copy imageNext into holderCurr
		holderNext.fadeTo (1000,1, function() {
	       slideshowSwap();
	   });


	   
	   aniCnt ++;
	   animateInfoBox();
	 // 
//	   });
		
	  
	 }
	function scrollSwap (){
		// move faded out item away
	    $("div.scrollitem:eq(" + scrollitemLast + ")").css('top','-210px');
		scrollitemLast = scrollitemCurr;
		// hide current item
		 // move current item to rigth position
		$("div.scrollitem:eq(" + scrollitemCurr + ")").css('top','5px');
		$("div.scrollitem:eq(" + scrollitemCurr + ")").fadeTo (600,1);
		scrollInterval = setInterval(scroll_rotate,scrollTime);	
	}


function showBoxInfo ( id, opt ){
	boxHilite (id, opt );
	if (opt=='off'){
		$('#spboxinfo1').html ( '' );
		return;
	}
	if (id=='' || id==false){
//		$('#spdebug').html('no id given: id:' + id);
		return;
	}	
	var infotxt = $('#'+id+'>.infocontent').html();
	$('#'+id).parent().find('.spboxinfo').html(infotxt);
}
function showUserBoxInfo ( id, opt ){
	showBoxInfo ( id, opt );
	// show image
	var nextimg = $('#'+id).find('.infocontentimg');
	var holderNext = $('#slideshow1 img:first').next();
	// load next image in holderNext
	holderNext.attr("src",nextimg.attr('src'));
	holderNext.attr("title",nextimg.attr('title'));
	holderNext.attr("alt",nextimg.attr('alt'));
	// fadeOut holderNext
	// and copy imageNext into holderCurr
	holderNext.fadeTo (0,1);
	boxCurrId = id;
	holderNext.click( function() { stopani();showBoxInfoFull (boxCurrId,'on');	return false; });	
	holderNext.css({'cursor':'hand'}); 
}

function showBoxInfoFull ( id, opt ){
	showBoxInfo ( id, opt );
	var fulltxt = $('#'+id+'>.infocontentfull').html();
	showInfoLayer ( fulltxt );
}

function boxHilite (id, opt ){
	$('div.spbox').removeClass( 'spboxhilite' )
	if (id=='' || id==false){
//		$('#spdebug').html('no id given: id:' + id);
		return;
	}
	 var box = $('#'+id);
	 //$('#spdebugapi').html('id given: id:' + id + '<br>lastboxid: ' + boxLastId);
	//	
	if (opt=='on'){
		var ttipc = box.data("tooltip");
		if (ttipc){  ttipc.show(); }
		var ttipl = $('#'+boxLastId).data("tooltip");
		if (ttipl){  ttipl.hide(); }		
		boxLastId = id;
		box.addClass( 'spboxhilite' );
	}else{

		box.removeClass( 'spboxhilite' );
	}
}


function hideInfoLayer (){
	 $('#layerInfoContentOuter').hide ();
	 $('#layerInfo').hide ();
	 $('#layerInfoContent').html ('');
}
function showInfoLayer ( txt ){
    // check if layer already exist
	if ( $('#layerInfo').length != 0 ) { var layerInfo = $('#layerInfo'); 
	}else{ 
		// add dark Layer
		var layerInfo = $('<div id="layerInfo"></div>').appendTo(  $('BODY') ); 
	}
	if ( $('#layerInfoContentOuter').length != 0 ) { var layerInfoContentOuter = $('#layerInfoContentOuter'); 
	}else{ 
		var layerInfoContentOuter = $('<div id="layerInfoContentOuter"></div>').appendTo(  $('BODY') ); 
		layerInfoContentOuter.css( {'cursor':'pointer' });	
		layerInfoContentOuter.click( function() { hideInfoLayer ();	 });
	}
	if ( $('#layerInfoContent').length != 0 ) { var layerInfoContent = $('#layerInfoContent'); 
	}else{ 
		var layerInfoContent = $('<div id="layerInfoContent"></div>').appendTo( $('#layerInfoContentOuter') );
		//layerInfoContent.click( function() { return true; });
	}	
    layerInfo.css('opacity',0.0); 
    layerInfo.css('filter','alpha(opacity=0)'); 
    layerInfo.css('display','block');

     
	var dur = 50;
	if (isIE) dur = 1
	layerInfo.animate({ 
            opacity: 0.5, 
            filter: 'alpha(opacity=50)' 
    }, dur );
	layerInfoContent.hide ();
	layerInfoContentOuter.hide ();
	var closebtn = '<div id="layerInfoClose"><a href="Javascript:hideInfoLayer();">Close</a></div>';
	layerInfoContent.html(closebtn + txt);
	layerInfo.fadeIn(200, function() {
	    $('#layerInfoContentOuter').show( function() {
	    	$('#layerInfoContent').show ();	 
	    })
	});	
}