/*
* Sets the slide show elements
* This slideshow is used on the landing page of the Venues site only. Its code is completely tailored for that specific page.
*
*/
(function($){	
	$.fn.slideshow = function(headImgs,heartImgs,weddingImgs,headTxt,heartTxt,weddingTxt,headImg,heartImg) {
		
		//Set the initial head and heart images to be randomly selected
		var randHead = new Array();
		randHead[0] = "head1.jpg";
		randHead[1] = "head2.jpg";
		randHead[2] = "head3.jpg";
		randHead[3] = "head4.jpg";
		randHead[4] = "head5.jpg";
		randHead[5] = "head6.jpg";
		randHead[6] = "head7.jpg";
		
		//List heart images
		var randHeart = new Array();
		randHeart[0] = "heart1.jpg";
		randHeart[1] = "heart2.jpg";
		randHeart[2] = "heart3.jpg";
		randHeart[3] = "heart4.jpg";
		randHeart[4] = "heart5.jpg";
		randHeart[5] = "heart6.jpg";
		randHeart[6] = "heart7.jpg";
		randHeart[7] = "heart8.jpg";
		
		//Generate 2 random numbers
		var randHeadInt = Math.floor(Math.random()*7);
		var randHeartInt = Math.floor(Math.random()*8);
		
		var headImg = '<img src="/SiteCollectionImages/FunctionsCatering/Landing/landingImages/heads/'+randHead[randHeadInt]+'" alt="" />';
		var heartImg = '<img src="/SiteCollectionImages/FunctionsCatering/Landing/landingImages/hearts/'+randHeart[randHeartInt]+'" alt="" />';
		
		//Assign the random lucky winners
		$('#scaleLeft').html(headImg);
		$('#scaleRight').html(heartImg);
		
		// Specify the size of image
		var FullscreenrOptions = {width: 650, height: 550};
		// resize encore
		jQuery.fn.fullscreenrResizer(FullscreenrOptions);
		//
		
	
		
		$('#scaleLeft').animate({left: 0}, 2000, function(){$(this).removeClass('slideinHead');});
		$('#scaleRight').animate({right: 0}, 2000, function(){$(this).removeClass('slideinHeart');});
		$('#headText').animate({opacity: 1}, 1500, function(){$(this).removeClass('fadein');});
		$('#heartText').animate({opacity: 1}, 1500, function(){$(this).removeClass('fadein');});
		
		
		
		var slide = 1;
		var initialEntry = true;
		
		//Initiate the slide show
		setTimeout(play, 6000);
		
		function play(){
			//alert(slide);
			if(slide > 3){
				slide = 1;	
			}
			
			
			
			switch(slide){
				
				case 1:
					//Swap to head images
					
					
					//Check for initial entry
					if(initialEntry){
						//Fade out elements
						$('#heartText').animate({opacity: 0}, 2000);
						$('#headText').animate({opacity: 0}, 2000);
						//$('#scaleRight').animate({opacity: 0}, 2000, function(){
						$('#scaleRight').animate({left: 1000}, 2000, function(){
							/////
							$('#heartText').empty();
							$('#heartText').addClass('rightText');
							$('#headText').addClass('leftText');
							
							//Set text
							$('#headText').html(headTxt[0]);
							//Build the list of images
							var headImagesList = '<div class="slideshow">';
							for(i = 0; i < headImgs.length; i++){
								headImagesList += '<img src="'+headImgs[i]+'" alt="" />';
							}
							headImagesList += '</div>';
							$('#scaleRight').html(headImagesList);
							
							
							//Call resize once to ensure the first slide is correctly sized
							var FullscreenrOptions = {width: 650, height: 550};
							$(window).fullscreenrResizer(FullscreenrOptions);
							
							//Fade in and initiate
							$('#headText').animate({opacity: 1}, 1000);
							//$('#scaleRight').animate({opacity: 1}, 1000);
							$('#scaleRight').animate({left: 0}, 1000);
							
							//Initiate the slideshow
							$('.slideshow').cycle({
								fx: 'fade',
								slideResize: 0,
								autostop: 1,
								end: play
							});	
							
																		
						});
						
						
						initialEntry = false;	
					}else{
						//Fade out wedding elements
						$('#heartText').animate({opacity: 0}, 1000);
						$('#scaleLeft').animate({left:-1000}, 1000, function(){
							/////
							$('#heartText').empty();
							//$('#scaleLeft').css('left',0);
							
							$('#scaleLeft').html(headImg);
							
							//Set text
							$('#headText').html(headTxt[0]);
							//Set images
							var headImagesList = '<div class="slideshow">';
							for(i = 0; i < headImgs.length; i++){
								headImagesList += '<img src="'+headImgs[i]+'" alt="" />';
							}
							headImagesList += '</div>';
							$('#scaleRight').html(headImagesList);
							
							
							//Call resize once to ensure the first slide is correctly sized
							var FullscreenrOptions = {width: 650, height: 550};
							$(window).fullscreenrResizer(FullscreenrOptions);
							
							//Fade in and initiate
							$('#headText').animate({opacity: 1}, 1000);
							$('#scaleRight').animate({left: 0}, 1000);
							//$('#scaleRight').animate({opacity: 1}, 1500);
							$('#scaleLeft').animate({left: 0}, 1000);
							//$('#scaleLeft').animate({opacity: 1}, 1000);
							
							//Initiate the slideshow
							$('.slideshow').cycle({
								fx: 'fade',
								slideResize: 0,
								autostop: 1,
								end: play
							});
							
						});
					}
					
					
				
					break;
					
				case 2:
					//Swap to heart images
					
					////
					//Fade out head elements
					$('#headText').animate({opacity: 0}, 1000);
					$('#scaleRight').animate({left:1000}, 1000);
					//$('#scaleLeft').animate({opacity: 0}, 1000, function(){
					$('#scaleLeft').animate({left:-1000}, 1000, function(){
						
						$('#headText').empty();
						//$('#scaleRight').css('left',0);
						$('#scaleRight').html(heartImg);
						
						//Set text
						$('#heartText').html(heartTxt[0]);
						//Set images
						var heartImagesList = '<div class="slideshow">';
						for(i = 0; i < heartImgs.length; i++){
							heartImagesList += '<img src="'+heartImgs[i]+'" alt="" />';
						}
						heartImagesList += '</div>';
						$('#scaleLeft').html(heartImagesList);
						
						
						//Call resize once to ensure the first slide is correctly sized
						var FullscreenrOptions = {width: 650, height: 550};
						$(window).fullscreenrResizer(FullscreenrOptions);
						
						
						//Fade in and initiate							
						$('#heartText').animate({opacity: 1}, 1000);
						$('#scaleRight').animate({left: 0}, 1000);
						$('#scaleLeft').animate({left: 0}, 1000);
						//$('#scaleRight').animate({opacity: 1}, 1500);
						//$('#scaleLeft').animate({opacity: 1}, 1000);
					
					
						//Initiate the slideshow
						$('.slideshow').cycle({
							fx: 'fade',
							slideResize: 0,
							autostop: 1,
							end: play
						});
					
					});
					
					break;
					
				case 3:
					//Swap to wedding images
					////
					//Fade out heart elements
					$('#heartText').animate({opacity: 0}, 1000);
					//$('#scaleRight').animate({opacity: 0}, 1000);
					$('#scaleRight').animate({left: 1000}, 1000);
					$('#scaleLeft').animate({left:-1000}, 1000, function(){
						
						$('#scaleRight').empty();
						//$('#scaleLeft').css('left',0);
						
						//Set text
						$('#heartText').html(weddingTxt[0]);
						//Set images
						var weddingImagesList = '<div class="slideshow">';
						for(i = 0; i < weddingImgs.length; i++){
							weddingImagesList += '<img src="'+weddingImgs[i]+'" alt="" />';
						}
						weddingImagesList += '</div>';
						$('#scaleLeft').html(weddingImagesList);
						
						
						//Call resize once to ensure the first slide is correctly sized
						var FullscreenrOptions = {width: 650, height: 550};
						$(window).fullscreenrResizer(FullscreenrOptions);
						
						
						//Fade in and initiate							
						$('#heartText').animate({opacity: 1}, 1000);
						//$('#scaleRight').animate({opacity: 1}, 1000);
						$('#scaleLeft').animate({left: 0}, 1000);
						
						//Initiate the slideshow
						$('.slideshow').cycle({
							fx: 'fade',
							slideResize: 0,
							autostop: 1,
							end: play
						});
					});
					
					break;
				
			}
			
			slide++;
		
		}
		
		
		
		
		
	};
})(jQuery);