var Swapper = Class.create(
{
	initialize: function()
	{
		this.items	= new Array();
	},
	addBehaviour: function()
	{
		$$('div.swapper').each(function(element)
		{
			// 
			this.items.push(element.id.split('_').last());
			
			// 
			Event.observe($('swap_' + element.id.split('_').last()), 'click', function(event)
			{
				this.swap(event);
			}.bind(this));
		}.bind(this));
	},
	swap: function(event)
	{
		var elm = event.element();
		var box = elm.id.split('_').last();
		
		this.items.each(function(id)
		{
			if (id == box)
			{
				$('swapbox_' + id).show();
			}
			else
			{
				$('swapbox_' + id).hide();
			}
		}.bind(this));
	}
});

var LoginForm = Class.create(
{
	initialize: function()
	{
		this.node_pass_text = Builder.node('input',{type:'text',name:'password',className:'password',id:'login_password',value:'wachtwoord'});
		this.node_pass_pass = Builder.node('input',{type:'password',name:'password',className:'password',id:'login_password'});
	},
	addBehaviour: function()
	{
		$('login_username').stopObserving();
		$('login_password').stopObserving();

		Event.observe($('login_username'), 'click', function(event)
		{
			this.initUsernameField(event);
		}.bind(this));
		
		Event.observe($('login_username'), 'focus', function(event)
		{
			this.initUsernameField(event);
		}.bind(this));
		
		Event.observe($('login_username'), 'blur', function(event)
		{
			this.initUsernameField(event);
		}.bind(this));
		
		Event.observe($('login_password'), 'focus', function(event)
		{
			this.initPasswordField(event);
		}.bind(this));
		
		Event.observe($('login_password'), 'blur', function(event)
		{
			this.initPasswordField(event);
		}.bind(this));
	},
	initUsernameField: function(event)
	{
		var elm = event.element();
		
		if (event.type == 'click' || event.type == 'focus')
		{
			elm.value = (elm.value == 'gebruikersnaam') ? '' : elm.value;
			elm.focus();
		}
		
		if (event.type == 'blur')
		{
			elm.value = (elm.value == '') ? 'gebruikersnaam' : elm.value;
		}
		
		this.addBehaviour();
	},
	initPasswordField: function(event)
	{
		var elm = event.element();
		
		if (event.type == 'focus')
		{
			if(elm.value == 'wachtwoord' && elm.type == 'text')
			{
				elm.replace(this.node_pass_pass);
				
				$('login_password').focus();
			}
		}
		
		if (event.type == 'blur')
		{
			if(elm.value.length == 0)
			{
				elm.replace(this.node_pass_text);
			}
		}
		
		this.addBehaviour();
	}
});

LoginForm	= new LoginForm();
Swapper		= new Swapper();

Event.observe(window, 'load', function() 
{
	/*** het zoekveld initialiseren we op basis van de focus en blur ***/
	if ($('searchfield'))
	{
		Event.observe($('searchfield'), 'focus', function(event)
		{
			var elm = event.element(); elm.value = (elm.value == 'zoeken...') ? '' : elm.value;
		});
		Event.observe($('searchfield'), 'blur', function(event)
		{
			var elm = event.element(); elm.value = (elm.value == '') ? 'zoeken...' : elm.value;
		});
	};
	
	/*** het loginscherm initialiseren we ***/
	if ($('login_username') && $('login_password'))
	{
		LoginForm.addBehaviour();
	};
	
	/*** opzoek naar eventuele swappers ***/
	Swapper.addBehaviour();
});