window.addEvent('domready', function(){
	
	//just load initial height...
	var tempheight = $('step-one').getStyle('height');
	$('step-by-step-content-border').setStyle('height',tempheight);
	$('step-by-step-content-border').setStyle('overflow','hidden');
	
	$('step-by-step-content-border').getElements('a').addEvent('click', function(e)
	{
		e = new Event(e).stop();
		
		var previousActive2 = $('step-by-step-content-border').getElement('a.active');
		var activeText = this.name;
		var relContainers = $('step-by-step-content-border').getElements('.relative-container');
		
		if(previousActive2 != this)
		{	
			previousActive2.removeClass('active');
			this.addClass('active');
			
			$('step-by-step-content-border').setStyle('height','100%');
	
			for(var i=0;i<relContainers.length;i++)
			{
				relContainers[i].addClass('hide');
				
				if(relContainers[i].id == activeText)
				{
					relContainers[i].removeClass('hide');
				}
				
			}									
			
		}	
	
	});
	
	
	$('step-by-step-top').getElements('a').addEvent('click', function(e)
	{
		e = new Event(e).stop();
		
		slideStepByStep(this);
		
	});
	
	$('step-by-step-content-border').getElements('a.nextlink').addEvent('click', function(e)
	{
		e = new Event(e).stop();

		var theLiWeWant = $('step-by-step-top').getElement('a[name='+this.name+']');
				
		slideStepByStep(theLiWeWant);
		
	});
	
	//function for sliding the step by step content
	function slideStepByStep(object)
	{
		var previousActive = $('step-by-step-top').getElement('a.active');
		
		if(previousActive != object)
		{	
			var offset = (parseInt(object.name)-1) * 510;

			var thisValue = (parseInt(object.name));
			var previousValue = (parseInt(previousActive.name))
			
			if(thisValue > previousValue)
			{
				var slideDuration = ((thisValue - previousValue) * 750);
			}
			else
			{
				var slideDuration = ((previousValue - thisValue) * 750);
			}
				
			var myFx = new Fx.Scroll('step-by-step-content-container', {
			offset: {
					'x': 0,
					'y': 0
				},
			onComplete: function()
			{
				if(object.name == '1')
				{
					var tempheight = $('step-one').getStyle('height');
					$('step-by-step-content-border').setStyle('height',tempheight);
				}
				if(object.name == '2')
				{
					var tempheight = $('step-two').getStyle('height');
					$('step-by-step-content-border').setStyle('height',tempheight);
				}
				if(object.name == '3')
				{
					var tempheight = $('step-three').getStyle('height');
					$('step-by-step-content-border').setStyle('height',tempheight);
				}
				if(object.name == '4')
				{
					var tempheight = $('step-four').getStyle('height');
					$('step-by-step-content-border').setStyle('height',tempheight);
				}
				if(object.name == '5')
				{
					var tempheight = $('step-five').getStyle('height');
					$('step-by-step-content-border').setStyle('height',tempheight);
				}
				if(object.name == '6')
				{
					var tempheight = $('step-six').getStyle('height');
					$('step-by-step-content-border').setStyle('height',tempheight);
				}
				
				var myFx = new Fx.Scroll(window).toElement('step-by-step-top');
			},
			duration: slideDuration
			}).start(offset);
			
		
			object.addClass('active');
			
			/*if(object.name == 1)
			{
				$('step-by-step-content-container').getElement('a[name='+activeText+']').removeClass('active');
				$('step-one').getElement('a[name=1]').addClass('active');
				var activeText = '1';
			}
			if(object.name == 2)
			{
				$('step-by-step-content-container').getElement('a[name='+activeText+']').removeClass('active');
				$('step-two').getElement('a[name=6]').addClass('active');	
				var activeText = '6';
			}
			if(object.name == 3)
			{
				$('step-by-step-content-container').getElement('a[name='+activeText+']').removeClass('active');
				$('step-three').getElement('a[name=11]').addClass('active');	
				var activeText = '11';
			}
			if(object.name == 4)
			{
				$('step-by-step-content-container').getElement('a[name='+activeText+']').removeClass('active');
				$('step-four').getElement('a[name=16]').addClass('active');	
				var activeText = '16';
			}
			if(object.name == 5)
			{
				$('step-by-step-content-container').getElement('a[name='+activeText+']').removeClass('active');
				$('step-five').getElement('a[name=21]').addClass('active');	
				var activeText = '21';
			}
			if(object.name == 6)
			{
				$('step-by-step-content-container').getElement('a[name='+activeText+']').removeClass('active');
				$('step-six').getElement('a[name=26]').addClass('active');
				var activeText = '26';
			}*/
			
			if(object.name != '1')
			{
				
				previousActive.getParent().getNext().getElement('img').src= includesPath + "/images/employers/step-middle-off.jpg";
				previousActive.getParent().getPrevious().getElement('img').src= includesPath + "/images/employers/step-middle-off.jpg";
				object.getParent().getNext().getElement('img').src= includesPath + "/images/employers/step-middle-on.jpg";
				object.getParent().getPrevious().getElement('img').src= includesPath + "/images/employers/step-fishtails-on.jpg"
				$('step-by-step-top').getElement('a[name=1]').getParent().getPrevious().getElement('img').src= includesPath + "/images/employers/step-start-off.jpg";
				$('step-by-step-top').getElement('a[name=6]').getParent().getNext().getElement('img').src= includesPath + "/images/employers/step-six-off.jpg";
			}
			
			if(object.name == '1')
			{
				previousActive.getParent().getNext().getElement('img').src= includesPath + "/images/employers/step-middle-off.jpg";
				previousActive.getParent().getPrevious().getElement('img').src= includesPath + "/images/employers/step-middle-off.jpg";
				object.getParent().getNext().getElement('img').src= includesPath + "/images/employers/step-middle-on.jpg";
				object.getParent().getPrevious().getElement('img').src= includesPath + "/images/employers/step-start-on.jpg"
				$('step-by-step-top').getElement('a[name=6]').getParent().getNext().getElement('img').src= includesPath + "/images/employers/step-six-off.jpg";
			}
			
			if(object.name == '6')
			{
				previousActive.getParent().getNext().getElement('img').src= includesPath + "/images/employers/step-middle-off.jpg";
				previousActive.getParent().getPrevious().getElement('img').src= includesPath + "/images/employers/step-middle-off.jpg";
				object.getParent().getNext().getElement('img').src= includesPath + "/images/employers/step-six-on.jpg";
				object.getParent().getPrevious().getElement('img').src= includesPath + "/images/employers/step-fishtails-on.jpg"
				$('step-by-step-top').getElement('a[name=1]').getParent().getPrevious().getElement('img').src= includesPath + "/images/employers/step-start-off.jpg";
				
			}
			
			previousActive.removeClass('active');
		}
	}
});