//	over-write prototype's $$ function coz it sucks a fat turd!
			$$= cssQuery;
//	couldn't think of a namespace so this is it baby!
			if ( !___ ) var ___ = {};
			
			___.Loader = Class.create();
			___.Loader.prototype = {
				image_source : '', 
				text : '', 
				initialize : function( obj, options )
				{
					
				}
			};
			
			___.ScrollTo = Class.create();
			___.ScrollTo.prototype = {
				initialize : function( obj )
				{
					if ( obj instanceof Array )
						obj.each( this.initialize );
						
					$$( 'a[href^="#"]', obj ).each( function( a )
					{
						var place = a.href.replace( /^.*?#(.*)$/, "$1" );
						Event.observe( a, 'click', function( evt ) {
							new Effect.ScrollTo( $$( 'a[name="' + place + '"]' )[0] );
							Event.stop( evt );
						}, false );
					} );
				}
			};
			
			___.CodeViewer = Class.create();
			___.CodeViewer.prototype = {
				initialize : function( options )
				{
					this.options = $H( {
						 pre_html : '', 
						 post_html : ''
					} ).merge( options || {} );
					
					this.target = $( this.options.target );
					Element.hide( this.target );
					this.LIGHTBOX = new ___.LightBox( this.target );
					Event.observe( this.target, 'dblclick', this.hide_example.bind( this ), false );
				
					$$( 'a[class~="' + this.options.anchorClass + '"]' ).each( function( a )
					{
						this._make_interactive.call( this, a );
					}.bind( this ) );
				}, 
				
				hide_example : function( evt )
				{
					this.LIGHTBOX.hide();
					
					new Effect.ScrollTo( Element.previous( this.current_example.parentNode, '.dp-highlighter' ) );
				}, 
				
				show_example : function( evt )
				{
					var element = Event.element( evt );
					this.current_example = element;
					
					var code = Element.previous( element.parentNode, '.' + this.options.snippet ).innerHTML.replace( /&lt;/g, "<" );
					code = code.replace( /&gt;/g, ">" );
					
					this.target.innerHTML = this.options.pre_html + code + this.options.post_html;
					
					this.LIGHTBOX.show(  );
					
					Event.stop( evt );
				}, 
				
				_make_interactive : function( element )
				{
					Event.observe( element, 'click', this.show_example.bind( this ), false );
				}
			};
			
			___.LightBox = Class.create();
			___.LightBox.prototype = {
				initialize : function( obj, options )
				{
					this.options = $H( {
						center : true, 
						noScroll : false, 
						partial : false
					} ).merge( options || {} );
					
					this.LIGHTBOX = Builder.node( 
						'div', 
						{ 
							'class' : 'lightbox', 
							'style' : 'display : none ;'
						}
					);
					document.body.appendChild( this.LIGHTBOX );
					
					if ( this.options.extra_class_names )
						Element.addClassName( this.LIGHTBOX, this.options.extra_class_names );
					
					this.LIGHTBOX_COPY = $( obj );
			//	this is for IE mainly but we will use this also for a common centre effect
					document.body.appendChild( this.LIGHTBOX_COPY );
					
					this.LIGHTBOX.setAttribute( 'visible', 'false' );
					
					this.LIGHTBOX.style.height = this.get_dimension()['docHeight'] + 'px';
					this.LIGHTBOX.style.width = this.get_dimension()['docWidth'] + 'px';
					
			//	resize is crashing IE, so...
					if ( !window.attachEvent )
						Event.observe( window, 'resize', this.set_dimensions.bind( this ), false );
					
					if ( this.options.partial && navigator.appVersion.match( /MSIE/i ) )
						document.body.appendChild( Builder.node( 'div', { id : 'ie-fix' } ) );
				},
				
				center_copy : function()
				{
					if ( navigator.appVersion.match( /MSIE/i ) || document.defaultView.getComputedStyle( this.LIGHTBOX_COPY, null ) )
						this.LIGHTBOX_COPY.style.left = ( this.get_dimension()['docWidth'] - parseInt( Element.getStyle( this.LIGHTBOX_COPY, 'width' ) ) ) / 2 + 'px';
					else
						this.LIGHTBOX_COPY.style.left = '15%';
				}, 
				
				get_dimension : function()
				{
					return { 
						docHeight : document.body.clientHeight + 50, 
						docWidth : document.body.clientWidth, 
						winHeight : ( window.innerHeight || document.documentElement.offsetHeight ) - 50, 
						winWidth : ( window.innerWidth || document.documentElement.offsetWidth )
					};
				}, 
				
				hide : function( obj )
				{
					Effect.Fade( 
						this.LIGHTBOX_COPY, 
						{
							duration : 0.5, 
							afterFinish: function()
							{
								if ( this.options.extra_class_names )
									this.toggle_page_container.call( this, this.options.extra_class_names, 'remove' );
									
								Effect.Fade( this.LIGHTBOX,{duration : 0.5});
							}.bind(this) 
						} 
					);
					
					if ( this.options.partial && navigator.appVersion.match( /MSIE/i ) )
					{
						this.toggle_msie_potision_fixed.call( this, false );
						this.toggle_select_lists.call( this, 'visible' );
					}
						
				//	document.body.style.height = 'auto';
				//	document.body.style.overflow = 'visible';
					
					this.LIGHTBOX.setAttribute( 'visible', 'false' );
					
					if ( obj )
						new Effect.ScrollTo( obj );
				}, 
				
				set_dimensions : function()
				{
	//			console.log( document.documentElement.offsetHeight );
					if ( this.options.partial )
					{
						this.LIGHTBOX_COPY.style.height = this.get_dimension()['winHeight'] + 'px';
						
						this.LIGHTBOX.style.height = this.get_dimension()['docHeight'] + 'px';
					}
					else
					{
						this.LIGHTBOX.style.height = ( this.get_dimension()['winHeight'] + 50 ) + 'px';
						this.LIGHTBOX.style.width = this.get_dimension()['winWidth'] + 'px';
						
					//	document.body.style.height = this.get_dimension()['winHeight'] + 'px';
					//	document.body.style.overflow = 'hidden';
					}
					
					if ( this.options.center )
						this.center_copy.call( this );
				}, 
	
				show : function()
				{
					if ( this.options.partial )
					{
						if ( navigator.appVersion.match( /MSIE/i ) )
						{
							this.toggle_select_lists.call( this, 'hidden' );
							this.toggle_msie_potision_fixed.call( this, true );
						}
						
						if ( this.options.extra_class_names )
							this.toggle_page_container.call( this, this.options.extra_class_names, 'add' );
					}
					this.set_dimensions.call( this );
					
					Effect.Appear( 
						this.LIGHTBOX, 
						{ 
							duration : 0.5, 
							to: 0.8, 
							afterFinish: function()
							{
								if ( this.options.noScroll )
									this.LIGHTBOX_COPY.style.top = ( ( window.pageYOffset
																                || document.documentElement.scrollTop
																                || document.body.scrollTop
																                || 0 ) + 50 ) + 'px'; 
																				
								Effect.Appear( this.LIGHTBOX_COPY, { duration : 0.5 } );
							}.bind(this) 
						} 
					);
					
					this.LIGHTBOX.setAttribute( 'visible', 'true' );
					
					if ( !this.options.noScroll )
						new Effect.ScrollTo( document.body );
				}, 
				
				toggle_msie_potision_fixed : function( showLightBox )
				{
					if ( showLightBox )
						$( 'ie-fix' ).appendChild( document.getElementsByTagName( 'div' )[0] );
					else
						document.body.insertBefore( $( 'ie-fix' ).getElementsByTagName( 'div' )[0], document.body.firstChild );
				}, 
				
				toggle_page_container : function( className, type )
				{
					Element[type + 'ClassName']( document.documentElement, className );
				}, 
				
				toggle_select_lists : function( visibility )
				{
					cssQuery( 'select' ).each( function( list )
					{
						list.style.visbility = visibility;
					} );
				}
			};
			
			Event.observe( window, 'load', function() { 
				dp.SyntaxHighlighter.HighlightAll( 'code' );
				new ___.ScrollTo( $$( 'ul.page' ) );
				new ___.CodeViewer( {
					anchorClass : 'view-example',
					snippet : 'xml', 
					pre_html : '<div class="section">', 
					post_html : '</div><p class="shim">double click this box to go back to where you were.</p>', 
					target : 'examples'
				} );
			}, false );