//specific functions used by navigational elements on the page



//grabs a portfolio with given params from the database and creates an overlay
function showPortfolio(params,thisOne){
	//add the loading animation overlay to the container that called this function
	thisOne.append($('<div></div>').addClass('loadingOverlay'));
	
	//append the overlay to the body
	$('body').append(
				//the overlay container
				$('<div></div>')
					.attr({id:'portfolio'})
					.append(
					
						//close button
						$('<img>')
							.attr({id:'portfolioCloseBtn',src:'images/portfolioClose.png'})
							.click(function(){
									$('#portfolio').fadeOut(function(){$('#portfolio').unbind().remove()})
							}),
								
						//transparent background
						$('<div></div>')
							.attr({id:'portfolioBg'}),
						
						//foreground
						$('<div></div>')
							.attr({id:'portfolioFg'})	
						).hide()
					);
					
	//put a query together from the params map
	var qstring = '';
	
	$.each(params, function(index, value) { 
		qstring += (index + '=' + value + '&'); 
	});
	
	//get the markup
	getContent('portfolio.php?'+qstring.slice(0,-1),
		//put it in the container
		$('#portfolioFg'),
		
		//callback
		function(){
			
			//add mouseover actions for each tile based on their attributes
			$('.portfolioTile').mouseenter(function(){
				
				//if the overlay has not been created yet
				if(!$(this).children('.portfolioOverlay').length){
					
					//add it and hide it
					$(this).append(
								$('<div></div>')
									.attr({'class':'portfolioOverlay helveticaBold'})
									.append(
										$('<div></div>')
											.attr({'class':'portfolioOverlayFg'})
											.append($(this).attr('thetitle')+
													'<br /><br />'+
													'<span class="portfolioOverlayBy">'+
														'<span class="helvetica">by</span> '
															+$(this).attr('by')+
													'</span>'+
													'<span class="portfolioOverlayIn">'+
														'<span class="helvetica">in</span> '+$(this).attr('type')+'</span>'+
														'<div class="helvetica portfolioOverlayDscr">'+$(this).attr('dscr')+'</div>'),
										
										$('<div></div>')
											.attr({'class':'portfolioOverlayBg'})

									).hide()
					);
					
					//if gallery is enabled, build the gallery slides
					if($(this).attr('gallery') == 'true'){
						$(this).children('.portfolioOverlay')
								.append($('<div></div>')
								.attr({'class':'galleryOverlay'})
								);
								
						getContent('getgallery.php?project='+$(this).attr('id'),$(this).children('.portfolioOverlay').children('.galleryOverlay'),
						function(c){
								c.children('span')
								.mouseenter(function(){
									$(this).fadeTo('fast',0.5);	
								}).mouseleave(function(){
									$(this).fadeTo('fast',1.0);
								}).click(function(){
									showImage($(this).attr('id'), 
												$(this).attr('path'),
												$(this).attr('bigwidth'),
												$(this).attr('bigheight'),
												$(this)
										)
								})
							
							})	
					}
						
				}
				
				//fade it in
				$(this).children('.portfolioOverlay').fadeIn({queue:true});
			}).mouseleave(function(){
				//fade out the overlay
				$(this).children('.portfolioOverlay').fadeOut({queue:true});
			
			}).click(function(){
				
				
					//open a website in a new window or an image gallery, or do nothing if there is a gallery 
					if($(this).attr('gallery') == 'true'){
						//do nothing
					}else if($(this).attr('type') == 'Web'){
						window.open($(this).attr('weburl'))
					}else{
						showImage($(this).attr('id') + '.jpg', 
									$(this).attr('path'),
									$(this).attr('bigwidth'),
									$(this).attr('bigheight'),
									$(this)
								)
						
					}
				
			});
	
			//fade the portfolio in and the loading animation out, activate overscroll
			$('#portfolio').fadeIn();
			$('.loadingOverlay').fadeOut(function(){$('.loadingOverlay').unbind().remove();})
			$('#portfolioFg').overscroll({
				cursor:'n-resize',
				wheelDelta:50
			})
		});
}

