window.addEvent('domready', function() {
	if($('slider')) {
		//slider variables for making things easier below
		var itemsHolder = $('slider');
		var myItems = $$(itemsHolder.getElements('.item'));
		
		//controls for slider
		var theControls = $('sliderMenu');
		var numNavHolder = $(theControls.getElement('ul'));
		var thePlayBtn = $(theControls.getElement('.play_btn'));
		var thePrevBtn = $(theControls.getElement('.prev_btn'));
		var theNextBtn = $(theControls.getElement('.next_btn'));
		
		
		//create instance of the slider, and start it up		
		var mySlider = new SL_Slider({
			slideTimer: 8000,
			orientation: 'horizontal',
			fade: true,                    
			isPaused: false,
			container: itemsHolder,
			items: myItems,
			numNavActive: true,
			numNavHolder: numNavHolder,
			playBtn: thePlayBtn,
			prevBtn: thePrevBtn,
			nextBtn: theNextBtn
		});
		mySlider.start();
	}
	//if there is a product module on the page, initiate the class.
	if($('productmodule')) {
		new pmHandler({});
	}
	if($('supportmodule')) {
		new spHandler({});
	}
		
});

/////////////////////////////////////////////
// This class controls the product module. //
/////////////////////////////////////////////

var pmHandler = new Class({
	initialize: function() {
		var self = this;
		//initialise the click events for the left hand menu
		$('pm_leftcol').getFirst().getChildren().each(function(el, i){ el.addEvents({ 'click': function() { self.clickHandler(i);	} }); });
	},
	
	////////////////////////////////////////////////////////////////
	// this is called when the left-hand menu buttons are clicked //
	////////////////////////////////////////////////////////////////
	clickHandler: function(num) {
		//assign a menu array and content array
		var menuArray = new Array(); //this array holds the left column buttons
		var contentArray = new Array(); //this array holds the content blocks
		
		//push the left column buttons into the array
		$('pm_leftcol').getFirst().getChildren().getChildren().each(function(el, i){ menuArray.push(el); });
		//push the content blocks into the array
		contentArray.push($('pm_push'),$('pm_sleep'),$('pm_feed'),$('pm_carry'),$('pm_drive'), $('pm_adapt'));
		
		//cycle through each button and remove the active class if it exists (makes the button red again)
		menuArray.each(function(el, i){ el.removeClass('active'); });
		//add the active class to the clicked button (to make the button white). This is identified through the num variable passed to the function.
		menuArray[num].addClass('active');
		
		//cycle though each content block and remove the active class if it exists (hides the content)
		contentArray.each(function(el, i){ el.removeClass('active'); });
		//add the active class to the appropriate content block (shows the content)
		contentArray[num].addClass('active');
		
		//change size of product module depending on number of rows of products (0 & 4 at this stage corresponging to 'push' and 'drive' categories).
		//this could be made dynamic (count how many products are in the list and apply class accordingly)
		var pm = $('productmodule');
		if(num == 0 || num == 4) {
			//make tall			
			pm.removeClass('short');
			pm.addClass('tall');
		} else {
			//make short
			pm.removeClass('tall');
			pm.addClass('short');
		}
	
	}
	
});

var spHandler = new Class({
	initialize: function() {
		var self = this;
		//initialise the click events for the left hand menu
		$('sp_leftcol').getFirst().getChildren().each(function(el, i){ el.addEvents({ 'click': function() { self.clickHandler(i);	} }); });
	},
	
	////////////////////////////////////////////////////////////////
	// this is called when the left-hand menu buttons are clicked //
	////////////////////////////////////////////////////////////////
	clickHandler: function(num) {
		//assign a menu array and content array
		var menuArray = new Array(); //this array holds the left column buttons
		var contentArray = new Array(); //this array holds the content blocks
		
		//push the left column buttons into the array
		$('sp_leftcol').getFirst().getChildren().getChildren().each(function(el, i){ menuArray.push(el); });
		//push the content blocks into the array
		contentArray.push($('sp_updates'),$('sp_care'),$('sp_instructions'),$('sp_registration'),$('sp_contact'));
		
		//cycle through each button and remove the active class if it exists (makes the button red again)
		menuArray.each(function(el, i){ el.removeClass('active'); });
		//add the active class to the clicked button (to make the button white). This is identified through the num variable passed to the function.
		menuArray[num].addClass('active');
		
		//cycle though each content block and remove the active class if it exists (hides the content)
		contentArray.each(function(el, i){ el.removeClass('active'); });
		//add the active class to the appropriate content block (shows the content)
		contentArray[num].addClass('active');
		
		//change size of product module depending on number of rows of products (0 & 4 at this stage corresponging to 'push' and 'drive' categories).
		//this could be made dynamic (count how many products are in the list and apply class accordingly)
		var sp = $('supportmodule');
		if(num == 0) {
			//make updates			
			sp.removeClass('care');
			sp.removeClass('instructions');
			sp.removeClass('registration');
			sp.removeClass('contact');
			sp.addClass('updates');
		} 
		if(num == 1) {
			//make care
			sp.removeClass('updates');
			sp.removeClass('instructions');
			sp.removeClass('registration');
			sp.removeClass('contact');
			sp.addClass('care');
		}
		if(num == 2) {
			//make care
			sp.removeClass('updates');
			sp.removeClass('care');
			sp.removeClass('registration');
			sp.removeClass('contact')
			sp.addClass('instructions');
		}
		if(num == 3) {
			//make care
			sp.removeClass('updates');
			sp.removeClass('instructions');
			sp.removeClass('care');
			sp.removeClass('contact')
			sp.addClass('registration');
		}
		if(num == 4) {
			//make care
			sp.removeClass('updates');
			sp.removeClass('instructions');
			sp.removeClass('registration');
			sp.removeClass('care')
			sp.addClass('contact');
		}
	
	}
	
});