/*=============== 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, id ) {
    id = id + 1;
	  var toggle = panel.down('.toggle');
	  var div = panel.down('.middle');
		var closed = div.getHeight() == 0;
    var selectedId = window.location.hash;
    var haveSelected = selectedId.substr(0,7) == '#panel-';
    if( haveSelected ) {
      selectedId = selectedId.substr(7);
    } else {
      selectedId = "";
    }
    var selected = id == selectedId;

		var measured_height = div.getHeight();
		if( closed ) {
			div.setStyle({height: 'auto'});
		  measured_height = div.getHeight();
			div.setStyle({height: '0px'});
    } else {
      window.defaultPanel = "#panel-"+id;
    }

    if( haveSelected ) {
      var img = panel.down('.toggle img');
      if( selected && closed ) {
        // open
        div.setStyle({height: 'auto'});
        img.src = "/global/Images/toggle_plus.gif";
        closed = false;
      } else if( !selected && !closed ) {
        // close
        div.setStyle({height: '0px'});
        img.src = "/global/Images/toggle_minus.gif";
        closed = true;
      }
    } 
	
	  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();
      var img = panel.down('.toggle img');
      // 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();
        img.src = "/global/Images/toggle_minus.gif";
      } else if( window.location.hash != '#panel-'+id ) {
        // if we aren't the selected panel
        window.location.hash = '#panel-'+id;
      } else {
        // finally we must have closed ourselves earlier (first condition)
        // and now we are openning ourselves

        div.effect.rewind_effect();
        img.src = "/global/Images/toggle_plus.gif";
      }
    });
	});

  window.lastHash = window.location.hash;
  function checkHash() {
    setTimeout(checkHash, 100);
    var selectedId = window.location.hash;
    if( window.lastHash == selectedId ) return;
    window.lastHash = selectedId;
    if( selectedId == "" && window.defaultPanel ) {
      selectedId = window.defaultPanel;
    }
    var haveSelected = selectedId.substr(0,7) == '#panel-';
    if( !haveSelected ) return;
    selectedId = selectedId.substr(7);

    var panel = $$('.rtPanel:nth-child('+selectedId+')')[0];
    if( !panel ) return;
	  var div = panel.down('.middle');
    
    // if we are already open
    if( div.effect.effect_state == 'from' ) {
      return;
    } 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";
    });
  }
  setTimeout(checkHash, 100);
}

/*===== 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);
	});
}