/*******************************************/
/**** CUSTOM jQUERY USED ON THE WEBSITE ****/
/*******************************************/
	
/*#### IMAGE ROTATING TRANSITION EFFECT ####*/
	
	function theRotator() {
		//Set the opacity of all images to 0
		$('div.rotator ul li').css({opacity: 0.0});
		
		//Get the first image and display it (gets set to full opacity)
		$('div.rotator ul li:first').css({opacity: 1.0});
			
		//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
		setInterval('rotate()',6000);
	}

	function rotate() {	
		//Get the first image
		var current = ($('div.rotator ul li.show')?  $('div.rotator ul li.show') : $('div.rotator ul li:first'));

		//if ( current.length == 0 ) current = $('div.rotator ul li:first');

		//Get next image, when it reaches the end, rotate it back to the first image
		var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
		
		//Set the fade in effect for the next image, the show class has higher z-index
		next.css({opacity: 0.0})
		.addClass('show')
		.animate({opacity: 1.0}, 1000);

		//Hide the current image
		current.animate({opacity: 0.0}, 1000)
		.removeClass('show');
		
	};
	
	
	/*#### IMAGE BANNER SLIDER ####*/
	function bannerSlider(){
	//Configuration

		var retour = true;
		var transitionDelay = 1000;
		var displayPlayPause = true;
		var autoStart = true;
		var autoDelay = 9000;

		var icons = new Array();
			icons['play'] = '/custom_home/play_slider.png';
			icons['pause'] = '/custom_home/pause_slider.png';	

		var currentPosition = 0;
		var slideWidth = 648;
		var slides = $('.slide');
		var numberOfSlides = slides.length;
		var interval;
		var lectureEnCours = false;

		// 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 controls in the DOM
		$('#slideshow')
			.prepend('<span class="custom_control" id="leftControl">Left</span>')
			.append('<span class="custom_control" id="rightControl">Right</span>');

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

		// Create event listeners for .controls clicks
		$('.custom_control')
			.bind('click', function(){

		// Determine new position
		currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

		if(currentPosition == numberOfSlides && retour == false ){
			
			currentPosition--;
			pause();
			
		}

		// Hide / show controls
		manageControls(currentPosition);
			// Move slideInner using margin-left
			$('#slideInner').animate({
				'marginLeft' : slideWidth*(-currentPosition)
			},transitionDelay);
clearInterval(interval);
		});

		
		// manageControls: Hides and Shows controls depending on currentPosition
		function manageControls(position){
			// Hide left arrow if position is first slide
			if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
				
			// Hide right arrow if position is last slide
			if(position==numberOfSlides-1 && retour == true){
			
				$('#rightControl').hide();
				
			} else {
			
				$('#rightControl').show();
				
			}
			
			if(position == numberOfSlides && retour == true){
				currentPosition = 0;
				$('#leftControl').hide();
			}

		}
		
		
		function next(){
		
			$('#rightControl').click();
		
		}
		
		function start() {
		
			lectureEnCours = true;
			interval = setInterval(next, autoDelay );
			
		}
		
		function pause() {
		
			lectureEnCours = false;
			clearInterval(interval);
		
		}

		//Auto Scroll Function
		if(autoStart == true){
		start();
		}
		
		if(displayPlayPause == true){
		
			$('#slidesContainer').prepend('<div class="auto_start"><img id="navSlide" src="" alt="Play Pause Slider" /></div>');
			
			if(autoStart == true){
			
				$('#navSlide').attr('src',icons['pause']);
			
			}else{
			
				$('#nav').attr('src',icons['play']);	
			
			}
			
			$('#navSlide').bind('click', function(){
			
				if(lectureEnCours == true){
				
				$(this).attr('src',icons['play']);
					
					pause();
				
				}else{
				
					$(this).attr('src',icons['pause']);
					start();
				
				}
			
			});
		
		}

	};