var transition = false;


function Login(ev) {
	var lng_nonick = "Bitte einen Nicknamen eintippen.";
	var lng_nopwd = "Bitte ein Passwort eintippen.";

	var lang = getCookie('lang');
	if(lang)
		if(lang=='en') {
			lng_nonick = 'Please type your nickname';
			lng_nopwd = 'Please type your password';
		}

	var test = get('test');
	// escape: 27
	// enter: 13
	if(transition) return;
		
	if(!ev) ev = window.event;
	if(ev.keyCode==13) {	
		if(get('nick').value=='') {
			Transition(1,'<div class="error">'+lng_nonick+'</div>');				
		} else if(get('paswd').value=='') {
			Transition(1,'<div class="error">'+lng_nopwd+'</div>');
		} else {
			Transition(1,'<img width="16" height="16" style="padding-top:2px;" src="pics/progress_active.gif" alt="Checking..">',SubmitLogin);
		}
	}
}

function SubmitLogin() {
	SendData('user='+get('nick').value+'&paswd='+get('paswd').value,'ajax_get.php?d=log',LoginResult);
}

function LoginResult() {
	// resp[0] login pass/fail
	// on success:
		// resp[1] menu width
		// resp[2] user id/pass
		// resp[3] menu in html
	// on fail
		// resp[1] error msg
	resp = req.responseText.split('||');
	
	if(resp[0]=='0')
		Transition(1,'<div class="error">'+resp[1]+'</div>');
	if(resp[0]=='1') {
		var now = new Date();
		var expire = new Date(now.getTime() + 3600 * 24 * 90*1000);
		menuwdt = resp[1];
		setCookie(cookie, resp[2], expire);
		setCookie(cookie, resp[2], expire, '/', '.clonkforge.net');

		Login2Menu(resp[3]);
	}
}

function Logout() {
	var now = new Date();

	setCookie(cookie, '', now);
	setCookie(cookie, '', now, '/', '.clonkforge.net');	
	
	SendData('','ajax_get.php?d=lou',LogoutResult);
}
function LogoutResult() {
	get('mover').style.overflow='hidden';
	data=req.responseText;
	
	var anim_mover = new Animator({duration:701, onComplete: PutLoginBars }).addSubject(new CSSStyleSubject(get('mover'), 'width:'+menuwdt+'px;', 'width:0px;'));
	var anim_menu = new Animator({duration:700}).addSubject(new CSSStyleSubject(get('menutd'), 'width:'+menuwdt+'px;', 'width:0px;'));
		
	anim_menu.play();
	anim_mover.play();	
}

function PutLoginBars() {
	var menu = get('menutd');
	
	menu.innerHTML = data;
	menu.className='login_';
	menu.style.display='none';
	
	document.getElementsByTagName('input')[0].onkeypress = Login;
	document.getElementsByTagName('input')[1].onkeypress = Login;
	
	new Animator({duration:480}).addSubject(new CSSStyleSubject(get("bar1"), 'width:0px;', 'width:240px;')).play();
	new Animator({duration:550}).addSubject(new CSSStyleSubject(get("inbar1"), 'width:0px;', 'width:240px;')).play();
	new Animator({duration:480}).addSubject(new CSSStyleSubject(get("bar2"), 'width:0px;', 'width:220px;')).play();
	new Animator({duration:550}).addSubject(new CSSStyleSubject(get("inbar2"), 'width:0px;', 'width:220px;')).play();
	new Animator({duration:480}).addSubject(new CSSStyleSubject(get("bar3"), 'width:0px;', 'width:201px;')).play();
	new Animator({duration:550}).addSubject(new CSSStyleSubject(get("inbar3"), 'width:0px;', 'width:201px;')).play();
	

	setTimeout(UnhideMenu,30);	
}

function Transition(nr, to, callback) {
	var test = get('test');
	test.innerHTML = to;
	var new_width = getElementWidth(test);
	
	if(transition) return;
	transition = true;
	
	var anim1 = new Animator({duration:500}).addSubject(new CSSStyleSubject(get("bar"+nr), 'width:'+getElementWidth(get("bar"+nr))+'px;', 'width:'+(new_width+28)+'px;'));
	var anim11 = new Animator({duration:500}).addSubject(new CSSStyleSubject(get("inbar"+nr), 'width:'+getElementWidth(get("inbar"+nr))+'px;', 'width:'+(new_width)+'px;'));
	
	var anim2 = new Animator({duration:250, onComplete: function() { 
		if(to) get("inbar"+nr).innerHTML = to;
		var anim = new Animator({duration:252, onComplete: function() { transition=false; callback();}}).addSubject(new NumericalStyleSubject(get("inbar"+nr), 'opacity', 0, 1));
		anim.play();
		}})
		
	anim2.addSubject(new NumericalStyleSubject(get("inbar"+nr), 'opacity', 1, 0));
	
	anim1.play();
	anim11.play();
	anim2.play();
}

