Event.observe(window, 'load', function() {
$$('#toggle > li > a').invoke( 'observe', 'click', spotlight_click );
$$('#fullworldlist > li > div').each(
	function(node) {
		
		var calculated_height = node.getHeight();
		var li = node.up('li');
		//node.wrap(div);
		node.effect = new Effect.Style( node, 'height', { start: 0, end: calculated_height, start_options: { duration: 1.3, transition: Effect.Transitions.spring },
		rewind_options: { transition:  Effect.Transitions.sinoidal, duration: 0.3 },
		beforeStart: function() {
			if( node.effect.effect_state == 'to' ) 
			{
				li.addClassName('openPanel');	
			}
			else
			{
				node.setStyle({overflow: 'hidden'});	
			}
			
		},
		afterFinish: function() {
			if( node.effect.effect_state == 'to' ) 
			{
				node.setStyle({overflow: 'visible'});	
			}
			else
			{
				li.removeClassName('openPanel');	
			}	
		}
		} );	
		
		node.setStyle({height: '0px', overflow: 'hidden'});	
		
	}
);
$$('#fullworldlist > li > a').invoke( 'observe', 'click', region_click );



$$('#toggle > li > a').invoke( 'observe', 'click', spotlight_click );
$$('#countryGraphic > li').each(
	function(node) {
	}
);

//open specific faq based on the hash in the url
var hash = window.location.hash;
if(hash != "")
{
	var hash = hash.replace("#", "");
	
	if(hash.indexOf('brandRegion') > -1)
	{
		showRegion(hash);
	}
	else
	{
		if(hash.indexOf('country') > -1)
		{
			var countryCode = hash.substring(hash.length - 2, hash.length);
			var regionId = '';
			var toggleId = '';
			var spotId = '';
			
			switch(countryCode)
			{
				/*
				FOR REFERENCE:
				RS - brandRegion3 - Russia
				ES - brandRegion1 - Spain
				CN - brandRegion6 - China
				IN - brandRegion6 - India
				US - brandRegion0 - U.S.A.
				CH - brandRegion1 - Switzerland
				UK - brandRegion1 - U.K.
				MX - brandRegion0 - Mexico
				AU - brandRegion3 - Australia
				KZ - brandRegion3 - Kazakhstan
				DE - brandRegion1 - Germany
				PL - brandRegion1 - Poland
				CZ - brandRegion2 - Czech Rep.
				TW - brandRegion6 - Taiwan
				*/
				case "IN":
					regionId = 'brandRegion6';						
					toggleId = 'toggle01';
					spotId = 'spot01';
					break;
				case "TW":
					regionId = 'brandRegion6';
					toggleId = 'toggle02';
					spotId = 'spot02';
					break;
				case "CZ":
					regionId = 'brandRegion2';
					toggleId = 'toggle03';
					spotId = 'spot03';
					break;
				case "US":
					regionId = 'brandRegion0';
					toggleId = 'toggle04';
					spotId = 'spot04';
					break;
				case "ES":
					regionId = 'brandRegion1';
					toggleId = 'toggle05';
					spotId = 'spot05';
					break;
			}
			
			if(regionId != '')
				showRegion(regionId);
				
			if(toggleId != '')
				showToggle(toggleId);
				
			if(spotId != '')
				showSpotlight(spotId);
		}
		
	}
}	
});

function showRegion(regionId)
{
var region = $(regionId);
var regionDiv = region.down('div');
regionDiv.effect.start_effect();	
}

function region_click(e) {
var li = $(e.target).up('li');

if( !li )
	return false;
e.stop();

var div = li.down('div');
if( li.className.indexOf('openPanel') > -1 )		
{
	//close panel
	div.effect.rewind_effect();		
	//div.setStyle({visibility: 'hidden'});	
}
else
{
	//open panel		
	div.effect.start_effect();
	//div.setStyle({visibility: 'visible'});	
}
return false;
}

function spotlight_click(e) {
var li = $(e.target).up('li');

if( !li )
	return false;
e.stop();


var liId = li.id;
showToggle(liId);

var spotNum = liId.substring(liId.length - 2, liId.length );	
swapSpotlight('spot' + spotNum);
//showSpotlight('spot' + spotNum);
}

function showToggle(toggleId)
{
toggleUl = $('toggle');
toggleUl.className = toggleId;
}

function showSpotlight(spotId)
{
graphicUl = $('countryGraphic');
graphicUl.className = spotId + ' clearBoth';
}

function swapSpotlight(spotId)
{
var graphicUl = $('countryGraphic');

var oldSpotId = graphicUl.className;

oldSpotId = oldSpotId.replace(' ', '');
oldSpotId = oldSpotId.replace('clearBoth', '');

var oldLi = $(oldSpotId);
var newLi = $(spotId);

banners = new SpotBanners($(oldSpotId), $(spotId), {
  delay: 0.10,
  duration: 1.0
});


banners.fade();	
}

SpotBanners = Class.create({
 initialize: function( out_elem, in_elem, options ) {
  this.parent = out_elem.up('ul');
  this.options = options;
  this.current_element = out_elem;
  this.next_element = in_elem;
  this.current_element.setStyle({ visibility: 'visible' });
},
fade: function() {
  
  if( this.effect ) {
    this.effect.finish_effect();
    this.next_effect.finish_effect();
  }
  this.init_effects();
  this.effect.start_effect();
  this.next_effect.start_effect();
},
init_effects: function() {
	this.effect = new Effect.Style( this.current_element, 'opacity', {
    start: 0.99,
    end: 0.0,
    unit: '',
    delay: this.options.delay,
    duration: this.options.duration,
    beforeStart: this._effect_start.bind(this),
    afterFinish: this._effect_finish.bind(this) } );
  this.next_effect = new Effect.Style( this.next_element, 'opacity', {
    start: 0.0,
    end: 0.99,
    unit: '',
    delay: this.options.delay,
    duration: this.options.duration
    } );  
},  
_effect_finish: function() {
  this.current_element.setStyle({ visibility: 'hidden', zIndex: '1' });    
  this.parent.className = this.next_element.id + ' clearBoth';
  this.next_element.setStyle({ opacity: '1' }); 
},
_effect_start: function() {
  this.current_element.setStyle({ zIndex: '3' }); 
  this.next_element.setStyle({ zIndex: '2' }); 
  this.parent.className = this.current_element.id + ' ' + this.next_element.id + ' clearBoth';
}
});