// JavaScript Document

	function goPortfolio()
	{
		var tab		= document.getElementById( 'portfolio_tab' );
		var label	= tab.getElementsByTagName( "*" )[ 0 ].className;
		if ( label.search( "tab_text_selected" ) < 0 )
			prepAndGo( 'portfolio' );		
	} // end goPortfolio()
	
	function doPortfolioTasks()
	{
		doLoad();
		
	} // end doPortfolioTasks()
	
	function doLoad()
	{		
		// Read in file properties from xml file		
		var xmlObj = loadXMLDoc( "imgInfo.xml" );	
			 	
		var topDiv	= document.getElementById( 'top_level_container' );
		var btmDiv	= document.getElementById( 'bottom_level_container' );
		
		var pos;
		var imgId;
		var imgPath;
		var imgWidth;
		var imgHeight;
		var imgTitle;
		var imgTxt;
		
		// xmlObj.getElementsByTagName("portfolio")[0].lastChild.childNodes[0].text		
		
		// xmlObj.getElementsByTagName( "portfolio" )[ 0 ].childNodes[ i ].childNodes[ 0 ].text
		
		var el;
		var xmlNodeLength;
		var b = detectBrowser();
//		if ( b == "IE" )
//		{
//			xmlNodeLength = xmlObj.getElementsByTagName( "portfolio" )[ 0 ].childNodes.length;
//
//		} // end if
//		else if ( b = "FF" )
//		{
//			xmlNodeLength = xmlObj.childNodes[ 0 ].children.length
//
//		} // end else

        xmlNodeLength = xmlObj.getElementsByTagName( "portfolio" )[ 0 ].childNodes.length;
        var passCheck = true;
		for ( var i = 0; i < xmlNodeLength; i++ )
		{
			var curChild;
			
			if ( b == "IE" )
			{
				curChild = xmlObj.getElementsByTagName( "portfolio" )[ 0 ].childNodes[ i ];

				if ( curChild.childNodes.length != 0 )
				{
					// Get image properties
					pos			= curChild.childNodes[ 0 ].text;
					imgId		= curChild.childNodes[ 1 ].text;
					imgPath 	= curChild.childNodes[ 2 ].text;
					imgWidth	= curChild.childNodes[ 3 ].text;
					imgHeight	= curChild.childNodes[ 4 ].text;
					imgTitle	= curChild.childNodes[ 5 ].text;
					imgTxt		= curChild.childNodes[ 6 ].text;
				
				} // end if	
					
			} // end if
			
			else if ( b == "FF" )
			{
				curChild = xmlObj.childNodes[ 0 ].children[ i ];

				if ( curChild.childNodes.length != 0 )
				{
					// Get image properties
					pos			= curChild.children[ 0 ].textContent;
					imgId		= curChild.children[ 1 ].textContent;
					imgPath 	= curChild.children[ 2 ].textContent;
					imgWidth	= curChild.children[ 3 ].textContent;
					imgHeight	= curChild.children[ 4 ].textContent;
					imgTitle	= curChild.children[ 5 ].textContent;
					imgTxt		= curChild.children[ 6 ].textContent;

				} // end if
					
			} // end if

            else if (b == "Chrome")
            {
                curChild = xmlObj.childNodes[ 0 ].childNodes;

                if ( curChild.length != 0 )
                {
                    // Get image properties
                    pos			= curChild[ 0 ].textContent;
                    imgId		= curChild[ 1 ].textContent;
                    imgPath 	= curChild[ 2 ].textContent;
                    imgWidth	= curChild[ 3 ].textContent;
                    imgHeight	= curChild[ 4 ].textContent;
                    imgTitle	= curChild[ 5 ].textContent;
                    imgTxt		= curChild[ 6 ].textContent;
                } // end if                
            }

            else
            {
                passCheck = false;
            }

			if (passCheck) //( curChild.childNodes.length != 0 )
			{			
				// Create image container
				el 							= document.createElement( "div" );
				el.id						= imgId;
				el.className				= "portfolio_img rel_pos";
				el.style.background			= "url( " + imgPath + " )";
				el.style.backgroundRepeat	= "no-repeat";
				el.style.width				= imgWidth + "px";
				el.style.height				= imgHeight + "px";
	
				el.setAttribute( "title", imgTitle );
				el.setAttribute( "pos", pos );
				el.setAttribute( "txt", imgTxt );
				
				// Append container
				if ( pos == "top" )
				{
					topDiv.style.width = parseInt( topDiv.offsetWidth ) + parseInt( imgWidth ) + "px";
					topDiv.appendChild( el );
					// alert( topDiv.style.width );
				} // end if
				
				else if ( pos == "bottom" )
				{
					btmDiv.style.width = parseInt( btmDiv.offsetWidth ) + parseInt( imgWidth ) + "px";				
					btmDiv.appendChild( el );
					// alert( btmDiv.style.width );
				} // end else
					
				// Add hover event listener
				attachEventListener( el.id, "mouseover", doHoverFx, false );			
				attachEventListener( el.id, "mouseout", hideHoverFx, false );	
				attachEventListener( el.id, "click", function( event ){ startViewer( event ); }, false );
			
			} // end if

            // Reset
            passCheck = true;

		} // end for		
		
	} // end doLoad()
	
	function startViewer( event )
	{
		var el;	
		if ( detectBrowser() == "FF" )
			el = document.getElementById( event.currentTarget.id );
		else
			el = document.getElementById( window.event.srcElement.id );
		
		var maskEl 	= document.getElementById( 'view_mask' );
		var panelEl	= document.getElementById( 'panel' );
		var pos		= el.getAttribute( "pos" );
		var id		= el.getAttribute( "id" );
		var title	= el.getAttribute( "title" );
		var txt		= el.getAttribute( "txt" );
		// alert( "txt = " + typeof( txt ) );
		if ( document.getElementById( 'view_mask' ) )
		{
			doCloseView( "view_mask" );

		} // end if
		
		else
		{
			disable();
			view( id, title, pos, txt );			

		} // end else
		
	} // end startViewer()

	function disable()
	{
		var maskEl						= document.createElement( "div" );
		maskEl.id						= "view_mask";
		maskEl.style.width				= window.screen.availWidth + "px";
		maskEl.style.height				= document.body.clientHeight + "px";
		maskEl.style.backgroundColor	= "#000";
		maskEl.style.zIndex				= 2;
		maskEl.style.position			= "absolute";
		maskEl.style.top				= "0px";
		maskEl.style.left				= "0px";
		
		var maskPanelEl					= maskEl.cloneNode( true );
		maskPanelEl.id					= "view_panel";
		maskPanelEl.style.backgroundColor	= "transparent";
		maskPanelEl.style.zIndex		= 3;
		maskPanelEl.style.width			= "852px";
		maskPanelEl.style.height		= "500px";
		// maskPanelEl.style.border		= "2px solid white";
		
		if ( detectBrowser() == "FF" )
			maskEl.style.opacity		= 0.78;
		else
			maskEl.style.filter			= "alpha( opacity = 60 )";
		
		document.body.appendChild( maskPanelEl );
		document.body.appendChild( maskEl );
		
		// centerVertical( maskEl, maskEl.parentNode );		
		
		maskEl.style.visibility			= "visible";
		
		// Close button
		var closeButton				= document.createElement( 'div' );
		closeButton.id				= "close_mask_button";
		closeButton.style.top		= "0px"; // "-22px";
		closeButton.style.left		= "865px";
		closeButton.style.width		= "50px";
		closeButton.style.height	= "50px";
		//closeButton.style.backgroundColor	= "#fff";
		closeButton.style.backgroundImage	= "url( 'public/images/thumbs/close_mask_button.png' )";
		closeButton.style.position	= "absolute";
		closeButton.style.zIndex	= "3";
		
		maskPanelEl.appendChild( closeButton );
		
		// Listener to kill the mask
		attachEventListener( closeButton.id, "mouseup", function( event ){ hideHoverFx( event ) }, false );		
		attachEventListener( closeButton.id, "mousedown", function( event ){ doHoverFx( event ) }, false );		
		attachEventListener( closeButton.id, "click", function( event ) { hideHoverFx( event ); setTimeout( "closeViewer();", 40 ); }, false );
		// attachEventListener( maskPanelEl.id, "click", closeViewer, false );
		
		// Center
		centerVertical( maskPanelEl, maskPanelEl.parentNode );
		doCenterHorizontal( maskPanelEl, maskEl );
		
		maskPanelEl.style.left = ( maskPanelEl.offsetLeft - 64 ) + "px";
		
	} // end disable()

	function closeViewer()
	{
		doCloseView();
		
	} // end closeViewer()
	
	function doCloseView()
	{
		var mask 		= document.getElementById( 'view_mask' );
		var viewPanel	= document.getElementById( 'view_panel' );
		mask.parentNode.removeChild( mask );
		viewPanel.parentNode.removeChild( viewPanel );
		
	} // end doCloseView()
	
	function view( imgId, title, pos, txt )
	{		
		setup();		
		
		if ( pos )
		{
			document.getElementById( 'view_panel' ).style.width = "974px";
			document.getElementById( 'close_mask_button' ).style.left = "928px";
			
		} // end if
			
		var id 						= imgId + "_okii";		
		var imgPath					= "public/images/" + imgId + ".png";
		var panel					= document.createElement( "div" );

		panel.id					= "panel";
		panel.className				= "portfolio_txt rel_pos";
		panel.style.backgroundColor	= "Sienna";
		panel.style.width			= "400px";
		panel.style.height			= "352px";
		panel.style.border			= "4px solid #b87c45";
		panel.style.position		= "relative";
		panel.style.zIndex			= "3";

		if ( pos == "top" )
			panel.style.right			= "50px";
			
		// panel.style.right			= "62px"; // ( window.screen.availWidth / 4 ) - ( 400 / 4 ) + "px";
		// panel.style.top				= ( window.screen.availHeight / 2 ) - ( 533 / 2 ) + "px";
		panel.style.color			= "white";
		panel.style.padding			= "5px 5px 5px 5px";
		panel.style.fontFamily		= "Trebuchet MS, arial";
		panel.style.fontSize		= "0.8em";
		panel.style.float			= "right";
		panel.style.overflowY		= "auto";

		panel.innerHTML				= title + "<br/><br/>" +
											"<div style='text-align:left; position:relative; left:4px;'>" + 
											doParse( txt ) + 
											"</div>";
		
// alert( panel.innerHTML );		
		// Append back
		// document.getElementById( 'bg_panel' ).insertBefore( panel, document.getElementById( 'x' ) );			
		document.getElementById( 'view_panel' ).appendChild( panel );		
						
		// Center
		centerVertical( panel, panel.parentNode );
		// doCenterHorizontal( panel, panel.parentNode );	
/*
		if ( pos == "top" )
			panel.style.left 	= ( panel.parentNode.offsetLeft / 1 ) - ( panel.offsetLeft / 8 ) + "px";		
		else
			panel.style.left	= ( panel.parentNode.offsetLeft / 12 ) - ( panel.offsetLeft / 12 ) + "px";			
*/			
		// Create image container
		el 							= document.createElement( "div" );
		el.id						= id;
		el.className				= "portfolio_img rel_pos";
		// el.style.backgroundColor	= "#ffffff";

		if ( pos == "top" ) 
			el.style.left				= "50px";
		
		el.style.background			= "url( " + imgPath + " )";
		el.style.backgroundRepeat	= "no-repeat";
		el.style.overflowX			= "hidden";
		el.style.overflowY			= "auto";

		if ( pos == "top" )
		{
			el.style.width				= "400px";
			el.style.height				= "533px";
			// el.style.left 				= el.offsetLeft - ( el.offsetLeft / 3 ) + "px";

		} // end if
		else if ( pos == "bottom" )
		{
			el.style.width				= "533px";
			el.style.height				= "400px";
			// el.style.left 				= el.offsetLeft - ( el.offsetLeft / 4 ) + "px";			
			
		} // end else
		
		el.style.border				= "4px solid #b87c45";
		el.style.position			= "relative";
		el.style.zIndex				= "3";
		el.style.float				= "right";		
		// el.style.left			= ( document.body.clientWidth / 16 ) - ( 400 / 16 ) + "px";
		// el.style.top				= ( document.body.clientHeight / 32 ) - ( 533 / 32 ) + "px";
				
		// Append container
		document.getElementById( 'view_panel' ).appendChild( el );
		
		// Attach listener ( for projects with multiple images )
		// attachEventListener( el.id, "click", function( event ) { cycleImages( event ); }, false );				
		
		if ( imgId == "t26" )
		{
			var sc0 			= document.createElement( 'div' );
			sc0.style.backgroundImage	= "url( public/images/t26.png )";
			if ( pos == "top" )
			{
				sc0.style.width				= "400px";
				sc0.style.height				= "533px";
				// el.style.left 				= el.offsetLeft - ( el.offsetLeft / 3 ) + "px";
	
			} // end if
			else if ( pos == "bottom" )
			{
				sc0.style.width				= "533px";
				sc0.style.height				= "400px";
				// el.style.left 				= el.offsetLeft - ( el.offsetLeft / 4 ) + "px";			
				
			} // end else
	
			el.appendChild( sc0 );
			
			var sc1 			= document.createElement( 'div' );
			sc1.style.backgroundImage	= "url( public/images/t26_1.png )";
			if ( pos == "top" )
			{
				sc1.style.width				= "400px";
				sc1.style.height				= "533px";
				// el.style.left 				= el.offsetLeft - ( el.offsetLeft / 3 ) + "px";
	
			} // end if
			else if ( pos == "bottom" )
			{
				sc1.style.width				= "533px";
				sc1.style.height				= "400px";
				// el.style.left 				= el.offsetLeft - ( el.offsetLeft / 4 ) + "px";			
				
			} // end else
	
			el.appendChild( sc1 );
	
			var sc2 			= document.createElement( 'div' );
			sc2.style.backgroundImage	= "url( public/images/t26_2.png )";
			if ( pos == "top" )
			{
				sc2.style.width				= "400px";
				sc2.style.height				= "533px";
				// el.style.left 				= el.offsetLeft - ( el.offsetLeft / 3 ) + "px";
	
			} // end if
			else if ( pos == "bottom" )
			{
				sc2.style.width				= "533px";
				sc2.style.height				= "400px";
				// el.style.left 				= el.offsetLeft - ( el.offsetLeft / 4 ) + "px";			
				
			} // end else
	
			el.appendChild( sc2 );		
			
			var sc3 			= document.createElement( 'div' );
			sc3.style.backgroundImage	= "url( public/images/t26_3.png )";
			if ( pos == "top" )
			{
				sc3.style.width				= "400px";
				sc3.style.height				= "533px";
				// el.style.left 				= el.offsetLeft - ( el.offsetLeft / 3 ) + "px";
	
			} // end if
			else if ( pos == "bottom" )
			{
				sc3.style.width				= "533px";
				sc3.style.height				= "400px";
				// el.style.left 				= el.offsetLeft - ( el.offsetLeft / 4 ) + "px";			
				
			} // end else
	
			el.appendChild( sc3 );
		
		} // end if
			
		// Center
		centerVertical( el, el.parentNode );
		// doCenterHorizontal( el, el.parentNode );
/*
		if ( pos == "top" )
			el.style.left 				= ( el.parentNode.offsetLeft / 4 ) - ( el.offsetLeft / 4 ) + "px";
		else if ( pos == "bottom" )
			el.style.left 				= ( el.parentNode.offsetLeft / 16 ) - ( el.offsetLeft / 16 ) + "px";			
*/		
	} // end view()

	function cycleImages( event )
	{
/*		var el;	
		if ( detectBrowser() == "FF" )
			el = document.getElementById( event.currentTarget.id );
		else
			el = document.getElementById( window.event.srcElement.id );		
	
		el.style.backgroundImage = "url( public/images/" + el.getAttribute( "" ) + ".png" )";
		
		Problem: Need to figure out how to control which img is currently being viewed.
		
*/		
	} // end cycleImages()
	
	function setup()
	{
		var leftSide		= document.createElement( "div" );
		leftSide.id			= "left_side";
		leftSide.className	= "view_ls rel_pos";
		
		var rightSide		= document.createElement( "div" );
		rightSide.id		= "right_side";
		rightSide.className	= "view_rs rel_pos";
		
		document.getElementById( 'view_mask' ).appendChild( leftSide );
		document.getElementById( 'view_mask' ).appendChild( rightSide );
		
	} // end setup()