/**
 * @author mpeccini
 */

 
 function loadProjectPage(prjID){
	$("span#page").fadeIn("fast", function(){
		document.getElementById("projectPageFrame").src= '../rcdb_abstracts.jsp?PROJECT_ID='+prjID,'project_window'
		//alert(browserType)
		if (browserType=="ie"){
			document.getElementById("projectPage").style.display="block";
		}else{
			$("div#projectPage").fadeIn(1000);
		}
	});
 
 }
 
 function closeProjectPage(){
	$("span#page").fadeOut("fast", function(){
		document.getElementById("projectPageFrame").src= '';
	});
	document.getElementById("projectPage").style.display = "none"
	
 }
 
  function closeProjectPage2(){
	if (browserType != "ie"){
		$("div#imageViewer").fadeOut("fast", function(){
		});
	}else{
		document.getElementById("imageViewer").style.display = "none"
	}
	document.getElementById("projectPage").style.display = "none"
	document.getElementById("imageViewer").innerHTML= "";

	if (browserType != "ie"){
		settings.imageArray = []
		alert("here")
		settings.activeImage = 0;
	}
	
 }
 
 function loadImagePage(prjID){
	document.getElementById("projectPageFrame").src= '../rcdb_pictures.jsp?project_id='+ prjID	
 }
 
 function launchPictViewer(idx){
	//alert(prjImages[0])
	//$("div#imageViewer").fadeIn("fast", function(){
	//document.getElementById("projectPage").style.display="block";


//conditional needed because INTERNET EXPLORER was developed by idiots!!!

	if (browserType == "ie"){
		document.getElementById("projectPage").style.display="block";
	}else{
		var el = Ext.get('projectPage');
			el.fadeIn({
			    endOpacity: 0.7, //can be any value between 0 and 1 (e.g. .5)	
			    duration: .5
			});
	}

	buildImageHtml(idx);
}

 
 var imageViewerHtml;
 var singleImage = false;
 function buildImageHtml(idx){

if (photoCount[idx]==1){
	singleImage = true;
	openSingleImage(idx)
}else if (photoCount[idx]>1){
	singleImage = false;
	//alert(singleImage)
	if (browserType == "ie"){
		document.getElementById("projectPage").style.display="block";
	}else{
		var el = Ext.get('projectPage');
			el.fadeIn({
			    endOpacity: 0.7, //can be any value between 0 and 1 (e.g. .5)	
			    duration: .5
			});
	}
	
	var caption = new Array();
	caption = photoCaption[idx].split("|");
	//alert("test"+recProposalNo[idx])
	//alert("here")
	var imageViewer = '';
	
	//NOTE when going back to the image gallery need to uncomment line 202 and 387 of lightbox.js
		   		imageViewer += '<span id="thumGalleryClose"><a href="javascript:closeGallery()"><img src="images/LightBoxImages/lightbox-btn-close.gif"></a></span>'
	      		imageViewer += '<div id="photoThumbs">';
	        	imageViewer += '<table align="center"></tr>';
				
				for (i=1;i<=photoCount[idx];i++){
					imageViewer += '<td><span class="thumbnail">';
		       			imageViewer += '<a href="images/project_med/'+recProposalNo[idx]+'-'+i+'.jpg" class="lb-flower" title="'+caption[i-1]+'"><img src="images/project_thumbs/'+recProposalNo[idx]+'-'+i+'.jpg" alt="Click to enlarge" ></a>';
		        	imageViewer += '</span></td>';
				}
				
	 /*
	  
	  			imageViewer += '<td><span class="thumbnail">';
	       			imageViewer += '<a href="images/LightBoxImages/image3.jpg" class="lb-flower" title="Click on the right side of an image to move forward."><img src="images/LightBoxImages/thumb3.jpg" alt="Lily of the Valley" width="120" height="72"></a>';
	        	imageViewer += '</span></td>';
	        	imageViewer += '<td><span class="thumbnail">';
	        		imageViewer += '<a href="images/LightBoxImages/image4.jpg" class="lb-flower" title="You can also use the arrow keys to navigate the gallery."><img src="images/LightBoxImages/thumb4.jpg" alt="Pansy" width="120" height="72"></a>';
	        	imageViewer += '</span></td>';
	        	imageViewer += '<td><span class="thumbnail">';
	        		imageViewer += '<a href="images/LightBoxImages/image5.jpg" class="lb-flower" title="While you are viewing an image, the lightbox preloads the next image in the gallery."><img src="images/LightBoxImages/thumb5.jpg" alt="Primrose" width="150" height="150"></a>';
	        	imageViewer += '</span></td>';
	        	imageViewer += '<td><span class="thumbnail">';
	        		imageViewer += '<a href="images/LightBoxImages/image6.jpg" class="lb-flower" title="This is a narrow image with a long description. Notice how the bottom of the lightbox automatically expands to accommodate the longer caption."><img src="images/LightBoxImages/thumb6.jpg" alt="Periwinkle" width="120" height="72"></a>';
	        	imageViewer += '</span></td>';
	        	imageViewer += '<td><span class="thumbnail">';
	        		imageViewer += '<a href="images/LightBoxImages/image7.jpg" class="lb-flower" title="Press Esc to close the gallery."><img src="images/LightBoxImages/thumb7.jpg" alt="Daffodil" width="120" height="72"></a>';
	        	imageViewer += '</span></td>';
	*/
				
				imageViewer += '</tr></table></div>';
	      //  imageViewer += '</div>';
			//alert(imageViewer)
			//alert(imageViewer)
			document.getElementById("imageViewer").innerHTML=imageViewer
	
	
	//conditional needed because INTERNET EXPLORER was developed by morons!!!
	if (browserType == "ie"){
		document.getElementById("imageViewer").style.display="block"
	}else{	
		var el = Ext.get('imageViewer');
			el.fadeIn({
			    endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)	
			    easing: 'easeOut',
			    duration: .5
			});
	}
	
}//end else
}


