Array.prototype.sortOn = function( ) {

	var dup = this.slice( );
	if ( !arguments.length ) return dup.sort( );

	var args = Array.apply( null, arguments );
	return dup.sort( function( a, b ) {
		var props = args.slice( );
		var prop = props.shift( );

		while( a[ prop ] == b[ prop ] && props.length ) prop = props.shift( );
		return a[ prop ] == b[ prop ] ? 0 : a[ prop ] > b[ prop ] ? 1 : -1;
	} );
};


var iListItemMax = 8;
var iScrollBarWidth = -1;

function getScrollerWidth( ) {

	if ( iScrollBarWidth == - 1 ) {
		var scr = null;
		var inn = null;
		var wNoScroll = 0;
		var wScroll = 0;

		// Outer scrolling div
		scr = document.createElement( 'div' );
		scr.style.position = 'absolute';
		scr.style.top = '-1000px';
		scr.style.left = '-1000px';
		scr.style.width = '100px';
		scr.style.height = '50px';
		// Start with no scrollbar
		scr.style.overflow = 'hidden';

		// Inner content div
		inn = document.createElement( 'div' );
		inn.style.width = '100%';
		inn.style.height = '200px';

		// Put the inner div in the scrolling div
		scr.appendChild( inn );
		// Append the scrolling div to the doc

		document.body.appendChild( scr );

		// Width of the inner div sans scrollbar
		wNoScroll = inn.offsetWidth;

		// Add the scrollbar
		if ( navigator.userAgent.indexOf( "MSIE" ) != -1 ) {
			scr.style.overflow = 'scroll';
		} else {
			scr.style.overflow = 'auto';
		}
		// Width of the inner div width scrollbar
		wScroll = inn.offsetWidth;

		// Remove the scrolling div from the doc
		document.body.removeChild( document.body.lastChild );

		iScrollBarWidth = wNoScroll - wScroll;
	}

    // Pixel width of the scroller
    return iScrollBarWidth;
}

function checkScrollBar( ) {
	window.scrollTo( 0, 0 );
	getScrollerWidth( );
}


var sSelectedChapterId = aChapters[ 0 ].name;
var sSelectedSubId = -1;
var sSelectedProjectId = -1;

var sDefaultOrder = "year";
var sProjectOrder = sDefaultOrder;

var aSlideShowImages = [ ];
var iSlideShowIndex = 0;

var sPageURL = "";
var sPageText = "";



function resizeSite( ) {
	document.getElementById( "image" ).innerHTML = getSlideShowImage( iSlideShowIndex );
	displayProjectGrid( );
	checkScrollBar( );
}

function nextImage( ) {
	iSlideShowIndex++;
	if ( iSlideShowIndex >= aSlideShowImages.length ) 
		iSlideShowIndex = 0;

	displayImage( iSlideShowIndex );
}

function getSlideShowImage( iImageIndex ) {

	// GENERATE CONTROLS-HTML
	var sControlsHTML = '<div id="image-controls">';
	if ( aSlideShowImages.length > 1 ) {		
		for ( var i=0; i<aSlideShowImages.length; i++ ) {
			if ( i == iImageIndex ) {
				sControlsHTML += '<a href="javascript:displayImage(' + i + ');" onClick="this.blur();" class="selected">' + ( i +1 ) + '</a>';
			} else {
				sControlsHTML += '<a href="javascript:displayImage(' + i + ');" onClick="this.blur();" class="option">' + ( i +1 ) + '</a>';
			}
			
			if ( i != aSlideShowImages.length - 1 ) sControlsHTML += " ";
		}
	} else sControlsHTML += '&nbsp;';
	sControlsHTML += '</div>';


	// DETERMINE MAX IMAGE-SIZE
	var iAvailWdth = Math.max( document.body.offsetWidth - 400 - 40, 
							   document.getElementById( "subs" ).offsetWidth - 40 );
	var iAvailHght = Math.max( document.body.offsetHeight - 234 - 40, 
							   document.getElementById( "text" ).offsetHeight - 40 - 5 );
	
	if ( document.body.clientHeight < document.body.scrollHeight ) 
		iAvailWdth += getScrollerWidth( );
		
	if ( aSlideShowImages.length == 0 || iSlideShowIndex == -1 ) {
		return "";
	} else {
		var sImageSrc = aSlideShowImages[ iSlideShowIndex ].src;
		var iImageWdth = aSlideShowImages[ iSlideShowIndex ].width;
		var iImageHght = aSlideShowImages[ iSlideShowIndex ].height;
		
		if ( iImageWdth / iImageHght < iAvailWdth / iAvailHght ) {

			sControlsHTML += '<img src="' + sImageSrc + '" height="' + Math.min( iImageHght, iAvailHght ) + '"';
		} else {
			sControlsHTML += '<img src="' + sImageSrc + '" width="' + Math.min( iImageWdth, iAvailWdth ) + '"';
		}
			
		if ( aSlideShowImages.length > 1 ) 
			sControlsHTML += ' onClick="nextImage();" style="cursor:pointer;"';
		
		return sControlsHTML + ' />';
	}
}

