containerflip = Class.create({
    initialize: function(containerid){
		
		
		this.topcontainer 	= $(containerid);
		this.topconthoehe	= this.topcontainer.getHeight();
		
		this.container 	= $(containerid).down(0);
		this.children 		= this.container.childElements();
		this.anzahl_childs	= this.children.length;
		
		
		var slider_b = 0;
		this.children.each(function(childele) {
			slider_b = slider_b + childele.getWidth();							
		});
		//alert(slider_b);
		this.container.style.width = slider_b+'px';
		
		this.breite 	= this.container.getWidth();
		this.hoehe		= this.container.getHeight();
		
		
		
		this.navbar_cont 		= $('menucontainer');
		this.navbar_cont_breite = this.navbar_cont.getWidth();	
		this.versatz = Math.round(this.breite / this.anzahl_childs);
		this.ausmitteln = Math.round((this.navbar_cont_breite - (3 * this.versatz ) ) / 2) ;
		
		
		this.pos_x_navbar 		= Position.page(this.navbar_cont)[0];
		//alert(this.pos_x_navbar);
		this.init_pos_x_navbar 	= this.pos_x_navbar + this.ausmitteln   ;
		//alert (this.pos_x_navbar);
		
		this.container.setStyle({
				  left: this.init_pos_x_navbar+'px'
		});
		
		
		
		
		
		this.StartWinwidth 		= Winwidth;
		this.StartWinheight 	= Winheight;
		
		/*this.versatzhoehe = Math.round((Winheight - this.topconthoehe ) /2 ) ;
		this.topconthoehe = this.versatzhoehe + this.topconthoehe;
		//alert (this.versatzhoehe );
		this.topcontainer.setStyle({
				  height: this.topconthoehe+'px'
		});
		
		
		
		
		this.hoehe_bild 	= this.children[0].down('img').getHeight(); 
		this.bild_abstand_unten = 30;
		
		this.children.each(function(childele) {
			var hoehe_kette_neu = this.topconthoehe - this.hoehe_bild - this.bild_abstand_unten ;
			childele.down('div.kette').style.height = hoehe_kette_neu+'px';
		}.bind(this));
		*/
		
		
		
		
		this.dauer = 1.0;
		
		$('slideleft').observe('click', this.slide_left.bind(this));
		$('slideright').observe('click', this.slide_right.bind(this));
		//this.test();
		
		Event.observe(window, 'resize', this.resizer.bind(this)); 
		//window.observe('resize', this.resizer.bind(this));
		/**/
		
										 
   			 
		
	},
	
	
	slide_left: function(event){
		this.container.makePositioned();
		var this_x = Position.page(this.container)[0]-50;
		
		if (this_x < this.pos_x_navbar) {
			new Effect.Move(this.container , { 
							x: this.versatz , y: 0, 
							mode: 'relative', duration: this.dauer,  
				
				transition: Effect.Transitions.sinoidal
			});
		}
		//$('helper').update(this_x+ ' '+ this.pos_x_navbar);
		
	},
	slide_right: function(event){
		//alert(1);
		this.container.makePositioned();
		var this_x = Position.page(this.container)[0]+50;
		var this_x_plusbreite = this_x + this.breite - this.navbar_cont_breite ;
		
		if (this_x_plusbreite > this.pos_x_navbar) {
			new Effect.Move(this.container , { 
							x: -this.versatz , y: 0, 
							mode: 'relative', duration: this.dauer,  
							transition: Effect.Transitions.sinoidal
			});
		}
	
		//$('helper').update(this_x_plusbreite+ ' '+ this.pos_x_navbar);
	},
	resizer: function(event){
		
		
		///// Container wieder ausrichten
		
		this.container.makePositioned();
		//var this_x = Position.page(this.container)[0];
		var this_x = Position.cumulativeOffset(this.container)[0];
		var windifferenz_w = Winwidth - this.StartWinwidth ;
		var windifferenz_h = Winheight - this.StartWinheight ;
		var winversatz_w = windifferenz_w / 2;
		
		
		var winversatz_h = windifferenz_h / 2;
		winversatz_w = this_x + winversatz_w;
		
		this.container.setStyle({
				  left: winversatz_w+'px'
		});
		
		
		this.StartWinwidth = Winwidth;
		this.container.makePositioned();
		
		
		
		//// obere position
		
		//var topcontiheight = this.topcontainer.getHeight();
		/*this.topconthoehe = Math.round(this.topconthoehe + winversatz_h);
		
		this.topcontainer.setStyle({
				  height: this.topconthoehe+'px'
		});
		
		
		
		this.StartWinheight = Winheight;*/
		//this.topcontainer.makePositioned();		
		
		//$('helper').update(this_x);	
		
		
		//alert('lkjkl');
		//// Ketten höhe
		
		/*var children 		= this.container.childElements();
		children.each(function(childelement) {
			var hoehe_kette_neu = this.topconthoehe - this.hoehe_bild - this.bild_abstand_unten ;
			childelement.down('div.kette').style.height = hoehe_kette_neu+'px';
		}.bind(this));*/
		
		
	}
	
	,
	test: function(){
		
	}
});



document.observe('dom:loaded', function () {
		//	alert('hi');	
		//$('helper').update('jkhkj');
		
	
	if ($('slidebar') !== null) var containerfliper = new containerflip('slidebar');									 
		
		
		
										 
										 
});