//
// pagescriptor.js v1.1.a 09052010 by Gerd Franke franke@sitescriptor.de
// Library for dynamic effects showing, hiding, moving content
// depends on prototype.js V1.63 and scriptaculous V1.8.3
//
// ToDos
// 		DIV als LINK sensibilisieren; Klasse -> nächster Link inside->Eventhandler an DIV binden?
// 		Alle: AJAX einführen
//		Multi: pruefen ob viewport schon absolute
// PROBLEME:
// 		Effects mit Queue sequenziell ausfuehren
// DONE:
// 		Slider: positionen relativ zum viewport berechnen! Auch nicht besser!? OK
// 		Toggle: neuen Inhalt nach unten öffnen OK
// 		Slider: aktionen in queue bringen
// 
//------------------------------------------------------------------------------------------

//--- toggle content -------------------------
/*
<div class="ps-toggle">
	<div>Preview</div>
	<div>
		Content
		<a href="#" class="ps-close">X</a>
	</div>
</div>
*/
		
	var PStoggle = Class.create({
			status: 0,
			containerEl: 0,
			preview: 0,
			contentEL: 0,
			// static
			closeSelector: 'a.ps-close',
			centerClass: 'ps-center',
			zoomClass: 'ps-zoom',
			downClass: 'ps-down',
			unit: 'px',
			// functions
			initialize: function( el ) 
				{
 				this.containerEl = el;
				this.containerEl.setStyle( 'position:relative;' );				
				var parts 		= this.containerEl.childElements();
				this.preview 	= parts[0];
				this.preview.setStyle( 'border-color:green;' );
				this.contentEL 		= parts[1];
				this.contentEL.setStyle( 'z-index:10000;border-color:blue;' );

				this.ltoggle = this.ltoggle.bind( this );
				this.preview.observe( 'click',  this.ltoggle );

	//			alert( 'PStoggle.ltoggle(before):' + this.ltoggle );
				$(this.containerEl).select( this.closeSelector ).each(  
						function(elem)
							{
	//						alert( 'PStoggle.initialize(close:link)' + this.ltoggle );
							elem.observe( 'click',  this.ltoggle );
							elem.setStyle( 'text-decoration:none;color:purple;' );
							}, this );
				this.contentEL.hide();
				
				},
			ltoggle: function( ev )
				{
				if( this.status == 0 )
					{		// show contentEL
					if( this.contentEL.hasClassName( this.zoomClass ) )
						{
						//alert('ltoggle: ' + this.zoomClass );
						this._screencenter();
						Effect.Grow( this.contentEL, { direction: 'center' } );
						}
					else if( this.contentEL.hasClassName( this.downClass ) )
						{
						//alert('ltoggle: ' + this.downClass );
						Effect.SlideDown( this.contentEL );
						//this.contentEL.appear({ duration: 1.0, from: 0, to: 1 });
						}
					else if( this.contentEL.hasClassName( this.centerClass ) )
						{
						this._screencenter();
						this.contentEL.appear({ duration: 1.0, from: 0, to: 1 });
						}
					else
						{
						//alert('ltoggle: default' );
						this.contentEL.appear({ duration: 1.0, from: 0, to: 1 });
						}
	//				this.contentEL.show();
					this.status = 1;
					}
				else
					{		// remove contentEL
	//			alert( 'PStoggle.ltoggle(off)' );
					this.contentEL.fade({ duration: 1.0, from: 1, to: 0 });
	//			this.contentEL.hide();
					this.status = 0;
					}
				Event.stop( ev );
				},
				
			_screencenter: function ()
				{
				if( !this.contentEL.hasClassName( this.centerClass ) ){ return; }
// 				var wwidth = document.viewport.getWidth();
// 				var wheight = document.viewport.getHeight();
// 				alert( 'screencenter:document.width/height \n' + wwidth + ' / ' + wheight );
// 				var cwidth = this.contentEL.getWidth();
// 				var cheight = this.contentEL.getHeight();
// 				alert( 'KioskControl:screencenter:contentEL.width/height \n' + cwidth + ' / ' + cheight );
 				var cposition = this.containerEl.viewportOffset();			
// 				alert( 'screencenter:cposition.inspect \n' + cposition.inspect() );
// 				var deltaleft = ( wwidth - cwidth)/2 - cposition[0];
// 				var deltatop = ( wheight - cheight)/2 - cposition[1];
// 				alert( 'screencenter:delta.left/top \n' + deltaleft + ' / ' + deltatop );
				var deltaleft = ( document.viewport.getWidth() - this.contentEL.getWidth() )/2 - cposition[0];
				var deltatop = ( document.viewport.getHeight() - this.contentEL.getHeight() )/2 - cposition[1];
				//alert( 'screencenter:delta.left/top \n' + deltaleft + ' / ' + deltatop );
				this.contentEL.setStyle( 'border-color:green;top:' + deltatop + 'px;left:' + deltaleft + 'px;' );
				//new Effect.Move( this.contentEL, { x: deltaleft, y: deltatop, mode: 'relative' });
				},
			});
			