function displayImage( iImageIndex ) {
	iSlideShowIndex = iImageIndex;

	document.getElementById( "image" ).innerHTML = getSlideShowImage( iSlideShowIndex );
	document.getElementById( "image" ).style.display = "block";

	if ( aSlideShowImages[ iSlideShowIndex ].description != undefined 
	  && aSlideShowImages[ iSlideShowIndex ].description != "" ) {
	  
		document.getElementById( "text" ).innerHTML = sPageText + '<div class="divider"></div><div class="metatext">' + aSlideShowImages[ iSlideShowIndex ].description + "</div>";
	} else document.getElementById( "text" ).innerHTML = sPageText;
}
function displaySlideShow( ) {
	if ( aSlideShowImages.length > 0 ) displayImage( 0 );
	else document.getElementById( "image" ).style.display = "none"; 
}

function displayPage( oContentHTTP ) {
	var aResponseContent = oContentHTTP.responseText.split( "<!--// IMAGES //-->" );

	sPageText = aResponseContent[ 0 ];
	document.getElementById( "text" ).innerHTML = sPageText;
	document.getElementById( "text" ).style.display = "";

	var aResponseImages = [ ];
	if ( aResponseContent.length > 1 ) {
		aResponseImages = aResponseContent[ 1 ].split( "\n" );
		aResponseImages.shift( );
	}

	aSlideShowImages = [ ];
	iSlideShowIndex = 0;

	for ( var i=0; i<aResponseImages.length; i++ ) {
		if ( aResponseImages[ i ].indexOf( "<image " ) > -1 ) {

			var sSlideShowImage = aResponseImages[ i ].split( "<image " ).pop( )
													  .split( " />" ).shift( );

			var sImageSource = "";
			var sImageDescription = "";
			var iImageWdth = -1;
			var iImageHght = -1;
	
			var aImageParts = sSlideShowImage.split( '" ' );
			for ( var n=0; n<aImageParts.length; n++ ) {
				var aImagePart = aImageParts[ n ].split( '="' );
	
				switch ( aImagePart[ 0 ] ) {
					case "src":			sImageSource = aImagePart[ 1 ].substr( 3 ); break;
					case "description":	sImageDescription = aImagePart[ 1 ].substr( 0, aImagePart[ 1 ].length-1 ); break;
					case "width":		iImageWdth = parseInt( aImagePart[ 1 ] ); break;
					case "height":		iImageHght = parseInt( aImagePart[ 1 ] ); break;
				}
			}
	
			aSlideShowImages.push( { src:sImageSource, description:sImageDescription,
									 width:iImageWdth, height:iImageHght } );
		}
	}
	
	displaySlideShow( );
}

function loadPage( sURL ) {
	if ( sPageURL != sURL ) {
		sPageURL = sURL;
		
		document.getElementById( "text" ).style.display = "none";
	
		sendRequest( sURL, displayPage );
	} else if ( sURL.indexOf( "projects/" ) > -1
	         && document.getElementById( "grid" ).style.display == "block" ) {
		sendRequest( sURL, displayPage );
	} else {
		displayImage( 0 );
	}
}



function getChapterIndex( sChapterName ) {
	for ( var i=0; i<aChapters.length; i++ ) 
		if ( aChapters[ i ].name == sChapterName ) return i;
	
	return -1;
}
function getSubIndex( iChapterIndex, sSubName ) {
	for ( var i=0; i<aChapters[ iChapterIndex ].subs.length; i++ ) 
		if ( aChapters[ iChapterIndex ].subs[ i ].name == sSubName ) return i;
	
	return -1;
}
function getProjectIndex( sProjectName ) {
	for ( var i=0; i<aProjects.length; i++ ) 
		if ( aProjects[ i ].name == sProjectName ) return i;
	
	return -1;
}



