var expander = new Class({

	//implements
	Implements: [Options],	
	
	//variables setup
	numNav: new Array(),		    //will store number nav elements (if used)
	timer: null,					//periodical function variable holder
	isSliding: 0,					//flag for animation/click prevention
	direction: 1,					//flag for direction (forward/reverse)
	
	//options
	options: {
	isPaused: false,				//flag for paused state
	transitionTime: 1100, 		    //Transition time (1 second = 1000)
	transitionType: 'quad:inOut',	//Transition type
	sliderContent: null,			//element into which top content is injected
	sliderContent2: null,			//element into which bottom content is injected
	backer: null,					//backer reference
	wrapperTop: null,				//wrapper for top dynamic content
	wrapperBottom: null				//wrapper for bottom dynmaic content
	},
	
	//initialization
	initialize: function(options) {
		var self = this;
		
		var btnArray = new Array('.numbtn0','.numbtn1','.numbtn2','.numbtn3');
		////var menuArray = new Array();
		////menuArray.push($('bio'),$('state'),$('race'),$('spec'),$('instruct'),$('saftey'),$('maintain'),$('distance'),$('slim'));
		//set options
		this.setOptions(options);
		
		//initialize top click functions
		/*
		$$(btnArray).each(function(el, i){
			el.addEvents({
				'click': function() {
					self.expandIt(true,i,null,520);
				}
			});			   
		});
		*/
		
		
		//initialize top click functions
		$$('.numbtn0').addEvents({'click': function() {self.expandIt(true,0,null,502)}});
		$$('.numbtn1').addEvents({'click': function() {self.expandIt(true,2,null,1007)}});
		$$('.numbtn2').addEvents({'click': function() {self.expandIt(true,1,null,490)}});
		$$('.numbtn3').addEvents({'click': function() {self.expandIt(true,3,null,0)}});
		
		//$$('.numbtn2_0').addEvents({'click': function() {self.expandIt(true,2,0)}});
		//$$('.numbtn2_1').addEvents({'click': function() {self.expandIt(true,2,1)}});
		//$$('.numbtn2_2').addEvents({'click': function() {self.expandIt(true,2,2)}});
		
		//initialize bottom click functions
		/*
		$('galleryBtn').addEvents({'click': function() {self.expandIt(false,0,0,520)}});
		$('specsBtn').addEvents({'click': function() {self.expandIt(false,1,0,520)}});
		$('accBtn').addEvents({'click': function() {self.expandIt(false,2,0,520)}});		
		
		$('spec').addEvents({'click': function() {self.expandIt(false,1,0,520)}});
		$('instruct').addEvents({'click': function() {self.expandIt(false,1,1,520)}});
		$('saftey').addEvents({'click': function() {self.expandIt(false,1,2,520)}});
		$('maintain').addEvents({'click': function() {self.expandIt(false,1,3,520)}});
		$('distance').addEvents({'click': function() {self.expandIt(false,2,0,520)}});
		$('slim').addEvents({'click': function() {self.expandIt(false,2,1,520)}});
		*/
		/*menuArray.each(function(el, i){
			el.addEvents({
				'click': function() {
					self.menuHandler();
				}
			});
		});*/			
	},
	
	//startup method
	start: function() {
		var self = this;		
	},
	
	expandIt: function(isTop,m,n,h) {		
		var self = this;
		var h = h;
		//var wrapper = self.options.sliderContent.getElemen;
		
		if(isTop == true){//animate top
			//run the menuhandler (to reset the selected menu)
			self.menuHandler(null,null);
			//set up our animation stylings
			var animateIt = new Fx.Morph(self.options.sliderContent, {
				 duration: self.options.transitionTime, 
				 transition: self.options.transitionType,
				 link: 'ignore'
			});
			/*
			var shutIt = new Fx.Morph(self.options.sliderContent2, {
				duration: self.options.transitionTime,
				transition: self.options.transitionType,
				link: 'ignore'
			});
			*/
			var fadeIt = new Fx.Morph(self.options.wrapperTop, {
				duration: self.options.transitionTime / 2,
				transition: self.options.transitionType,
				link: 'ignore',
				onComplete: function() {
					self.getContent(isTop,m,n); //get new content only once old content is faded out.
				}
			});
			//animate in top content
			animateIt.start({'height' : [h]});
			//animate out bottom content
			//shutIt.start({'height' : [0]});
			//fade out content over 550ms
			fadeIt.start({'opacity' : [1,0]});
			
		} else {//animate bottom
			/*
			//run the menuhandler
			self.menuHandler(m,n);
			//set up our animation stylings
			var animateIt = new Fx.Morph(self.options.sliderContent2, {
				 duration: self.options.transitionTime, 
				 transition: self.options.transitionType,
				 link: 'ignore'
			});
			var shutIt = new Fx.Morph(self.options.sliderContent, {
				duration: self.options.transitionTime,
				transition: self.options.transitionType,
				link: 'ignore',
				onStart: function() {
					self.options.wrapperTop.innerHTML = "";	
				}
			});
			var fadeIt = new Fx.Morph(self.options.wrapperBottom, {
				duration: self.options.transitionTime /2,
				transition: self.options.transitionType,
				link: 'ignore',
				onComplete: function() {
					self.getContent(isTop,m,n); //get new content only once old content is faded out.
				}
			});			
			
			//animate in bottom content
			animateIt.start({'height' : [h]});
			//animate out top content
			(function() { shutIt.start({'height' : [0]}); }).delay(150);
			//fade out over 550 ms
			fadeIt.start({'opacity' : [1,0]});	
			*/
		}
		
		//animate backer
		var animateBacker = new Fx.Morph(self.options.backer, {
			duration: self.options.transitionTime,
			transition: self.options.transitionType,
			link: 'ignore'
		});
		
		//var myYPos = $('expandContent').getPosition();
		//var myHeight = $('expandContent').getStyle('height');
		//myHeight = parseInt(myHeight.replace(/\D/g, "")); //convert to number
		//alert(myYPos.y);
		//var newHeight = myHeight + myYPos.y - 20 - 80;
		var newHeight = h + 96;		
		
		animateBacker.start({'height' : [newHeight]});
		
	},
	
	
	getContent: function(isTop,m,n) {
		var self = this;
		if(isTop == true) { //get top frame content:
			xmlhttp = GetXmlHttpObject();
			if (xmlhttp == null)
			{
				alert ("Your browser is out of date. To continue using the internet, please visit www.mozilla.com/firefox/");
			}
			var url="getcontent.php";
			url = url+"?q="+0+"&m="+m+"&n="+n;
			url=url+"&sid="+Math.random();
			xmlhttp.onreadystatechange = function() {
				stateChangedTop(m,n);
			}
			
			xmlhttp.open("GET",url,true);
			xmlhttp.send(null);
		} else { //get bottom frame content
			/*
			xmlhttp = GetXmlHttpObject();
			if (xmlhttp == null)
			{
				alert ("Your browser is out of date. To continue using the internet, please visit www.mozilla.com/firefox/");
			}
			var url="getcontent.php";
			url = url+"?q="+1+"&m="+m+"&n="+n;
			url=url+"&sid="+Math.random();
			xmlhttp.onreadystatechange = stateChangedBottom;
			xmlhttp.open("GET",url,true);
			xmlhttp.send(null);	
			*/
		}		
		
		//ajax uitility functions
		function stateChangedTop(m,n)
		{
			if (xmlhttp.readyState == 4){
				
				self.options.wrapperTop.innerHTML = xmlhttp.responseText;
				var fadeIn = new Fx.Morph(self.options.wrapperTop, {
					duration: self.options.transitionTime / 2,
					transition: self.options.transitionType,
					link: 'ignore'
				});
				fadeIn.start({'opacity': [0,1]});
				if(m == 2 && n == null || m == 2 && n == 1 || m == 2 && n == 2) {
					self.addNewClicks();
				}
				/* adds videos to whatmakesithot
				if(m == 2 & n ==1) {
					var flashvars = {};
					var params = {};
					var attributes = {};
					swfobject.embedSWF("test.swf", "video0_2_1a", "294", "168", "9.0.0", false, flashvars, params, attributes);
					swfobject.embedSWF("test.swf", "video0_2_1b", "294", "168", "9.0.0", false, flashvars, params, attributes);
					swfobject.embedSWF("test.swf", "video0_2_1c", "294", "168", "9.0.0", false, flashvars, params, attributes);
				}
				if(m == 2 && n == 2) {
					var flashvars = {};
					var params = {};
					var attributes = {};
					swfobject.embedSWF("test.swf", "video0_2_2a", "294", "168", "9.0.0", false, flashvars, params, attributes);
					swfobject.embedSWF("test.swf", "video0_2_2b", "294", "168", "9.0.0", false, flashvars, params, attributes);
					swfobject.embedSWF("test.swf", "video0_2_2c", "294", "168", "9.0.0", false, flashvars, params, attributes);
				}
				*/
				if(m == 0) {
					loadSB();
				}
			}
		}
		
		function stateChangedBottom()
		{
			if (xmlhttp.readyState == 4){
				
				self.options.wrapperBottom.innerHTML = xmlhttp.responseText; 
				var fadeIn = new Fx.Morph(self.options.wrapperBottom, {
					duration: self.options.transitionTime / 2,
					transition: self.options.transitionType,
					link: 'ignore'
				});
				fadeIn.start({'opacity': [0,1]});
			}
		}
		
		
		function GetXmlHttpObject()
		{
			if (window.XMLHttpRequest)
			{
				// code for IE7+, Firefox, Chrome, Opera, Safari
				return new XMLHttpRequest();
			}
			if (window.ActiveXObject)
			{
				// code for IE6, IE5
				return new ActiveXObject("Microsoft.XMLHTTP");
			}	
			return null;
		}
	},

	menuHandler: function(m,n) {
		/*
		var self = this;
		//var lastClicked = new Array();
		//self.getContent(false,m,n); //call ajax contentgetter		

		//lastClicked[0] = (m);
		//lastClicked[1] = (n);
	
		//define shortcut to ids
		var	galleryBtn = $('galleryBtn');
		var	specsBtn = $('specsBtn');
		var	accBtn = $('accBtn');
		
		var tri0 = $$('.triangle0');
		var tri1 = $$('.triangle1');
		var tri2 = $$('.triangle2');
		
		//var idArray = new Array(whatBtn, specsBtn, accBtn);
		
		//reset all menu items to normal state
		galleryBtn.style.backgroundImage = 'url(images/galleryBtn.png)';
		specsBtn.style.backgroundImage = 'url(images/specsBtn.png)';
		accBtn.style.backgroundImage = 'url(images/accBtn.png)';

		tri0.addClass('triHide');
		tri1.addClass('triHide');
		tri2.addClass('triHide');
		
		//change menu to hover state and show triangle
		switch(m) {		
			case 0:
				galleryBtn.style.backgroundImage = 'url(images/galleryBtnH.png)';
				tri2.removeClass('triHide');
				break;
			case 1:
				specsBtn.style.backgroundImage = 'url(images/specsBtnH.png)';
				tri0.removeClass('triHide');
				break;
			case 2:
				accBtn.style.backgroundImage = 'url(images/accBtnH.png)';
				tri1.removeClass('triHide');
				break;
			default:
		};
		*/
		
	},
	
	addNewClicks: function() {
		var self = this;
		
		$('bio').addEvents({'click': function() {self.expandIt(true,2,null,1007)}});
		$('state').addEvents({'click': function() {self.expandIt(true,2,1,442)}});
		$('race').addEvents({'click': function() {self.expandIt(true,2,2,732)}});
	}
});