// create an array of images to use, in the global scope of the window,
// you can add as many images to the array as you like...
var myImgs = [
	 "http://www.thesuninneskbank.co.uk/comingsoon/gallery/home01.jpg", // bagpiper & clapping geezer
	 "http://www.thesuninneskbank.co.uk/comingsoon/gallery/home02.jpg", // outside of the inn
	 "http://www.thesuninneskbank.co.uk/comingsoon/gallery/home03.jpg", // beer garden
	 "http://www.thesuninneskbank.co.uk/comingsoon/gallery/home04.jpg" // dining room
	]

// create a variable to hold the current img number
var currentImage = 0;

// create a variable to hold the total no. of images
var totalImages = myImgs.length - 1;

// set up a variable to turn debug messages on or off (firebug mainly)
var debug = true

// wrapper for the log messages
function log() { 
	    
	// if we're not debugging
	if (!debug) {
		 return; // stop and do nothing
	}
	
	// otherwise
	try {
		// for firefox
		window.loadFirebugConsole();
		console.log.apply(this, arguments);
	}
	catch (error) {
		// everything else
		// here you could write custom stuff to output messages into a div or whatever.
	}

}

function showPrev ( show /* this is a Boolean */ ) {
	
	// hide the previous button 
	if ( show ) {
		prev.setStyles({
			visibility: 'visible'
		})
	} else {
		prev.setStyles({
			visibility: 'hidden'
		})
	}

}

function showNext ( show /* this is a Boolean */ ) {
	
	// hide the next button 
	if ( show ) {
		next.setStyles({
			visibility: 'visible'
		})
	} else {
		next.setStyles({
			visibility: 'hidden'
		})
	}

}

function loadCurrentImageIntoBackground() {

	theContent.setStyles({
		background: '#000 url(' + myImgs[currentImage] + ') no-repeat'
	});
	
}

function createHandlesToHtmlElements() {
	
	// create some handles so we can just refer to these from now on. These are in the global scope of the 'window' object.
	// these handles are become mooTools objects to which we can add events, change styles etc, using the library
	// also, if you ever change the ID's to anything else, you just do it here... once. :-)
	
	window["theContent"] = $('content');
	window["next"] = $('nextimagebutton');
	window["prev"] = $('previousimagebutton');
	window["show"] = $('horizontal_status');
		
}

function setUpSlider() {
	
	// create the horizontal slide in the  global scope of the 'window' object.
	window["myHorizontalSlide"] = new Fx.Slide('horizontal_slide', {mode: 'horizontal'});
	
	// When Horizontal Slide ends its transition, we check for its status (this is a "callback")
	myHorizontalSlide.addEvent('complete', function() {
		if ( ! myHorizontalSlide.open ) { // if it's not open
			show.set('html', 'Show Text');
		} else { 
			show.set('html', 'Show Image');
		}
	});

}

// using mooTools, lets set up some click events for the show, next and prev links
function setUpClickEvents() {
	
	//SHOW LINK
	show.addEvent('click', function(e){
	
		// this stops the normal anchor event from firing (jumping to "#")
		e.stop();
		
		// move the slide
		myHorizontalSlide.toggle();
		
	});
	
	//NEXT LINK
	next.addEvent('click', function(e){
		
		// this stops the normal anchor event from firing (jumping to "#")
		e.stop();
		
		// first, increment the count
		currentImage++
		
		log ( currentImage );
		
		// check if the current image is greater than or equal to the total number of images we have
		if ( currentImage >= totalImages ) {
			
			// it is, so lets force the count to be the total;
			currentImage = totalImages;
			
			// show the previous button
			showPrev(true);
			
			// hide the next button so they can't go any further
			showNext(false);
			
		} else {
		
			//  ensure we show the the prev button
			showPrev(true);

		}
		
		// now load the next image into the background
		loadCurrentImageIntoBackground()
		
	});
	
	//PREV LINK
	prev.addEvent('click', function(e){
		
		// this stops the normal anchor event from firing (jumping to "#")
		e.stop();
		
		// first, decrement the count
		currentImage--
		
		log ( currentImage );
		
		// check if the current image number is less than or equal zero (the start of our array)
		if ( currentImage <= 0 ) {
			
			// it is, so lets reset the count
			currentImage = 0;
			
			// hide the previous button, so we can't go back any further
			showPrev(false);
			
			// show the next button, so we can only go forward
			showNext(true);

		} else {
			
			// ensure we show the next button
			showNext(true)
			
		}
		
		loadCurrentImageIntoBackground()

	});
	
}


// Create function that sets up all the events and everything we'll need
function prepareUI(){
	
	// here you might need to do image preloading... I've left this as an exercise for you. :-)

		
	// create some basic handles
	createHandlesToHtmlElements()
	
	// set up the horizontal slider
	setUpSlider();

	// load the current image into the directly into the background of the content (should be currentImage = 0)
	loadCurrentImageIntoBackground()
	
	// hide the prev link
	showPrev(false);
	
	// set up the events for everything we're going to click
	setUpClickEvents();
	
	// simple debugging
	log ( currentImage );
	
}

// Adding the "prepareUI" to the window ensures that we have all the HTML in place ready to hook events to and use. 
// much safer than "window.onload" -- see http://demos111.mootools.net/DomReadyVS.Load
window.addEvent('domready', prepareUI);