function displaySubs( sSubId ) {
	var iChapterIndex = getChapterIndex( sSelectedChapterId );

	if ( sSubId == undefined ) sSubId = sSelectedSubId;
	if ( sSubId == -1 ) sSubId = aChapters[ iChapterIndex ].subs[ 0 ].name;
	
	var iSubIndex = getSubIndex( iChapterIndex, sSubId );
	var sSubURL = -1;
	
	sSubNavHTML = "";
	for ( var i=0; i<aChapters[ iChapterIndex ].subs.length; i++ ) {
		if ( i == iSubIndex ) {
			sSubNavHTML += '<a class="selected" ';
			sSubURL = aChapters[ iChapterIndex ].subs[ i ].url
		} else {
			sSubNavHTML += '<a class="option" ';
		}
		
		sSubNavHTML += 'href="javascript:displaySubs(\'' + aChapters[ iChapterIndex ].subs[ i ].name + '\');" onClick="this.blur();">' + aChapters[ iChapterIndex ].subs[ i ].name + '</a>';
		
		if ( i < aChapters[ iChapterIndex ].subs.length - 1 ) sSubNavHTML += '<br/>';
	}
	
	if ( aChapters[ iChapterIndex ].subs.length == 1 ) sSubNavHTML = "";
	document.getElementById( "subs" ).innerHTML = sSubNavHTML;
	
	if ( sSubURL != -1 ) loadPage( sSubURL );
}


function sortProjects( sOrder ) {
	if ( sOrder == undefined ) sOrder = sProjectOrder;

	var oPrevKey = -1;
	switch ( sOrder ) {
		case "name": 
			aProjects = aProjects.sortOn( "name" ); 			
			oPrevKey = aProjects[ 0 ][ sOrder ].substr( 0, 1 ).toLowerCase( );

			break;

		case "year": 
			aProjects = aProjects.sortOn( "year", "name" ); 
			aProjects.reverse( );

			oPrevKey = aProjects[ 0 ][ sOrder ];

			var aCluster = [ ];
			var aClusters = [ ];

			for ( var i=0; i<aProjects.length; i++ ) {

				if ( aProjects[ i ][ sOrder ] != oPrevKey ) {
					aClusters.push( aCluster.reverse( ) );
					aCluster = [ aProjects[ i ] ];

					oPrevKey = aProjects[ i ][ sOrder ];
				} else aCluster.push( aProjects[ i ] );
			}
			aClusters.push( aCluster.reverse( ) );

			aProjects = [ ];
			for ( var i=0; i<aClusters.length; i++ ) {
				for ( var n=0; n<aClusters[ i ].length; n++ )
					aProjects.push( aClusters[ i ][n ] );
			}
			oPrevKey = aProjects[ 0 ][ sOrder ];

			break;
	}
	
	
	

	var sOrderName = '<a class="option" href="javascript:sortProjects(\'name\');" onClick="this.blur();">alphabetical</a>';
	var sOrderYear = '<a class="option" href="javascript:sortProjects(\'year\');" onClick="this.blur();">chronological</a>';

	switch ( sOrder ) {
		case "name": sOrderName = '<span class="selected">alphabetical</span>'; break;
		case "year": sOrderYear = '<span class="selected">chronological</span>'; break;
	}
	sProjectOrder = sOrder;
	
	var oOrderDIV = document.getElementById( "projects-order" );
	if ( oOrderDIV != undefined ) oOrderDIV.innerHTML = sOrderName + '<span style="color:#A29E9D!important"> / </span>' + sOrderYear;
	
	displayProjects( undefined, true );
	displayProjectGrid( );
}

function nextProject( ) {
	var iProjectIndex = getProjectIndex( sSelectedProjectId );
	
	iProjectIndex++;
	if ( iProjectIndex == aProjects.length ) iProjectIndex = 0;
	
	displayProjects( aProjects[ iProjectIndex ].name );
}
function previousProject( ) {
	var iProjectIndex = getProjectIndex( sSelectedProjectId );
	
	iProjectIndex--;
	if ( iProjectIndex < 0 ) iProjectIndex = aProjects.length - 1;

	displayProjects( aProjects[ iProjectIndex ].name );
}

