var visible_element;

// To change the plus or minus images, change these image file paths
var ACC_IMG_ON = 'img/red_arrow.gif';
var ACC_IMG_OFF = 'img/light_grey_arrow.gif';

function toggleStateImage(stateImageSource) {
	for (var i = 0; i < visible_element.childNodes.length; i++) {
		if (visible_element.childNodes[i].nodeName == 'IMG') {
			 visible_element.childNodes[i].src = stateImageSource;
		}
	}
}

/* This method initializes the line items within an accordion container.
	 Non-visible line items are collapsed and the visible line item is expanded. */
function setup_accordion_container(accordion_container_title) {
	
	var accordion_container = document.getElementById(accordion_container_title+'');
	var accordion_divs = accordion_container.getElementsByTagName('div');
	var accordion_headers = accordion_container.getElementsByTagName('h3');
	var visible_header;
	var visible_parent;
	
	// Cycle through the divs and collapse all of the panelBody divs
	for (i = 0; i < accordion_divs.length; i++) {
  	if (accordion_divs[i].className == 'panelBody') {
    	accordion_divs[i].style.display = 'none';
		}
  }
	// Cycle through the h3's and expand the visible header
	for (i = 0; i < accordion_headers.length; i++) {
  	if (accordion_headers[i].className == 'visible') {
			visible_element = accordion_headers[i];
			visible_parent = visible_element.parentNode.id+'-body';
    	document.getElementById(visible_parent).style.display = 'block';
		}
  }
}

function changeTabs(clicked_tab) {
	if (clicked_tab == 'network') {
		activate('nflnetwork_gameclips_tabs',0,2,'tabbed');
		setup_accordion_container('nflnetwork_gameclips_tabs_0');
	} 
	else if (clicked_tab == 'clips') {
		activate('nflnetwork_gameclips_tabs',1,2,'tabbed');
		setup_accordion_container('nflnetwork_gameclips_tabs_1');
	}
}

function addEvent(elm, evType, fn, useCapture) {
    elm["on"+evType]=fn; return;
}


/* This function gets called whenever a user clicks on a plus
	 or minus image associated with a line item.
	 
	 Three scenarios:
	 1: One of the line items is expanded and the others are collapsed.
			The user clicks on one of the collapsed line items.
	 2: One of the line items is expanded and the others are collapsed.
			The user clicked on the expanded line item.
	 3: All of the line items are collapsed.
			The user clicks on one of them. */
			
function accordion(clicked_line_item, status_image) {
  
	if (visible_element == clicked_line_item) {
		var to_slide_up = visible_element.parentNode.id+'-body';
		new Effect.SlideUp(to_slide_up, {duration: 0.3});		
		toggleStateImage(ACC_IMG_OFF);
		
		// removes the visible class declaration from the visible line item		
		visible_element.className = '';
		visible_element = null;
  }	
  else if (visible_element) {
  	var to_slide_down = clicked_line_item.parentNode.id+'-body';
    var to_slide_up = visible_element.parentNode.id+'-body';
		
		/* The use of the Parallel method makes 
			 for smoother animation for some browsers */
		new Effect.Parallel([new Effect.SlideUp(to_slide_up), 
		                     new Effect.SlideDown(to_slide_down)], {duration: 0.3});

		toggleStateImage(ACC_IMG_OFF);
		
		// handle the visible element	
		visible_element.className = '';
		clicked_line_item.className = 'visible';
		visible_element = clicked_line_item;		
		status_image.setAttribute('src', ACC_IMG_ON);
  }
	else {
  	var to_slide_down = clicked_line_item.parentNode.id+'-body';		
		new Effect.SlideDown(to_slide_down, {duration: 0.3});
		
		// handle the visible element			
		clicked_line_item.className = 'visible';
		visible_element = clicked_line_item;
		status_image.setAttribute('src',  ACC_IMG_ON);
	}
}