// JavaScript Document

$(document).ready(function(){
	
	var linksArray = [];
	var currentUpSlide;
	var currentUpNav;
	
	//	Add close slide button
	$('#closeButton').bind('mouseover', function(){
		closeAll();
	});
	
	//	Assign LI containers with ID
	$('#navButtons').children('li').each(function (i) {			
		$(this).attr('id','li' + i);
		//	Apply li button to linksArray
		linksArray.push([$(this)]);
		//	Bind rollover effect
		$(this).bind('mouseover', function(){
			onMouseOver($(this));
		});
	});
	
	//	Assign copy containers with ID
	$('#content').children('div').each(function (i) {			
		//$(this).attr('id','article' + i);
		//	Apply copy container to linksArray
		linksArray[i].push($(this));
	});
	
	function onMouseOver(target)
	{
		for(var i = 0; i < linksArray.length; i++){
			//	If the target button rolled over has an ID equal to the current linksArray[li button id]
			if(target.attr('id') == linksArray[i][0].attr('id'))
			{
				//	If the currentUpSlide var doesn't = null
				if(currentUpSlide != null)
				{
					//	Animate the currentUpSlide to hide
					currentUpSlide.animate({'margin-top' : '300px'}, 200, function(){  });
					
					//	Change the slides li button back to white
					currentUpNav.css("color","#FFF");
					//	Bind the eventListener back onto the li button
					currentUpNav.bind('mouseover', function(){
						onMouseOver($(this));
					});
				}
				
				
				linksArray[i][1].clearQueue();
				//	Animate the matched slide to show
				linksArray[i][1].animate({'margin-top' : 0}, 500, function(){ /*console.log('done');*/ });
				
				//	Change the slides li button to black to show selection
				linksArray[i][0].css("color","#333");
				//	Unbind the eventListener to stop a li button double hit
				linksArray[i][0].unbind('mouseover');
				
				
				//	Update the currectUpSlide to the current slide shown
				currentUpSlide = linksArray[i][1];
				//	Update the currentUpNav to the current slide's nav button
				currentUpNav = linksArray[i][0];
			}
		}
	}
	
	function closeAll()
	{
		//	If the currentUpSlide var doesn't = null
		if(currentUpSlide != null)
		{
			//	Animate the currentUpSlide to hide
			currentUpSlide.animate({'margin-top' : '300px'}, 100, function(){ currentUpSlide.clearQueue(); });
			
			//	Change the slides nav button back to white
			currentUpNav.css("color","#FFF");
			//	Bind the eventListener back onto the nav
			currentUpNav.bind('mouseover', function(){
				onMouseOver($(this));
			});
		}
	}
});