function changeBg(changeToPic, fadeSpeed) {
	   $("#pic_of_pics").html((changeToPic+1)+"/"+num_pics);
	   $("#loading").show();		   
	   $("#bg_img").fadeTo(fadeSpeed, 0, function(){
		   // when at black, change pic
		   $("#bg_img").attr("src","content/portfolio/"+pics[changeToPic][0]);
		   // write caption
		   $("#caption p").html(pics[changeToPic][2]);
		   // change selected in filmstrip
		   // remove old
		   $("ul#thumbnail_list li").each(function(){
			   $(this).removeClass("selected");
		   });
		   $("li#id"+changeToPic).addClass("selected");
	   });
   }  
   
 
// Load on ready on portfolio pages
 $(document).ready(function(){
   var active_pic = 0;	 
   var thumbnail_width = 156;   
   $("#pic_of_pics").html("1/"+num_pics);   
   
   // portfolio hover
   $("#portfolio_container").hoverIntent({
	   over: function(){
		   		$(this).animate({bottom: "0px"},{queue: false, duration: fadeSpeedIn}); 
		   		$(this).data("visited",1);
	   	  	 }, 
	   timeout: fadeOutDelay,
	   out: function(){
		   $(this).animate({bottom: "-95px"},{queue: false, duration: fadeSpeedOut}); 
	   	  }
   });
   
	// strip moving functions
   function moveStripRight() {   
       var left_indent = -((active_pic + 1) * thumbnail_width) + "px";
       var right_num_pics = num_pics - Math.floor($("#carousel_container").outerWidth() / thumbnail_width) + 1;
       if (active_pic < right_num_pics-1) $("#thumbnail_list").animate({left: left_indent},{queue:false, duration:scrollSpeed,complete:function(){ 
	       if (active_pic < right_num_pics-1) active_pic++; 
	   }
       });  
   }
   
   function moveStripLeft() {   
       var left_indent = -((active_pic - 1) * thumbnail_width) + "px";
       if (active_pic > 0) $("#thumbnail_list").animate({left: left_indent},{queue:false, duration:scrollSpeed,complete:function(){ 
	       if (active_pic > 0) active_pic--; 
	   }
       });  
   }
   
   function moveStripTo(which_pic) {   
	   var right_num_pics = num_pics - Math.floor($("#carousel_container").outerWidth() / thumbnail_width);
	   if (which_pic > right_num_pics) which_pic = right_num_pics;
	   if (which_pic < 0) which_pic = 0;
       var left_indent = -(which_pic * thumbnail_width) + "px";
       active_pic = which_pic;
       $("#thumbnail_list").animate({left: left_indent},{queue:false, duration:scrollSpeed,complete:function(){ 
	       
	   }
       });  
   }   
        
   var i = 0;
   // populate portfolio carousel
   for(i=0;i<num_pics;i++) {
	   $("ul#thumbnail_list").append("<li id='id"+i+"'><img class='us' src='content/portfolio/"+pics[i][1]+"' alt='FLC415 Thumbnail' /></li>");
   }   
   $("li#id0").addClass("selected");

   // populate caption on ready
   $("#caption").append("<p>"+pics[showing_pic][2]+"</p>");
   
   // starting reducing elements after delay on ready
   window.setTimeout(function() {
	   if (!$("#menu").data("visited")) $("#menu").animate({left: "-160px"},{queue: false, duration: fadeSpeedOut}); 
	   if (!$("#portfolio_container").data("visited")) $("#portfolio_container").animate({bottom: "-95px"},{queue: false, duration: fadeSpeedOut}); 
  
	   if (!$("#hover_arrow_left").data("visited")) $("#hover_arrow_left").fadeTo({queue: false, duration: fadeSpeedOut},0); 
	   if (!$("#hover_arrow_right").data("visited")) $("#hover_arrow_right").fadeTo({queue: false, duration: fadeSpeedOut},0);
	   
	   $("#welcome_screen").fadeTo({queue: false, duration: fadeSpeedOut},0); 	   
	   
   }, fadeOutDelay);
  
   //when user clicks thumbnail
   $("#thumbnail_list li").click(function(){  
	   showing_pic = parseInt($(this).attr("id").slice(2));
   	   changeBg(showing_pic, fadeSpeedBg);
   });     
	  
   // change bg img with arrow keys
   $(document).keydown(function(e){
    if (e.keyCode == '37') {
	    if (--showing_pic < 0) showing_pic = num_pics-1;
	    changeBg(showing_pic, fadeSpeedBg); 
	    moveStripTo(showing_pic);
	    e.preventDefault();
    }
    
    if (e.keyCode == '39') {
	    if (++showing_pic >= num_pics) showing_pic = 0;
	    changeBg(showing_pic, fadeSpeedBg); 
	    moveStripTo(showing_pic);
	    e.preventDefault();
    }
   });
   
   $("#hover_arrow_right").click(function(){ 
	    if (++showing_pic >= num_pics) showing_pic = 0;
	    changeBg(showing_pic, fadeSpeedBg); 
	    moveStripTo(showing_pic);
   });  
   
   $("#hover_arrow_left").click(function(){  
	    if (--showing_pic < 0) showing_pic = num_pics-1;
	    changeBg(showing_pic, fadeSpeedBg); 
	    moveStripTo(showing_pic);
   });  

   $("#hover_arrow_right").hover(
   		function(){ 
	   		$(this).fadeTo({queue: false, duration: fadeSpeedIn},1); 
	   		$(this).data("visited",1);
	   	} 
      , function(){ $(this).fadeTo({queue: false, duration: fadeSpeedOut},0); });   
   
   $("#hover_arrow_left").hover(
   		function(){ 
	   		$(this).fadeTo({queue: false, duration: fadeSpeedIn},1); 
	   		$(this).data("visited",1);
	   	} 
      , function(){ $(this).fadeTo({queue: false, duration: fadeSpeedOut},0); });   
      
   // portfolio carousel

   // portfolio film strip arrows 
   $("#strip_arrow_right").click(function(){ 
	   var pics_in_view = Math.floor($("#carousel_container").outerWidth() / thumbnail_width);
	   moveStripTo(active_pic + pics_in_view); 
   });  
   $("#strip_arrow_left").click(function(){ 
	   var pics_in_view = Math.floor($("#carousel_container").outerWidth() / thumbnail_width);
	   moveStripTo(active_pic - pics_in_view); 
   });  
        
   // end   
 });