window.addEvent('domready', function() {
	var status = {
		'true': 'open',
		'false': 'close'
	};
	var ff2 = false;
	if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Firefox/x.x or Firefox x.x (ignoring remaining digits);
 		var ffversion=new Number(RegExp.$1) // capture x.x portion and store as a number
		if (ffversion>=3) {
			}
		else if (ffversion>=2) {
	  		ff2 = true;
		}
		else if (ffversion>=1) {
		
		}
	}
	
	//this function is designed to gray images out the images of the menu
	//takes one argument - a string
	function grayImage(currentPage) {
		if(currentPage == "manu") {
			document.getElementById('size').innerHTML = "<img src=\"images/slider/step1-size-soft.jpg\" width=\"225\" height=\"207\" />";
			document.getElementById('shape').innerHTML = "<img src=\"images/slider/step2-shape-soft.jpg\" width=\"225\" height=\"207\" />";
			document.getElementById('manu').innerHTML = "<img src=\"images/slider/step3-manuf.jpg\" width=\"225\" height=\"207\" />";
		}
		if(currentPage == "shape") {
			document.getElementById('size').innerHTML = "<img src=\"images/slider/step1-size-soft.jpg\" width=\"225\" height=\"207\" />";
			document.getElementById('shape').innerHTML = "<img src=\"images/slider/step2-shape.jpg\" width=\"225\" height=\"207\" />";
			document.getElementById('manu').innerHTML = "<img src=\"images/slider/step3-manuf-soft.jpg\" width=\"225\" height=\"207\" />";
		}
		if(currentPage == "size") {
			document.getElementById('size').innerHTML = "<img src=\"images/slider/step1-size.jpg\" width=\"225\" height=\"207\" />";
			document.getElementById('shape').innerHTML = "<img src=\"images/slider/step2-shape-soft.jpg\" width=\"225\" height=\"207\" />";
			document.getElementById('manu').innerHTML = "<img src=\"images/slider/step3-manuf-soft.jpg\" width=\"225\" height=\"207\" />";
		}
		if(currentPage == "none") {
			document.getElementById('size').innerHTML = "<img src=\"images/slider/step1-size.jpg\" width=\"225\" height=\"207\" />";
			document.getElementById('shape').innerHTML = "<img src=\"images/slider/step2-shape.jpg\" width=\"225\" height=\"207\" />";
			document.getElementById('manu').innerHTML = "<img src=\"images/slider/step3-manuf.jpg\" width=\"225\" height=\"207\" />";
		}
		
		
	}
	
	//this is var is used to determine which tab is currently selected
	var currentTab = "none";
	
	//create a fx item and assign it to a div by its ID example 'manuDiv'
	//this div will slide
	//if browser is Firefox version 2
	if(!ff2) {
		var slideDiv = new Fx.Slide('content');
		//hide the div so that it doesn't show up
		slideDiv.hide();
	}
	
	//Add an event so that when the page element with the id of 'manuButton' is clicked
	//the event is executed
	$('manu').addEvent('click', function(e){
		e.stop();
		
		$('content').className = 'display';
		//if the current tab is not manufacturer then swap content out and slide in
		if(currentTab != "manu") {
			if(!ff2) {		
				slideDiv.cancel();
			}
			$('shapeDiv').className = 'displayNone';
			$('sizeDiv').className = 'displayNone';
			$('manuDiv').className = 'display';
			currentTab = "manu";
			if(!ff2) {
				slideDiv.slideIn();
			}
			grayImage("manu");
		}
		//if the current tab is the manufacturer then slide the tab out.
		else if(currentTab == "manu") {
			if(!ff2) {		
				slideDiv.cancel();
			}
			else {
				$('manuDiv').className = 'displayNone';
			}
			currentTab = "noTab";
			if(!ff2) {
				slideDiv.toggle();
			}
			grayImage("none");
		}
	});
	
	//Add an event so that when the page element with the id of 'shapeButton' is clicked
	//the event is executed
	$('shape').addEvent('click', function(e){
		e.stop();
		
		$('content').className = 'display';
		//if the current tab is not manufacturer then swap content out and slide in
		if(currentTab != "shape") {
			if(!ff2) {		
				slideDiv.cancel();
			}
			//$('content').innerHTML = $('shapeDiv').innerHTML;
			$('shapeDiv').className = 'display';
			$('sizeDiv').className = 'displayNone';
			$('manuDiv').className = 'displayNone';
			currentTab = "shape";
			if(!ff2) {
				slideDiv.slideIn();
			}
			grayImage("shape");
		}
		//if the current tab is the manufacturer then slide the tab out.
		else if(currentTab == "shape") {
			if(!ff2) {		
				slideDiv.cancel();
			}
			else {
				$('shapeDiv').className = 'displayNone';
			}
			currentTab = "noTab";
			if(!ff2) {
				slideDiv.toggle();
			}
			grayImage("none");
		}
	});
	
	//Add an event so that when the page element with the id of 'sizeButton' is clicked
	//the event is executed
	$('size').addEvent('click', function(e){
		e.stop();
		
		$('content').className = 'display';
		if(currentTab != "size") {
			if(!ff2) {		
				slideDiv.cancel();
			}
			$('sizeDiv').className = 'display';
			$('shapeDiv').className = 'displayNone';
			$('manuDiv').className = 'displayNone';
			currentTab = "size";
			if(!ff2) {
				slideDiv.slideIn();
			}
			grayImage("size");
		}
		else if(currentTab == "size") {
			if(!ff2) {		
				slideDiv.cancel();
			}
			else {
				$('sizeDiv').className = 'displayNone';
			}
			currentTab = "noTab";
			if(!ff2) {
				slideDiv.toggle();
			}
			grayImage("none");
		}
	});
	
});