cylinderOptions = {
	triggerPanelGroup:"productGroup",
	triggerPanelClass:"products",
	triggerContentIdPrefix:"c",
	targetPanel:"productTextTarget",
	targetContentGroup:"cylinderDescriptions",
	targetContentClass:"productBlurb",
	defaultContentPanelIndex:0
};

DoublePanel(cylinderOptions);

function DoublePanel(opts) {

	var defaultIndustryIndex = opts.defaultContentPanelIndex;
	
	var industries = new Array();
	var blurbs = new Array();
	
	var ir = document.getElementById(opts.triggerPanelGroup);
	var br = document.getElementById(opts.targetContentGroup);
	var box = document.getElementById(opts.targetPanel);
	var blurbClass = opts.targetContentClass;
	var panelClass = opts.triggerPanelClass;
	
	br.style.display = 'none';
	
	var lastIndustry = null;
	
	// get blurbs corresponding to industry panels
	br.style.display = 'none';
	for (var i = 0; i < br.childNodes.length; i++) {
		if (br.childNodes[i].nodeType == 1 && br.childNodes[i].className.indexOf(blurbClass) != -1) {
			blurbs.push(br.childNodes[i]);
		}
	}
	
	// get industry panels
	var c = 0;
	var triggers = ir.getElementsByTagName('LI');
	for (var i = 0; i < triggers.length; i++) {
		if (triggers[i].nodeType == 1 && triggers[i].className.indexOf(panelClass) != -1) {
			industries.push(triggers[i]);
			c++;
		}
	}
	
	// attach mouseover action to industry panels
	for (var k = 0; k < industries.length; k++)
		industries[k].onmouseover = showIndustry;
	
	// show the default industry panel
	showIndustry(defaultIndustryIndex);
	
	// swaps image, highlights title, and changes center text
	// also removes highlights for last industry selected
	function showIndustry(n) {
		var el;
		if (typeof n == "number")
			el = industries[n];
		else
			el = this;
		if (lastIndustry)
			removeClass(lastIndustry, "hover");

		addClass(el, "hover");
		box.innerHTML = blurbs[el.id.substr(1,1)].innerHTML;
		lastIndustry = el;
	}
	
	// returns an image based on the class name and relative index
	// relative index is the index of the image with that class name
	// so a relative index of 3 is the fourth image found with the 
	// given class name
	function getImage(relIndex, cname) {
		var c = -1;
		for (var i = 0; i < document.images.length; i++) {
			if (document.images[i].className == cname)
				c++;
			if (c == relIndex)
				return document.images[i];
		}
	}
	
	function addClass(el, cname) {
		el.className = el.className + " " + cname;
	}
	
	function removeClass(el, cname) {
		el.className = el.className.replace(new RegExp(" ?" + cname), "");
	}
}