function openSingleImage(idx){
	  var imageViewer = '<a id="singleImageLink" href="images/project_med/'+recProposalNo[idx]+'-1.jpg" class="lb-flower" title="'+photoCaption[idx]+'"><img src="images/project_med/'+recProposalNo[idx]+'-'+i+'.jpg" alt="Lily of the Valley" width="120" height="72"></a>';
		document.getElementById("imageViewer").innerHTML=imageViewer
		document.getElementById("singleImageLink").click();	
}


function closeGallery(){
		document.getElementById("projectPage").style.display="none";
		document.getElementById("imageViewer").style.display="none"
		document.getElementById("imageViewer").innerHTML=""
		document.getElementById("videoViewer").style.display="none"
		document.getElementById("videoViewer").innerHTML=""
		document.getElementById("webcamViewer").style.display="none"
		document.getElementById("webcamViewer").innerHTML=""
}

function closeVideoViewer(){
		document.getElementById("imageViewer").style.display="block";
		//document.getElementById("imageViewer").style.display="none"
		//document.getElementById("imageViewer").innerHTML=""
		document.getElementById("videoViewer").style.display="none"
		document.getElementById("videoViewer").innerHTML=""
		document.getElementById("webcamViewer").style.display="none"
		document.getElementById("webcamViewer").innerHTML=""
}