//--- ReplaceContent -------------------------
/*
<a class="ps-multi" href="#multi1" rel="viewport_id">first</a>
<a class="ps-multi" href="#multi2" rel="viewport_id">second</a>
<div id="viewport_id">
	<div id="multi1" class="ps-default">
		default content1
	</div>
	<div id="multi2">
		content2
		<a class="ps-multi" href="#multi1" rel="viewport_id">zeige content1</a>
	</div>
</div>
*/
//--------------------------------

	var PSmulti = Class.create({
			defaultSet: 0,
			viewportID: '',
			viewportEl: 0,
			containerEl: 0,
  			queue: 0,
			contentHash: 0,
			contentNodeH: new Hash(),
			contentStatusH: new Hash(),
			// static
			linkSelector: 'a.ps-multi[rel="',
			defaultClass: 'ps-default',
			activeClass: 'ps-active',
			visibleClass: 'ps-visible',
			unit: 'px',
			// functions
			initialize: function( el ) 
				{
		//		alert('OPmulti.initialize(Hallo onepage 06 )');
				var defaultSet = 0;
  	  			//-----------			
				this.viewportEl = el;
  				this.viewportID = this.viewportEl.readAttribute('id');
  				this.linkSelector = this.linkSelector + this.viewportID + '"]';
 				this.viewportEl.setStyle( 'position:relative;' );
				this.queue = { scope: this.viewportID, position: 'end' };
  		// 		alert('OPmulti.initialize( linkSelector: ' + this.linkSelector + ' )');
		 //-----------			
				var parts 	= this.viewportEl.childElements();
				//alert('OPmulti.initialize(found:' + parts.length + '; childs)');
				this.contentHash = new Hash();
		//		alert('OPmulti.initialize( contentHash:' + this.contentHash + '; childs)');
				parts.each( function(el)
						{
		//				alert('OPmulti.initialize(hashing)');
						if( el.readAttribute('id') )
							{
 							var vpID = el.readAttribute('id');
 		//					alert('OPmulti.initialize.found( vpID: ' + vpID + '; childs)');

							this.contentNodeH.set( vpID, el );
 					//		el.setStyle( 'border-color:green;' ); 
							if( el.hasClassName( this.defaultClass ) && !defaultSet )
								{
								defaultSet = 1;
								this.contentStatusH.set( vpID, 1 );
								el.show();
								}
							else
								{
								this.contentStatusH.set( vpID, 0 );
								el.hide();
								}
							}
						}, this );
 			//	alert('OPmulti.initialize( contentNodeH.inspect: ' + this.contentNodeH.inspect(true) + ' )');
 			//	alert('OPmulti.initialize( contentStatusH.inspect: ' + this.contentStatusH.inspect(true) + ' )');
  		//-----------			
				$$( this.linkSelector ).each( function(al)
						{ 
						//----------
						var contentID = al.readAttribute('href');
						var regex = RegExp(/^#(.*)/);
						var val = regex.exec(contentID);
						contentID = val[1];
			//			alert('OPmulti.initialize.links(found: viewport: ' + this.viewportID + '; content: '+ contentID + ';)');
						//----------
						if( !this.contentNodeH.get( contentID ) )
							{ 
							al.setStyle( 'text-decoration: line-through;' );
			//				alert('OPmulti.initialize.links(failed: tar: ' + contentID + ';)');
							return;
							}
				//		al.setStyle( 'text-decoration:none;color: green;' );
			//			alert('OPmulti.initialize.links(sethandler: _swap)'  ); 
						al.observe( 'click', this._swap.bindAsEventListener( this, contentID ) );
						//----------
						}, this );
  				//-----------			
	 		//	alert('OPmulti.initialize( contentHash.keys: "' + this.contentHash.keys() + '" )');
				if( this.defaultSet ){this._activate( this.viewportEl, this.activeClass );}
				},

			_activate: function( container, clas )
				{
				// alle childs von ps-slider erhalten die Klasse active
		//		alert('PSslider._activate( container: "' + container + '" clas: "' + clas + '" )');
				var parts 	= $(container).childElements();
				parts.each( function( el )
						{
						el.addClassName( clas )
						//alert('PSslider._activate( el: "' + el + '"  class: "' + el.readAttribute('class') + '" )');
						}, this );
				this.defaultSet	= 1;	
				},
				
			_swap: function( ev, showid )
				{
				var closeId;
				var openId;
 		//		alert('OPmulti._swap( starts: ev: "' + ev + '" showid: "' + showid + '" )'); 
		//		alert('OPmulti._swap( contentNodeH.inspect: ' + this.contentNodeH.inspect(true) + ' )');
		//		alert('OPmulti._swap(1 contentStatusH.inspect: ' + this.contentStatusH.inspect(true) + ' )');
				if( !this.defaultSet )
					{
					this._activate( this.viewportEl, this.activeClass );
					this.defaultSet = 1;
					}
				this.contentNodeH.each( function( item )
						{
						if( this.contentStatusH.get( item.key ) )
							{
							closeId = item.key;
							}
						else if( this.contentNodeH.get( showid ) )
							{
							openId = showid;
							}
						else 
							{
							//alert('OPmulti._swap( failed: ev: "' + ev + '" showid: "' + showid + '" )'); 
							}
  						//-----------			
						}, this );
	//			alert('OPmulti._swap( queue: "' + this.viewportID + '"; closeId: "' + closeId + '"; openId: "' + openId + '"; )'); 
				//-----------			
				if( closeId != openId )
					{
					if( closeId )
						{
						//item.value.hide(); 
						$(closeId).fade({ duration: 1.0, from: 1, to: 0 });
						//new Effect.SlideUp( closeId, { queue: 'end' } );							
						this.contentStatusH.set( closeId, 0 );
						$(closeId).removeClassName( this.visibleClass )
						}
					//-----------			
					//item.value.show();
					$(openId).appear({ duration: 2.0, from: 0, to: 1 });
					//new Effect.SlideDown( openId, { queue: 'end' } );
// 							new Effect.SlideUp( closeId, { queue: { position: 'end', scope: this.viewportID } });							
// 							new Effect.SlideDown( openId, { queue: { position: 'end', scope: this.viewportID } });
					$(openId).addClassName( this.visibleClass )
					this.contentStatusH.set( openId, 1 );
					}
	//			alert('OPmulti._swap(2 contentStatusH.inspect: ' + this.contentStatusH.inspect(true) + ' )');
				//-----------			
				Event.stop( ev );
				},
			});

//--------------------------------
//--- dynamic slider -------------------------
/*
<div class="ps-slider">
	<div>
		<div>
			<div id="slider1"  title="Titel 1">content1</div>
			<div id="slider2"  title="Titel 2">content2</div>
		</div>
	</div>
	<ul>
		<li>content 1<a href="#slider1" class="ps-goto">first</a></li>
		<li>content 2<a href="#slider1" class="ps-goto">second</a></li>
	</ul>
</div>
*/
//--------------------------------
	var PSslider = Class.create({
			contentVisible: 0,
			defaultSet: 0,
			// elements
			containerEl: 0,
				viewportEl: 0,
					wrapperEl: 0,
						contentNodeH: 0,
				naviEl: 0,
			wrapperWidth: 0,
			// static
  			sliderClass: 	'ps-slider',
			viewportClass: 	'ps-viewport',
			activeClass: 	'ps-active',
			naviClass: 		'ps-navi',
			linkClass: 		'ps-goto',
  			linkSelector: 	'a.',
			defaultClass: 	'ps-default',
			unit: 'px',
			// functions
			initialize: function( el ) 
				{
				this.contentNodeH = new Hash()
 		//		alert('PSslider.initialize( BEGIN contentNodeH.inspect: ' + this.contentNodeH.inspect(true) + ' )');
		//		alert('PSslider.initialize( Hallo onepage 06 )');
  	  			//-----------			
				this.containerEl = el;
 				this.containerEl.setStyle( 'border: 0px;' );
		 		//-----------	find viewport, optional navigation
				// lookup by classes
				var parts 	= this.containerEl.childElements();
				//---- suche viewport-box
				parts.each( function( el )
						{
						if( el.hasClassName( this.viewportClass ) && !this.viewportEl )
							{
							this.viewportEl = el;
							this.viewportEl.setStyle( 'position:relative;border:0px;' ); 
							return;
							}
						}, this );
						
				//---- suche optionale navi-box
				parts.each( function( el )
						{
						if( el.hasClassName( this.naviClass ) && this.viewportEl )
							{
							this.naviEl = el;
							return;
							}
						}, this );
				
				//---- oder altes modell: viewport > navi
				if( !this.viewportEl && !this.naviEl )
					{
					var parts 	= this.containerEl.childElements();
					if( parts[0] )
						{
						this.viewportEl = parts[0]; 
						this.viewportEl.setStyle( 'position:relative;border: 0px;' ); 
						if( parts[1] )
							{ 
							this.naviEl = parts[1] ; 
			//				alert('PSslider.initialize( navigation found! )');
							}
						}
					else {alert('Fatal Error: no viewport found');return;}
					}
		 		//-----------	viewport untersuchen	
				parts = this.viewportEl.childElements();
		 		//-----------	wrapper im viewport untersuchen	
				if( parts[0] ){ this.wrapperEl = parts[0]; } else {alert('Fatal error: wrapperEl not found!');return;}
				
		 		//-----------	contents	
				this.defaultSet = 0;
				var wsum = 0;
				parts 	= this.wrapperEl.childElements();
				parts.each( function(el)
						{
						var vpID = el.readAttribute('id');
		//				alert('PSslider.initialize.found( vpID: ' + vpID + '; childs)');
						this.contentNodeH.set( vpID, el );
						wsum += $(el).getWidth();
		//				alert('PSslider.initialize.found( wrapper +width: ' + wsum + '; vpID: ' + vpID + '; )');
						if( el.hasClassName( this.defaultClass ) && !this.defaultSet )
							{
							this.defaultSet = 1;
							this.contentVisible = vpID;
							}
						else
							{
							this.contentVisible = this.contentVisible ? this.contentVisible : vpID;
							}
						el.setStyle( 'float:left;border:0px;' ); 
						}, this );
		//		alert('PSslider.initialize.found( wrapper width: ' + wsum + '; )');
				this.wrapperWidth = wsum;		
				this.wrapperEl.setStyle( 'position:absolute;left:0px;width:' + this.wrapperWidth + 'px;border:0px;' ); 
		//		this.viewportEl.setStyle( 'display:none;' ); 
						
		//		alert('PSslider.initialize.found( contentVisible: ' + this.contentVisible + '; defaultSet: ' + OPslider + ';)');
				// Slider 		
 		//		alert('PSslider.initialize( contentNodeH.inspect: ' + this.contentNodeH.inspect(true) + ' )');
 				
 		 		//----------- construct navigation
 				if( !this.naviEl )
 					{
 					var navi = '<ul>';
 					var aclass = this.linkClass;
					this.contentNodeH.each( function( item )
							{
							navi += '<li><a href="#';
							navi += item.key;
							navi += '" class="';
							navi += aclass;
							navi += '">';
							navi += item.value.readAttribute('title');
							navi += '</a></li>';
 							});
 					navi += '</ul>';
 		//			alert('PSslider.initialize( navigation: ' + navi + ' )');
 		//			alert('PSslider.initialize( viewportEl.inspect: ' + this.viewportEl.inspect(true) + ' )');
 					$(this.viewportEl).insert( {after: navi} );
 					this.naviEl = $(this.viewportEl).next();
 		//			alert('PSslider.initialize( Inserted navigation: naviEl.inspect: ' + this.naviEl.inspect(true) + ' )');
					}

 		 		//----------- eventhandler to navigation
 		 		this.linkSelector += this.linkClass ;
  		// 		alert('PSslider.initialize( linkSelector: ' + this.linkSelector + ' )');
				$(this.naviEl).select( this.linkSelector ).each( function(elt)
 						{ 
 		//				alert('PSslider.initialize( Set eventhandler:' + elt.inspect(true) + '  )');
 						//----------
 						var contentID = elt.readAttribute('href');
 						var regex = RegExp(/^#(.*)/);
 						var val = regex.exec(contentID);
 						contentID = val[1];
			//			alert('PSslider.initialize.links(found: viewport: ' + this.viewportID + '; content: '+ contentID + ';)');
 						//----------
 						if( !this.contentNodeH.get( contentID ) )
 							{ 
 							elt.setStyle( 'text-decoration: line-through;' );
 			//				alert('PSslider.initialize.links(failed: tar: ' + contentID + ';)');
 							return;
 							}
 						elt.setStyle( 'text-decoration:none;color: green;' );
 			//			alert('PSslider.initialize.links(sethandler: _swap)'  ); 
 						elt.observe( 'click', this._swap.bindAsEventListener( this, contentID ) );
 						//----------
 						}, this );
//   				//-----------			
// 	 		//	alert('PSslider.initialize( contentHash.keys: "' + this.contentHash.keys() + '" )');
				if( this.defaultSet )
					{
					this._activate( this.containerEl, this.activeClass );
					// first move
		//			alert('PSslider.initialize( defaultSet: "' + this.defaultSet + '":"' + this.contentVisible + '" )');
 					this.wrapperEl.setStyle( 'left:0px;' ); 
 					var coo_openId = $(this.contentVisible).viewportOffset();
 					var coo_wrapper = this.wrapperEl.viewportOffset();
 		//			alert('PSslider.initialize.first move(' + coo_openId.inspect() + ' \n ' + coo_wrapper.inspect() );
 					var tweendelta = -(coo_openId[0]-coo_wrapper[0]);
 		//			alert('PSslider.initialize.first move( setdefault: ' + tweendelta + '; )');
 					this.wrapperEl.setStyle( 'left:' + tweendelta + 'px;' ); 
					}
 				},
				
			_activate: function( container, clas )
				{
				// alle childs von ps-slider erhalten die Klasse active
		//		alert('PSslider._activate( container: "' + container + '" clas: "' + clas + '" )');
				var parts 	= $(container).childElements();
				parts.each( function( el )
						{
						el.addClassName( clas )
						//alert('PSslider._activate( el: "' + el + '"  class: "' + el.readAttribute('class') + '" )');
						}, this );
				this.defaultSet	= 1;
				if( this.wrapperWidth == 0 )
					{
					var parts 	= this.wrapperEl.childElements();
					parts.each( function(el){ this.wrapperWidth += el.getWidth();} ); 
	//				alert('PSslider._activate( wrapperWidth: "' + this.wrapperWidth  + '" )');
					}
				if( this.wrapperWidth == 0 )
					{ 
					this.wrapperWidth = 5000; 
					this.wrapperEl.setStyle( 'width:' + this.wrapperWidth + 'px;' );
					}
				},
			_swap: function( ev, showid )
				{
				var closeId = 0;
				var openId = 0;
 	//			alert('PSslider._swap( starts: ev: "' + ev + '" showid: "' + showid + '" )'); 
	//			alert('PSslider._swap( contentNodeH.inspect: ' + this.contentNodeH.inspect(true) + ' )');
				if( !this.defaultSet ){this._activate( this.containerEl, this.activeClass );}
				if( this.contentNodeH.get( this.contentVisible ) )
					{
					closeId = this.contentVisible;
					}
				else 
					{
					alert('PSslider._swap( failed: closeId unknown: "' + closeId + '"; )'); 
					}
				if( this.contentNodeH.get( showid ) )
					{
					openId = showid;
					}
				else 
					{
	//				alert('PSslider._swap( failed: openId unknown: "' + openId + '"; )'); 
					}
		//		alert('PSslider._swap( closeId: "' + closeId + '"; openId: "' + openId + '"; )'); 
				//-----------			
				if( (closeId && openId) && (closeId != openId) )
//				if( (closeId && openId) )
					{
					var coo_closeId = $(closeId).viewportOffset();			
					var coo_openId = $(openId).viewportOffset();
					var coo_viewport = this.viewportEl.viewportOffset();
					var tweenfrom = (coo_closeId[0]-coo_viewport[0]);
					var tweento = (coo_openId[0]-coo_viewport[0]);
					//positionedOffset
// 					var coo_wrapper = this.wrapperEl.viewportOffset();
// 					var tweenfrom = (coo_closeId[0]-coo_wrapper[0]);
// 					var tweento = (coo_openId[0]-coo_wrapper[0]);
					var tweendelta = -(coo_openId[0]-coo_closeId[0]);
					
//    					alert('closeId(' + closeId + ') Left: "' + coo_closeId[0] + '"; ' 
//    						+ '\nopenId(' + openId + ') Left: "' + coo_openId[0] + '"; '
//    						+ '\nwrapper Left: "' + coo_wrapper[0] + '"; ' 
//    						+ '\ndelta: "' + tweendelta + '";'   );
					this.contentVisible = openId;

					new Effect.Move( this.wrapperEl, { x: tweendelta, y: 0, mode: 'relative' });
					}
 				//-----------			
 				Event.stop( ev );
			return false;
				},
			});
 
 //----------------------------------------------------------------------
	document.observe("dom:loaded", function() 
			{
			$$('div.ps-toggle').each( function(el){ new PStoggle( el );  } );
			$$('div.ps-multi').each( function(el){ new PSmulti( el );});
			$$('div.ps-slider').each( function(el){ new PSslider( el );  } );
			});