function rolloverProject( iIndex ) {

	var oLink = document.getElementById( "link_" + iIndex );
	if ( oLink != null )
		if ( oLink.className != "selected" ) oLink.style.color = "#12100B";
		
	var oThumb = document.getElementById( "thumb_" + iIndex );
	if ( oThumb != null ) {	
/*		if ( navigator.userAgent.indexOf( "MSIE" ) != -1 ) {
			oThumb.style.height = "100%";
			oThumb.style.marginTop = "0%";
		} else { */
			oThumb.className = "rollovered";
//		}
	}
}
function rolloutProject( iIndex ) {

	var oLink = document.getElementById( "link_" + iIndex );
	if ( oLink != null )
		if ( oLink.className != "selected" ) oLink.style.color = "#A29E9D";
	
	var oThumb = document.getElementById( "thumb_" + iIndex );
	if ( oThumb != null ) {
/*		if ( navigator.userAgent.indexOf( "MSIE" ) != -1 ) {
			oThumb.style.height = "83%";
			oThumb.style.marginTop = "4%";
		} else { */
			oThumb.className = "normal";
//		}
	}
}

function displayProjects( sProjectId, bOverrideOrderOptions ) {

	if ( bOverrideOrderOptions != true )
		sortProjects( sProjectOrder );
	
	if ( sProjectId == undefined ) sProjectId = sSelectedProjectId;
	var iProjectIndex = getProjectIndex( sProjectId );
	if ( iProjectIndex == -1 ) sSelectedProjectId = -1;
	else sSelectedProjectId = sProjectId;
	
	var iListIndex = 0;
	var iListItemCount = 0;
	
	var sSubNavHTML = '<div class="itemlist">';
	for ( var i=0; i<aProjects.length; i++ ) {
		iListItemCount++;
		
		if ( i == iProjectIndex ) {
			sSelectedProjectId = aProjects[ i ].name;
			
			sSubNavHTML += '<a class="selected" ';
		} else {
			sSubNavHTML += '<a class="option" ';
		}
		
		sSubNavHTML += 'href="javascript:displayProjects(\'' + aProjects[ i ].name + '\');" id="link_' + i + '" onmouseover="rolloverProject(' + i + ');" onmouseout="rolloutProject(' + i + ');" onClick="this.blur();">' + aProjects[ i ].name + '</a>';
		
		if ( iListItemCount < iListItemMax ) {
			sSubNavHTML += '<br/>';
		} else {
			iListIndex++;
			iListItemCount = 0;
			
			sSubNavHTML += '</div><div class="itemlist" style="left:' + ( iListIndex * 160 ) + 'px;">';
		}
	}
	sSubNavHTML += '</div>';
	
	if ( aProjects.length == 1 ) sSubNavHTML = "";
	document.getElementById( "subs" ).innerHTML = sSubNavHTML;

	if ( iProjectIndex != -1 ) {
		document.getElementById( "projects-order" ).style.display = "block";
		document.getElementById( "projects-navigation" ).style.display = "block";
		document.getElementById( "projects-overview" ).className = "option";
		
		loadPage( aProjects[ iProjectIndex ].url );
	} else {
		document.getElementById( "projects-order" ).style.display = "block";
		document.getElementById( "projects-navigation" ).style.display = "block";
		document.getElementById( "projects-overview" ).className = "selected";

		document.getElementById( "text" ).innerHTML = "";
		document.getElementById( "image" ).innerHTML = "";
		
		aSlideShowImages = [ ];
	}

	document.getElementById( "grid" ).style.display = 
		[ "none", "block" ][ Number( sProjectId == -1 ) ] ;
}
function displayProjectOverview( ) {
	sSelectedProjectId = -1;

	displayProjects( );
	displayProjectGrid( );	
}
function displayProjectGrid( ) {

	var iNumCellsPerRow = Math.ceil( aProjects.length / iListItemMax ) + 1;
	var iNumRows = Math.ceil( aProjects.length / iNumCellsPerRow );
	
	var iGridWidth = Math.ceil( aProjects.length / iListItemMax ) * 160 - 20;
	var iCellWidth = iGridWidth / iNumCellsPerRow;
		  
	iGridWidth += ( iCellWidth - 160 ) / 2;
	iCellWidth = iGridWidth / iNumCellsPerRow;
	
	var iMinCellHeight = 60;
	var iMaxCellHeight = 3 * iCellWidth / 4;
	var iCellHeight = Math.min( iMaxCellHeight, Math.max( iMinCellHeight, 
							  ( document.body.offsetHeight - 234 - 40 - 4 ) / iNumRows ) );
	var sGridHeader = '<table width="' + iGridWidth + '"cellspacing="0" cellpadding="0"><tr>';
	var sGridFooter ='</tr></table>';
	var sCellDefinition = '<td width="' + iCellWidth + '" height="' + iCellHeight + '>';

	var sGridHTML = "";
	var iCellCount = 0;
	for ( var i=0; i<Math.ceil( aProjects.length / iNumCellsPerRow ) * iNumCellsPerRow; i++ ) {
		if ( iCellCount == 0 ) sGridHTML += sGridHeader;
		
		if ( i< aProjects.length ) {
			sGridHTML += sCellDefinition + '<a href="javascript:displayProjects(\'' + aProjects[ i ].name + '\');" onmouseover="rolloverProject(' + i + ');" onmouseout="rolloutProject(' + i + ');"><img id="thumb_' + i + '" src="' + aProjects[ i ].thumb + '" class="normal"';

			if ( navigator.userAgent.indexOf( "MSIE" ) != -1 ) 
				sGridHTML += ' style="margin-top:4px;"';
				
			sGridHTML += 'onClick="displayProjects(\'' + aProjects[ i ].name + '\');"/></a></td>';
		} else {
			sGridHTML += '<td>&nbsp;</td>';
		}
		
		iCellCount++;
		if ( iCellCount == iNumCellsPerRow ) {
			sGridHTML += sGridFooter;	
			
			iCellCount = 0;
		}
	}
	
	document.getElementById( "grid" ).innerHTML = sGridHTML;
	document.getElementById( "grid" ).style.marginLeft = ( iCellWidth - 160 ) / 2 + "px";
}

