//Speed and timeing Vars *Change these*--------------------------------------------------
var marqueeTimer = new Object();
var marqueeTimer_Interval = 3500; //delay between scrolling (in milliseconds)
var marqueeTimer_Speed = 1000; //how long the transition lasts (in milliseconds)

var dropDown_speed = 100; //
//-----------------------------------------------------------------------------

var originalList = new Object();
var smallHeight = 43;
var largeHeight = 180;
var marqueeEffect = new Object();	
document.myEffects = new Fx.Styles('multiLing_btns', {});
window.addEvent('domready', init);
startTimer();

function init(){
	originalList = $('marqueeList').clone();
	$('multiLing_btns').addEvent('mouseenter', function(e){ slideDown();  });
	$('multiLing_btns').addEvent('mouseleave', function(e){ slideUp(); });
}

function slideDown(){
	document.myEffects.stop();
	$('multiLing_btns').className = 'multiLing_largeBg';
	document.myEffects = new Fx.Styles('multiLing_btns', {duration: (dropDown_speed), transition: Fx.Transitions.linear, onComplete: function(){ onSlideDownComplete() } });
	document.myEffects.start({'height': [ $('multiLing_btns').getSize().size.y , (largeHeight)]});
	clearInterval(marqueeTimer);
	document.getElementById('multiLingMarquee_container').style.display='none';
	resetMarquee();
}

function slideUp(){
	document.myEffects.stop();
	document.myEffects = new Fx.Styles('multiLing_btns', {duration: (dropDown_speed), transition: Fx.Transitions.linear, onComplete: function(){ onSlideUpComplete() } });
	document.myEffects.start({'height': [ $('multiLing_btns').getSize().size.y, (smallHeight) ]});
	document.getElementById('multiLingMarquee_container').style.display='block';
	startTimer();
}

function onSlideUpComplete(){
	$('multiLing_btns').className = 'multiLing_smallBg';
	resetMarquee();
}

function onSlideDownComplete(){}

function resetMarquee(){
	marqueeEffect.stop();
	$('marqueeList').remove();
	originalList.clone().injectTop('multiLingMarquee_container');
}

function startTimer(){

	marqueeTimer = setInterval('loop()', marqueeTimer_Interval);
}

function loop(){
	marqueeEffect = $E('li', 'multiLingMarquee').effects({duration: (marqueeTimer_Speed), transition: Fx.Transitions.Sine.easeInOut, onComplete:function(){onSlideComplete()} });
	marqueeEffect.start({'margin-left': [0, -1* $E('li', 'multiLingMarquee').getSize().size.x]});
}

function onSlideComplete(){
	$E('li', 'marqueeList').remove().injectInside('marqueeList').setStyle('margin-left', '0px');
}