//check if video already played
var counted = false;
		
var arrowDom = false;


//function called by the flash animation when this one is finished
function gotoFirstSlide(){
 $('#intro0').delay(3000).queue(function(){
		      // Move slideInner using margin-left
			  		$('#intro0').remove();
			  		addArrow1();
			  		selectGoto1(0);
		  });		  
}

	  

//function launched by flash to open lightbox
function prettyLaunch(){
		$('#lightboxLink').click();			
}

function addArrow1(){
	  $('#gotoContainer')
	  .prepend('<div id="pianoArrow"></div>');
	  arrowDom = true;
}

function selectGoto1(position){
 	//save the current position in Int
 	selectedGotoBt = parseInt(position);
 	//select gotobutton
	$('.goto_button').removeClass('goto_button_selected'),
		$('#'+position).addClass('goto_button_selected'),
		moveArrow1()
}

function moveArrow1(){
	currentPosition = 0;
	//line1: get width of selected goto and put arrow in the middle (divide by 2)
	//lin2: get width of all normal goto buttons  
	//line3: remove half of the size of the arrow (to center it) 
	 var leftPos = parseInt($('.goto_button_selected').css('width')) / 2 + parseInt($('.goto_button').css('margin-left')) + 
	 				+ parseInt($('.goto_button').css('width')) * currentPosition + parseInt($('.goto_button').css('margin-left')) * currentPosition + parseInt($('.goto_button').css('margin-right')) * currentPosition 
	 					- parseInt($('#pianoArrow').css('width')) / 2; 
	 //move the arrow using 'left' and show the right color arrow (background-position) -- clearQueue: stop current anim (if any) to allow 'crazy' clicking
      $('#pianoArrow').clearQueue().animate({
	        'left' : parseInt(leftPos),
	        'background-position' : '0 0'
	      });
      
      
 }

//called by flash player - calls a php function that counts how many times the video was played
function playCounter(){
	if (!counted){
	var jqxhr = $.ajax({ url: "videocounter/" ,
		context: document.body
	});
	counted = true;
	}
}
	  
