Ext.namespace('mm.register.tmpl.base');
mm.register.tmpl.base = '<div class="window mm-register-base"> <div class="topline"><div class="close button"></div></div> <div class="bottom"> <div class="content"> <div class="headline"> <h2>Register</h2> </div> <div class="form"> <form action="/page/register/register"> <div class="formline screenname"> <div class="label"> <label>screenname</label> </div> <div class="input"> <input type="text" /> </div> <div class="comment"><span>your screenname is public visible</span></div> </div> <div class="formline mail"> <div class="label"> <label>email</label> </div> <div class="input"> <input type="text" /> </div> <div class="comment"></div> </div> <div class="formline password"> <div class="label"> <label>password</label> </div> <div class="input"> <input type="password" /> </div> <div class="comment"></div> </div> <div class="formline password_repeat"> <div class="label"> <label>repeat password</label> </div> <div class="input"> <input type="password" /> </div> <div class="comment"><span>minimum length must be 6</span></div> </div> <div class="formline termsofuse"> <div class="label"> <label>I agree to the <a href="#">terms of use</a> and <a href="#">privacy policy</a></label> </div> <div class="checkbox checkbox_unselected"> <input type="checkbox" /> </div> <div class="comment"></div> </div> <div class="buttonline"> <div class="button">submit</div> </div> </form> </div> </div> </div> </div>';
Ext.namespace('mm.register.base');
mm.register.base.construct = function(autoconstruct){
	this.templates = {base:mm.register.tmpl.base};
	this.el = null;
	this.overlay = null;
	this.constructor = function()
	{
		var template = new Ext.XTemplate(this.templates.base);
		this.overlay = $('<div>').addClass('overlay').css({
			width: $(document).width(),
			height: $(document).height()
		});
		this.el = $(template.apply({}));
		$('body').append(this.overlay);
		$('body').append(this.el);

		var left = ($(window).width()	- this.el.width()) / 2;
		var top = ($(window).height()	- this.el.height()) / 2;
		this.el.css({
			left: left,
			top: top
		});

		
		
	
		this.el.find('.topline .close').bind('click', this.hide.createDelegate(this));

		this.el.find('.form .formline .checkbox').bind('click', this.checkboxClick.createDelegate(this));

		this.el.find('.buttonline .button').bind('click', function(){
			
			var screenname = this.el.find('.form .screenname input').val();
			var password = this.el.find('.form .password input').val();
			var password_repeat = this.el.find('.form .password_repeat input').val();
			var email = this.el.find('.form .mail input').val();
			var termsofuse = this.el.find('.form .termsofuse .checkbox').hasClass('checkbox_selected');

			var mailreg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

			var screenname_valid = screenname.length>=6;
			var password_valid = password == password_repeat && (password.length >= 6);
			var email_valid = !(mailreg.test(email) == false);
			
			if ( ! screenname_valid)
			{
				this.el.find('.form .screenname label').addClass('err');
			}
			else
			{
				this.el.find('.form .screenname label').removeClass('err');
			}
			if ( ! password_valid)
			{
				this.el.find('.form .password label').addClass('err');
				this.el.find('.form .password_repeat label').addClass('err');
			}
			else
			{
				this.el.find('.form .password label').removeClass('err');
				this.el.find('.form .password_repeat label').removeClass('err');
			}
			if ( ! email_valid)
			{
				this.el.find('.form .mail label').addClass('err');
			}
			else
			{
				this.el.find('.form .mail label').removeClass('err');
			}

			if ( ! termsofuse)
			{
				this.el.find('.form .termsofuse label').addClass('err');
				this.el.find('.form .termsofuse a').addClass('err');
			}
			else
			{
				this.el.find('.form .termsofuse label').removeClass('err');
				this.el.find('.form .termsofuse a').removeClass('err');
			}

			if (termsofuse && email_valid && password_valid && screenname_valid )
			{
				var mask = new mm.loadmask.base.construct({
					parent: this.el
				});
				this.rpc_register(email, password, screenname, function(conn,success,response){
					this.mask.hide();
					var obj = Ext.util.JSON.decode(response.responseText);
					if (obj.data.success)
					{
						var config = {
								parent: this.parent, 
								text: {
									title: __('Registration success'),
									text: __('Please check your emails to finish your registration.'),
									buttontext: 'ok'
								},
								callback: function()
								{
									this.parent.hide();
								}.createDelegate(this)
							};

						new mm.messagebox.base.construct(config);
					}
					else
					{
						new mm.messagebox.base.construct({parent: this.parent, text:{
							title: __('Registration failed'),
							text: __('registration failed with message')+': "' + obj.message + '"',
							buttontext: 'ok'
						}});
					}
				}.createDelegate({mask:mask, parent: this}));
			}
		}.createDelegate(this));
		this.el.find('.termsofuse').disableSelection();
		this.el.find('.buttonline').disableSelection();
		
	};
	this.checkboxClick = function(){
		var checkbox = this.el.find('.form .formline .checkbox');
		if (checkbox.hasClass('checkbox_selected'))
		{
			checkbox.removeClass('checkbox_selected').addClass('checkbox_unselected');
		}else if(checkbox.hasClass('checkbox_unselected'))
		{
			checkbox.removeClass('checkbox_unselected').addClass('checkbox_selected');
		}
		
	};
	this.hide = function()
	{
		if (this.el != null)
		{
			this.el.hide();
			this.el.remove();
		}
		if (this.overlay != null)
		{
			this.overlay.hide();
			this.overlay.remove();
		}
	};
	if (typeof autoconstruct != 'undefined' && autoconstruct)
	{
		this.constructor();
	}
};
mm.register.base.construct.prototype.domname = 'mm-register-base';
mm.register.base.construct.prototype.namespace = mm.register.base;
mm.register.base.construct.prototype.rpc_register = function(){
	var last = arguments.length-1;
	var callback = arguments[last];
	var args = [];
	for(var i=0; i<arguments.length; i++)
	{
		args[i] = arguments[i];	
	}

	var params = {data:args.slice(0, args.length-1)}
	Ext.Ajax.request({
		url: 'http://www.my-musix.com/rpc/register/base/register',
		callback: callback,
		jsonData: params
	});
}