var menudata = '';

function Login2Menu(data) {
	menudata = data;
	
	var bar1 = new Animator({duration:70}).addSubject(new CSSStyleSubject(get("bar1"), 'width:'+getElementWidth(get("bar1"))+'px;', 'width:0px;'));
	var bar2 = new Animator({duration:320, onComplete: ToMenu}).addSubject(new CSSStyleSubject(get("bar2"), 'width:'+getElementWidth(get("bar2"))+'px;', 'width:0px;'));
	var bar3 = new Animator({duration:300}).addSubject(new CSSStyleSubject(get("bar3"), 'width:'+getElementWidth(get("bar3"))+'px;', 'width:0px;'));
	
	var inbar1 = new Animator({duration:50}).addSubject(new CSSStyleSubject(get("inbar1"), 'width:'+getElementWidth(get("inbar1"))+'px; padding-right:10px;', 'padding-right:0px; width:0px;'));
	var inbar2 = new Animator({duration:300}).addSubject(new CSSStyleSubject(get("inbar2"), 'width:'+getElementWidth(get("inbar2"))+'px; padding-right:10px;', 'padding-right:0px; width:0px;'));
	var inbar3 = new Animator({duration:280}).addSubject(new CSSStyleSubject(get("inbar3"), 'width:'+getElementWidth(get("inbar3"))+'px; padding-right:10px;', 'padding-right:0px; width:0px;'));
	
	bar1.play();
	inbar1.play();
	bar2.play();
	inbar2.play();
	bar3.play();
	inbar3.play();
}

function ToMenu() {
	var menu = get('menutd');
	
	menu.innerHTML = menudata;
	get('mover').style.width='0px';
	get('mover').style.overflow='hidden';
	menu.className = 'menu_';

	menu.style.width='0px';
	// ohne dass gehts im chrome nicht :/
	menu.style.display='none';
	
	var anim_mover = new Animator({duration:700, onComplete: function() { get('mover').style.overflow=''; }}).addSubject(new CSSStyleSubject(get('mover'), 'width:0px;', 'width:'+menuwdt+'px;'));
	var anim_menu = new Animator({duration:700}).addSubject(new CSSStyleSubject(get('menutd'), 'width:0px;', 'width:'+menuwdt+'px;'));
	
	anim_menu.play();
	anim_mover.play();
	
	setTimeout(UnhideMenu,50);
}

function UnhideMenu() {
	get('menutd').style.display='';
}

function findPosition( oElement ) {
  if( typeof( oElement.offsetParent ) != 'undefined' ) {
    for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent ) {
      posX += oElement.offsetLeft;
      posY += oElement.offsetTop;
    }
    return [ posX, posY ];
  } else {
    return [ oElement.x, oElement.y ];
  }
}

function Open2(item,submenu,elem) {
	elem.getElementsByTagName('img')[0].src = elem.getElementsByTagName('img')[0].src.replace(/(\w+_(de|en))\.png/g,'$1_over.png');
	if(item)
		Open(item,submenu);
}

function Close2(item,elem) {
	elem.getElementsByTagName('img')[0].src = elem.getElementsByTagName('img')[0].src.replace(/(\w+_(de|en))_over\.png/g,'$1.png');
	if(item)
		Close(item);
}

function Open(item,submenu) {
	if(submenu) {
		item.parentNode.parentNode.parentNode.style.display='';
		item.style.marginLeft = (getElementWidth(item.parentNode)-5) + 'px';
	}
	item.style.display='';	
}

function Close(item) {
	item.style.display='none';
}

function Selected(item) {
	item.className='selected';
}
function Left(item) {
	item.className='';
}

function NavTo(url,e) {
	if(!e) e=window.event;
	if(e && e.ctrlKey) {
		// do nothing
	} else {
		location.href = url;
	}
}

function setlang(lang) {
	DoCookie('lang',lang);

	window.location.href = window.location.href.replace(/\?.*/g,'');
	if(window.location.href == window.location.href.replace(/\?.*/g,'')) {
		location.reload(true);
	}
}