function showVideoThumbs(idx){
	var vidCount = videoThumbLinks[idx].split("&&").length-2
	//alert(vidCount)
	if(vidCount==1){
		playVideo(idx,0)
	}else{
			if (browserType == "ie"){
				document.getElementById("projectPage").style.display="block";
			}else{
			var el = Ext.get('projectPage');
					el.fadeIn({
					    endOpacity: 0.7, //can be any value between 0 and 1 (e.g. .5)	
					    duration: .5
					});
			}
			
			var thumbLink = new Array();
			var tempSplit = new Array();
			tempSplit = videoThumbLinks[idx].split("&&")
			
			//for (var i=0; i<vidCount; i++) {
			//};
			
			//caption = photoCaption[idx].split("|");
			//alert("test"+recProposalNo[idx])
			//alert("here")
			var imageViewer = '';
			
			//NOTE when going back to the image gallery need to uncomment line 202 and 387 of lightbox.js
				   		imageViewer += '<div id="thumGalleryClose"><a href="javascript:closeGallery()"><img src="images/LightBoxImages/lightbox-btn-close.gif"></a></div>'
			       imageViewer += '<div id="photoThumbs">';
			        	imageViewer += '<table align="center">';
						
						for (i=0;i<=vidCount;i++){
							thumbLink = tempSplit[i].split("|")
							//alert(thumbLink[0])
							imageViewer += '<td><span class="thumbnail">';
				       			imageViewer += '<a href="javascript:playVideo('+idx+','+i+',\''+thumbLink[0]+'\')"><img src="'+thumbLink[0]+'" width="120" height="67" alt="Click to view" ></a>';
				        	imageViewer += '</span></td>';
						}
						
						
						imageViewer += '</tr></table></div>';
					document.getElementById("imageViewer").innerHTML=imageViewer
			
			
			//conditional needed because INTERNET EXPLORER was developed by morons!!!
			if (browserType == "ie"){
				document.getElementById("imageViewer").style.display="block"
			}else{	
				var el = Ext.get('imageViewer');
					el.fadeIn({
					    endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)	
					    easing: 'easeOut',
					    duration: .5
					});
			}
			
	}//end else
}

function showWebcam(idx){
			if (browserType == "ie"){
				document.getElementById("projectPage").style.display="block";
			}else{
			var el = Ext.get('projectPage');
					el.fadeIn({
					    endOpacity: 0.7, //can be any value between 0 and 1 (e.g. .5)	
					    duration: .5
					});
			}
			
			document.getElementById("webcamViewer").style.width = "900px";
			var content = '<div id="thumGalleryClose"><a href="javascript:closeGallery()"><img src="images/LightBoxImages/lightbox-btn-close.gif"></a></div>'+webCamLink[idx]
			content += '<br><br><div class="links"> For more information and full functionality please see: <a class="footerLink" href="http://www.earthcam.com/winnicut/" target="_blank">http://www.earthcam.com/winnicut/</a></div>'
			
			document.getElementById("webcamViewer").innerHTML= content
			
			
			//conditional needed because INTERNET EXPLORER was developed by morons!!!
			if (browserType == "ie"){
				document.getElementById("webcamViewer").style.display="block"
			}else{	
				var el = Ext.get('webcamViewer');
					el.fadeIn({
					    endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)	
					    easing: 'easeOut',
					    duration: .5
					});
			}
			

}

function showTimelapse(idx){

			if (browserType == "ie"){
				document.getElementById("projectPage").style.display="block";
			}else{
			var el = Ext.get('projectPage');
					el.fadeIn({
					    endOpacity: 0.7, //can be any value between 0 and 1 (e.g. .5)	
					    duration: .5
					});
			}
			
			var content = ""
			content += '<div id="thumGalleryClose"><a href="javascript:closeGallery()"><img src="images/LightBoxImages/lightbox-btn-close.gif"></a></div>'
			
						content += '<object type="application/x-shockwave-flash" data="http://www.earthcam.com/clients/common/FlowPlayerBlack.swf" id="FlowPlayer" width="320" height="256">'
						content += '<param name="allowScriptAccess" value="always">'
						content += '<param name="movie" value="http://www.earthcam.com/clients/common/FlowPlayerBlack.swf">'
						content += '<param name="allowfullscreen" value="true">'
						content += '<param name="quality" value="high">'
						content += '<param name="scale" value="noScale">'
						content += '<param name="allowNetworking" value="all">'
						content += '<param name="fullScreenScriptURL" value="http://www.earthcam.com/clients/common/fullscreen.js">'
						content += '<param name="flashvars" value="config={'
						 content += '  menuItems: [ true, true, true, true, true, false ],'
						 content += '  controlsAreaBorderColor: 0x4e4e4e,'
						 content += '  progressBarColor1: 0xFFFFFF,'
						 content += '  progressBarColor2: 0xFFFFFF,'
						 content += ' bufferBarColor1: 0x000000,'
						 content += '  bufferBarColor2: 0x000000,'
						 content += '  timeDisplayFontColor: 0xFFFFFF,'
						 content += '  useNativeFullScreen: true,'
						 content += '  fullScreenScriptURL: \'http://www.earthcam.com/clients/common/fullscreen.js\','
						 content += '  baseURL: \'\','
						 content += '  playList: ['
						content += '	   {  overlayId: \'play\' },'
						content += '	   { name: \'Time-Lapse\', url: \'http://www.earthcam.net/public/stantec/winnicut/timelapse//timelapse.flv\' }'
						 content += '  ]}">'
					content += '</object>'
			
			document.getElementById("webcamViewer").style.width = "400px";
			document.getElementById("webcamViewer").innerHTML= content;
			
			
			//conditional needed because INTERNET EXPLORER was developed by morons!!!
			if (browserType == "ie"){
				document.getElementById("webcamViewer").style.display="block"
			}else{	
				var el = Ext.get('webcamViewer');
					el.fadeIn({
					    endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)	
					    easing: 'easeOut',
					    duration: .5
					});
			}
			

}

