ProjectSlider = function(config){
	
	var effect = new Fx.Tween($('slider'),{link:'cancel', duration:500});
	
	// slider breite setzen
	var sliderBreite = 0;
	var margin = $('slider').getElement('ul li').getStyle('margin-right').toInt();

	$$('#slider ul li').each(function(item){
		sliderBreite = sliderBreite + item.getSize().x + margin;	

	});
	sliderBreite = sliderBreite *1.05


	$('slider').setStyle('width',sliderBreite);
	
	


	// positionen
	var positionen = new Array();
	var i = 0;
	$('slider').getElements('ul li').each(function(item){
		i++;
		positionen.push(item.getCoordinates($('slider')).left);
	});
	

	
	
	// var sliderBreite = $('slider').getSize().x;
	
	var getProjectListWidth = function(){
		return $('slider').getSize().x;
				
	}
	
	var projectListWidth = getProjectListWidth();
	
	
	
	
	var getProjectPositionCenter = function(project_index){

		
		var liste = $('slider').getElements('ul li');
		
		// relative position rausfinden
		var pos = positionen[project_index];


		var projektBreite = $('projekt_'+(project_index+1)).getSize().x;
		
		

		
		var alt2Pos = ($('projectList').getSize().x/2) - pos - (projektBreite / 2);
		

		var marginToTrigger = alt2Pos;

		
		$$('#slider ul li').setStyle('color','#ccc');
		$('projekt_'+(project_index+1)).setStyle('color','#fff');
		
	
	
		// rolf
		// event maus loslassen auf knob
		// $('knob').onmouseup=function(){
		// 	$('sliderContentbild').setProperty('src','r3cms/user_upload/'+$('projekt_'+(project_index+1)).getProperty('rel'));			
		// }
		


		
		
		effect.start('margin-left',marginToTrigger);
		
		// $('slider').setStyle('margin-left',newPos);

		
	}
	
	var updateProjectSlider = function(step){

		var posCenter = getProjectPositionCenter(step);

		
	}
	
	
	
	
	// variablen
	
	
	var sliderContainer = $('scroller');
	var sliderKnob = $('knob');
	
	
	var projectCount = $('slider').getElements('ul li').length-1;
	
	var onChange = config.onChange || function(){};
	
	
	var slider = new Slider(sliderContainer, sliderKnob, {
		steps:projectCount,
		onChange: function(step){
			updateProjectSlider(step);
			onChange(step);
		}.bind(this)
		
	});
	
	$$('#slider ul li').each(function(item){
		item.addEvent('click',function(){
			/*
				TODO suboptimal da der Slider "slider" heißen muss
			*/
			slider.set(this.getProperty('class')-1);
		});
	});
	
	

	
	
	return slider;
	
}



// window.addEvent('domready',function(){
// 	$$('#sliderContent .person').each(function(item){
// 		// console.log(item);
// 
// 		item.setStyle('opacity',0);
// 		item.setStyle('display','none');
// 		effekte[i] = new Fx.Tween(item,{link:'cancel', duration:250, onComplete:function(bild){
// 			if(this.to[0].value == 0){
// 				bild.setStyle('display','none');				
// 			}
// 
// 		}});
// 		bilder[i] = item;
// 		i++;
// 	});
// });


window.addEvent('domready',function(){
	$('content').setStyle('background-image','url("http://www.acn-werbeagentur.de/_public/img/ajax-loader.gif")');
	$('content').setStyle('background-position','center center');
	$('content').setStyle('background-repeat','no-repeat');
	
	
	
});


// umgestellt auf onload, weil es probleme mit dem slider gab, wenn der content noch nicht geladen war
window.addEvent('load',function(){
	
	$('sliderContent').setStyle('visibility','visible');
	$('projectList').setStyle('visibility','visible');
	$('scroller').setStyle('visibility','visible');
	$('content').setStyle('background-image','none');
	
	var active = false;


	
	// effekte
	var effekte = new Object();
	var bilder = new Object();
	
	var i = 0;
	$$('#sliderContent .person').each(function(item){
		// console.log(item);

		item.setStyle('opacity',0);
		item.setStyle('display','none');
		effekte[i] = new Fx.Tween(item,{link:'cancel', duration:250, onComplete:function(bild){
			if(this.to[0].value == 0){
				bild.setStyle('display','none');				
			}else{

				bild.getElement('img').setStyle('display','inline');					
				bild.getElement('img').setProperty('src', bild.getElement('img').getProperty('rel'));
				bild.getElement('img').addEvent('load',function(){
					bild.getElement('img').setStyle('margin-right',35);	
					bild.getElement('img').setStyle('margin-bottom',0);	

				});

				
			}

		}});
		bilder[i] = item;
		i++;
	});
	
	active = 0;
	toFade = false;
	

	effekte[0].set('opacity',1);
	bilder[0].setStyle('display','block');
	
		
	var slider = new ProjectSlider({
		onChange:function(step){
			
		
			if(active!=step){
				effekte[active].set('opacity',0);
				bilder[active].setStyle('display','none');
				bilder[step].setStyle('display','block');
				effekte[step].start('opacity',1);
				active = step;
			}
			
			
		}
		});
	
	slider.set(0);
	
	
});