// JavaScript Document
<!--  initialize the slideshow when the DOM is ready -->

$(document).ready(function(){
						   
$('#bannerImage').empty();
 
//ini values and vars

var origText= $('.leadParagraph').html(); 

var theXML; 

$.ajax({
		type: "GET",
		url: "portfolio.php",
		dataType: "xml",
		success: function(xml) {
//sets the global xml var
theXML=xml;	


//var theList=$('#theList');	
$(xml).find('item').each(function(){
//gets the vars from the loop
var title = $(this).attr('title');
var id= $(this).attr('title');
var theImg = $(this).attr('img');


//puts in the people cards
$('<div class="people borderBox" ></div>').html('<h3>'+title+'</h3><img width="100" height="67" src="'+theImg+'" alt="'+title+'"/>').appendTo('#theTeam');

});//end of the item loop

//finds all the images
var	theImages= $(xml).find('images');

$('#bannerImage').empty();

$(theImages).find('image').each(function(){										 
//added in the width and height of the default image
var eachUrl= $(this).attr('imageurl');	

$('<div class="items" ></div>').html('<img width="450" height="300" src="'+eachUrl+'"  />').appendTo('#bannerImage');									
});//end of the imageloop

//starts the slideshow off
$('#bannerImage').cycle({'fx':'fade', 'speed':'slow','timeout':'3000' });



$('.people').click(function () {
var theName=$(this).find('h3').text();
//alert(theName);
callItem(theName);
return false;
});	


}//end of ajaxy success
});//end of ajax call


function callItem(theItem){
	
	var theItem=theItem;
	var reqItem = $(theXML).find( "item[ title="+theItem+"]");	
	var theDec= reqItem.find('description').text();
	var	theImages= reqItem.find('images');
//clears the existing div
	$('#bannerImage').empty();
	$('#nav').empty();
$('#textDesc').empty();	
$('#mainContent h2').empty();
$('.leadParagraph').empty();


//tests to make sure the element hasn't already been created
if($('#textDesc').length == 0){
	//makes sure that the div is inserted just after the h1 tag
$('#mainContent h1').after('<h2> </h2')	;	
$('#mainContent h2').after('<div id="textDesc"  > </div>')	;
//$('<div id="textDesc"  > </div>').appendTo($('#mainContent'));
}

$('#mainContent h2').append(theItem);;
$(theDec).appendTo('#textDesc');

//$('#textDesc').css({'height':'auto', 'width':'50%'});

//$('#bannerImage').html(theOrigImage);
	
//builds up a text box with title;
//$('#textDesc').html('<h3>'+theItem+'</h3>');

//$('#textDesc').append(theDec);

//

//$('.leadParagraph').before('<h2>'+theItem+'</h2>');
//$('.leadParagraph').append(theDec);
$(theImages).find('image').each(function(){										 
//added in the width and height of the default image
var eachUrl= $(this).attr('imageurl');					  
$('<div class="items" ></div>').html('<img width="450" height="300" src="'+eachUrl+'" alt="'+theItem+'"  />').appendTo('#bannerImage');									
});

 $('#bannerImage') 
.before('<div id="nav" >') 
.cycle({'fx':'turnDown', 'speed':'slow','timeout':'3000','pager':'#nav' });}
	
function hideMenu(){
$('#theList').slideUp();
$('#textDesc').slideDown();
 $('#backLink').show();
}

function showMenu(){
$('#theList').slideDown();	

$('#textDesc').slideUp();	
 $('#backLink').hide();
 
 
// resets the holding image
	
 $('#bannerImage').html(theOrigImage);
 
 //resets the nav bar
 $('#nav').empty();;
}//end of call item main function

	
   
});//end of dom ready