// Create an array of images that you'd like to use

// Set an interval that increments the index and sets the new image
// Note: The fadeIn speed set above will be inherited
//setInterval(function() {
//	index = (index >= images.length - 1) ? 0 : index + 1;
//	$.backstretch(images[index]);
//}, 8000);


var images = [
	"graphics/test.jpg",
	"graphics/test2.jpg",
	"graphics/test4.jpg",
	"graphics/test3.jpg",
	"graphics/test1.jpg"
];
// The index variable will keep track of which image is currently showing
var index = 0;

// Call backstretch for the first time,
// In this case, I'm settings speed of 500ms for a fadeIn effect between images.

$.backstretch(images[index], {speed: 1500});


 // Set an interval that increments the index and sets the new image
        // Note: The fadeIn speed set above will be inherited
      //  setInterval(function() {
      //      index = (index >= images.length - 1) ? 0 : index + 1;
      //      $.backstretch(images[index]);
      //  }, 5000);


function show(page,image) {

//var pages = document.getElementsByClassName('main');
//	for (var i = 0; i < pages.length; i++)
//	{
//		pages[i].style.display = 'none';
	
	//}
	document.getElementById('home').style.display = 'none';
	document.getElementById('about').style.display = 'none';
	document.getElementById('bands').style.display = 'none';
	document.getElementById('lessons').style.display = 'none';
	document.getElementById('contact').style.display = 'none';


	if(page != 'home')
	{
		document.getElementById(''+page+'').style.display = 'block';
		
	}
	
	$.backstretch(images[image], {speed: 1000});
}