$(document).ready(function(){

	$('#autoGal').css({
		'margin':'auto',
		'margin-bottom':'20px',
		'display':'block'
		
	});
	
	$('#for_picture').css({
		
		'border':'1px solid #BB994E',
		'background':'#000',
		'width':'650px',
		'height':'600px',
		'padding':'0',
		'margin':'auto',
		'margin-bottom':'20px',
		'text-align':'center'
		
	  });
	
	 $('#auto_gal_left_arrow').css({
		 'float':'left',
		 'position':'relative',
		 'top':'35px',
		 'height':'43px',
		 'width':'22px'
		});
		
 	$('#auto_gal_right_arrow').css({
		'float':'right',
		'position':'relative',
		'top':'35px',
		'height':'43px',
		 'width':'22px'
		});
	
	$('#events_container').css({
		'width':'650px',
		'height':'140px',
		'overflow':'hidden',
		'position':'relative',
		'border-bottom':'2px solid #B09047'
	  });	
	
	
	
	
	var startGal=function(){
		
		$('#events_container').css({
			
		'cursor':'pointer'	
			
		});
		
		$('#nails_container').css({
			'width':'650px',
			'height':'140px',
			'overflow':'visible'
			});
		
		
		var spacing = 130;
		var $nails=$('#nails_container .nails li');
	
		$nails.css({
		'width':'120px',
		'height':'124px'	
		});
		
		
		var ar_pfad = new Array();
		var n_c_offset=$('#events_container').offset();
	
	    for(var i=0;i<$nails.length;i++)
		 {
			 var li_offset=$nails.eq(i).offset();
			
			 if(li_offset.left>n_c_offset.left&&li_offset.left<n_c_offset.left+$('#events_container').width())
			 {
				ar_pfad.push($nails.eq(i).index());
			 }
		 }
	   // var path_min="";	    	
	   
	    if(ar_pfad[1]==undefined){
	    	$('#for_picture').append('<img id="big" src=" "></img>');
			 var path_min=$('#nails_container .nails li:eq(7) img').attr('src');
		 }
		 else{
			 $('#for_picture').append('<img id="big" src=" "></img>');
			 var path_min=$('#nails_container .nails li').eq(ar_pfad[2]).children().attr('src');	 
		 }
	    
	    
	    
	   // var path_min=$('#nails_container .nails li').eq(ar_pfad[2]).children().attr('src');
	    var path_max=path_min.replace("thumb/","");
    
    
	    $('#big').animate({opacity: 0},100,function()
		{ 
	    	var path_max=path_min.replace("thumb/","");
 		   $(this).animate({opacity: 1},1000).attr({"src":path_max,"width":500});
 	
 
 	     //Bild vertikal zentrieren; Diese CSS muss nach dem animate folgen, sonst erstes Bild wird an falsche Stelle platziert!!	
	 	   $('#big').css({
 	    		'position':'relative',
 	    		//'top':(($('#for_picture').height()-$('#big').height())/2),
			    'top':'10px',
 	    		'width':'580px'
 	    	  });
	 			
 		});
		
		
		
		
	
		$('.nails li').click(function(){
			
			var path_min=$(this).children().attr('src');
			/*Grosses Bild ansschauen lassen*/
		    $('#big').animate({opacity: 0},400,function()
			 { 
		    	var path_max=path_min.replace("thumb/","");
		    	$(this).attr({"src":path_max,"width":500}).animate({opacity: 1},100);
		    	
		    	 $('#big').css({
		 	    		'position':'relative',
		 	    		//'top':(($('#for_picture').height()-$('#big').height())/2),
					    'top':'10px',
		 	    		'width':'580px'
		 	    	  });
		    		});
		    
			 });
		
			
		
	

		};
	
	
	setTimeout(function(){
		
		startGal();
		
		},100);
	
	
	
});