Ext.ns('Ext.ux.clv2')

var signUpWindow;
var showSignUp = function(event, cardItem){
	if (!Ext.getCmp('account-signup-window')) {
		signUpWindow = new Ext.ux.clv2.SignUpWindow({
			id: 'account-signup-window',
			cls: 'clv2-window signup-window'
		});
		Ext.apply(signUpWindow, {'cardItem':cardItem});
		var relativePos = findPos(document.getElementById('loginPanel'));
		signUpWindow.setPosition(relativePos[0] + 316, relativePos[1]);
	}
	if(Ext.isIE) signUpWindow.show(); else signUpWindow.show(this);
};

// Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
	emailError: function(val){
		var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/;
		return email.test(val);   
	},
	emailErrorText: 'The email format is incorrect',
	
	zipCodeFormat: function(val){
		var num = /^[0-9]{5}$/;
		return num.test(val);
	},
	zipCodeFormatText: 'Please enter a valid zip code (for example, xxxxx, where "x" represents a number)',
	
	postalCodeFormat: function(val){
		var postalCode = /^[A-Z|a-z]{1}[0-9]{1}[A-Z|a-z]{1}[\s][0-9]{1}[A-Z|a-z]{1}[0-9]{1}$/;
		return postalCode.test(val);
	},
	postalCodeFormatText: 'Please enter a valid postal code (for example, A0A 0A0, where "A" represents a letter, and "0" represents a number)',
	
	passwordNoFormat: function(val){
		var alphanum = /^.{8,20}$/;
		return alphanum.test(val);
	},
	passwordNoFormatText: 'The password should be at least 8 characters long',
	
	password: function(val, field){
		if (field.initialPassField) {
			var pwd = Ext.getCmp(field.initialPassField);
			return (val == pwd.getValue());
		}
		return true;
	},
	passwordText: 'The passwords are different'
});

Ext.ux.clv2.SignUpWindow = function(config){
	Ext.ux.clv2.SignUpWindow.superclass.constructor.call(this, config);
	//Spotlight functionality
	this.on('beforeclose', this.hideSpotlight, this);
	this.on('beforehide', this.hideSpotlight, this);
	this.on('beforeshow', this.showSpotlight, this);
	this.on('collapse', this.showSpotlight, this);
	this.on('move', this.showSpotlight, this);
	this.on('resize', this.showSpotlight, this);
};
Ext.extend(Ext.ux.clv2.SignUpWindow, Ext.Window, {
	//autoHeight: true,
	bodyBorder: false,
	bodyStyle: 'background:#f0f7f2;',
	border: false,
	closeAction: 'close',
	closable: false,
	collapsible: false,
	draggable: true,
	resizable: false,
	minHeight: 639,
	minWidth: 658,
	height: 639,
	width: 658,
	
	hideSpotlight: hideSpotlight,
	showSpotlight: showSpotlight,
	addTitleBarItems: addExtTitleBarItems,
	setElementAction: setExtElementAction,
	
	listeners: {
		show: function(win){
			win.afterShowWindow();
		},
		render: function(win){
			win.afterRenderWindow();
		}
	},
	afterRenderWindow: function(){
		this.addTitleBarItems({title:'Account Sign Up', close:'close window'});
		/**
		*   Content Element of Demo Window.
		*   It uses a Card layout to show only one of the views at any given time. 
		*/
		var card1 = new Ext.ux.clv2.SignUpCard1({id:'signup-card1', window:this});
		var card2 = new Ext.ux.clv2.SignUpCard2({id:'signup-card2', window:this});
		var card3 = new Ext.ux.clv2.SignUpCard3({id:'signup-card3', window:this});
		var signupBodyStyle = 'background:#f0f7f2; border:0 none; height:611px; width:656px;';
		var activeItem = (typeof this.cardItem === 'number' && this.cardItem >= 0 && this.cardItem < 3) ? cardItem : 0;
		this.card = new Ext.layout.CardLayout({
			id: 'signup-card',
			layout: 'card',
			activeItem: activeItem,
			activeCardId: 'signup-card1',
			bodyStyle: signupBodyStyle,
			border: false,
			items: [card1, card2, card3]
		});
		this.add(this.card);
		return;
	},
	afterShowWindow: function(){
		return;
	},
	nextStep: function(config){
		var idx = ++this.card.activeItem;
		if(config) this.card.items[idx].load(config);
		this.changeCard();
	},
	changeCard: function(idx){
		if(!idx) idx = this.card.activeItem;
		var activeItemId = this.card.items[idx].id;
		Ext.getCmp(this.card.id).layout.setActiveItem(activeItemId ? activeItemId : idx);
	}
});
Ext.reg('signUpWindow', Ext.ux.clv2.SignUpWindow);

