$(function()
{
//	offset fuer mousemove	
	var offsetY = 20;
	var offsetX = -500;		
	
///////////////////////////////////////////////////////////////////////////////////////////
/// menue 
///////////////////////////////////////////////////////////////////////////////////////////	
	$("#hidePanel").click( function() {
		$("#panel").animate({marginLeft:"-172px"}, 500 );
		$("#colleft").animate({width:"0px", opacity:0}, 400 );
		$("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200);
	 });
	 	
	 $("#showPanel").click(function(){
		 $("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow");		 
		 $("#colleft").animate({width:"172px", opacity:1}, 400 );		 
		 $("#panel").animate({marginLeft:"0px"}, 400 );
	 });

//	wenn ueber einen li gefahren wird	
	$( '#panel ul li').hover(function() {
//		if($( this ).css( 'background-color' ) != '#0066cc' ) {
			$( this ).css( 'background-color', '#0066cc' );			
	}, function() {
//		var a_name = $( ':first-child', this ).attr('name');
//		if(akt_div != a_name) {
			$( this ).css( 'background-color', '#4fa9ff' );
	});

///////////////////////////////////////////////////////////////////////////////////////////	 
/// text divs 
///////////////////////////////////////////////////////////////////////////////////////////	 
//	erstes div visible, alle anderen unvisible
	$( '#tabs' ).show();	
	$( '#index div:not(:eq(0))' ).hide();
	$( '#index div:eq(0)' ).show();

//	erstes tab normal-farbe 	
	$( '#tabs li:first' ).css( 'background-color', '#0066cc' ) ;
	
//	restliche tabs helleres blau
	$( '#tabs li:not(:first)' ).css( 'background-color', '#4fa9ff' );

///////////////////////////////////////////////////////////////////////////////////////////	
//	wenn ueber einen li gefahren wird  		
	$( '#tabs li').hover(function() {
		if($( this ).css( 'background-color' ) != '#0066cc' ) {
			$( this ).css( 'background-color', '#0066cc' );			
		}
	}, function() {
		var a_name = $( ':first-child', this ).attr('name');
		if(akt_div != a_name) {
			$( this ).css( 'background-color', '#4fa9ff' );
		}
	});

///////////////////////////////////////////////////////////////////////////////////////////	
//	wenn click auf anker in tab  		
	$( '#tabs li').click(function() {
//		attribut 'name' des ankers holen 				
		var a_name = $( ':first-child', this ).attr('name');
		
//		hintergrund der nicht aktuellen li's  machen		
		$( '#tabs a[name != ' + a_name + ']' ).parent().css( 'background-color', '#4fa9ff' );

//		hintergrund aktuelles li des gecklickten a gray		
		$( this ).css('background-color', '#0066cc');
		
//		name des div zu click auf a ermitteln		
		var a_name2 = "#" + a_name;
		
//		alle divs unvisible		
		$( '#index div:not(#' + a_name + ')' ).slideUp(600);		
		$( a_name2 ).slideDown(600);
		
		akt_div = a_name;
		
	});
	

///////////////////////////////////////////////////////////////////////////////////////////	
/// startseite bilder bewegen 
///////////////////////////////////////////////////////////////////////////////////////////	
	$( '#pics a' ).hover(function(evt) {	
		var target 	= $( this ).attr('href');
//		geht auch: var altText	= $( 'img', this ).attr('alt');
		var altText	= $( ':first-child', this ).attr('alt');		
		
		$( '<img id="largeImage" src="' + target + '" alt="' + altText + '" />' )
					.css('top',  evt.pageY + offsetY)
					.css('left', evt.pageX + offsetX)
					.appendTo('body');
	}, function(){
		$( '#largeImage' ).remove();
	});	
	
	$( '#pics img' ).mousemove(function(evt) {
		$( '#largeImage' ).css('top',  evt.pageY + offsetY)
		 		 		  .css('left', evt.pageX + offsetX);
	});
});