$(document).ready(function(){
	

	
	//--jquery.media: used to embed Flash (see jquery.media.js for details)
	 $('.media_header').media({ 
	      width:     950, 
	      height:    235, 
	      autoplay:  true, 
	      caption:   false // supress caption text 
	  }); 
	  $('.media_clients').media({ 
	      width:     230, 
	      height:    75, 
	      autoplay:  true, 
	      caption:   false 
	  }); 
	  $('.media_introPiano').media({ 
		  width:     950, 
		  height:    437, 
		  autoplay:  true, 
		  caption:   false,
		  attrs:     { id: 'introPiano', name: 'introPiano' } //give an object ID to IE
	  }); 

	

	  var userCliked = false;
	//--slider-piano:
	  var currentPosition = 0;
	  var selectedGotoBt = 0;
	  var slideWidth = 950;
	  var slides = $('.slide');
	  var numberOfSlides = slides.length - $("#intro0").length;
	  var introOn = true;

	  //check if gotoContainerFive exist (means there are 5 buttons)
	  var idArrow = "pianoArrow"; 
	  if($(".gotoContainerFive").length != 0)
		  idArrow =  "pianoFiveArrows";

	  // Remove scrollbar in JS
	  $('#slidesContainer').css('overflow', 'hidden');

	  // Wrap all .slides with #slideInner div
	  slides
	  .wrapAll('<div id="slideInner"></div>')
	  // Float left to display horizontally, readjust .slides width
	  .css({
	    'float' : 'left',
	    'width' : slideWidth
	  });

	  // Set #slideInner width equal to total width of all slides
	  $('#slideInner').css('width', slideWidth * numberOfSlides);

	  // Insert left and right arrow controls in the DOM
	 /* $('#slideshow')
	    .prepend('<span class="control" id="leftControl">Move left</span>')
	    .append('<span class="control" id="rightControl">Move right</span>');*/
	  
	  // Insert the arrow in the DOM
	  function addArrow(){
		  if (!arrowDom){
		  $('#gotoContainer')
		  .prepend('<div id="'+idArrow+'"></div>');
		  }
	  }

	  // Hide left arrow control on first load
	//  manageControls(currentPosition);

	  // Create event listeners for .controls clicks
	  $('.control')
	    .bind('click', function(){
	      //remove intro if not already done (if intro isn't finished or still here)
	      if(introOn){
	    	  $('#intro0').remove();
	    	  addArrow();
	    	  introOn = false;
	    	  moveArrow();
	    	  currentPosition = 0;
	    	  selectGoto(currentPosition);
	    	  $('#slideInner').animate({
			        'marginLeft' : slideWidth*(-currentPosition)
			      });
	  
	      }
	      else{
		    // Determine new position
		      /*if($(this).attr('id')=='leftControl'){
		    	  currentPosition =  (currentPosition == 0)?numberOfSlides-1 : currentPosition-1;
		      }else{*/
		    	  currentPosition =  (currentPosition == numberOfSlides-1)? 0 : currentPosition+1;
		     // }
		            
		      // auto selection the "gotobutton"
		      selectGoto(currentPosition);
		      // Move slideInner using margin-left
		      $('#slideInner').animate({
		        'marginLeft' : slideWidth*(-currentPosition)
		      });
	      }

	    });


	  
	  //---piano functions---
	  
		/*  
		 * the "do nothing" idea goes on...
		 * 
	  $('#0').addClass( "goto_button_selected" );
	  moveArrow();
	  
	  */
	  
	  $('.goto_button')
	    .bind('click', function(){
	    	//console.log(userCliked); 
	    	
	      //remove intro if not already done (if intro isn't finished)
		 if(introOn){
		    	  $('#intro0').remove();
		    	  addArrow();
		    	  introOn = false;

		      }
	      
		    // Determine new position (ids must be 0, 1 , 2...)
		      currentPosition = parseInt($(this).attr('id'));
		      //move selected goto button if needed (put back to original position)
		      moveSelectedGoto();
		      
		     //select the goto button that was clicked
		     selectGoto(currentPosition);
		      
		     //more arrow position
		     moveArrow();
		     
		      // Move slideInner using margin-left
		      $('#slideInner').animate({
		        'marginLeft' : slideWidth*(-currentPosition)
		      });
	      
	      

	      
	    });
	  
	 var timeHover = 100;
	 var timeOut = 200;
	 
	 
	 $('.goto_button')
	 	.hover( 
		          //Mouseover 
		           function() { 
		        	   
		        	   $(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
		        		$(this).find('.background_bt').stop() /* then stop animation queue buildup*/
		        			.animate({
		        				top: '-5px',/* vertical align this image */ 
		        				left: '-9px',
		        				width: '171px', /* Set new width */
		        				height: '120px' /* Set new height */
		        			}, timeHover);
		        		
		        			//title animations (block+text):
			        		$(this).find('.text-container').stop().animate({
			        			top: '-5px'
			        		}, timeHover );
			        	   $(this).find('.titleKey').stop().animate({
			        		    'font-size': "16px"
			        		  }, timeHover );
			        	   
			        	   //tagline animations (block+text):
			        	   $(this).find('.tagLineKey').stop().animate({
			        		   'font-size': "13px"
			        	   }, timeHover );
			        		$(this).find('.text-containerTagline').stop().animate({
			        			top: '-2px'
			        		}, timeHover );
			        	   
			        	   //central icon animations:
			        	   $(this).find('.img_container').stop().animate({
			        		   width: '169px',
								left: '-9px',
								top: '-3px'
			        	   }, timeHover );

		          },
		         
		         //Mouseout 
		          function() { 
		        	  
		        	   $(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
		        		$(this).find('.background_bt').removeClass("hover").stop()
		        			.animate({
		        				top: '0',/* Set alignment back to default */
		        				left: '0',
		        				width: '153px', /* Set width back to default */
		        				height: '108px' /* Set height back to default */
		        			}, timeOut);
		        		
		        			//title animations (block+text) (back to default):
			        		$(this).find('.text-container').stop().animate({
			        			top: '0'
			        		}, timeOut );
			        	   $(this).find('.titleKey').stop().animate({
			        		    'font-size': "13px"
			        		  }, timeOut );
			        	   
			        	 //tagline animations (block+text) (back to default):
			        	   $(this).find('.tagLineKey').stop().animate({
			        		   'font-size': "11px"
			        	   }, timeOut );
			        		$(this).find('.text-containerTagline').stop().animate({
			        			top: '0'
			        		}, timeHover );
			        	   
			        	 //central icon animations:
			        	   $(this).find('.img_container').stop().animate({
			        		   width: '150px',
		        				left: '0',
								top: '0'
			        	   }, timeOut );
			        	   
		          }
	 		);

	 
	 function selectGoto(position){
		 	//save the current position in Int
		 	selectedGotoBt = parseInt(position);
		 	//select gotobutton
			$('.goto_button').removeClass('goto_button_selected'),
 			$('#'+position).addClass('goto_button_selected'),
 			moveArrow()
	 }
	 //'lock' the selected goto by moving it for 12px if needed
	 function lockSelectedGoto(onHoverId, onSelectedId){
		 var onHoverPosition = parseInt(onHoverId);
		 var onSelectedPosition = parseInt(onSelectedId);
		 
		 if (onHoverPosition < onSelectedPosition){
			 $('#gotoContainer').stop().animate({
				 left:"-12px"
   		  	}, 200 ); 
			 
			 $('#'+idArrow).stop().animate({
				 left: parseInt($('#'+idArrow).css ('left')) + 12
	   		  	}, 200 );
		 }
		 
	 }
	//'unlock': the selected goto if going back to its original position
	 function unlockSelectedGoto(onHoverId, onSelectedId){
		 var onHoverPosition = parseInt(onHoverId);
		 var onSelectedPosition = parseInt(onSelectedId);
		 
		 if (onHoverPosition < onSelectedPosition){
			 $('#gotoContainer').stop().animate({
				 left:"0px"
	   		  	}, 200 ); 
			 $('#'+idArrow).stop().animate({
				 left: parseInt($('#'+idArrow).css ('left')) - 12
	   		  	}, 200 ); 
		 }
	 }
	 
	 //goto button back to original position
	 function moveSelectedGoto(){
			 $('#gotoContainer').css ({left:"0"});
			 $('#'+idArrow).css ({left: parseInt($('#'+idArrow).css ('left')) - 12});
	 }
	 
	 function moveArrow(){
		 
		//line1: get width of selected goto and put arrow in the middle (divide by 2)
		//lin2: get width of all normal goto buttons  
		//line3: remove half of the size of the arrow (to center it) 
		 var leftPos = parseInt($('.goto_button_selected').css('width')) / 2 + parseInt($('.goto_button').css('margin-left')) + 
		 				+ parseInt($('.goto_button').css('width')) * currentPosition + parseInt($('.goto_button').css('margin-left')) * currentPosition + parseInt($('.goto_button').css('margin-right')) * currentPosition 
		 					- parseInt($('#'+idArrow).css('width')) / 2; 
		 //move the arrow using 'left' and show the right color arrow (background-position) -- clearQueue: stop current anim (if any) to allow 'crazy' clicking
	      $('#'+idArrow).clearQueue().animate({
		        'left' : parseInt(leftPos),
		        'background-position' : '0 ' + (-14 * currentPosition) + 'px'
		      });
	      
	      
	 }
	 
	 
	 
	 /**display flash player**/
	// if($('a#videoIntro').length != 0){
		//if flash exist (videoIntro is the flash player container)

		
	 	var player = "/images/home/videoPlayer.swf";
	 	
	 	var widthValue="430";
	 	var heightValue="322";
	 	//set the right video according to languages
	 	var thumbnails = "/images/home/videoThumbnailsEn.jpg";
	 	var video = "http://momindum.ondemand.flumotion.com/momindum/ondemand/momindum/momindumPresentationEn.flv";
	 	var IdVideoContainer = "#videoIntroEn";
	 	//if the container isn't EN then it's FR
	 	if ($(IdVideoContainer).length == 0){
	 		IdVideoContainer = "#videoIntro";
	 		video = "http://momindum.ondemand.flumotion.com/momindum/ondemand/momindum/momindumPresentationFr.flv";	 	
	 		thumbnails = "/images/home/videoThumbnails.jpg";
	 	}
	 	var flashvarsValue = 'videoURL='+video+'&thumbnailsURL='+thumbnails;//+'&autoPlay='+autoplay+'&language='+culture+'&timecode='+initialTimecode;
	    
	 	
	 	
	 	$(IdVideoContainer).media({ 
	 		width:    widthValue, 
	 		height:   heightValue,
	 		autoplay:  true,
	 		bgColor:   '#F5F5F5',
	 		src: player,
	 		
	 		attrs:    {  
		 		FlashVars: flashvarsValue,
		 		id: 'mediaPlayer',
		 		name: 'mediaPlayer'
	 		
		 	},		  		
		 	params:    {  
		 		FlashVars: flashvarsValue,
		 		allowFullscreen: true,
		 		window: 'wmode',
		 		allowScriptAccess: 'always'
		 	},
		 	caption:   false
	 	}); 
	 	
	 	
	 	//$('#videoIntro').css('visibility','hidden');
			$('.goto_button')
		    .bind('click', function(){
    			 if($.browser.version != "9.0" && $.browser.msie)
    			  document.getElementById('mediaPlayer').stopPlaying();
		    });
			
			//move slides automatically if five buttons
			if ($(".gotoContainerFive").length != 0){
				var button = new Array();
				$('.goto_button').each(function(index){
					button[index] = $(this);
				});	
				setTimeout(function() {
						runTimer();
				},2000);
				var it  = 0;
				var timerBt;
				
				function runTimer(){
						if($('.goto_button').length <= it +1){
							it=0;
						}
						else{
							it++;
						}
						timerBt = setTimeout(function() {
							if (!userCliked){
								button[it].click();
								userCliked = false;
								runTimer();
							}else{
							clearTimeout(timerBt);
							}
						},7500);
	
				}
				
				$('#slideshow')
				.bind('click', function(){
					userCliked = true;				
				});
			} //end if - moving slides
			
			
	// } //end if flash

	 //allows lightbox on unit presentation 
	 //$("a[rel^='prettyPhoto']").prettyPhoto();
	 
		$("a[rel^='prettyPhoto']").prettyPhoto({
			animation_speed: 'fast', /* fast/slow/normal */
			opacity: 0.80, /* Value between 0 and 1 */
			theme: 'light_rounded', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
			hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
			allow_resize: false, /* Resize the photos bigger than viewport. true/false */
			default_width: 920,
			default_height: 560,
			gallery_markup:'',
			wmode: 'opaque', /* Set the flash wmode attribute */
			autoplay: true, /* Automatically start videos: True/False */
			modal: false, /* If set to true, only the close button will close the window */
			overlay_gallery: false, /* If set to true, a gallery will overlay the fullscreen image on mouse over */
			keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */
			changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
			callback: function(){} /* Called when prettyPhoto is closed */
		});
		
	 
});