Ext.ux.clv2.SignUpForm = function(config){
	Ext.ux.clv2.SignUpForm.superclass.constructor.call(this, config);
};
Ext.extend(Ext.ux.clv2.SignUpForm, Ext.form.FormPanel, {
	//xtype: 'form',
	header: false,
	labelAlign: 'right',
	labelWidth: 150,
	allowBlank: false,
	bodyStyle: 'padding-top:5px;',
	cls: 'signup-form',
	border: false,
	labelPad: 7,
	layoutConfig: {
		labelSeparator: ''
	},
	defaults: {
		width: 210,
		msgTarget: 'under'
	},
	defaultType: 'textfield',
	listeners: {
		render: function(form){
			form.addClass('signup-form');
			if(Ext.isIE) form.addClass('signup-form-ie');
		}
	}
});
/*
Ext.ux.clv2.SignUpCombo = function(config){
	// call parent constructor
	Ext.ux.clv2.SignUpCombo.superclass.constructor.call(this, config);
}; // end of Ext.ux.clv2.SignUpCombo constructor
Ext.extend(Ext.ux.clv2.SignUpCombo, Ext.form.ComboBox, {
	fieldLabel: '',
	displayField: 'name',
	emptyText: 'Select',
	mode: 'local',
	editable:false,
	selectOnFocus: true,
	triggerAction: 'all',
	typeAhead: true,
	valueField: 'id'
});
*/
Ext.ux.clv2.SignUpCombo = function(config){
	Ext.ux.clv2.SignUpCombo.superclass.constructor.call(this, config);
}; // end of Ext.ux.clv2.SignUpCombo constructor
Ext.extend(Ext.ux.clv2.SignUpCombo, Ext.form.ComboBox, {
	fieldLabel: '',
	valueField: 'id',
	displayField: 'name',
	emptyText: 'Select',
	mode: 'local',
	editable: false,
	//selectOnFocus: true,
	triggerAction: 'all',
	typeAhead: true,
	allowBlank: false,
	//msgTarget: 'under',
	blankText: 'Please select an option'/*,
	minListWidth: 210,
	width: 210*/
});

