// public Methods for page Object --------------------------------------------------------------------------------------------
			var pageMethods = {
			
				// Rescale a loaded image into available space ----------------------------------------------------------------------
				rescaleImage : function (){
					var that = this,
						// parameters
						marginleft 		= 256,
						marginright 	= 48,
						margintop 		= 160,
						marginbottom 	= 16,
						basewidth		= 992,																		// Default: Browser 1024px x 768px (Logo steht damit ca. 32px von rechts)
						leftspacefac 	= 0.0746,																	// Faktor verändert linken Randabstand - default Wert für 1280px x 960px
						rightspacefac	= 1.85,																		// Faktor verändert rechten Randabstand - default Wert für 1280px x 960px
						sourceWidth		= 1024,
						sourceHeight	= 802,
						
						// calculations
						totalwidth 		= $( window ).width(),
						totalheight 	= $( window ).height(),
						availableWidth 	= totalwidth - marginleft - marginright,
						availableHeight = totalheight - margintop - marginbottom,		
						project 		= that.getProjectByID( that.projectID ),
						
						// get imagesize from loaded source or preset values
						sourceWidth = that.sourcewidth || $('#content > img').width(),
						sourceHeight = that.sourceheight || $('#content > img').height(),
						
						// variables 
						scaleX, scaleY, scale,
						imagewidth, imageHeight,
						leftspacerwidth,
						rightspacerwidth,
						minWidthForRightSpacer;
					
						
					// Step 1 : add space to the right of image 
					// 			depending on size <> 1024 
					// --------------------------------------------------------------------
					if ( totalwidth > basewidth ){
					rightspacerwidth = ( totalwidth / basewidth ) * marginright * rightspacefac;				// calculate right spacers size
					minWidthForRightSpacer = basewidth - marginleft - marginright;  							// 1024 - 256 - 48  (720) minimum available width for right spacer 
					availableWidth = Math.max( minWidthForRightSpacer, availableWidth - rightspacerwidth ) ; 	// add spacer but keep minimum image width (720)
					} 
					 
					// Step 2 : add space to left side of image depending on the available width 
					// 			(not depending on any certain size!)
					// --------------------------------------------------------------------
					leftspacerwidth = ( availableWidth * leftspacefac );
					availableWidth = availableWidth - leftspacerwidth;											// remove from available width
					$('#content > img').css( { 'margin-left': ( marginleft + leftspacerwidth ) + 'px' } ); 		// set new image margin
					
					// Step 3 : Check for maximum imagesize
					// --------------------------------------------------------------------
					if ( that.maxImageWidth )  availableWidth  = Math.min( availableWidth,  that.maxImageWidth  );
					if ( that.maxImageHeight ) availableHeight = Math.min( availableHeight, that.maxImageHeight );
					
					// Step 4 : calculate image size based on original sources size and find the scale value 
					// --------------------------------------------------------------------
					scaleX = availableWidth / sourceWidth;
					scaleY = availableHeight / sourceHeight;
					scale = Math.min( scaleX, scaleY );															// Wenn man ", scaleY " herausnimmt, dann wird nur die Breite skaliert
					
					// Step 5 : update DOM
					// --------------------------------------------------------------------
					$('#content > img')
						// Set image source
						.attr({ 
							width : sourceWidth * scale,
							height : sourceHeight * scale
						})
						.unbind()
						.one('click',
							function(){
								// find the next image in Imageset and show it
								that.imageID = ( project.images.length > that.imageID )? that.imageID + 1 : 1;
								that.showImage( jqueryBox );
							}
						)
						.css( { 
							cursor : 'pointer', 
							visibility: 'visible'
						} );
					
					// set logo position																			// logo position 
					$('#header > #logo')
						.css( { 
							'margin-left': Math.max( 715, marginleft + leftspacerwidth + (((sourceWidth) * scale) + 32) - $('#header > #logo img').attr('width'))		
					// 715 ist die minimale linke Startposition des Logos (Breite: 229px, also 715+229+32+48=1024). (soureceWidth + 32): "32" rückt das Logo weiter nach rechts über den Bildrand des Arbeitsbeispiels hinaus.
						} );
					
				},
				
				// get a project by its id value --------------------------------------------------------------------------------------
				getProjectByID: function (id, group) {
					var group = group || this.projects;
					for (var i in group){
						if (id === group[i].id) return group[i];
						else if( group[i].group ){
							var found = this.getProjectByID(id, group[i].group);
							if (found) return found; 
						}
					}
					return false;
				},
				
				// check if a group contains a projectID ------------------------------------------------------------------------------
				groupContainsProjectID: function (group, projectID) {
					for (var i in group){
						if (group[i].id === projectID ) return true;
						else if(group[i].group){
							var found = this.groupContainsProjectID( group[i].group, projectID);
							if (found) return found;
						}
					} 
					return false;
				},
				
				// Preload all thumbnails -------------------------------------------------------------------------------------------
				preload : function () {	
					var project,
						projectID=1,
						loader;
					while( project = this.getProjectByID( projectID++ ) ){		// for all projects
						for (var imageID in project.images ) {						// preload all thumbs
							loader = new Image();
  							loader.src = this.basepath + project.imagefolder + 'thumbs/' + project.images[imageID]
						}
					}
				},
				// Show current image -----------------------------------------------------------------------------------------------
				showImage : function (){
					var that = this,
						project = that.getProjectByID(that.projectID);
						
					$('#content') // create NEW hidden img (changing the source does not work cause images are not resized to the new sources size)
						.html( '<img style="visibility:hidden; margin-top:160px;" src=' + that.basepath + project.imagefolder + project.images[that.imageID-1] + '>' );
					
					$('#content > img').load( // Wait till image ist loaded, then call rescaleImage()	
						function () {
							that.rescaleImage();
						}
					);
					
				},
				
				// Generate Navigation -> returns a recursive HTML ul-list of groups and projects  ----------------------------------
				navHTML : function HTMLlist (node) {					
					var node = node || this.projects,
						html = '',
						elm;
				
					// unsorted list
					html += '<ul>';
					for ( var i in node ){
						element = node[i];								// the current node
						
						if (element.group){								// Its a group element
							html += '<li';								// if current Project is inside this group add class "current"
							if ( this.groupContainsProjectID( element.group , this.projectID ) ){
								html += ' class="current"';
							}
							html += '>';
							
							html += '<span class="client">' + element.title + '</span>';	// Group Title
							html += this.navHTML( element.group )		// add recursive Elements
							html += '</li>';
						} 
						else if (element.id){							// Its a project element
							html += '<li projectid="' + element.id + '">';
							html += '<span class="client">' + element.title + '</span>';	// Element Title
							html += '</li>';
						}
					}
					html += '</ul>';
					return html;
				},
				
				// showProject ------------------------------------------------------------------------------------------------------------
				showProject : function (jqueryBox){
					var that = this,
						project = that.getProjectByID( that.projectID );

					// refresh detail view
					that.showImage();
					
					// refresh navigation HTML code
					$('#projectnav').html( that.navHTML() ); // no node given so it starts at the root element
					
					// activate navigation -----------------------------
					// 1) for all elements
					$('#projectnav li[projectid] .client')
						.css( { cursor: 'pointer' } )
						.hoverIntent(
							
							// Mouseover project navpoint --------------------------------
							function (e) {
								// set all parents to class mouseover on hover
								$(this).parents().addClass('mouseover');
								
								// get a reference to the project
								var id = Number( $(this).parent().attr('projectid') ),
									project = that.getProjectByID( id );
								
								// Hide bevore rewrite
								jqueryBox.hide();
								
								// generate html for thumbs 
								html 	= '';
								for (imageid in project.images){	// for each image
									html += '<img pid="' + project.id + '" iid="' + ( + imageid + 1) + '" src="' + that.basepath + project.imagefolder + 'thumbs/' + project.images[imageid] + '" />'
								}
								html += '<div style="clear:both;"></div>';
								
								// set content
								jqueryBox.setContent(html);
								
								// activate content (click on image thumb)
								jqueryBox.jqueryBox.find('.JqueryBoxContent img')
									.css( { margin: 4, cursor: 'pointer' } )
									.click( function (e) {
											that.projectID = Number( $(this).attr('pid') ),
											that.imageID = Number ( $(this).attr('iid') );
											that.showProject(jqueryBox);
										}
									)
								
								// reset shift
								jqueryBox.shiftArrow(54);
								
								// set up box
								jqueryBox.setContentWidth( 208 );		
								jqueryBox.setPositionRelativeTo( $(this), 0, 0 );
								jqueryBox.jqueryBox.css( {left: 240} )
								jqueryBox.setContentPadding(0);
								jqueryBox.show();
								
							},
							function () {
								// remove all parents from class current 
								$(this).parents().removeClass('mouseover');
							}
						)
						.click(
							function (){
								that.projectID = Number( $(this).parent().attr('projectid') );
								that.imageID = 1;
								that.showProject(jqueryBox);
							}
						);
					
					// 2) for current project
					$("#projectnav li[projectid='" + this.projectID + "']")
						.addClass('current')
						// add InfoLink
						.append('<a href="#" class="infobox">Info&nbsp;...</a>')	
						.find('a.infobox')
							.hoverIntent(
								function (e) {
									var id 		= Number( $(this).parent().attr('projectid') ),
										project = that.getProjectByID(id),
										html 	= '';
									// Content
									html += '<h1>' + project.infobox.headline + '</h1>';
									html += project.infobox.content;
									
									// set up box
									jqueryBox.setContent(html);
									jqueryBox.setContentWidth( 200 );		
									jqueryBox.setPositionRelativeTo( $(this).parent(), 208, 0 );							// set relative to calling object
									jqueryBox.setContentPadding( 4 );
									
									// change css for list elements containing a link and set hover effect
									jqueryBox.jqueryBox.find('.JqueryBoxContent li:has(a)')
										.css({ 'background-image': 'url(./image/bg_link-dot.gif)' })
										.hover (
											function () {
												$(this).css({ 'background-image': 'url(./image/bg_hover-dot.gif)' });
											},
											function () {
												$(this).css({ 'background-image': 'url(./image/bg_link-dot.gif)' });
											}
										);
									
									// show it
									jqueryBox.show();
								}
								,
								function () {}
							);
				
				} // end showProject
			} // end pageMethods
			
			// Helper object for recalculating the logo position without image
			var logoPosition = {
				sourcewidth : 1024, //image width
				sourceheight : 802, //image height
				recalc : pageMethods.rescaleImage,
				getProjectByID : function () { return false; }
			}