var addition_count = 0;

function toggle_enhancement(div_id)
{
	// get the contents from both the original div, and added div
	// essentially we're just passing the content back and forth between divs
	var div_contents = $("#" + div_id).html();
	var div_contents_added = $("#" + div_id + "_added").html();
	// put the contents into the added div, toggle its view state
	$("#" + div_id + "_added").html(div_contents);
	$("#" + div_id + "_added").slideToggle("normal");
	// put the contents into the original div, toggle its view state
	$("#" + div_id).html(div_contents_added);
	$("#" + div_id).slideToggle("normal");
	// the effect of above is to toggle the divs, but you need to pass the contents back
	// and forth so that everything stays legit and continues to function
	
	if ($("#" + div_id + "_state").val() == "off")
	{
		// here we swap the plus image for the minus image, update the alt tag, and update the html under the image
		$("#" + div_id + "_image").attr("src","images/vitaminid/Minus.gif");
		$("#" + div_id + "_image").attr("alt","Remove from daily Packet");
		$("#" + div_id + "_image_copy").html("Remove from daily Packet");
		
		// make the h2 a sifr again (IE)
		$("#" + div_id + "_added h2.sifr_grey_bg").removeClass("sIFR-replaced");
		sIFR.replaceElement("#" + div_id + "_added h2.sifr_grey_bg", "javascripts/sifr/avenirRoman.swf", "#007eb5", "#000000", "#FFFFFF", "#E8E7DD", 0, 0, 0, 0);	
		
		// increment this counter, so we know how many enhancements have been added, see bracket image
		addition_count++;
		// update the hidden input to state = "on" so that we can set the image later
		$("#" + div_id + "_state").val("on");
	}
	else
	{
		// here we swap the minus image for the plus image, update the alt tag, and update the html under the image
		$("#" + div_id + "_image").attr("src","images/vitaminid/Plus.gif");
		$("#" + div_id + "_image").attr("alt","Add to daily Packet");
		$("#" + div_id + "_image_copy").html("Add to daily Packet");
		
		// make the h2 a sifr again (IE)
		$("#" + div_id + " h2.sifr_grey_bg").removeClass("sIFR-replaced");
		sIFR.replaceElement("#" + div_id + " h2.sifr_grey_bg", "javascripts/sifr/avenirRoman.swf", "#007eb5", "#000000", "#FFFFFF", "#E8E7DD", 0, 0, 0, 0);
		
		// decrement the number of enhancements added ... all done for the bracked image
		addition_count--;
		// set the state to "off" so we know it's not currently added
		$("#" + div_id + "_state").val("off");
	}
	
	change_bracket(addition_count);
}

function change_bracket(added_count)
{
	// here we're essentially seeing how many enhancements have been added, and show the appropriate bracket
	// technically this is hard coded for 2 enhancements, no more no less, but this should be updated perhaps to except more or less than that
	if (added_count == 1)
	{
		// show the bracked for one enhancement added. Change the image, top margin and top margin on the text
		$("#bracket").html('<img width="32" height="402" alt="" src="images/vitaminid/Bracket_Medium.gif" alt="" />');
		$("#bracket").css("margin-top","4px");
		$("#bracket_text").css("margin-top","185px");
		
		// since there are only 2 total things to add, when one is gone, make this singular ... then fix sIFR
		$("#optional_header").html('<h2 class="sifr_grey">Optional Enhancement</h2>');
		// show the optional header if it was hidden
		$("#optional_header").show();
		// remove the sIFR class
		$("#optional_header h2.sifr_grey").removeClass("sIFR-replaced");
		// and call sIFR again to make it look right
		sIFR.replaceElement("#optional_header h2.sifr_grey", "javascripts/sifr/avenirRoman.swf", "#4C4B4B", "#000000", "#FFFFFF", "#FFFFFF", 0, 0, 0, 0);
		// hide the divider between the enhancements
		$("#optional_divs_spacer").hide();
	}
	else if (added_count == 2)
	{
		// show the bracked for two enhancement added. Change the image, top margin and top margin on the text
		$("#bracket").html('<img width="32" height="567" alt="" src="images/vitaminid/Bracket_Large.gif" alt="" />');
		$("#bracket").css("margin-top","7px");
		$("#bracket_text").css("margin-top","265px");	
		
		// since there are only 2 total things to add, when both is gone, hide this div
		$("#optional_header").hide();
		// hide the divider between the enhancements, if not done above (for some reason)
		$("#optional_divs_spacer").hide();
	}
	else
	{
		// show the bracked for no enhancement added. Change the image, top margin and top margin on the text
		$("#bracket").html('<img width="32" height="235" alt="" src="images/vitaminid/Bracket_Small.gif" alt="" />');
		$("#bracket").css("margin-top","0px");
		$("#bracket_text").css("margin-top","95px");
		
		// since there are only 2 total things to add, when none are added, make it plural ... and fix sIFR
		$("#optional_header").html('<h2 class="sifr_grey">Optional Enhancements</h2>');
		// show the optional header if it was hidden
		$("#optional_header").show();
		// remove sIFR class
		$("#optional_header h2.sifr_grey").removeClass("sIFR-replaced");
		// add sIFR again
		sIFR.replaceElement("#optional_header h2.sifr_grey", "javascripts/sifr/avenirRoman.swf", "#4C4B4B", "#000000", "#FFFFFF", "#FFFFFF", 0, 0, 0, 0);
		// show the divider between the enhancements
		$("#optional_divs_spacer").show();
	}
}

// toggles our info div per each vitamin / pill, etc.
// see actual container div of each vitamin to see onmouseover / onmouseout code call
// we have to do it this because IE cannot have an absolute div over a relative div, uh oh?!
function show_info_div(div_id, caller_id)
{
	if ($("#info_" + div_id).css("display") == "none")
	{
		$(caller_id).css("position","relative");
	}
	else
	{
		$(caller_id).css("position","static");
	}

	$("#info_" + div_id).toggle();
}