Ext.ux.clv2.SignUpCard1 = function(config) {
	// call parent constructor
	Ext.ux.clv2.SignUpCard1.superclass.constructor.call(this, config);
}; // end of Ext.ux.clv2.SignUpCard1 constructor
Ext.extend(Ext.ux.clv2.SignUpCard1, Ext.Panel, {
	bodyStyle: 'background:#f0f7f2; border:0 none;',
	setElementAction: setExtElementAction,
	listeners: {
		show: function(panel){
			panel.afterShowPanel();
		},
		render: function(panel){
			panel.addItems();
		}
	},
	setFooterActions: function(){
		this.setElementAction('linkTerms', 'signup-terms-link', 'showTermsOfServicePanel', 'signup-footer-link-over');
		this.setElementAction('linkPolicy', 'signup-policy-link', 'showPrivacyPolicyPanel', 'signup-footer-link-over');
		this.setElementAction('linkSupport', 'signup-support-link', 'contactSupport', 'signup-footer-link-over');
		this.setElementAction('btnCancel', 'signup-cancel-btn', 'doClose', 'signup-cancel-btn-over');
		this.setElementAction('btnCreate', 'signup-create-btn', 'doCreate', 'signup-create-btn-over');
		this.setElementAction('ckbAgree', 'signup-agree-cb', 'onCkbAgreeClick', '');
	},
	onCkbAgreeClick: function(){
		var ckbAgree = Ext.get('signup-agree-cb');
		var termAgree = Ext.get('alert-agree-terms');
		if (ckbAgree.dom.checked) {			
			termAgree.removeClass('terms-agree-visible');
		}
		return true;
	},	
	contactSupport: function(){
		Ext.Msg.alert('Common Library Support', 'It could show support window.');
	},
	doClose: function(){
		this.window.close();
	},
	doCreate: function(){
		this.el.mask('Sending...');
		this.fieldFirstName.validate();
		this.fieldLastName.validate();
		this.cbLanguage.validate();
		this.cbCountry.validate();
		//Ext.getCmp('radioGender').validate();
		this.cbMonth.validate() ;
		this.cbDay.validate();
		this.cbYear.validate();
		this.cbSexGender.validate();
		this.fieldEmail.validate();
		this.fieldPassword.validate();
		this.fieldPasswordValidation.validate();
		var countrySelect = this.cbCountry.getValue();
		if (countrySelect == 'clv2.language.unitedstates') {
			this.zipField.validate();
		} else {
			if(countrySelect == 'clv2.language.canada'){
				this.postalCode.validate();
			}
		}
		var ckbAgree = Ext.get('signup-agree-cb');
		if (ckbAgree.dom.checked) {
			//var month = this.frmDateOfBirth.items[0].getForm().findField('cbMonth').getValue();
			//var day =   this.frmDateOfBirth.items[1].getForm().findField('cbDay').getValue();
			//var year =  this.frmDateOfBirth.items[2].getForm().findField('cbYear').getValue();
			//var gender = Ext.getCmp('cbSex').value;
			//var country = this.frmBasicInfo.getForm().findField('country').value;
			//var language = this.frmBasicInfo.getForm().findField('language').value;
			var country = this.cbCountry.getValue();
			var language = this.cbLanguage.getValue();
			var month = this.cbMonth.getValue();
			var day =   this.cbDay.getValue();
			var year =  this.cbYear.getValue();
			var gender = this.cbSexGender.getValue();
			month = month < 10 ? '0'+month : month;
			day = day < 10 ? '0'+day : day;
			var date = month+'/'+day+'/'+year;
			var user = {
				//firstName: this.frmBasicInfo.getForm().findField('firstName').getValue(),
				//lastName: this.frmBasicInfo.getForm().findField('lastName').getValue(),
				firstName: this.fieldFirstName.getValue(),
				lastName: this.fieldLastName.getValue(),
				password: this.fieldPassword.getValue(),
				username: this.fieldEmail.getValue()
            }
			var securityUtils = new Ext.clv2.utils.SecurityUtils();
			var id = securityUtils.createUser(user, language, country, date, gender);
			if(id != null && id != undefined){          
				this.window.nextStep({url: 'signUpSuccessful.spr', params: {userName: user.firstName}});
            }
		} else {
			var termAgree = Ext.get('alert-agree-terms');
			termAgree.addClass('terms-agree-visible');
		}
		this.el.unmask();
	},
	afterShowPanel: function(){
		return;
	},
	createDaysArray: function(month, year){
		var daysBirth = [['01'], ['02'], ['03'], ['04'], ['05'], ['06'], ['07'], ['08'], ['09'], ['10'], ['11'], ['12'], ['13'], ['14'], ['15'], ['16'], ['17'], ['18'], ['19'], ['20'], ['21'], ['22'], ['23'], ['24'], ['25'], ['26'], ['27'], ['28']];
		month = parseFloat(month);
		year = parseFloat(year);
		if (month && year) {
			if (month == 2) {
				var leap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
				if (leap) {
					daysBirth.push(['29']);
				}
			} else {
				if (month == 4 || month == 6 || month == 9 || month == 11) {
					daysBirth.push(['29']);
					daysBirth.push(['30']);
				} else {
					daysBirth.push(['29']);
					daysBirth.push(['30']);
					daysBirth.push(['31']);
				}
			}
		} else {
			daysBirth.push(['29']);
			daysBirth.push(['30']);
			daysBirth.push(['31']);
		}
		return daysBirth;
	},
	onMonthSelect: function(cbMonth, record, index){
		var month = this.cbMonth.getValue();
		var year = this.cbYear.getValue();
		var daysBirth = this.createDaysArray(month, year);
		this.cbDay.store.loadData(daysBirth, false);
		var day = parseFloat(this.cbDay.getValue());
		var size = daysBirth.length;
		if (day && size < day) {
			this.cbDay.selectedIndex = size-1;
			this.cbDay.setValue(daysBirth[size-1]);
		}
		return;
	},
	onYearSelect: function(cbYear, record, index){
		var month = this.cbMonth.getValue();
		var year = this.cbYear.getValue();
		var daysBirth = this.createDaysArray(month, year);
		this.cbDay.store.loadData(daysBirth, false);
		var day = parseFloat(this.cbDay.getValue());
		var size = daysBirth.length;
		if (day && size < day) {
			this.cbDay.selectedIndex = size-1;
			this.cbDay.setValue(daysBirth[size-1]);
		}
		return;
	},
	onCountrySelect: function(cbCountry, record, index){
		var countrySelect = this.cbCountry.getValue();
		if (countrySelect == 'clv2.language.unitedstates') {
			this.frmZipPost.removeClass('zip-post-code-hide');
			this.frmPostalCode.addClass('zip-post-code-hide');
		} else {
			if (countrySelect == 'clv2.language.canada') {
				this.frmPostalCode.removeClass('zip-post-code-hide');
				this.frmZipPost.addClass('zip-post-code-hide');
			} else {
				this.frmPostalCode.addClass('zip-post-code-hide');
				this.frmZipPost.addClass('zip-post-code-hide');
			}
		}
		return;
	},
	addItems: function(){
        // TODO Change this labels for ${localized ones}
        var exampleMonths = [
			['Jan', 'January', '01'], ['Feb', 'February', '02'], ['Mar', 'March', '03'],
			['Apr', 'April', '04'], ['May', 'May', '05'], ['Jun', 'June', '06'],
			['Jul', 'July', '07'], ['Aug', 'August', '08'], ['Sep', 'September', '09'],
			['Oct', 'October', '10'], ['Nov', 'November', '11'], ['Dec', 'December', '12']
		];
		var yearsBirth = [];
		//var index = 2009;
        var d = new Date();
		var index = d.getYear();
		if(!Ext.isIE) index += 1900;
        for(index; index > 1899; index--){
            yearsBirth.push([index+'']);
        }
		
		var sexGender = [['M','Male'], ['F','Female']];
		
		var storeCountrys = new Ext.data.JsonStore({
			url: 'i18n.spr',
			baseParams: {basename:'i18n_countries'},
			root: 'rows',
			id: 'id',
			fields: ['id', 'name'],
			autoLoad: true,
			sortInfo: {field: 'name', direction: 'ASC'}
		});
		
		var storeLanguages = new Ext.data.JsonStore({
			url: 'i18n.spr',
			baseParams: {basename:'i18n_languages'},
			root: 'rows',
			id: 'id',
			fields: ['id', 'name'],
			autoLoad: true,
			sortInfo: {field: 'name', direction: 'ASC'}
		});
		
		var storeMonths = new Ext.data.SimpleStore({
			fields: ['abbr', 'name', 'index'],
			data: exampleMonths
		});
		
		var storeDaysBirth = new Ext.data.SimpleStore({
			fields: ['name'],
			data: this.createDaysArray("","")
		});
		
		var storeYearsBirth = new Ext.data.SimpleStore({
			fields: ['name'],
			data: yearsBirth
		});
		
		var storeSexGender = new Ext.data.SimpleStore({
			fields: ['id', 'name'],
			data: sexGender
		});
		
		this.cbMonth = new Ext.ux.clv2.SignUpCombo({
			//id: 'cbMonth',
			store: storeMonths,
			tpl: '<tpl for="."><div ext:qtip="{name}. {description}" class="x-combo-list-item">{name}</div></tpl>',
			fieldLabel: 'Date of Birth:',
			emptyText: 'Month',
			valueField: 'index',
			blankText: 'Please select a month birth',
			width: 110
		});
		this.cbMonth.on('select', this.onMonthSelect, this);
		
		this.cbDay = new Ext.ux.clv2.SignUpCombo({
			//id: 'cbDay',
			store: storeDaysBirth,
			fieldLabel: '/',
			emptyText: 'Day',
			valueField: 'name',
			blankText: 'Please select a day birth',
			width: 45
		});
		
		this.cbYear = new Ext.ux.clv2.SignUpCombo({
			//id: 'cbYear',
			store: storeYearsBirth,            
			fieldLabel: '/',
			emptyText: 'Year',
			valueField: 'name',
			blankText: 'Please select a year birth',
			width: 65
		});
		this.cbYear.on('select', this.onYearSelect, this);
		
		this.cbSexGender = new Ext.ux.clv2.SignUpCombo({
			//id: 'cbSex',
			store: storeSexGender,
			fieldLabel: 'Gender',
			blankText: 'Please select a gender'
		});
		var frmMonth = new Ext.ux.clv2.SignUpForm({
			//id: 'frmMonth',
			defaults: {
				width: 110
			},
			width: Ext.isIE6 ? 283 : '',
			items: [this.cbMonth]
		});
		
		var frmDay = new Ext.ux.clv2.SignUpForm({
			//id: 'frmDay',
			labelWidth: 10,
			defaults: {
				width: 45
			},
			width: Ext.isIE6 ? 80 : '',
			items: [this.cbDay]
		});
		
		var frmYear = new Ext.ux.clv2.SignUpForm({
			//id: 'frmYear',
			labelWidth: 10,
			defaults: {
				width: 65
			},
			width: Ext.isIE6 ? 100 : '',
			items: [this.cbYear]
		});
		
		this.frmDateOfBirth = {
			//id: 'frmDateOfBirth',
			layout: 'column',
			border: false,
			items: [frmMonth, frmDay, frmYear]
		};
		
		this.formGender = new Ext.ux.clv2.SignUpForm({
			//id: 'formGender',
			items: [this.cbSexGender]
		});
		
		this.cbCountry = new Ext.ux.clv2.SignUpCombo({
			//id: 'country',
			store: storeCountrys,
			fieldLabel: 'Country:',
			name: 'country',
			blankText: 'Please select a country'
	    });
		this.cbCountry.on('select', this.onCountrySelect, this);
		
		this.cbLanguage = new Ext.ux.clv2.SignUpCombo({
			//id: 'language',
			store: storeLanguages,
			fieldLabel: 'Native Language:',
			name: 'language',
			blankText: 'Please select a language'
		});
		
		this.zipField = new Ext.form.TextField({
			//id: 'zip',
			fieldLabel: 'Zip Code',
			name: 'zip',
			allowBlank: false,
			vtype: 'zipCodeFormat',
			blankText: 'Please enter your zip code',
			msgTarget: 'under',
			width: 210
		});
		
		this.postalCode = new Ext.form.TextField( {
			//id: 'post',
			fieldLabel: 'Postal Code',
			name: 'post',
			allowBlank: false,
			blankText: 'Please enter your postal code',
			msgTarget: 'under',
			width: 210,
			vtype: 'postalCodeFormat'
		});
		
		this.frmZipPost = new Ext.ux.clv2.SignUpForm({
			//id: 'frmZipPost',
            cls: 'signup-form zip-post-code-hide',
			items: [this.zipField]
		});
		
		this.frmPostalCode = new Ext.ux.clv2.SignUpForm({
            //id: 'frmPostalCode',
            cls: 'signup-form zip-post-code-hide',
			items: [this.postalCode]
		});
		/*
		Ext.apply(this.frmZipPost, {'zipField':this.zipField});        
        Ext.apply(this.frmPostalCode, {'postalField':this.postalCode});
		Ext.apply(this.cbCountry, {'zipForm':this.frmZipPost, 'zipField':this.zipField, 'frmPostalCode':this.frmPostalCode, 'postalField':this.postalCode});
		*/
		this.fieldFirstName = new Ext.form.TextField({
			//id: 'firstName',
			fieldLabel: 'First Name:',
			name: 'firstName',
			allowBlank: false,
			msgTarget: 'under',
			blankText: ' Please provide name'
		});
		
		this.fieldLastName = new  Ext.form.TextField({
			//id: 'lastName',
            fieldLabel: 'Last Name:',
			name: 'Last',
			allowBlank: false,
			msgTarget: 'under',
			blankText: ' Please enter your last name'
		});

        this.frmBasicInfo = new Ext.ux.clv2.SignUpForm({
			//id: 'frmBasicInfo',
			items: [this.fieldFirstName, this.fieldLastName, this.cbLanguage, this.cbCountry]
		});
		
		this.fieldEmail = new Ext.form.TextField({
			fieldLabel: 'Email Address:',
			name: 'email',
			allowBlank: false,
			inputType: 'text',
			msgTarget: 'under',
			vtype: 'emailError',
			blankText: ' Please provide email'
		});
		
		this.fieldPassword = new Ext.form.TextField({
			id: 'pass',
			fieldLabel: 'Password:',
			name: 'pass',
			inputType: 'password',
			allowBlank: false,
			blankText: 'The password cannot be left blank',
			msgTarget: 'under',
			vtype: 'passwordNoFormat'
		});
        
        this.fieldPasswordValidation = new Ext.form.TextField({
			fieldLabel: 'Confirm Password:',
			name: 'pass-cfrm',
			allowBlank: false,
			inputType: 'password',
			blankText: 'The password cannot be left blank',
			vtype: 'password',
			msgTarget: 'under',
			initialPassField: 'pass' // id of the initial password field
		});
		var frmContactInfo = new Ext.ux.clv2.SignUpForm({
			defaults: {
				width: 210
			},
			items: [this.fieldEmail, this.fieldPassword, this.fieldPasswordValidation]
		});
		
		var signUpHeader = new Ext.Panel({
			//id: 'signUpHeader',
			autoLoad: {url: 'signUp.spr', params: 'linkName=signUpHeader'},
			bodyStyle: 'background: #f2f9fc; border-bottom:1px solid #b4bab5;',
			border: false,
			header: false,
			height: 76
		});
		
		var signUpFooter = new Ext.Panel({
			//autoLoad:{url: 'signUpFooter.html', params: 'linkName=signUpFooter'},
			bodyStyle: 'margin-left:157px;',
			border: false,
			header: false,
			//height: 125
			listeners: {
				render: function(panel){
					panel.afterRenderPanel();
				}
			},
			parent: this,
			afterRenderPanel: function(){
				var mgr = signUpFooter.getUpdater();
				mgr.on("update", this.parent.setFooterActions, this.parent);
				mgr.update({
					url: "signUp.spr",
					params: {
						linkName: "signUpFooter"
					}
				});
			}
		});
		
		var card1Body = new Ext.Panel({
			//id: 'signUpBody',
			bodyStyle: 'border: 1px solid #dfe9ec; padding-top:10px;',
			autoScroll: true,
			height: 505,
			items: [this.frmBasicInfo, this.frmZipPost, this.frmPostalCode, this.frmDateOfBirth, this.formGender, frmContactInfo, signUpFooter]
		});
		
		var signUpBody = new Ext.Panel({
			bodyStyle: 'padding:15px; background: transparent;',
			autoScroll: false,
			border: false,
			//height: 535,
			items: [card1Body]
		});
		
		this.add(signUpHeader, signUpBody);
	}
});


