// JavaScript Document

//add round corner elements to sent element
$.fn.roundMe = function()
{
	var $contentStorage;
	
	$(this).each(function()
	{
		//eliminate some css style
		$(this).css({
			border: 'none',
			backgroundColor: 'transparent',
			paddingTop: '0px'
		});
		
		$('.red').css({
			backgroundColor: 'transparent',
			paddingBottom: '0px'
		});
		
		$contentStorage = $(this).html();
		
		$(this).html('<b class="rbt"><b class="rb1"></b><b class="rb2"></b><b class="rb3"></b><b class="rb4"></b></b><div class="rbContent clearfix">' + $contentStorage + '</div><b class="rbb"><b class="rb4"></b><b class="rb3"></b><b class="rb2"></b><b class="rb1"></b></b>');
	
	});
	
	return this; //returns the jQuery object being acted upon, making the fcn chainable
}

//add a sent classname on element hover event
$.fn.hoverMe = function(name2add)
{
	$(this).hover(function()
	{
		$(this).addClass(name2add); //'hover'
	},
	function()
  	{
    	$(this).removeClass(name2add); //'hover'
  	});
	
	return this;	
}

//fcn to check to see if all .steps are displayed or not
function stepDisplayCheck()
{
	var isStepDisplayed = true;
	var stepsDisplayed = new Array();
	
	$('.step').each(function(x)
	{
		stepsDisplayed[x] = $(this).css('display');
		
		if(stepsDisplayed[x] == 'none')
		{
			isStepDisplayed = false;
		}
	});
	
	return isStepDisplayed;
}

//fcn to check which is the next unclicked step in the series
function nextSection()
{
	var currentRel = new Array();
	var counter = 0;
	var $thisSection = null;
	
	//how to determine if an element currently has an event?
	$('.section').each(function(x)
	{
		currentRel[x] = $(this).attr('rel');
		
		if(currentRel[x] != 'clicked' && counter == 0)
		{
			++counter;
			$thisSection = $(this);
		}
	});
	
	return $thisSection; //return first .clickbox without rel of 'clicked'
}