function playVideo(idx,idxB,thumbURL){
	//split link information
	var tempSplit = new Array();
	tempSplit = videoLinks[idx].split("&&")
	
	var tempArray = tempSplit[idxB].split("|")
	var vidWidth = tempArray[0]
	var vidHeight = tempArray[1]
	var vidLength = tempArray[2]
	var vidId = tempArray[3]
	var vidInstance = tempArray[4]
	var vidToken = tempArray[5]
	//alert(vidToken)
	
	//split caption information
	var tempSplit = new Array();
	tempSplit = videoCaptions[idx].split("&&")
	var tempArray = tempSplit[idxB].split("|")
	var vidCaption = tempArray[1];
	if(vidCaption == "Untitled"){
		vidCaption = '';
	}
	var vidDateTime = tempArray[0];
	
 	if (browserType == "ie"){
		document.getElementById("videoDark").style.display="block";
	}else{
		var el = Ext.get('videoDark');
			el.fadeIn({
			    endOpacity: 0.7, //can be any value between 0 and 1 (e.g. .5)	
			    duration: .5
			});
	}
	
	
	var videoViewer = '';
	videoViewer += '<div id="thumGalleryClose"><a href="javascript:closeVideoViewer()"><img src="images/LightBoxImages/lightbox-btn-close.gif"></a></div>'
	videoViewer += '<embed id="player_swf" wmode="transparent" quality="high" pluginspage="http://www.adobe.com/go/getflashplayer" loop="false" name="FlipSharePlayer"  allowfullscreen="true" type="application/x-shockwave-flash" flashvars="player_id=4b027ab9b3cda5dbe3f2e192fde9c02b&amp;services_url=http://cdn-akm.vmixcore.com/core-flash/UnifiedVideoPlayer/services.xml&amp;useBetaPlayer=False&amp;videoWidth=400&amp;videoHeight=300&amp;duration='+vidLength+'&amp;thumbUrl='+thumbURL+'&amp;autoplay=true&amp;mute=true&amp;volume=0&amp;mediaUrl=&amp;token='+vidToken+'" play="false" allowscriptaccess="always" src="http://www.flipshare.com/swf/FlipSharePlayer_400.swf"  height="324" width="400">'       	
	videoViewer += '<br><br><div class="videoCaption">'+vidCaption+'<br>'+vidDateTime+'</div>';
	document.getElementById("videoViewer").innerHTML=videoViewer
	
	if (browserType == "ie"){
		document.getElementById("videoViewer").style.display="block"
		document.getElementById("imageViewer").style.display="none";
	}else{	
			document.getElementById("imageViewer").style.display="none";
		var el = Ext.get('videoViewer');
			el.fadeIn({
			    endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)	
			    easing: 'easeOut',
			    duration: .5
			});
	}
}