Ext.ux.clv2.SignUpCard2 = function(config) {
	Ext.ux.clv2.SignUpCard2.superclass.constructor.call(this, config);
};
Ext.extend(Ext.ux.clv2.SignUpCard2, Ext.Panel, {
	bodyStyle: 'background:#f0f7f2; border:0 none;',
	height: 610,	
	setElementAction: setExtElementAction,
	
	listeners: {
		show: function(panel){
			panel.afterShowPanel();
		},
		render: function(panel){
			panel.addItems();
		}
	},
	afterShowPanel: function(){
		return;
	},
	addItems: function(){
		return;
	}
});


Ext.ux.clv2.SignUpCard3 = function(config) {
	// call parent constructor
	Ext.ux.clv2.SignUpCard3.superclass.constructor.call(this, config);
}; // end of Ext.ux.clv2.SignUpCard3 constructor
Ext.extend(Ext.ux.clv2.SignUpCard3, Ext.Panel, {
	bodyStyle: 'background:#f0f7f2; border:0 none;',
	height: 610,
	
	setElementAction: setExtElementAction,
	
	listeners: {
		show: function(panel){
			panel.afterShowPanel();
		},
		render: function(panel){
			panel.addItems();
		}
	},
	afterShowPanel: function(){
		return;
	},
	addItems: function(){
		return;
	}
});