// Using the MooTools JS framework, you gain access to 'domready', this means that the whole page of 
// XHTML and CSS has been built up and all elements are accessible; this is superior to using the
// 'on load' event as that fires immediately when you visit a page, causing elements to not be accessible
// in JavaScript yet as they don't "exist" yet

// In closing: anything added inside this domready function will be fired on pageload, after all elements become accessible
window.addEvent('domready', function() {
	// In MooTools, elements are accessed using $('element_id') which is short-hand for document.getElementById('element_id')
	// Also, seeing as JS has no native "getElementByClass" equivalent, MooTools supplies the $$('.class_name') function; using
	// this will return you an array of all the elements on the page which have that class (more complex things are also possible)

	// Check if this page has a menu DIV, as if it doesn't and we try to access it, an error will occur
	if ($('mainnav')) {
		// Create the JavaScript menu
		var vocmenu = new MenuMatic({
			id: 'mainnav', 
			opacity: 100
		});
	}

	// Check if the motorbike slideshow DIV is on the page before accessing it
	if ($('motorbikeSlideshow')) {
		// Create the slideshow
		var mbikeNSlide = new noobSlide({
			box: $('motorbikeSlideshow'),
			items: [0, 1, 2, 3, 4],		/* the number of images in the slideshow */
			size: 275,		/* the width of the largest image + border + padding */
			interval: 4000,
			startItem: 0,
			fxOptions: {
				duration: 1000,
				transition: Fx.Transitions.Expo.easeOut,
				wait: true
			},
			autoPlay: true
		});
	}
});