$(document).ready(function()
{
   	$('.roundBox').roundMe(); //add rounded corners
	
	$('.h li:last-child').addClass('last'); //fix IE's inability to use :last-child
	$('.roundBox :last-child').addClass('last'); //fix IE's inability to use :last-child
	
	//hover() method for element highlights -------------------
	$('.section').hoverMe('hover'); //add hover class
	
	//change bg image for #twoA and #twoB
	$('#twoA').addClass('preClick');
	$('#twoB').addClass('preClick');
	
	
	// ----------- START BOTTOM BUTTONS ------------------ //
	
	//create bottom button row
	var $bottomButtons = $('<ul id="bottomButtons" class="linkList h"><li id="next">next</li><li id="reset">start over</li><li id="showAll" class="last">show all</li></ul>');
	
	$('#main').append($bottomButtons);
	
	//next button expands the next step in the series
	var $nextButton = $('#bottomButtons #next');
	
	$nextButton.click(function()
  	{
		var $next2click = nextSection(); //nextClickBox();
		
		//simulate click on relevant element instead
		$next2click.click();
	});
	
	$nextButton.hoverMe('hoverBttn'); //add hover
	
	//create element to insert after last step is shown ---------------
	var $resetButton = $('#bottomButtons #reset');
	
	$resetButton.css(
	{
		display: 'none'
	});
	
	$resetButton.hoverMe('hoverBttn'); //add hover
	
	//add click fcns to $resetButton
	$resetButton.click(function()
  	{
    	$('.section').not('#wrapper').css('display','none');
		
		$resetButton.animate({opacity: 'hide'}, 'slow');
		$showAllButton.animate({opacity: 'show'}, 'slow');
		$nextButton.animate({opacity: 'show'}, 'slow');
		
		$('.section').hoverMe('hover'); //add hover class
		
		//remove rel from all
		$('.section').removeAttr('rel');
		
		//remove changing arrow bg classes
		//$('#three').removeClass('bg1');
		//$('#three').removeClass('bg2');
		
		//change bg image for #twoA and #twoB
		$('#twoA').addClass('preClick');
		$('#twoB').addClass('preClick');
  	});
	
	//create an element to show all of the process map -----------------
	var $showAllButton = $('#bottomButtons #showAll');
	
	$showAllButton.hoverMe('hoverBttn'); //add hover
	
	//add click fcns to $showAllButton
	//when not shown ealier via click, #twoA does not show in safari with this button
	$showAllButton.click(function()
  	{
		$('.section').not('#wrapper').animate({opacity: 'show'}, 'slow');
		
		$showAllButton.animate({opacity: 'hide'}, 'slow');
		$nextButton.animate({opacity: 'hide'}, 'slow');
		$resetButton.animate({opacity: 'show'}, 'slow');
		$resetButton.addClass('last');
		
		//remove hover fcn for sections since all are now visible
		$('.section').unbind('mouseover');
		
		//add rel to all
		$('.section').attr('rel','clicked');
		
		//remove changing arrow bg classes
		//$('#three').removeClass('bg1');
		//$('#three').removeClass('bg2');
		
		//change bg image for #twoA and #twoB
		$('#twoA').removeClass('preClick');
		$('#twoB').removeClass('preClick');
  	});
	
	// ----------- END BOTTOM BUTTONS ------------------ //
	
	
	
	//.step click fade-in conrol ----------------------- 
	
	//hide all steps except step one
  	$('.section').not('#wrapper').css('display','none');
	
	//stop event propagation for all anchors inside clickboxes - $('.clickBox a')
	$('.section a').click(function(event)
	{
		//*problem* - assigning events to outer container divs that hold anchors is that clicking on
		//anchors will cause those container div events to fire
		
		//since js supports both event capturing AND bubbling, jQuery by default applies bubbling instead
		//to provide cross browser consistency
		
		//this means that inner most elements (the anchors in this case) have the first opportunity to fire
		//the containing div events
		
		//the 'event.target == this' solution applied to the container div doesn't seem to work in this scenario,
		//probably because the only visual elements are the rounded corners elements that can also be clicked to trigger
		//the event - the #siRNA container for example does not really take any space of its own, nor does it provide
		//visual feedback that it's the event triggering object
		
		//therefore we need to allow other non-a elements inside the triggering div to trigger the divs events
		
		//the event obj provides this method to stop event bubbling completely
		//normally this method cannot be safely used across browsers, but jQuery can - so long as our event handlers
		//are registered with jQuery
		event.stopPropagation();			
	});
	
	// remove hover after first click - to show that opening only works once
	$('.section').click(function() //$('.clickBox')
	{
		$(this).unbind('mouseover'); //can't unbind 'hover()' - since hover uses mouseover AND mouseout
		//undesireable to unbind mouseout as well since class would still be applied
		
		$(this).attr('rel','clicked');
		
		$resetButton.animate({opacity: 'show'}, 'slow');
		$resetButton.removeClass('last');
		
		//change bg image for #twoA and #twoB
		$('#twoA').removeClass('preClick');
		$('#twoB').removeClass('preClick');
		
		//show following section
		var $nextSection = nextSection();
		
		if($nextSection != null)
		{
			$(nextSection()).animate({opacity: 'show'}, 'slow');
			
			if($nextSection.attr('id') == 'four') //five
			{
				$showAllButton.animate({opacity: 'hide'}, 'slow');
				$nextButton.animate({opacity: 'hide'}, 'slow');
				$resetButton.addClass('last');
			
				$nextSection.unbind('mouseover');
				$nextSection.unbind('click');
				
				//manually show the rest
				$('#five').animate({opacity: 'show'}, 'slow');
				$('#five').unbind('mouseover');
				$('#five').unbind('click');
			}
		}
	});
});