// JavaScript Document.............................................................................................

//  File: 				RIA.js
//  Site: 				www.aw64.com
//  Description:		Functions for Rich Internet Application control, using jQuery Library and the $-wrapper.
//						 

//	Update Overview:
//		12-JAN-2009:	Initial version.
//      02-MAY-2009:    Release version 1.0: www.aw64.com 


//.................................................................................................................

   var booMenuOpen =false; // flag indicating is menu stage.
   var booMoveMouse = false;
   var 	booMoveSlicer = false;	
   var strSelected = "none";
   var booLabelMoving = false;
   
   var NbFPimages = 35; // number of images available for dynamic on-site illustrations.
   var imgStart = Math.floor(Math.random()*NbFPimages);
   var imgStep = 1//Math.floor(NbFPimages/35);
   var ImageID = 1;
   var strPoint="00"; 
   var strFlashTop=0;
   var strFlashLeft=0;
   
   
	pageName =new Array();
 	pageName['00']='andy';
	pageName['01']='portfolio';
	pageName['02']='diensten';
	pageName['03']='contact';
	
	FoNr =new Array();
 	FoNr['00']='f02';
	FoNr['01']='f01';
	FoNr['02']='f03';
	FoNr['03']='f01';
	
	FoH =new Array();
 	FoH['00']=220;
	FoH['01']=220;
	FoH['02']=120;
	FoH['03']=220;
	
	FoW =new Array();
 	FoW['00']=240;
	FoW['01']=240;
	FoW['02']=150;
	FoW['03']=240;
   
   var animation_time = 2000; // time of changing pannels in milli seconds.
   var label_height= 20; // hight in px of vertial menu labels.
   var label_color ="#000000"; //color of label in case not selected pannel.
   var label_color_selected ="#FFFFFF"; //color of label in case  selected pannel.
   var label_color_hover ="#FF0000"; //color of label in case  of mouse over.

   $(function(){ // OnDocumentReady Function ....................................................................
			 
		window.status ="home";	
		NextPicture('#home_foto','f01',240,220);
		setPannelCSS(); //Dynamic style setting for pannel related elements.
		$('.label').bind('mouseover',label_mouseover);// Hover in effect label.	
		$('.label').bind('mouseout',label_mouseout);// Hover out effect label.
		$('.ml').bind('mouseover',label_mouseover);// Hover in effect label.	
		$('.ml').bind('mouseout',label_mouseout);// Hover out effect label.
		$('#close').bind('mouseover',label_mouseover);// Hover in effect label.	
		$('#close').bind('mouseout',label_mouseout);// Hover out effect label.
		$('.label').bind('click',pannel_change);
		$('.ml').bind('click',pannel_change);
		$('#btnClear').bind('click',ClearBericht);
		$('#btnClearAll').bind('click',ClearAll);
		$('.imgPf').bind('mouseover',Pf_icon_mouseover);
		$('.imgPf').bind('mouseout',Pf_icon_mouseout);
		$('.imgPf').bind('click',Pf_icon_click);
		$('input.btn').bind('mouseover',MousePointer);
		$('input.btn').bind('mouseout',MouseDefault);
	    $('#screen').css('opacity', '0.8');
		
	$('#PfMenu').css('scrollbar-3dlight-color','#DDDDDD');
	$('#PfMenu').css('scrollbar-arrow-color','#AAAAAA');
	$('#PfMenu').css('scrollbar-base-color','#FFFFFF');
	$('#PfMenu').css('scrollbar-darkshadow-color','#FFFFFF');
	$('#PfMenu').css('scrollbar-face-color','#FFFFFF');
	$('#PfMenu').css('scrollbar-highlight-color','#FFFFFF');
	$('#PfMenu').css('scrollbar-shadow-color','#777777');
		
		
		
		
		$('#backhome').bind('click',back2home);
		$('#close').bind('click',back2contact);
		
		
	$('#h_home').bind('click',back2home);
		// End Hover label effect:.....................................................................
		
		// Events backhome:.........................................................................		
			 $('#backhome').bind('mouseover',function(event){
				event.preventDefault();
				if (strSelected !='none'){
						$(this).css('cursor', 'pointer');
						$(this).css('color',label_color_hover);
				}
				return false;
			 });
					
			 $('#backhome').bind('mouseout',function(event){
					event.preventDefault();
					 $(this).css('cursor', 'default');	
					 $(this).css('color',label_color);
					return false;
			  });
	
	
	
	
	
	
			 
		// End Events backhome :.....................................................................
   }); // End OnDocumentReady Function ............................................................................
   
  // 
  
  function setPannelCSS(){
	 
	   	$('.label').css('border', '0px');
		$('.label').css('padding', '0px');
		$('.label').css('margin', '0px');
		$('.label').css('position', 'absolute');
		$('.label').css('width', '120px');
		$('.label').css('height','20px');
		$('.label').css('left','65px');
		$('.label').css('overflow', 'hidden');
		$('.label').css('text-align', 'right');
		$('.label').css('font-size', '16px');
		$('.label_s').css('color', '#000000');
		
		$('.labe_s').css('border', '0px');
		$('.label_s').css('padding', '0px');
		$('.label_s').css('margin', '0px');
		$('.label_s').css('position', 'absolute');
		$('.label_s').css('width', '120px');
		$('.label_s').css('height','20px');
		$('.label_s').css('left','770px');
		$('.label_s').css('overflow', 'hidden');
		$('.label_s').css('text-align', 'left');
		$('.label_s').css('font-size', '16px');
		$('.label_s').css('color', '#FFFFFF');	
		$('.label_s').css('opacity','0');	
			 		
		$('.pannel').css('border', '0px');
		$('.pannel').css('padding', '0px');
		$('.pannel').css('margin', '0px');
		$('.pannel').css('position', 'absolute');
		$('.pannel').css('width', '0px');
		$('.pannel').css('height','495px');
		$('.pannel').css('top', '60px');
		$('.pannel').css('left', '210px');
		$('.pannel').css('overflow', 'hidden');
		$('.pannel').css('text-align', 'left');
		$('.pannel').css('background-color', '#FFFFFF');
		
		$('#backhome').	css('opacity','0');	
		$('#backhome').	css('visibility','hidden');	
		
		
		
		
	    // Dynamic setting of vertical postion of labels:		
		var LABELS =$('.label').get();
		var NbLabels = LABELS.length;
		$('#backhome')	.css('bottom', (NbLabels+1)*label_height+'px');	
		
		for (i = 0 ;i < NbLabels; i++){
			if (i < 10) {
				strLabelID = '#l0';
				strLabelIDs = '#s0';
			}
			else{
				strLabelID = 'l#';
				strLabelIDs = 's#';
			}
			$(strLabelID+i).css('bottom', (NbLabels-i)*label_height+'px');
			$(strLabelIDs+i).css('bottom', (NbLabels-i)*label_height+'px');
		}

   }
   
   function label_mouseover(event){
				event.preventDefault();
				// if(booLabelMoving ==false){
				 	if (this.id.substr(1,2) != strSelected){
						if (this.id != 'h_home' || strSelected != "none"){
						 	$(this).css('cursor', 'pointer');
					 		$(this).css('color',label_color_hover);
						}
				 	}
				// }
						 
				return false;
	}
	
	function label_mouseout(event){
					event.preventDefault();
				//	if(booLabelMoving ==false){
					 	$(this).css('cursor', 'default');	
					 	//if (this.id.substr(1,2) != strSelected){$(this).css('color',label_color);}
					 	//else{$(this).css('color',label_color_selected);}
					//}
					//if (this.id.substr(0,1) == 'h'){$(this).css('color',label_color)};
					 $(this).css('color',label_color);	
					return false;
			  }
			  
	function pannel_change(event){
		if (this.id.substr(0,2) != 'h_'){
				
					
					event.preventDefault();	
					if (this.id.substr(1,2) != strSelected){
						$('#backhome').	css('visibility','visible');	
						$('#backhome').animate({opacity:'1'}, animation_time);
						booLabelMoving =true;
						if ( strSelected !="none"){
							$('#home').	css('visibility','hidden');	
							$('#adress').css('visibility','hidden')
							$('#l'+strSelected).animate({opacity: '1'},animation_time);
							$('#s'+strSelected).animate({opacity: '0'},animation_time);
							$('#l'+strSelected).css('cursor', 'default');	
							$('#p'+strSelected).animate({left: '740px', width: '0px'},animation_time);
							
						}
						else{
							$('#h_home').css('color', label_color);
						}
						strSelected =this.id.substr(1,2);
						$('#l'+strSelected).animate({opacity: '0'},animation_time);
						$('#s'+strSelected).animate({opacity: '1'},animation_time);
						$('#l'+strSelected).css('cursor', 'default');
						$('#p'+strSelected).css('left','205px');
						$('#p'+strSelected).animate({width: '535px'},animation_time-70);
				window.status = pageName[strSelected];
					NextPicture('#'+pageName[strSelected]+'_foto',FoNr[strSelected],FoW[strSelected],FoH[strSelected]);	
						
					}
		}
				return false;
		}
		
		
				
									 
		function back2home(event){
					event.preventDefault();
					$('#home').	css('visibility','visible');	
					$('#adress').css('visibility','visible');
					$('#h'+strSelected).css('color', label_color);
					$('#l'+strSelected).animate({opacity: '1'},animation_time);
					$('#s'+strSelected).animate({opacity: '0'},animation_time);
					$('#p'+strSelected).animate({left: '740px', width: '0px'},animation_time);
					$('#backhome').css('cursor', 'default');
					$('#backhome').animate({opacity:'0'},animation_time);
					strSelected = "none";
					window.status ="home";
					
					
					NextPicture('#home_foto','f01',240,220);
					return false;
			  }
			  
				function back2contact(event){
					event.preventDefault();
					history.go(-1);
					return false;
			  }
			  
			  
			function back2portfolio(event){
					event.preventDefault();
					
					
				 $('#screen').animate({opacity: '0'},animation_time/2);
				  $('#PfBack').animate({opacity: '0'},animation_time/2);
				 
			       setTimeout("RemovePf()",animation_time/2+10);
				
					
					return false;
			  }
			  
			  function RemovePf(){
				  $('#PfBack').remove();
				  $('#screen').remove();
				  return false;
			  }
			  
			  
			function NextPicture(strPage,strPhoto,maxW,maxH){  
		
			 
			  		if( imgStart >= NbFPimages){ imgStart = 1;}
					 else {imgStart = imgStart+imgStep;}
					 strImg  ="_img/aw/";
					 if (imgStart<10){strImg= strImg+'0';}
					 strImg= strImg+imgStart+ '.jpg';
					 
					
					 		$('#'+strPhoto).remove();
					 		$(strPage).css('opacity','0');
					  		
								$(strPage).append("<img id='"+strPhoto+"' src = "+strImg+">");
								
								
					 		
				
						
			
				 	$(strPage).animate({opacity:'1'},animation_time);
				 
					
					 if(imgW[imgStart]>=imgH[imgStart])
					 
					 	{
							$('#'+strPhoto).width(maxW);
							
							$(strPage).css('width', maxW+'px');
							$(strPage).css('height', (maxW*imgH[imgStart]/imgW[imgStart])+'px');
							
						}
					else
						{
							
							$('#'+strPhoto).height(maxH);
							
							$(strPage).css('height', maxH+'px');
							$(strPage).css('width', (maxH*imgW[imgStart]/imgH[imgStart])+'px');
							
						}
					
		
			}
			
			function ClearBericht(){
				window.document.Reactie.bericht.value= "";
			window.document.Reactie.bericht.focus();
			}
			
			function ClearAll(){
				window.document.Reactie.bericht.value= "";
				window.document.Reactie.naam.value= "";
				
				window.document.Reactie.from.value= "";
				window.document.Reactie.subject.value= "";
				window.document.Reactie.from.focus();
			}
			
			function Pf_icon_mouseover(event){
				event.preventDefault();
				$(this).css('cursor', 'pointer');
				$('#'+this.id).animate({width: '110px', height: '110px' },animation_time/5);
				$('#PfYear').remove();
				$('#PfName').remove();
								  
				$('#p01 .content').append(' <div id="PfYear">'+pfYear[1*this.id.substr(5,6)]+'</div><div id="PfName">'+pfName[1*this.id.substr(5,6)]+'</div>');
				$('#PfYear').css('opacity' ,'0');
				$('#PfName').css('opacity' ,'0');	 	
				$('#PfYear').animate({opacity: '1'},animation_time/5);
				$('#PfName').animate({opacity: '1'},animation_time/5);	 	
			}
			
			function Pf_icon_mouseout(event){
				event.preventDefault();
				$(this).css('cursor', 'default');
				$('#'+this.id).animate({width: '95px', height: '95px' },animation_time/5);
				
				$('#PfYear').animate({opacity: '0'},animation_time/6);
				$('#PfName').animate({opacity: '0'},animation_time/6);	
				
			}
			
		function Pf_icon_click(event){
				event.preventDefault();
				$('body').append('<div id = "screen"></div>');
				$('body').append('<div id= "PfBack"></div>');
				
				$('#PfBack').append('<div id= "PfClose"><img src="_img/close.png" id = "PfX" alt="sluit portfolio"    /></div>');
				$('#PfClose').bind('click',back2portfolio);
				$('#PfClose').bind('mouseover',MousePointer);
				$('#PfClose').bind('mouseout',MouseDefault);
				 
				$('#PfBack').append('<div id= "PfMenu"></div>'); 
				$('#PfBack').append('<div id= "PfBoxMain"></div>'); 
				$('#PfBack').append('<div id= "PfBoxControl"></div>');
				$('#PfBack').append('<div id= "PfBoxDescription"> </div>');
				$('#PfBack').append('<div id= "PfBoxLink"></div>');
			
				
			  //add icon images dynamic:	
				var PF_ITEM =$('.Pf').get();
				var NbPfItems = PF_ITEM.length;
				for (i = NbPfItems-1 ;i >= 0; i--){
					if (i < 10) {
						strImageAppend ='<img class ="PfIcon" id= "PfICON0'+i+'" src="_img/icons/pf0'+i+'.png" alt="'+pfName[i]+'" />'; 
						
					}
					else{
						strImageAppend ='<img class ="PfIcon" id= "PfICON'+i+'" src="_img/icons/pf'+i+'.png" alt="'+pfName[i]+'" />'; 
					}
					$('#PfMenu').append(strImageAppend);
					$('#PfMenu').append('<div class ="PfSpacer"></div>');
				}
				$('.PfIcon').bind('mouseover',MousePointer);
				$('.PfIcon').bind('mouseout',MouseDefault);	
				$('.PfIcon').bind('click',ClickNextPf);	
				NextPf(this.id.substr(5,6));
			
			
				
				$('#screen').animate({opacity:'0.8'},animation_time/2);
				$('#PfBack').animate({opacity:'1'},animation_time/2);
				
				$(this).css('cursor', 'default');
				$('#'+this.id).animate({width: '95px', height: '95px' },animation_time/5);
				$('#PfYear').remove();
				$('#PfName').remove();
				
			}
			
			function MousePointer(event){
				event.preventDefault();
				$(this).css('cursor', 'pointer');
				return false;
			}
			function MouseDefault(event){
				event.preventDefault();
				$(this).css('cursor', 'default');
				return false;
			}
			
			function ClickNextPf(event){
				event.preventDefault();
				NextPf(this.id.substr(6,7));
				return false;
			}
			
			
			function NextPf(strPointCatch){
				ImageID = 1;
				strPoint=strPointCatch; 
			
				$('#PfBoxYear').remove();
				$('#PfBoxName').remove();
				$('#PfNumber').remove();
				$('#PfBoxLink').remove();
				$('#PfBoxDescription').remove();
				$('#PfBoxControl').remove();
								  
				$('#PfBack').append(' <div id="PfBoxYear">'+pfYear[1*strPoint]+'</div><div id="PfBoxName">'+pfName[1*strPoint]+'</div>');	
				if(pfNbItems[1*strPoint]>1){
					$('#PfBack').append('<div id= "PfBoxControl"></div>');
					
					$('#PfBoxControl').append('<div id="PfPrev"> < </div>');
					$('#PfBoxControl').append('<div id="PfNext">  > </div>');
				
					$('#PfPrev').bind('mouseover',NextPrevMouseIn);
					$('#PfNext').bind('mouseover',NextPrevMouseIn);
					$('#PfPrev').bind('mouseout',NextPrevMouseOut);
					$('#PfNext').bind('mouseout',NextPrevMouseOut);
					$('#PfNext').bind('click',ClickNextImg);
					$('#PfPrev').bind('click',ClickPrevImg);
				
				}
				
				LoadPfImage(strPoint,ImageID);
				
				if (pfUrl[1*strPoint]!="-"){$('#PfBack').append('<div id="PfBoxLink"><a href="'+pfUrl[1*strPoint]+'" target="_blank">'+pfUrl[1*strPoint]+'</a></div>')}
				
				//<a href="http://www.aw64.nl" target="_blank">zie www.aw64.nl</a>
				$('#PfBack').append(' <div id="PfBoxDescription">'+pfDescription[1*strPoint]+'</div>');	
				
				return false;
			}
			
			
			function NextPrevMouseIn(event){
				event.preventDefault();
				$(this).css('cursor', 'pointer');
				$(this).css('color','#FF0000');
				return false;
			}
			function NextPrevMouseOut(event){
				event.preventDefault();
				$(this).css('cursor', 'default');
				$(this).css('color','#777777');
				return false;
			}
			
			function ClickNextImg(event){
				event.preventDefault();	
				if(ImageID <pfNbItems[1*strPoint]){ImageID=ImageID+1}
				LoadPfImage(strPoint,ImageID);
				return false;
			}
			
			function ClickPrevImg(event){
				event.preventDefault();
				if(ImageID >1){ImageID=ImageID-1}
				LoadPfImage(strPoint,ImageID);
				return false;
			}
			
			function LoadPfImage(strPoint,ImageID){
					if(pfNbItems[1*strPoint]>1){
						$('#PfNumber').remove();
						$('#PfBoxControl').append('<div id="PfNumber">'+ImageID+'/'+pfNbItems[1*strPoint]+'</div>');
					}
					$('#ActualImg').remove();
					  $('#MovBox').remove();
					switch(Portfolio[1*strPoint][ImageID-1][1]){
						case'FLV':{
							
							MM_CheckFlashVersion('8,0,0,0','Content on this page requires a newer version of Adobe Flash Player. Do you want to download it now?');
							
						
							strFlashTop =Math.round((280-Portfolio[1*strPoint][ImageID-1][3])/2)+'px';
									
							strFlashLeft =Math.round((440-Portfolio[1*strPoint][ImageID-1][2])/2)+'px';
							
							strFLashObject="<script  type='text/javascript'>AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','"+Portfolio[1*strPoint][ImageID-1][2]+"','height',"+Portfolio[1*strPoint][ImageID-1][3]+",'id','FLVPlayer','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersion=1&skinName=Clear_Skin_2&streamName=_img/pf/"+Portfolio[1*strPoint][ImageID-1][0]+"&autoPlay=true&autoRewind=false','quality','high','scale','noscale','name','FLVPlayer','salign','lt','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','FLVPlayer_Progressive' );</script>";
							
							
						
							$('#PfBoxMain').append(strFLashObject);
							
							
							
							
							
							
						
							
							break;
						}
						
						default:{	
						
							strImageAppend ='<img id="ActualImg" src="_img/pf/'   +Portfolio[1*strPoint][ImageID-1][0]         +'" />'; 
							$('#PfBoxMain').append(strImageAppend);
							imgRatio = Portfolio[1*strPoint][ImageID-1][2] / Portfolio[1*strPoint][ImageID-1][3] //ratio width/height
							
							if (imgRatio >440/280){
									// landscape:
									intH= Math.round(440*Portfolio[1*strPoint][ImageID-1][3] / Portfolio[1*strPoint][ImageID-1][2]);
									strH= intH+'px';
									strPadding =Math.round((280-intH)/2)+'px';
									
									 $('#ActualImg').animate({width:'438px', height: strH, paddingTop:strPadding},animation_time);
									
							}
							else{
									// portet:
									intW=Math.round(280* Portfolio[1*strPoint][ImageID-1][2] / Portfolio[1*strPoint][ImageID-1][3]);
									strW= intW+'px';
									strPadding =Math.round((440-intW)/2)+'px';
									$('#ActualImg').animate({width:strW, height: '280px',paddingLeft:strPadding},animation_time );
							}
						}
					}
					

			}