//function to take a list of authors from the database and create a slideshow
function authorSlides(){

	//get rid of any content that's already open, by selecting the 'tempContent' class
	$('.tempContent').fadeOut(function(){$(this).remove()});
	
	
	//append stuff to the body
	$('body').append(
			//the slideshow containers, these will be animated once everything loads
			$('<div></div>')
				.attr({id:'authorSlideshow'})
					.append($('<div></div>')
						.attr({id:'authorSlideshowItems','class':'items'})),
			
			//'We are' header			
			$('<div>We are</div>')
				.attr({id:'authorsHeader','class':'impact'}),
				
			//Close link
			$('<img>')
				.attr({id:'authorsCloseBtn',src:'images/portfolioClose.png',border:'0'})
				.click(function(){$('.tempContent').fadeOut(function(){$(this).remove()})}),	
			
			//popup divs for showing author information on mouseover
			$('<div></div>')
				.attr({id:'authorInfo','class':'impact'}),
			
			//forward and back buttons, the classes are important because scrollable looks for them
			$('<img>')
				.attr({id:'authorsBack',src:'images/folioBack.png','class':'prev',border:'0'}),
				
			$('<img>')
				.attr({id:'authorsFwd',src:'images/folioFwd.png','class':'next',border:'0'})
				
		);
		
		//add the tempContent class so we can close it later
		$('#authorSlideshow,#authorInfo,#authorInfoTwo,#authorsHeader,#authorsCloseBtn,#authorsBack,#authorsFwd').addClass('tempContent');
		//hide some things
		$('#authorsHeader,#authorsCloseBtn,#authorsBack,#authorsFwd').hide();

	//get markup from the database
	getContent('authors.php',
		//put it into the container
		$('#authorSlideshowItems'),
		
		//callback 
		function (){
			//animate the slideshow
			$("#authorSlideshow").animate({height:'400px',width:'100%',top:'232px',left:'0%',marginLeft:'0px'}, {duration:500,easing:'swing',complete:
				//callback
				function(){
					
					//fadeIn what was hidden
					$('#authorsHeader,#authorsCloseBtn,#authorsBack,#authorsFwd').fadeIn();
					//make scrollable
					$("#authorSlideshow").scrollable({circular:true,mousewheel:true,easing:'swing',size:4});
					
					//extract information from the database markup and listen for events
					window.colorcounter = 0;
					window.colorclasses = new Array('Cyan','Magenta','Yellow');
					
					$(".author").mouseenter(function(){
						
						//if the overlay has not been created yet
						if(!$(this).children('.authorOverlay').length){
							//add it and hide it
							$(this).append(
									$('<div></div>')
										.attr({'class':'authorOverlay impact'})
										.mouseleave(function(){$(this).children('div').fadeTo('fast',0.0)})
										.append(
											$('<div><span class="impact">Professional Work</span><br /><span class="helveticaBold">'+$(this).attr('biz').replace(/,/g,'<br />')+'</span></div>')
												.attr({'class':'authorOverlayLeft'})
												.css({filter:'alpha(opacity=0)',mozOpacity:'0.0',opacity:'0.0'})
												.addClass('trans'+window.colorclasses[window.colorcounter])
												.mouseenter(function(){$(this).fadeTo('fast',1.0)
																				.css({zIndex:'99'})
																					.siblings()
																					.fadeTo('fast',0.3)
																					.css({zIndex:'2'});
																		})
												.click(function(){showPortfolio({scope:'biz',authors:$(this).parent().parent().attr('id')},$(this))})
										)
										
										);
										window.colorcounter++;
										if(window.colorcounter > 2){window.colorcounter = 0;}
							$(this).children('.authorOverlay').append(					
											$('<div><span class="helveticaBold">'+$(this).attr('per').replace(/,/g,'<br />')+'</span><span class="impact">Personal Work</span></div>')
												.attr({'class':'authorOverlayRight'})
												.css({filter:'alpha(opacity=0)',mozOpacity:'0.0',opacity:'0.0'})
												.addClass('trans'+window.colorclasses[window.colorcounter])
												.mouseenter(function(){$(this).fadeTo('fast',1.0)
																				.css({zIndex:'99'})
																					.siblings()
																					.fadeTo('fast',0.3)
																					.css({zIndex:'2'});
																	})
												.click(function(){showPortfolio({scope:'per',authors:$(this).parent().parent().attr('id')},$(this))})	
										);
							
										window.colorcounter++;
										if(window.colorcounter > 2){window.colorcounter = 0;}				
						}
						
						//empty the info container and align it with the author tile
						//append the author's name to the top box and animate it
						$('#authorInfo')
								.empty()
								.css({'left':($(this).offset().left+'px')})
								.append($(this)
								.attr('id'))
								.animate({'top':'187px','height':'40px','padding-top':'10px'},{duration:200,queue:false});
					}).mouseleave(function(){
						//stop any animation on the boxes, empty them, and return them to the closed position
						$('#authorInfo')
							.stop(true,true)
							.empty()
							.css({'height':'0px','padding-top':'0px','top':'237px'});
					
					})
				}
			});
		});	
}


