// JavaScript Document
// FeatureFade code created by Matt Solano, www.mattsolano.com (I will appreciate if left here, Thanks)

$(document).ready(function(){
				
						 $("#button1").click(function () {
							clearTimeout(handle);
      						changestate(1);
							$("#stopbutton").css("background-image", "url(images/pause.png)");  // Adjust this url to proper location if changing what the Pause button looks like

						 });
						 
						 
						 $("#button2").click(function () {
							clearTimeout(handle);
      						changestate(2);
							$("#stopbutton").css("background-image", "url(images/pause.png)");  // Adjust this url to proper location if changing what the Pause button looks like
   						 });
						 
						 
						 $("#button3").click(function () {
							clearTimeout(handle);
      						changestate(3);
							$("#stopbutton").css("background-image", "url(images/pause.png)");  // Adjust this url to proper location if changing what the Pause button looks like
   						 });
						 
						 
						 $("#button4").click(function () {
							clearTimeout(handle);
      						changestate(4);
							$("#stopbutton").css("background-image", "url(images/pause.png)");  // Adjust this url to proper location if changing what the Pause button looks like
   						 });
						 
						 
						 $("#button5").click(function () {
      						clearTimeout(handle);
							changestate(5);
							$("#stopbutton").css("background-image", "url(images/pause.png)");  // Adjust this url to proper location if changing what the Pause button looks like
							
   						 });
						 
						 
						 $("#button6").click(function () {
						 	clearTimeout(handle);
							changestate(6);
							$("#stopbutton").css("background-image", "url(images/pause.png)");  // Adjust this url to proper location if changing what the Pause button looks like
							
						 });
						 
						 $("#button7").click(function () {
						 	clearTimeout(handle);
							changestate(7);
							$("#stopbutton").css("background-image", "url(images/pause.png)");  // Adjust this url to proper location if changing what the Pause button looks like
							
						 });

						/*$("#stopbutton").click(function () {
						 	clearTimeout(handle);
							});*/
						
						$("#stopbutton").toggle(
  							function () {
								frame=laststate+1;
  								clearTimeout(handle);
								$("#stopbutton").css("background-image", "url(images/play.png)");  // Adjust this url to proper location if changing what the Play button looks like
							},
  							function () {
								frame=laststate+1;
								
								if(frame==8){													   // Adjust this value to the total number of captions + 1
								clearTimeout(handle);
   								changestate(1);	
								$("#stopbutton").css("background-image", "url(images/pause.png)");	
								
								}else{
								clearTimeout(handle);
   								changestate(frame);
								$("#stopbutton").css("background-image", "url(images/pause.png)");  // Adjust this url to proper location if changing what the Pause button looks like
								}
 							 }
						);





								$("#feature2").fadeTo(1000 , 0);     		// -----------
								$("#featureinfo2").fadeTo(1000 , 0);		// These lines initialize the images
								$("#feature3").fadeTo(1000 , 0);			// and information of captions 2 through 6
								$("#featureinfo3").fadeTo(1000 , 0);		// to an opacity of 0.
								$("#feature4").fadeTo(1000 , 0);			//
								$("#featureinfo4").fadeTo(1000 , 0);		// This is needed for Internet Explorer
								$("#feature5").fadeTo(1000 , 0);			//
								$("#featureinfo5").fadeTo(1000 , 0);		//
								$("#feature6").fadeTo(1000 , 0);			//
								$("#featureinfo6").fadeTo(1000 , 0);		//
								$("#feature7").fadeTo(1000 , 0);			//
								$("#featureinfo7").fadeTo(1000 , 0);		//------------
				
				
				});/*----End of (document).ready----*/
				
						
					var handle;	
					var laststate;
					var frame;
					
					
					
					
					
					
					
					
				function changestate (frame){
					
							
    				
					
				if (laststate>0){
					
					$("#feature" + laststate).fadeTo(800 , 0);							// This fades the outgoing image out for a duration of 1 second (1000 milliseconds) to an opacity of 0
					$("#featureinfo" + laststate).fadeTo(800 , 0);						// This fades the outgoing info out for a duration of 1 second (1000 milliseconds) to an opacity of 0
					$("#button"+laststate).css("background-color", "#FFFFFF");			// Sets the color of the outgoing button back to white
					$("#feature"+laststate).animate({top: "300px"},0);					// Moves the outgoing image below the entire news box in 0 milliseconds
					$("#featureinfo"+laststate).animate({top: "300px"},0);				// Moves the outgoing info below the entire news box in 0 milliseconds
								
				}
					
					
					
					
					
					$("#feature"+frame).animate({top: "0px"},0);						// Moves the incoming image into place in 0 milliseconds
					$("#featureinfo"+frame).animate({top: "125px"},0);					// Moves the incoming info into place in 0 milliseconds, should be the same top location as you have set in css (if changed)
					$("#feature" + frame).fadeTo(800 , 1);								// Fades in incoming image to 100% (1) opacity in 1 second (1000 milliseconds)
					$("#featureinfo" + frame).fadeTo(800 , 1);							// Fades in incoming info to 100% (1) opacity in 1 second (1000 milliseconds)
					$("#button"+frame).css("background-color", "#70acca");				// Changes Incoming Button color to show current caption
					
					
					
					
					
					
					
					
						
					
					
						
					laststate = frame;
					
					
					if(frame==7){														// Adjust the == value to the total amount of captions being used (if changing)
						
						laststate=frame;
						frame=0;
					}
					
					handle = setTimeout(function(){
					
						changestate(frame+1);
					},4600);															// Adjust this value to change the time in which caption is visible ( time is in milliseconds)
					
					
						
					}
	
				
				$(document).ready(function(){
				
					changestate(1);
				
				
					
				
				
				});