function selectChapter( sChapterName ) {
	
	sSelectedProjectId = -1;
	
	sSelectedChapterId = sChapterName;
	sSelectedSubId = -1;
	
	sPageURL = "";
	
	var sMainNavHTML = "";
	var sSelectedChapterType = -1;
	for ( var i=0; i<aChapters.length; i++ ) {
		var sCurrentChapterName = aChapters[ i ].name;
		
		if ( sCurrentChapterName == sChapterName ) {
			sMainNavHTML += '<a class="selected" href="javascript:selectChapter(\'' + sCurrentChapterName + '\');" onClick="this.blur();">';
			
			sSelectedChapterType = aChapters[ i ].type;
		} else {
			sMainNavHTML += '<a class="option" href="javascript:selectChapter(\'' + sCurrentChapterName + '\');" onClick="this.blur();">';
		}	
		sMainNavHTML += sCurrentChapterName + '</a>';
		
		if ( i < aChapters.length - 1 ) sMainNavHTML += '<span style="color:#A29E9D!important"> / </span>';
	}
	
	if ( sSelectedChapterType == "projects" ) {
		sMainNavHTML += '<div id="projects-navigation">';
		sMainNavHTML += '<p><a href="javascript:displayProjectOverview();" onClick="this.blur();" id="projects-overview" class="option">overview</a></p>';
		sMainNavHTML += '<p><a href="javascript:previousProject();" onClick="this.blur();" class="option">previous</a><span style="color:#A29E9D!important"> / </span><a href="javascript:nextProject();" onClick="this.blur();" class="option">next</a></p>';
		sMainNavHTML += '</div>';
		
		sMainNavHTML += '<div id="projects-order"></div>';
	}
	
	document.getElementById( "main" ).innerHTML = "Chris Kabel<br/>" + sMainNavHTML;
	
	if ( sSelectedChapterType == "projects" ) {
		displayProjectOverview( );
	} else {
		sProjectOrder = sDefaultOrder;
		
		document.getElementById( "grid" ).style.display = "none";
		
		displaySubs( );
	}
	
	
	checkScrollBar( );
}

function initSite( ) {
	selectChapter( "Projects" );
	resizeSite( );
}

window.onload = initSite;
window.onresize = resizeSite;