var myInterval;
var numberOfImages;
var currentImage = 1;
var $first;
var $last;

//This is called from the RVE page now. So that the client can choose which images to load in
/*function initialiseSlideShow()
{
	$( '#slide_show' ).load( "http://dynamic-learning-marketing.rve4.mmtdigital.co.uk/htmlsnippets/HomePageSlideShow.aspx .slide_images", null, slideShowImagesCompleteListener );
}*/

function slideShowImagesCompleteListener()
{
	//addCarouselBehaviour();
	//alert('loaded');
	addSlideShowBehaviour();
}

function addSlideShowBehaviour()
{
		
		//remove empty slide image divs
		$("div.slide_images div:empty").each(function(){
				$(this).remove();
		});

		//set number of images
		numberOfImages = $('div.slide_images div').length;

		//create image links
		$('div.slide_images').wrap('<div id="slide_images_wrapper"></div>');		
		$('div.slide_images').after('<div id="slide_menu"></div>')
		$('div#slide_menu').append('<ul></ul>')
		
		for(var i=0;i<numberOfImages; i++)
		{
			$('div#slide_menu ul').append('<li><a href="javascript:goToImage('+(i+1)+')">'+(i+1)+'</a></li>');
		}
		
		$('div#slide_menu ul li:first-child').addClass('selected');
		$('div#slide_menu ul li:last-child').addClass('last');
		$('div#slide_menu ul').before('<a id="previousBtn" class="leftArrowButton" href="javascript:goToNextPrevious(\'#previousBtn\');"></a>');
		$('div#slide_menu ul').after('<a id="nextBtn" class="rightArrowButton" href="javascript:goToNextPrevious(\'#nextBtn\');"></a>');
		$('div#slide_menu').before('<a id="pauseSlideShow" class="pauseButton" href="javascript:pausePlay(\'#pauseSlideShow\');"></a>')
	
		$first = $('div.slide_images div:first-child');
		$last = $('div.slide_images div:last-child');
	
		
		//set interval to cycle between images
		//myInterval= setInterval("swapImage()", 5000);
		pausePlay('#playSlideShow');
}

function swapImage() {
	
    var $active = $('div.slide_images div.slide_image_active');
    var $next = $active.next();    

	if($next.length){ 
		$next.addClass('slide_image_active');
		$active.removeClass('slide_image_active');
		currentImage = currentImage+1;
		highlightNumber(currentImage);
	}else{
		$first.addClass('slide_image_active');
    	$active.removeClass('slide_image_active');	
		currentImage = 1;
		highlightNumber(currentImage);
	}
}



function goToNextPrevious(id)
{
	//stop interval when next/previous button clicked
	clearInterval(myInterval);
	
	var $active = $('div.slide_images div.slide_image_active');
    var $next = $active.next();
	var $previous = $active.prev();
	
	var _id = id;
	
	if(_id == '#previousBtn' )
	{
		if($previous.length){ 
		$previous.addClass('slide_image_active');
		$active.removeClass('slide_image_active');
		currentImage = currentImage-1;
		highlightNumber(currentImage);
		}else{
			$last.addClass('slide_image_active');
			$active.removeClass('slide_image_active');
			currentImage = numberOfImages;
			highlightNumber(currentImage);
		}
	}else if(_id == '#nextBtn' ){
		if($next.length){ 
		$next.addClass('slide_image_active');
		$active.removeClass('slide_image_active');
		currentImage = currentImage+1;
		highlightNumber(currentImage);
		}else{
			$first.addClass('slide_image_active');
			$active.removeClass('slide_image_active');
			currentImage = 1;
			highlightNumber(currentImage);			
		}
	}
	
	//start interval
	//myInterval= setInterval("swapImage()", 5000);
	pausePlay('#playSlideShow');
}

function goToImage(image)
{
	//stop interval when next/previous button clicked
	clearInterval(myInterval);
	
	_image = image;
	var $active = $('div.slide_images div.slide_image_active');
	$next = $('div.slide_images div:nth-child('+_image+')');
	
	if($next.length){ 
		$next.addClass('slide_image_active');
		$active.removeClass('slide_image_active');
		currentImage = _image;
		highlightNumber(currentImage);
	}

	//start interval
	//myInterval= setInterval("swapImage()", 5000);
	pausePlay('#playSlideShow');
}

function pausePlay(id)
{
	var _id = id;
	
	if(_id == '#pauseSlideShow')
	{
		//stop interval when pause button clicked
		clearInterval(myInterval);
		$('a#pauseSlideShow').attr('href', 'javascript:pausePlay(\'#playSlideShow\')');
		$('a#pauseSlideShow').css('background', 'url(../RVE_Images/homePage/playButton.jpg) top left no-repeat');
	}else if( _id == '#playSlideShow'){
		//play interval when pause button clicked
		$('a#pauseSlideShow').attr('href', 'javascript:pausePlay(\'#pauseSlideShow\')');
		$('a#pauseSlideShow').css('background', 'url(../RVE_Images/homePage/pauseButton.jpg) top left no-repeat');
		myInterval= setInterval("swapImage()", 5000);
	}
}

function highlightNumber(currentImage)
{
	_currentImage = currentImage;
	
	$("div#slide_menu ul li").each(function(){
		$(this).removeClass('selected');									  
	})
	
	$('div#slide_menu ul li:nth-child('+_currentImage+')').addClass('selected');
}