/*=============== Timeline Scrollbar Adjustment ===============*/

Event.observe(window,'load', fix_scroll);

function fix_scroll() {


  if( !$('timeline') )
    return;

 $('timeline').setStyle({width: (210*$('timeline').childElements().length)+'px' });

	$$('.rtPanel').each( function( panel ) {

	
	  var toggle = panel.down('.toggle');
	  var div = panel.down('.middle');
	  
		var closed = div.getHeight() == 0;
	
		if( closed )
			div.setStyle({height: 'auto'});
		var measured_height = div.getHeight();
		if( closed )
			div.setStyle({height: '0px'});
	
	  div.effect = new Effect.Style(div, 'height', {
			start: measured_height,
			end: 0,
			afterFinish: function(ef) {
				if( ef.effect_state == 'from' ) {
					ef.element.setStyle({height: 'auto'});
				}
			},
			start_options: { duration: .4 },
			rewind_options: { duration: .8 } } );
	  if( closed )
	    div.effect.finish_effect();
	
	  toggle.observe('click', function(e) {
	    e.stop();
		  // if we are already open
		  if( div.effect.effect_state == 'from' ) {
				var measured_height = div.getHeight();
				div.effect.style_options.start = measured_height;
		    div.effect.start_effect();
		  } else {
		    $$('.rtPanel .middle').each( function( curDiv ) {
					var measured_height = curDiv.getHeight();
					if( measured_height != 0 )
						curDiv.effect.style_options.start = measured_height;
					curDiv.effect.start_effect();
				});
				div.effect.toggle_effect();
				
		  }
			$$('.rtPanel').each( function( cur_panel ) {
				var div = cur_panel.down('.middle');
				var img = cur_panel.down('.toggle img');
				if( div.effect.effect_state == 'to' )
			    img.src = "/global/Images/toggle_plus.gif";
			    
			  else
			    img.src = "/global/Images/toggle_minus.gif";
			});
	  });
	});

}

/*===== Nutrition handling (NEEDS AJAX CALLS ADDED) =====*/

/* Expected layout:
	<ul id="nutritionPanel">
		<li>
			<a href="#">5 Gum</a>
			<div class="formats cover">
				<ul class="formatList">
					<li><a href="URL TO AJAX CALL"><img src="/global/Images/5_gum_cobalt.gif" alt="cobalt" /> cobalt</a></li>
				</ul>
				<div class="infoModule cover">
          AJAX CALL'S OUTPUT WILL GO HERE
        </div>
			</div>
		</li>
  </ul>
*/

Event.observe(window, 'load', nutrition);
function nutrition() {
  if(!$('nutritionPanel'))
    return;

  $('nutritionPanel').observe('click', nutrition_click);
}

function nutrition_click(e) {
  
  var element = e.element();
  
  var category_a = element.match('#nutritionPanel > li > a') ? element : element.up('#nutritionPanel > li > a');
  if( category_a ) {
    e.stop();
    category_a.up('ul').select('li').invoke('removeClassName', 'open');
    category_a.up('li').toggleClassName('open');
    type_clicked( category_a.up('li').down('ul.formatList > li:first-child') );
    return;
  }
  
  var type_li = element.match('#nutritionPanel ul.formatList > li') ? element : element.up('#nutritionPanel ul.formatList > li');
  if( type_li ) {
    e.stop();
    type_clicked( type_li );
  }
}

function type_clicked( type_li ) {
  var type_a = type_li.down('a');
  var source = type_a.next('span').className; 
  var category = type_li.down('img').className;
  type_li.up('ul').select('li').invoke('removeClassName', 'selected');
  type_li.addClassName('selected');
  var infoModule = type_li.up('div.formats').down('div.infoModule')
  if( type_li.nutrition_call ) {
    infoModule.update(type_li.nutrition_call);
  } else {
    category = category.replace("&amp;", "%26");
    category = category.replace("&", "%26"); 		
    new Ajax.Updater(infoModule, "/global/ProductList.aspx?source=" + source + "&category=" + category);

	

    /* These two lines are placeholder, instead the below ajax call
     * should be used once the href's are filled appropriately on
     * the page with the correct server url.  This will update the
     * infoModule with the contents of the call, and cache the result
     * so that it won't happen a second time per page load. */
    //alert(type_a.pathname);
    //type_li.nutrition_call = 'Clicked '+type_a.innerHTML;
    //infoModule.update(type_li.nutrition_call);
    /*
    new Ajax.Updater( infoModule, type_a.href, {
      method: 'get',
      afterFinish: function( response ) {
      console.debug('finished');
        type_li.nutrition_call = response.responseText;
      } } );
    */
  }
}

function loadNutritionPanel(combo) {	
	if( $('#nutritionPanel') ) {
		//recreateNutritionTable();
	}

	var upc = combo.value;	
	if (upc.length > 0) {		    
		//new Ajax.Updater('nutritionTable', '/wrigley_com/brands/nutrition2.aspx?upc=' + upc);		
		new Ajax.Updater(combo.className, '/global/brands/nutrition2.aspx?upc=' + upc);		
		
	} else {
		$('nutritionTable').update('');
	}
	
}

function loadBrandsNutritionPanel(combo) {	
	if( $('#nutritionPanel') ) {
		//recreateNutritionTable();
	}

	var upc = combo.value;	
	if (upc.length > 0) {		    
		new Ajax.Updater('nutritionTable', '/global/brands/nutrition2.aspx?upc=' + upc);		
		
		
	} else {
		$('nutritionTable').update('');
	}
	
}

function loadNutrition(strupc) {  
		new Ajax.Updater('nutritionTable', '/global/brands/nutrition2.aspx?upc=' + strupc);
}

function recreateNutritionTable()
{
	var nutrition_table = $('nutritionTable');
	if(nutrition_table)
		nutrition_table.remove();  
		//alert("test");
	$$('#nutritionTable > li.open > div').each(function(node){
	
		nutrition_table = new Element('div', { 'id': 'nutritionTable' });
		node.appendChild(nutrition_table);
	});
}