$(document).ready(function() {

   var pElement     = '#themes';
   var wrapperWidth = parseInt( $(pElement).css('width').replace('px') );

   var countElements= 0;
   $(pElement+' li').each(function(){ countElements++; });

   var elementsBaseWidth = Math.floor(wrapperWidth/countElements);

   $(pElement+' li').css("width", elementsBaseWidth);
   var AniInterval  = 300;

   $(pElement+' li').each(function(indexNo){  	

	$(this).mouseenter(function(){
		$(pElement+' li').stop();
		var bildbreite    = $(this).children("img").width();
		var inactiveWidth = Math.floor((wrapperWidth-bildbreite)/ (countElements-1));
		var activeElement = $(this);
			
		 $(pElement+' li').each(function(indexNo2){
			if(indexNo2 < indexNo) { 	  $(this).animate({ width: inactiveWidth}, AniInterval);	}
			else { if(indexNo2 > indexNo) {   $(this).animate({width: inactiveWidth}, AniInterval); }      	}
		 }); 
					
		activeElement.animate({width: bildbreite}, AniInterval);

   	}).mouseout(function(){
		$(pElement+' li').stop();
		$(pElement+' li').animate({width: elementsBaseWidth}, AniInterval*3);
		


		// $(pElement+' li').each(function(indexNo2){
		//	if(indexNo2 < indexNo) { $(this).animate({width: elementsBaseWidth}, AniInterval); }
		//	
		//	else if(indexNo == (countElements-1) ) {
				//alert('ok');
				//
		//		$(this).animate({ width: elementsBaseWidth}, AniInterval);
		//	     }
		//	     else {  $(this).animate({width: elementsBaseWidth}, AniInterval); }
		//	
		// });
		

		
   	});
   });
});