$(document).ready(function () {
  

//------------------------------------------------------------------

	  
	//--slider-piano:
	  var currentPosition = 0;
	  var selectedGotoBt = 0;
	  var slideWidth = 950;
	  var slides = $('.slide');
	  var numberOfSlides = slides.length;
	  var introOn = true;
	  
	  var urlOtherPage = $("#pageMoreLink").attr('href');
	  $("#pageMoreLink").removeAttr('href');

	  // 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>');*/

	  // 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)

		    // 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---
	  
	  
	  $('.goto_button').first().addClass( "goto_button_selected" );
	  moveArrow();
	  
	  $('.goto_button')
	    .bind('click', function(){
	      //remove intro if not already done (if intro isn't finished)
	      
	    	//if clicked button is for a page outside the slides, do nothing
	    	if($(this).attr('id') != "pageMore"){
	    		// Determine new position (ids must be 0, 1 , 2...)
			    // currentPosition = parseInt($(this).attr('id'));
	    		//if there is no hidden buttons
	    		if($('div#buttonsWarper').length ==0){
	    			currentPosition = $(this).prevAll().length - 1;  //count the number of element before the selected bt [-1: - the arrow: we need the buttons only]
	    		}
	    		else{
	    			currentPosition = $(this).prevAll().length;
	    		}
	    		
	    		//remove hidden button if needed (if filter)
	    		if(currentPosition > $('div.hiddenButton').prevAll().length){
			      currentPosition -= $('div.hiddenButton').prevAll().length;
	    		}
			      
			     //select the goto button that was clicked
			     selectGoto($(this).attr('id'));
			      
			     //more arrow position
			     moveArrow();
			     
			      // Move slideInner using margin-left
			      $('#slideInner').animate({
			        'marginLeft' : slideWidth*(-currentPosition)
			      });
			      
			      //change URL (1 URL by slide)
			      window.location.hash = "#" + $(this).attr('id') + "_slide";  //add "_slide" to remove the anchor effect of the ID
			      
	    	}else{
	    		if(urlOtherPage){
	    			window.location = urlOtherPage;
	    		}
	    	}
	    });
	  
	 $('.goto_button')
	 	.hover( 
			          //Mouseover 
			           function() { 
			        	  
			        	   $(this).addClass( "goto_button_hover" );
			          },
			         
			         //Mouseout 
			          function() {  
			        	  $(this).removeClass( "goto_button_hover" );     
			       })

	 
	 function selectGoto(position){
		 	//select gotobutton
			$('.goto_button').removeClass('goto_button_selected'),
			$('#'+position).addClass('goto_button_selected'),
			moveArrow()
	 }
	 


	 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) 

		 currentPosition = parseInt(currentPosition);
		 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 ' + (-14 * currentPosition) + 'px'
		      });
	      
	 }
//----------------------------------------
	 
	 //resources button:
	 $('.resoucesBt')
	 	.hover( 
			          //Mouseover 
			           function() { 
			        	   $(this).children('.fullResources').css( 'display', 'block');
			        	   $(this).children('.resoucesLink').addClass('resoucesLink_hover');
			          },
			         
			         //Mouseout 
			          function() {  
			        	  $(this).children('.fullResources').css('display', 'none');
			        	  $(this).children('.resoucesLink').removeClass('resoucesLink_hover') ;     
			       })
			       
//--------------------------------------
//special button to go slides
	 
	 
	  $('.gotoSpecial')
	    .bind('click', function(){
	      //remove intro if not already done (if intro isn't finished)
	      
	    	
	    	//if clicked button is for a page outside the slides, do nothing

	    		// Determine new position (ids must be 0, 1 , 2...)
			      currentPosition = parseInt($(this).children("span").attr('class'));
		    	
			      
			     //select the goto button that was clicked
			     selectGoto(currentPosition);
			      
			     //more arrow position
			     moveArrow();
			     
			      // Move slideInner using margin-left
			      $('#slideInner').animate({
			        'marginLeft' : slideWidth*(-currentPosition)
			      });
		      


	      
	    });
	 
	//click simulation to go to a particular slide: if url called is #id-of-a-gotobutton
	 
    var gotoSlide = $(location).attr('href').substring($(location).attr('href').lastIndexOf('/') + 1);
    gotoSlide =  gotoSlide.substring(0, gotoSlide.length - 6); //remove "_slide" from the string to get the ID
    if (gotoSlide != ""){
		$(gotoSlide).click();
    }

});