//show informational document
function manifestDocs(){
	$('.tempContent').fadeOut(function(){$(this).remove()});
	
	$('body').append($('#manifestDocsHide').html())
		.children('#manifestDocs,#manifestDocsCloseBtn')
			.addClass('tempContent').hide().fadeIn('fast');
}



function closeManifestSlides(){
	$('#manifestSlideshow').cycle('destroy');
	$('#manifestUnderlay').cycle('destroy');
	closeTempContent();
}

//start manifestSlideshow

function manifestSlides(){
	
	//clear already open content
	$('.tempContent').fadeOut(function(){$(this).remove()});
	
	//preload mouseovers
	preLoadImages('images/flipbook/overlay_1_over.png', 
					'images/flipbook/overlay_2_over.png', 
					'images/flipbook/overlay_3_over.png', 
					'images/flipbook/overlay_4_over.png');
	//append stuff
	$('body').append(
				
				$('<div></div>')
					.attr({id:'manifestUnderlay'}),
				
				$('<div></div>')
					.attr({id:'manifestMenu'}),
				
				$('<img>')
					.attr({id:'manifestCloseBtn',src:'images/portfolioClose.png'})
					.click(function(){$('.tempContent').fadeOut(function(){$(this).remove()});}),
				
				$('<div></div>')
					.attr({id:'manifestSlideshow'})
					.append(
						$('<img>')
							.attr({src:'images/flipbook/overlay_1.png',border:'0'}),
						$('<img>')
							.attr({src:'images/flipbook/overlay_2.png',border:'0'}),
						$('<img>')
							.attr({src:'images/flipbook/overlay_3.png',border:'0'}),
						$('<img>')
							.attr({src:'images/flipbook/overlay_4.png',border:'0'})
					)
		);
	//set class and hide
	$('#manifestUnderlay,#manifestSlideshow,#manifestCloseBtn,#manifestMenu').addClass('tempContent').hide();
	$('#manifestSlideshow').children('img')
							.mouseenter(function(){
								$(this).attr({src:($(this).attr('src').replace('.png','_over.png'))});	
							}).mouseleave(function(){
								$(this).attr({src:($(this).attr('src').replace('_over.png','.png'))});	
							})
	//get the artwork			
	getContent('portfolio.php', $('#manifestUnderlay'), 
		//callback
		function() {
			//fadeIn the new content
			$('.tempContent').fadeIn();
				
			//then trigger both of the cycles
			$('#manifestSlideshow').cycle({
				fx: 'blindY',
				timeout: 0,
				pager: '#manifestMenu',
				next: '#manifestSlideshow'
			});
			
			$('#manifestUnderlay').cycle({
				fx: 'fade',
				speed: 150,
				continuous: 1,
				random: 1
			});
		});
		
		
}