YUI().use('anim','node-base', 'io-form', function(Y) {

	var contents = Array('login', 'register', 'quickguide', 'faq', 'toc');
	var titles = Array('Login Image Database', 'Registration for members of the press', 'Image Database Quickguide', 'Frequently Asked Questions', 'Terms Of Conditions');
	var widths = Array('280', '600', '600', '600', '600');

	var titnode;
	var boxnode;

	var curindex = 0;
	var previndex = 0;
	var navinodes;
	var fomrmok = false;
	var registerdiv;



	var bganim = new Y.Anim({
		node: '#veil',
		to: { opacity: 0 },
		duration: 6
	});


	var boxopen = new Y.Anim({
		node: '#cont',
		from: { height: 0 },
		to: { height: 370 },
		easing: Y.Easing.bounceOut
	});


	

	var runopen = function(){
		boxopen.run();
	};

	var onClose = function(){
		for(x=0; x<contents.length; x++){
			Y.get('#'+contents[x]).setStyle('display', 'none');
		}
		Y.get('#'+contents[curindex]).setStyle('display', 'block');
		titnode.set('innerHTML', titles[curindex]);


		if(widths[curindex] == widths[previndex]){
			boxopen.run();
		}else{
			//console.log(boxnode+ ' to '+ widths[curindex] );
			var boxskew = new Y.Anim({
				node: boxnode,
				to: { width: widths[curindex] },
				duration: 0.5,
				easing: Y.Easing.easeBoth
			});
			boxskew.on('end', runopen );
			boxskew.run();
		}
	}

	var boxclose = new Y.Anim({
		node: '#cont',
		to: { height: 0 },
		duration: 0.5,
		easing: Y.Easing.easeOut
	});
	boxclose.on('end', onClose); 



	var registersubmit = function(e){
		e.preventDefault();
		
		fomrmok = true;
		Y.all('#registerform input.req').each(checkval);
		if( fomrmok ){
			//console.log('ok send');
			Y.one('#formfeedback').set('innerHTML', '');

			
			/* Configuration object for POST transaction */
			var cfg = {
				method: "POST",
				form: { 
					id: 'registerform', 
					useDisabled: true 
				},
				headers: { 'X-Transaction': 'POST Example'}
			};
			sendRegister(cfg);

			registerdiv.set('innerHTML', '<div style="text-align:center; padding-top:100px;"><img src="loading.gif" /></div>' );
		}else{
			//console.log('missing fields');
			Y.one('#formfeedback').set('innerHTML', 'Please fill in the red fields.');
		}
	}
	var validateinput = function(e){
		checkval(e.target);
	}
	var checkval = function(curnode){
		
		//console.log( curnode.get('name') +': '+ curnode.get('value'));
		if(curnode.get('type') == 'text' ){
			if( Y.Lang.trim( curnode.get('value') ) == ''){
				//curnode.get('parentNode').one('label').setStyle('border-color', '#F00');
				curnode.setStyle('border', '1px solid #F00');
				fomrmok = false;
			}else{
				curnode.setStyle('border', '1px solid #006');
			}
		}else if(curnode.get('type') == 'checkbox'){
			if( ! curnode.get('checked') ){
				curnode.get('parentNode').one('label').setStyle('color', '#F00');
				fomrmok =  false;
			}else{
				curnode.get('parentNode').one('label').setStyle('color', '#333');
			}
		}
	}

	//A function handler to use for successful requests:
	var handleSuccess = function(ioId, o){
		//console.log(arguments);
		//console.log("The success handler was called.  Id: " + ioId + ".", "info", "example");

		if(o.responseText !== undefined){
			var s = "<li>Transaction id: " + ioId + "</li>";
			s += "<li>HTTP status: " + o.status + "</li>";
			s += "<li>Status code message: " + o.statusText + "</li>";
			s += "<li>HTTP headers received: <ul>" + o.getAllResponseHeaders() + "</ul></li>";
			s += "<li>PHP response: " + o.responseText + "</li>";
			registerdiv.set("innerHTML", o.responseText );
		}
	};

	//A function handler to use for failed requests:
	var handleFailure = function(ioId, o){
		//console.log("The failure handler was called.  Id: " + ioId + ".", "info", "example");

		if(o.responseText !== undefined){
			var s = "<h2>Error!</h2><ul><li>Transaction id: " + ioId + "</li>";
			s += "<li>HTTP status: " + o.status + "</li>";
			s += "<li>Status code message: " + o.statusText + "</li></ul>";
			registerdiv.set("innerHTML", s);
		}
	};

	//Subscribe our handlers to IO's global custom events:
	Y.on('io:success', handleSuccess);
	Y.on('io:failure', handleFailure);


	

	var sUrl = "register.php";

	//Handler to make our XHR request when the button is clicked:
	function sendRegister(cfg){

		var request = Y.io(sUrl, cfg);
		//console.log("Initiating request; Id: " + request.id + ".", "info", "example");

	}






	function handleClick(e) {
		e.preventDefault();

		previndex = curindex;
		curindex = navinodes.indexOf(e.target);
		//console.log(curindex);

		boxclose.run();
	} 



	var initstyle = function(e){
		Y.one('#cont').setStyle('height', 0);
		boxnode = Y.one('#box');
		boxnode.setStyle('width', '280px');

		Y.one('#cont .mid').setStyle('height', '370px');
		Y.one('#veil').setStyle('display', 'block');

		titnode = Y.get('#logintit');
	}

	var inithide = function(e){
		Y.one('#submitrow').prepend('<input type="submit" id="Submitbutt" name="Submitbutt" value="Register" onClick="return false;" />');		
		Y.one('#formfeedback').set('innerHTML', '');

		//Y.one('#REGISTERFORM').set('action', 'http://weforum.swiss-image.ch/register.php'); /*Breaks FUCKING IE*/
		//document.forms[1]['action'] = 'http://weforum.swiss-image.ch/register.php'; /*not deeded anymore: submit by JS*/

		var tnode = Y.one('#cont .mid');
		tnode.prepend('<div id="switch"><p><a>Login</a> | <a>Register</a> | <a>Help</a> | <a>FAQ</a> | <a>TOC</a></p></div>');

		for(x=1; x<contents.length; x++){
			Y.get('#'+contents[x]).setStyle('display', 'none');
		}

		initnavi();
	}

	var initnavi = function(e){
		//console.log('initnavi');
		navinodes = Y.all('#switch a');
		navinodes.on('click', handleClick);
		
		registerdiv = Y.one('#register');

		Y.one('#Submitbutt').on('click', registersubmit);
		Y.all('#registerform input.req').on('blur', validateinput);


		initanim();
	}


	var initanim = function(){
		bganim.run();
		boxopen.run();

		//Y.on("click", handleClick, "#switchen");
		//Y.on("click", handleClick, "#switchde");
	}

	var initall = function(){
		/*
		window.setTimeout('inithide()', 250);
		window.setTimeout('initnavi()', 500);
		window.setTimeout('initanim()', 750);
		*/
		inithide();
	}


	Y.on("available", initstyle, '#cont', Y);
	//Y.on("contentready", inithide, '#cont', Y);
	//Y.on("contentready", initnavi, '#switch', Y);
	Y.on("load", initall, window);



});