/** 
 * BONBONKAKKU forms are defined here.
 * 
 * @author Mika Vallittu
 */

if(typeof BONBONKAKKU == "undefined"){
	// If BONBONKAKKU is already defined, the existing 
	// BONBONKAKKU object will not be overwritten.
	var BONBONKAKKU = {};
}

//helper functions
BONBONKAKKU.isPhone = function(strString){
    var strValidChars = "0123456789.-+()";
    var strChar;
    var blnResult = true;
        
    if (strString.length == 0) return false;        
    //  test strString consists of valid characters listed above
    for (i = 0; i < strString.length && blnResult == true; i++){
        strChar = strString.charAt(i);
        if (strValidChars.indexOf(strChar) == -1) {
            blnResult = false;
        }
    }
    return blnResult;
}

BONBONKAKKU.isNumeric = function(strString){
    var strValidChars = "0123456789";
    var strChar;
    var blnResult = true;
        
    if (strString.length == 0) return false;        
    //  test strString consists of valid characters listed above
    for (i = 0; i < strString.length && blnResult == true; i++){
        strChar = strString.charAt(i);
        if (strValidChars.indexOf(strChar) == -1) {
            blnResult = false;
        }
    }
    return blnResult;
}

BONBONKAKKU.isValidChar = function(str){
    var invalidChars = "'\"*~´`&$";
    var ichar;
    var result = true;
    
    if (str.length == 0) return false;
    
    for (i = 0; i < str.length && result == true; i++){
        ichar = str.charAt(i);
        if (invalidChars.indexOf(ichar) > -1) {
            result = false;
        }
    }
    
    return result;
}

/**
 * Validation handler for password.
 * (At least 4 characters for any password)
 * @type Object
 */
var VTypePasswd = function(){
	var passwd = /.{4,}/;
	return {
		'passwd' : function(v){
			return passwd.test(v);
		},		
		'passwdText' :  'Password should have at least 4 characters',
        'passwdMask' : /./i	
	};
}();
// extend native VTypes with custom VTypePasswd
Ext.apply(Ext.form.VTypes, VTypePasswd);

/**
 *  
 */
var VTypePhone = function(){	
	return {
		'phone' : function(str) {
           return BONBONKAKKU.isPhone(str);
       },		
		'phoneText' :  'Invalid phone number format',
        'phoneMask' : /./i	
	};
}();
// extend native VTypes with custom VTypePhone
Ext.apply(Ext.form.VTypes, VTypePhone);

var VTypeDName = function(){	
	return {
		'dname' : function(str) {
           return BONBONKAKKU.isValidChar(str);
       },		
		'dnameText' :  "Invalid character ('\"*~´`&$) present!",
        'dnameMask' : /./i	
	};
}();
// extend native VTypes with custom VTypePhone
Ext.apply(Ext.form.VTypes, VTypeDName);

var VTypeDHeight = function(){
    return {
		'dheight' : function(h){
            if(!BONBONKAKKU.isNumeric(h)){
                return false;
            }    
			h = parseInt(h);
            return (h>0 && h<301);
		},		
		'dheightText' :  'Allowed range is 1 - 300 cm',
        'dheightMask' : /./i	
	};
}();
// extend native VTypes with custom VTypePhone
Ext.apply(Ext.form.VTypes, VTypeDHeight);

/**
 * Validation handler for password confirmation.
 * 
 * This function will be passed the current field value and expected to 
 * return boolean true if the value is valid or a string error message 
 * if invalid.
 * @type Function
 * @param {String} value The confimation password value
 */
BONBONKAKKU.confirmPasswordValidator = function(value){
	var p1 = Ext.get("passwd1").dom.value;	// the original password
	if (p1!=value) {
		return "Confirm does not match with the password"
    } else {
		return true;
	}
};

/**
 * Html message to be displayed after user has succesfully
 * inserted all data and submitted the form. 
 * @type String
 */
BONBONKAKKU.registrationCompletedMessage = 
	"<div class='reg-complete'><p><b>Thank you for registering to Bon Bon Kakku!</b></p><br/> \
	<p><span style='text-decoration:underline;'>We have sent a message to your email.</span> \
	The message includes a hyperlink that allows you to verify your account. \
	After verification you can start to use the Bon Bon Kakku services \
	and become part of the live Bon Bon Kakku community.<p> \
	<br/><br/><a href='./' style='text-decoration:underline;'>Go Back To Main Page</a></div>";

/**
 * Html message to be displayed after user has succesfully
 * inserted all data and submitted the form. 
 * @type String
 */
BONBONKAKKU.editCompletedMessage = 
	"<div class='reg-complete'><p><b>Your Account Information Has Been Updated!</b></p><br/> \
	<p><p> \
	<br/><br/><a href='./' style='text-decoration:underline;'>Go Back</a></div>";

/**
 * Html message to be displayed after user has submitted
 * the password reminder form.
 * @type String
 */
BONBONKAKKU.passwordReminderMessage =
	"<div class='reg-complete'><p><b>New Bon Bon Kakku Password Has Been Send To Your Email</b></p><br/> \
	<p><span style='text-decoration:underline;'>We have sent a message to your email.</span> \
	The message includes your new password. \
	With this new password you can start to use the Bon Bon Kakku services. \
	It is recommeded that you change this new password after first login.<p> \
	<br/><br/><a href='./' style='text-decoration:underline;'>Go Back To Main Page</a></div>";


/* DEPRECATED */
BONBONKAKKU.sendVerificationMail = function(username){
	/*
	Ext.Ajax.request({
		url:"php/send_mail.php?username="+username,
		method:"get"
	});
	*/
};

BONBONKAKKU.customerEditAccountForm_Load = function(){
	var formPanel = BONBONKAKKU.forms.customerEditAccountForm;
	formPanel.form.load({
		url: "php/load_customer_data.php",
		method: "post",
		success: function(){
			formPanel.expand();
			//console.info("Data loaded!");
		}
	});	
}

BONBONKAKKU.designerEditAccountForm_Load = function(){
	var formPanel = BONBONKAKKU.forms.designerEditAccountForm;
	formPanel.form.load({
		url: "php/load_designer_data.php",
		method: "post",
		success: function(){
			formPanel.expand();
			//console.info("Data loaded!");
		}
	});	
}

BONBONKAKKU.customerEditAccountFormToDesigner = function(){
    // destroy old form
    BONBONKAKKU.forms.customerEditAccountForm.destroy();
    Ext.get('menu').dom.innerHTML = "";
    // render form
	BONBONKAKKU.forms.customerEditAccountFormToDesigner.render('menu');
    //
    var formPanel = BONBONKAKKU.forms.customerEditAccountFormToDesigner;
	formPanel.form.load({
		url: "php/load_customer_data.php",
		method: "post",
		success: function(){
			formPanel.expand();
			//console.info("Data loaded!");
		}
	});
}


BONBONKAKKU.forms = {
		/**
		 * The Select Profile Form. Displayed when user
		 * first enters the registration page and only
		 * redirects to actual forms.
		 * @type Object
		 */
		selectProfileForm : new Ext.FormPanel({
		        labelWidth: 125, 
		        frame:true,
		        title: 'Bon Bon Kakku Registration - Select Profile  (Step 1/2)',
		        bodyStyle:'padding:6px;',
		        width: 640,                
				//height: 459,
		
		        items: [ {
		            xtype:'fieldset',
		            title: 'Select Profile',
                    autoHeight:true,
                    html: "<p style='font-size:11px;'>\
                            <p style='padding:6px;color:black;font-family:\"Courier New\"'>Instructions:</p>\
                            <p style='padding:6px;color:black;font-family:\"Courier New\"'>We would like everyone participating in bonbonkakku.com to be designers and buyers of these marvellous fabrics, so please, choose option 'Both'.</p>\
                            <p style='padding:6px;color:black;font-family:\"Courier New\"'>The difference between 'Both' and 'Customer' is the information given when registering. The minimum required amount of information is in option 'Customer'. 'Designer' and 'Both' have little or no difference in given information</p>\
                            <p style='padding:6px;color:black;font-family:\"Courier New\"'>If you are a designer and may be interested in buying some fabrics, then choose 'Designer', you will then be listed as such in our system.</p>\
                            <p style='padding:6px;color:black;font-family:\"Courier New\"'>---</p>\
                            <p style='padding:6px;color:black;font-family:\"Courier New\"'><b>NOTE to users outside EU</b>: Although registration is open for everyone, buying fabrics is currently only available for addresses within European Union (EU).</p>\
                           </p>",
		            items :[{
							xtype:'radio',
		                    fieldLabel: 'Customer',
		                    name: 'profile',
							id: 'bonbon-customer'
		                },{
							xtype:'radio',	
		                    fieldLabel: 'Designer',
							name: 'profile',
		                    id: 'bonbon-designer'							
		                },{
							xtype:'radio',	
		                    fieldLabel: 'Both',
							name: 'profile',
		                    id: 'bonbon-both',
							checked: true							
		                }
		            ]
				},{
		            xtype:'fieldset',
		            title: 'Terms of Use',
                    autoHeight:true,
                    html: "<p style='padding:6px;font-size:11px;black:gray;font-family:\"Courier New\"'>I have read and accepted the Bon Bon Kakku <a id='bb-terms' style='text-decoration:underline' onclick='window.open(\"terms_of_use.html\")'>terms of use</a>.</p>",
                    items :[{
							xtype:'checkbox',
		                    fieldLabel: 'I accept the terms',
                            labelStyle: 'width:150px',
		                    name: 'terms',
							id: 'bonbon-terms',
							checked: false
		                }
		            ]
                    }],
				
				buttons: [{
                        text:'Back To Shop',
                        handler:function(){
                            window.location.href = "./";
                        }    
                    },{
		            text: 'Continue',
					handler: function(){
                        var terms = document.getElementById("bonbon-terms").checked;
                        if(!terms){
                            Ext.Msg.show({
    						   title: 'You have not accepted the terms of use!',
    						   msg: 'You have to read and accept the terms of use to be able to register into Bon Bon Kakku service.',
    						   width: 300,
    						   buttons: Ext.Msg.OK,
    						   animEl: 'bb-terms',
    						   icon: Ext.Msg.INFO
    						});
                        } else {
    						var profile = document.getElementById("bonbon-customer").checked ? 
                                            "customer" : 
                                            (document.getElementById("bonbon-designer").checked 
                                                ? "designer" : 
                                                "both");
    						//alert('Value: ' + profile);
    						if(profile == "customer"){
    							BONBONKAKKU.forms.selectProfileForm.hide();							
    							BONBONKAKKU.forms.customerRegistrationForm.render('menu');
    							BONBONKAKKU.forms.customerRegistrationForm.expand(false);
    							BONBONKAKKU.forms.customerRegistrationForm.show();	// for back button
    						}	
    						if(profile == "designer"){
    							BONBONKAKKU.forms.selectProfileForm.hide();	
                                BONBONKAKKU.forms.designerRegistrationForm.setTitle('Bon Bon Kakku Registration - Designer Information (Step 2/2)');						
    							BONBONKAKKU.forms.designerRegistrationForm.render('menu');
    							BONBONKAKKU.forms.designerRegistrationForm.expand(false);
    							BONBONKAKKU.forms.designerRegistrationForm.show();	// for back button
    							
                                var user = document.getElementById("designer-username");
                                var nick = document.getElementById("designer-nickname");
                                user.onblur = function(){
                                    //if(user.value.length > 2)
                                        nick.value = user.value;    
                                }
    						} 
                            if(profile == "both"){
    							BONBONKAKKU.forms.selectProfileForm.hide();	
                                BONBONKAKKU.forms.designerRegistrationForm.setTitle('Bon Bon Kakku Registration - Information (Step 2/2)');						
    							BONBONKAKKU.forms.designerRegistrationForm.render('menu');
    							BONBONKAKKU.forms.designerRegistrationForm.expand(false);
    							BONBONKAKKU.forms.designerRegistrationForm.show();	// for back button
    							//
                                var user = document.getElementById("designer-username");
                                var nick = document.getElementById("designer-nickname");
                                user.onblur = function(){
                                    //if(user.value.length > 2)
                                        nick.value = user.value;    
                                }

    						}
                        }
					}
		        }]
			}),	
		
		/**
		 *	
		 */
		passwordReminderForm : new Ext.FormPanel({
			labelWidth: 95, 
		    frame:true,
		    title: 'BonBonKakku- Password Reminder',
		    bodyStyle:'padding:5px',
		    width: 640,	
			items: [{
		 		xtype:'fieldset',
	            title: 'Insert Email',
				defaultType: 'textfield',
				height:85,
				html: "<p>New password will be generated and sent to the inserted email.<br>Password is to be changed after first usage.</p>",
	            items :[{
	                    fieldLabel: 'Email',
						width: 200,
						id: 'passwd-email',
	                    name: 'email',
						vtype: "email",
						allowBlank:false
	                }
	            ]
			}],
				buttons: [{
                        text:'Back To Shop',
                        handler:function(){
                            window.location.href = "./";
                        }    
                    }, {
		            text: 'Send',
					handler: function(){
						BONBONKAKKU.forms.passwordReminderForm.form.submit({
								method: "post",
								url: "php/passwd_reminder.php",
								clientValidation: true,
								success: function(){
									//var myForm = arguments[0];
									var action = arguments[1];									
									var panel = new Ext.Panel({
										title: 'BonBonKakku Password Reminder',
        								bodyStyle:'padding:35px',
        								width: 640,
        								height: 260,
        								html: BONBONKAKKU.passwordReminderMessage
									});	
																
									if(action.result.success == true) {										
										// show panel
										Ext.get('menu').dom.innerHTML = "";
										panel.render('menu');	
										// debug									
										//console.dir(action.result);	
									} 
								}
						});		
					}
				}]	
			}),		
	
		/**
		 * The registration form for customers.
		 * @type Object
		 */
		customerRegistrationForm : new Ext.FormPanel({
	        labelWidth: 125, // label settings here cascade unless overridden
	        frame:true,
			collapsed:true,
			//collapsible:true,
	        title: 'Bon Bon Kakku Registration - Customer Information (Step 2/2)',
	        bodyStyle:'padding:5px 5px 0',
	        width: 640,
			//height: 459,
	
	        items: [{
				xtype:'fieldset',
	            collapsible: false,
	            title: 'Username and Password',
	            autoHeight:true,
	            defaults: {width: 210},
	            defaultType: 'textfield',
	            collapsed: false,
			html:"<hr><p style='color:gray;font-family:\"Courier New\"'>Username is to have at least 3 characters, no scandinavian letters allowed.\
                        The password is to have at least 4 characters. Retype your password to \"Confirm Password\" input to\
                        check it.</p>",
	            items :[{
	                    fieldLabel: 'Username',
						id:"customer-username",
	                    name: 'username',
				minLength:3,
	                    allowBlank:false
	                },{
	                    fieldLabel: 'Password',
						id:'passwd1',
	                    name: 'password',
						inputType: 'password',
						vtype: 'passwd',
						allowBlank:false					
	                }
					,{
	                    fieldLabel: 'Confirm Password',
						id:'passwd2',
	                    name: 're-password',
						inputType: 'password',
						vtype: 'passwd',
						allowBlank:false,
						validator: BONBONKAKKU.confirmPasswordValidator
	                }
	            ]
			}, {
				xtype:'fieldset',
	            title: 'Information',
	            autoHeight:true,
				defaults: {width: 210},
	            defaultType: 'textfield',
			 html:"<hr><p style='color:gray;font-family:\"Courier New\"'>\
                        This contact information is required for you to be able to buy and order fabrics from the shop.\
                        </p>",
	            items :[{
	                    fieldLabel: 'First Name',
	                    name: 'first_name',
	                    allowBlank:false
	                },{
	                    fieldLabel: 'Last Name',
	                    name: 'last_name',
						allowBlank:false							
	                },{
	                    fieldLabel: 'Street Address',
	                    name: 'street_address',
						allowBlank:false
	                }
					,{
	                    fieldLabel: 'Zipcode',
	                    name: 'zipcode',
						allowBlank:false
	                },{
	                    fieldLabel: 'City',
	                    name: 'city',
						allowBlank:false
	                },{
	                    fieldLabel: 'Country',
	                    name: 'country',
                        width:193,
                        minListWidth:208,
                        xtype: 'combo',
                        editable:false,
                        store: new Ext.data.SimpleStore({
                            fields: ['countryName'],
                            data : Bonbon.data.countries // from all-countries.js
                        }),
                        displayField:'countryName',
                        typeAhead: true,
                        mode: 'local',
                        triggerAction: 'all',
                        emptyText:'Select a country...',
                        selectOnFocus:true,
						allowBlank:false
	                },{
	                    fieldLabel: 'Email',
						id: 'customer-email',
	                    name: 'email',
						vtype: "email",
						allowBlank:false
	                }, {
	                    		fieldLabel: 'Phone Number',
	                    		name: 'phone_number',
                        		vtype: 'phone',
					allowBlank:false
	                }
	            ]
		}],
	
	        buttons: [{
				text: 'Back',
				handler: function(){
					BONBONKAKKU.forms.customerRegistrationForm.hide();
					BONBONKAKKU.forms.selectProfileForm.show();
				}
			},{
	            text: 'Submit',
				handler: function(){
					var email = Ext.getDom("customer-email").value;				
					Ext.MessageBox.confirm('Confirm', 'Are you sure email: <b>'+email+'</b> is correct?', function(btn){
						if(btn == 'yes') {
							// submit form
							BONBONKAKKU.forms.customerRegistrationForm.form.submit({
								method: "post",
								url: "php/save_customer_registration_form.php",
								clientValidation: true,
								success: function(){
									//var myForm = arguments[0];
									var action = arguments[1];									
									var panel = new Ext.Panel({
										title: 'Bon Bon Kakku Registration Completed',
        								bodyStyle:'padding:35px',
        								width: 640,
        								height: 260,
        								html: BONBONKAKKU.registrationCompletedMessage
									});	
																
									if(action.result.success) {	
										Ext.get('menu').dom.innerHTML = "";
										panel.render('menu');	
										// debug									
										//console.log(action.result);	
									} else {
										// display error message..
                                        Ext.get('menu').dom.innerHTML = "Error occurred in submit. Try again <a href='register.html'>here</a>.";
										//console.log(action.result);	
									}
									
								}
							});
						} 
						if(btn == 'no') {
							var fieldSet_Information = BONBONKAKKU.forms.customerRegistrationForm.getComponent(1);
							var email = fieldSet_Information.getComponent(6); 
							email.markInvalid("Make sure the email is correct");
						}	
					});
				}
	        }]
	    }),
		
		/**
		 * The form to edit customer account info.
		 * @type Object
		 */
		customerEditAccountForm : new Ext.FormPanel({
	        labelWidth: 125, // label settings here cascade unless overridden
	        frame:true,
			collapsed:false,
			collapsible:true,
	        title: 'Bon Bon Kakku Accounts - Edit My Customer Account',
	        bodyStyle:'padding:5px 5px 0',
	        width: 640,
			//height: 459,
	
	        items: [{
				xtype:'fieldset',
	            collapsible: true,
	            title: 'My Username',
	            autoHeight:true,
	            defaults: {width: 210},
	            defaultType: 'textfield',
	            collapsed: false,
	            items :[{
	                    fieldLabel: 'Username',
						id:"customer-username",
	                    name: 'username',
	                    allowBlank:false
	                }
	            ]
			}, {
				xtype:'fieldset',
	            collapsible: true,
	            title: 'Change Password',
	            autoHeight:true,
	            defaults: {width: 210},
	            defaultType: 'textfield',
	            collapsed: true,
	            items :[{
	                    fieldLabel: 'New Password',
						id:'passwd1',
	                    name: 'password',
						inputType: 'password',
						vtype: 'passwd',
						allowBlank:true					
	                }
					,{
	                    fieldLabel: 'Confirm Password',
						id:'passwd2',
	                    name: 're-password',
						inputType: 'password',
						vtype: 'passwd',
						allowBlank:true,
						validator: BONBONKAKKU.confirmPasswordValidator
	                }
	            ]
			}, {
				xtype:'fieldset',
	            title: 'My Information',
	            autoHeight:true,
				defaults: {width: 210},
	            defaultType: 'textfield',
	            items :[{
	                    fieldLabel: 'First Name',
	                    name: 'first_name',
	                    allowBlank:false
	                },{
	                    fieldLabel: 'Last Name',
	                    name: 'last_name',
						allowBlank:false							
	                },{
	                    fieldLabel: 'Street Address',
	                    name: 'street_address',
						allowBlank:false
	                }
					,{
	                    fieldLabel: 'Zipcode',
	                    name: 'zipcode',
						allowBlank:false
	                },{
	                    fieldLabel: 'City',
	                    name: 'city',
						allowBlank:false
	                },{
	                    fieldLabel: 'Country*',
	                    name: 'country',
                        width:210,
                        minListWidth:208,
                        xtype: 'combo',
                        editable:false,
                        store: new Ext.data.SimpleStore({
                            fields: ['countryName'],
                            data : Bonbon.data.countries // from all-countries.js
                        }),
                        displayField:'countryName',
                        typeAhead: true,
                        mode: 'local',
                        triggerAction: 'all',
                        emptyText:'Select a country...',
                        selectOnFocus:true,
						allowBlank:false
	                },{
	                    fieldLabel: 'Email',
						id: 'customer-email',
	                    name: 'email',
						vtype: "email",
						allowBlank:false
	                }, {
	                    fieldLabel: 'Phone Number',
	                    name: 'phone_number',
                           vtype: 'phone',
						allowBlank:false
	                	}

	            ]
			}, {
				xtype:'fieldset',
				id:'change_account_type',
	            title: 'Change Account Type',
				collapsible:true,
				collapsed:true, 
				height:80, 
				html:'<br>By clicking the button you have to insert new required designer specific information.',        
	            items :[{
						xtype:'button',
						text:'Change Account Type To Designer',
						disabled:false,
						handler:function(){
                            BONBONKAKKU.customerEditAccountFormToDesigner();
                        }
					}
	            ]
			}],
	
	        buttons: [{
				text: 'Back',
				handler: function(){
                     window.location = "./";
				}
			},{
	            text: 'Submit Changes',
				handler: function(){
					BONBONKAKKU.forms.customerEditAccountForm.form.submit({
						method: "post",
						url: "php/update_customer_data.php",
						clientValidation: true,
						success: function(){

                            var panel = new Ext.Panel({
								title: 'BonBonKakku Customer Account Edited',
								bodyStyle:'padding:35px',
								width: 640,
								height: 260,
								html: BONBONKAKKU.editCompletedMessage
							});
                            
                            Ext.get('menu').dom.innerHTML = "";
                            panel.render('menu');	
                        }
					});
				}
	        }]
	    }),
		
		/**
		 * The registration form for designers.
		 * @type Object
		 */
		designerRegistrationForm : new Ext.FormPanel({
	        labelWidth: 125, // label settings here cascade unless overridden
	        frame:true,
			collapsed:true,
	        title: 'Bon Bon Kakku Registration - Designer Information (2/2)',
	        bodyStyle:'padding:5px',
	        width: 640,
			//height: 459,
			fileUpload: true,
	
	        items: [{
				xtype:'fieldset',
	            collapsible: false,
	            title: 'Username and Password',
	            autoHeight:true,
	            defaults: {width: 210},
	            defaultType: 'textfield',
	            collapsed: false,
                html:"<hr><p style='color:gray;font-family:\"Courier New\"'>Username is to have at least 3 characters, no scandinavian letters allowed.\
                        The password is to have at least 4 characters. Retype your password to \"Confirm Password\" input to\
                        check you typed it correctly.</p>",
	            items :[{
	                    fieldLabel: 'Username*',
						id:"designer-username",
	                    name: 'username',
                        minLength:3,
	                    allowBlank:false
	                },{
	                    fieldLabel: 'Password*',
						id:'passwd1',
	                    name: 'password',
						inputType: 'password',
						vtype: 'passwd',
						allowBlank:false					
	                }
					,{
	                    fieldLabel: 'Confirm Password*',
						id:'passwd2',
	                    name: 're-password',
						inputType: 'password',
						vtype: 'passwd',
						allowBlank:false,
						validator: BONBONKAKKU.confirmPasswordValidator
	                }
	            ]
			}, {
				xtype:'fieldset',
	            title: 'Nickname',
	            autoHeight:true,
				defaults: {width: 180},
	            defaultType: 'textfield',
                html:"<hr><p style='color:gray;font-family:\"Courier New\"'>\
                        The nickname is shown to public (not your real name). You can change this to whatever artist name. Username is used by default.\
                        </p>",
	            items :[{
	                    fieldLabel: 'Nickname*',
                        id:"designer-nickname",
	                    name: 'nickname',
	                    allowBlank:false
	                }
	            ]
			}, {
				xtype:'fieldset',
	            title: 'Information',
	            autoHeight:true,
				defaults: {width: 210},
	            defaultType: 'textfield',
                html:"<hr><p style='color:gray;font-family:\"Courier New\"'>\
                        This contact information is required for you to be able to buy and order fabrics from the shop. Notice that phone number is required.\
                        </p>",
	            items :[{
	                    fieldLabel: 'First Name*',
	                    name: 'first_name',
	                    allowBlank:false
	                },{
	                    fieldLabel: 'Last Name*',
	                    name: 'last_name',
						allowBlank:false							
	                },{
	                    fieldLabel: 'Street Address*',
	                    name: 'street_address',
						allowBlank:false
	                }
					,{
	                    fieldLabel: 'Zipcode*',
	                    name: 'zipcode',
						allowBlank:false
	                },{
	                    fieldLabel: 'City*',
	                    name: 'city',
						allowBlank:false
	                },{
	                    fieldLabel: 'Country*',
	                    name: 'country',
                        width:193,
                        minListWidth:208,
                        xtype: 'combo',
                        editable:false,
                        store: new Ext.data.SimpleStore({
                            fields: ['countryName'],
                            data : Bonbon.data.countries // from all-countries.js
                        }),
                        displayField:'countryName',
                        typeAhead: true,
                        mode: 'local',
                        triggerAction: 'all',
                        emptyText:'Select a country...',
                        selectOnFocus:true,
						allowBlank:false
	                },{
	                    fieldLabel: 'Email*',
						id: 'designer-email',
	                    name: 'email',
						vtype: "email",
						allowBlank:false
	                },{
	                    fieldLabel: 'Phone Number*',
	                    name: 'phone_number',
                        vtype: 'phone',
						allowBlank:false
	                }
	            ]
			}, {
				xtype:'fieldset',
	            collapsible: true,
	            title: 'Public Profile',
	            autoHeight:true,
	            defaults: {width: 595},
	            defaultType: 'textfield',
	            collapsed: false,
	            items: [{
		            xtype:'tabpanel',
		            activeTab: 0,
		            defaults:{autoHeight:true, bodyStyle:'padding:5px'}, 
		            items:[{
		                title:'Photo Gallery',
		                layout:'form',
						labelWidth: 85,
		                defaults: {width: 140},
		                defaultType: 'textfield',
						html: "<hr><p style='color:gray;font-family:\"Courier New\"'>Upload your personal image here in JPG format. Size 524x366px gives the best results. Thumbnail images will then be scaled downwards accordingly.</p> \
								<!--<p>(**) Upload your CV in PDF format.</p>-->",		
		                items: [{
		                    fieldLabel: 'Image',
		                    name: 'image_file',
							msgTarget:'qtip',
							inputType: "file"
		                }, /*{
		                    fieldLabel: 'CV**',
		                    name: 'cv_file',
							msgTarget:'qtip',
							inputType: "file"
		                },*/ {
							inputType:'hidden',
							name:'MAX_FILE_SIZE',
							value:'512000'
						}]
		            }, /*
		            {
		                cls:'x-plain',
		                title:'CV',
		                layout:'fit',
		                items: [{
							name:'designer_cv',
		                    xtype:'htmleditor',		                    
		                    fieldLabel:'CV',
							allowBlank:true
		                }]
		            }, {
		                cls:'x-plain',
		                title:'Workhistory',
		                layout:'fit',
		                items: [{
							name:'designer_work_history',
		                    xtype:'htmleditor',		                    
		                    fieldLabel:'Workhistory',
							allowBlank:true
		                }]
		            }, 
		            */{
		                cls:'x-plain',
		                title:'About Me',
		                layout:'fit',
		                items: [{
							name:'designer_about_myself',
		                    xtype:'htmleditor',		                    
		                    fieldLabel:'About Me',
                            heigth:290,
							allowBlank:true,
                            enableFormat : true,    
                            enableFontSize : false,    
                            enableColors : false,    
                            enableAlignments : false,    
                            enableLists : true,    
                            enableSourceEdit : true,    
                            enableLinks : true,    
                            enableFont : false,
                            defaultFont: 'Courier New'
		                }]
		            }
		            
		            ]
		        }
	            ]
			}],
	
	        buttons: [{
				text: 'Back',
				handler: function(){
					BONBONKAKKU.forms.designerRegistrationForm.hide();
					BONBONKAKKU.forms.selectProfileForm.show();
				}
			},{
	            text: 'Submit',
				handler: function(){
					var email = Ext.getDom("designer-email").value;				
					Ext.MessageBox.confirm('Confirm', 'Are you sure email: <b>'+email+'</b> is correct?', function(btn){
						if(btn == 'yes') {
							// submit form
							BONBONKAKKU.forms.designerRegistrationForm.form.submit({
								method: "post",
								url: "php/save_designer_registration_form.php",
								clientValidation: true,
								success: function(){
									//var myForm = arguments[0];
									var action = arguments[1];									
									var panel = new Ext.Panel({
										title: 'Bon Bon Kakku Registration Completed',
        								bodyStyle:'padding:35px',
        								width: 640,
        								height: 260,
        								html: BONBONKAKKU.registrationCompletedMessage
									});	
																	
									if(action.result.success) {							
										// 
										Ext.get('menu').dom.innerHTML = "";
										panel.render('menu');
										// debug
										//console.log(action.result);										
									} else {
										// display error message...
                                        Ext.get('menu').dom.innerHTML = "Error occurred in submit. Try again <a href='register.html'>here</a>.";
										//debug
                                        //console.log(action.result);
                                        //console.log(action.result.success);
                                        //console.dir(action.result);
									}									
								}
							});
						} 
						if(btn == 'no') {
							var fieldSet_Information = BONBONKAKKU.forms.designerRegistrationForm.getComponent(2);
							var email = fieldSet_Information.getComponent(6); 
							email.markInvalid("Make sure the email is correct");
						}	
					});
				}	
	        }]
	    }),
		
		/**
		 * The form to edit designer account info.
		 * @type Object
		 */
		designerEditAccountForm : new Ext.FormPanel({
	        labelWidth: 125, // label settings here cascade unless overridden
	        frame:true,
			collapsed:false,
			collapsible:false,
	        title: 'Bon Bon Kakku Accounts - My Designer Account',
	        bodyStyle:'padding:5px 5px 0',
	        width: 640,
			//height: 459,
			fileUpload: true,
	
	        items: [{
				xtype:'fieldset',
	            collapsible: true,
	            title: 'My Username',
	            autoHeight:true,
	            defaults: {width: 210},
	            defaultType: 'textfield',
	            collapsed: false,
	            items :[{
	                    fieldLabel: 'Username*',
						id:"customer-username",
	                    name: 'username',
	                    allowBlank:false
	                }
	            ]
			}, {
				xtype:'fieldset',
	            collapsible: true,
	            title: 'Change Password',
	            autoHeight:true,
	            defaults: {width: 210},
	            defaultType: 'textfield',
	            collapsed: true,
	            items :[{
	                    fieldLabel: 'New Password',
						id:'passwd1',
	                    name: 'password',
						inputType: 'password',
						vtype: 'passwd',
						allowBlank:true					
	                }
					,{
	                    fieldLabel: 'Confirm Password',
						id:'passwd2',
	                    name: 're-password',
						inputType: 'password',
						vtype: 'passwd',
						allowBlank:true,
						validator: BONBONKAKKU.confirmPasswordValidator
	                }
	            ]
			}, {
				xtype:'fieldset',
	            collapsible: true,
	            title: 'My Nickname',
	            autoHeight:true,
	            defaults: {width: 210},
	            defaultType: 'textfield',
	            collapsed: false,
	            items :[{
	                    fieldLabel: 'Nickname*',
						id:"customer-nick",
	                    name: 'nickname',
	                    allowBlank:false
	                }
	            ]
			},{
				xtype:'fieldset',
	            title: 'My Information',
	            autoHeight:true,
                collapsible: true,
                collapsed: false,
				defaults: {width: 210},
	            defaultType: 'textfield',
	            items :[{
	                    fieldLabel: 'First Name*',
	                    name: 'first_name',
	                    allowBlank:false
	                },{
	                    fieldLabel: 'Last Name*',
	                    name: 'last_name',
						allowBlank:false							
	                },{
	                    fieldLabel: 'Street Address*',
	                    name: 'street_address',
						allowBlank:false
	                }
					,{
	                    fieldLabel: 'Zipcode*',
	                    name: 'zipcode',
						allowBlank:false
	                },{
	                    fieldLabel: 'City*',
	                    name: 'city',
						allowBlank:false
	                },{
	                    fieldLabel: 'Country*',
	                    name: 'country',
                        width:210,
                        minListWidth:208,
                        xtype: 'combo',
                        editable:false,
                        store: new Ext.data.SimpleStore({
                            fields: ['countryName'],
                            data : Bonbon.data.countries // from all-countries.js
                        }),
                        displayField:'countryName',
                        typeAhead: true,
                        mode: 'local',
                        triggerAction: 'all',
                        emptyText:'Select a country...',
                        selectOnFocus:true,
						allowBlank:false
	                },{
	                    fieldLabel: 'Email*',
						id: 'customer-email',
	                    name: 'email',
						vtype: "email",
						allowBlank:false
	                },{
	                    fieldLabel: 'Phone Number*',
	                    name: 'phone_number',
                        vtype: 'phone',
						allowBlank:false
	                }
	            ]
			}, {
				xtype:'fieldset',
	            collapsible: true,
	            title: 'Public Profile',
	            autoHeight:true,
	            defaults: {width: 595},
	            defaultType: 'textfield',
	            collapsed: false,
	            items: [{
		            xtype:'tabpanel',
		            activeTab: 0,
		            defaults:{autoHeight:true, bodyStyle:'padding:5px'},					
		            items:[{
		                title:'My Photo Gallery',
		                layout:'form',
						labelWidth: 85,
		                defaults: {width: 140},
		                defaultType: 'textfield',
						html: "<hr><p>(*) Upload your personal image here in JPG format. Size 524x366px gives the best results. Images will be scaled down accordingly.</p> \
								<!--<p>(**) Upload your CV in PDF format.</p>--> \
								<br/>Current image(s):<br/><br/><div id='user-upload-image'></div>",	
									
		                items: [{
		                    fieldLabel: 'New Image*',
		                    name: 'image_file',
							msgTarget:'qtip',
							inputType: "file"
		                },/* {
		                    fieldLabel: 'CV**',
		                    name: 'cv_file',
							msgTarget:'qtip',
							inputType: "file"
		                },*/ {
							inputType:'hidden',
							name:'MAX_FILE_SIZE',
							value:'512000'
						}]						
					},
                    /*	
		            {
		                cls:'x-plain',
		                title:'CV',
		                layout:'fit',
		                items: [{
							id:'designer_cv',
							name:'designer_cv',
		                    xtype:'htmleditor',		                    
		                    
							allowBlank:true
		                }]
		            }
                    , {
		                cls:'x-plain',
		                title:'Workhistory',
		                layout:'fit',
		                items: [{
							id:'designer_work_history',
							name:'designer_work_history',
		                    xtype:'htmleditor',		                    
							allowBlank:true
		                }]
		            }, 
		            */{
		                cls:'x-plain',
		                title:'About Me',
		                layout:'fit',
		                items: [{
							id:'designer_about_myself',
							name:'designer_about_myself',
		                    xtype:'htmleditor',	
                            heigth:290,
                            enableFormat : true,    
                            enableFontSize : false,    
                            enableColors : false,    
                            enableAlignments : false,    
                            enableLists : true,    
                            enableSourceEdit : true,    
                            enableLinks : true,    
                            enableFont : false,
                            defaultFont: 'Courier New'
		                }]
		            }
		            
		            ]
		        }
	            ]
			} /*, {
				xtype:'fieldset',
				id:'change_account_type',
	            title: 'Change Account Type',
				collapsible:true,
				collapsed:true, 
				height:80, 
				//html:'<br>By clicking the button you have to insert new required designer specific information.',        
	            items :[{
						xtype:'button',
						text:'Change Account Type To Customer',
                        disabled:true,
						handler:function(){                            
                        }
					}
	            ]
			}*/],
	
	        buttons: [{
				text: 'Back',
				handler: function(){
					//
                    window.location = "./";
				}
			},{
	            text: 'Submit Changes',
				handler: function(){
                    //console.log('trying to edit designer!!');
                    //
					BONBONKAKKU.forms.designerEditAccountForm.form.submit({
						method: "post",
						url: "php/update_designer_data.php",
						clientValidation: true,
						success: function(){
                            var panel = new Ext.Panel({
								title: 'Bon Bon Kakku Designer Account Edited',
								bodyStyle:'padding:35px',
								width: 640,
								height: 260,
								html: BONBONKAKKU.editCompletedMessage
							});
                            
                            Ext.get('menu').dom.innerHTML = "";
                            panel.render('menu');
                        }
					});
				}
	        }]
	    }),
        
        /**
         * Form to change customer account to designer account.
         */
        customerEditAccountFormToDesigner: new Ext.FormPanel({
	        labelWidth: 125, // label settings here cascade unless overridden
	        frame:true,
			collapsed:false,
			collapsible:false,
	        title: 'Bon Bon Kakku Accounts - My Designer Account',
	        bodyStyle:'padding:5px 5px 0',
	        width: 640,
			//height: 459,
			fileUpload: true,
	
	        items: [{
				xtype:'fieldset',
	            collapsible: true,
	            title: 'My Username',
	            autoHeight:true,
	            defaults: {width: 210},
	            defaultType: 'textfield',
	            collapsed: false,
	            items :[{
	                    fieldLabel: 'Username',
						id:"customer-username",
	                    name: 'username',
	                    allowBlank:false
	                }
	            ]
			}, {
				xtype:'fieldset',
	            collapsible: true,
	            title: 'Change Password',
	            autoHeight:true,
	            defaults: {width: 210},
	            defaultType: 'textfield',
	            collapsed: true,
	            items :[{
	                    fieldLabel: 'New Password',
						id:'passwd1',
	                    name: 'password',
						inputType: 'password',
						vtype: 'passwd',
						allowBlank:true					
	                }
					,{
	                    fieldLabel: 'Confirm Password',
						id:'passwd2',
	                    name: 're-password',
						inputType: 'password',
						vtype: 'passwd',
						allowBlank:true,
						validator: BONBONKAKKU.confirmPasswordValidator
	                }
	            ]
			}, {
				xtype:'fieldset',
	            collapsible: false,
	            title: 'My Nickname',
	            autoHeight:true,
	            defaults: {width: 210},
	            defaultType: 'textfield',
	            collapsed: false,
	            items :[{
	                    fieldLabel: 'Nickname',
						id:"customer-nick",
	                    name: 'nickname',
	                    allowBlank:false
	                }
	            ]
			},{
				xtype:'fieldset',
	            title: 'My Information',
	            autoHeight:true,
				defaults: {width: 210},
	            defaultType: 'textfield',
	            items :[{
	                    fieldLabel: 'First Name',
	                    name: 'first_name',
	                    allowBlank:false
	                },{
	                    fieldLabel: 'Last Name',
	                    name: 'last_name',
						allowBlank:false							
	                },{
	                    fieldLabel: 'Street Address',
	                    name: 'street_address',
						allowBlank:false
	                }
					,{
	                    fieldLabel: 'Zipcode',
	                    name: 'zipcode',
						allowBlank:false
	                },{
	                    fieldLabel: 'City',
	                    name: 'city',
						allowBlank:false
	                },{
	                    fieldLabel: 'Country',
	                    name: 'country',
						allowBlank:false
	                },{
	                    fieldLabel: 'Email',
						id: 'customer-email',
	                    name: 'email',
						vtype: "email",
						allowBlank:false
	                },{
	                    fieldLabel: 'Phone Number',
	                    name: 'phone_number',
                        vtype: 'phone',
						allowBlank:false
	                }
	            ]
			}, {
				xtype:'fieldset',
	            collapsible: true,
	            title: 'Optional Information',
	            autoHeight:true,
	            defaults: {width: 595},
	            defaultType: 'textfield',
	            collapsed: false,
	            items: [{
		            xtype:'tabpanel',
		            activeTab: 0,
		            defaults:{autoHeight:true, bodyStyle:'padding:5px'},					
		            items:[{
		                title:'My Photo Gallery',
		                layout:'form',
						labelWidth: 85,
		                defaults: {width: 140},
		                defaultType: 'textfield',
						html: "<hr><p>(*) Upload your personal image here in JPG format. Size 524x366px gives the best results. Images will then be scaled downwards accordingly.</p> \
								<!--<p>(**) Upload your CV in PDF format.</p> \
								<br/>Current image:<br/><div id='user-upload-image'></div>-->",	
									
		                items: [{
		                    fieldLabel: 'Image*',
		                    name: 'image_file',
							msgTarget:'qtip',
							inputType: "file"
		                }, /*{
		                    fieldLabel: 'CV**',
		                    name: 'cv_file',
							msgTarget:'qtip',
							inputType: "file"
		                }, {
							inputType:'hidden',
							name:'MAX_FILE_SIZE',
							value:'500000'
						},*/ {
							inputType:'hidden',
							name:'change_to_designer',
							value:'1'
						}]						
					},
                    /*	
		            {
		                cls:'x-plain',
		                title:'CV',
		                layout:'fit',
		                items: [{
							id:'designer_cv',
							name:'designer_cv',
		                    xtype:'htmleditor',		                    
		                    
							allowBlank:true
		                }]
		            }
                    , {
		                cls:'x-plain',
		                title:'Workhistory',
		                layout:'fit',
		                items: [{
							id:'designer_work_history',
							name:'designer_work_history',
		                    xtype:'htmleditor',		                    
							allowBlank:true
		                }]
		            }, 
		            */{
		                cls:'x-plain',
		                title:'About Me',
		                layout:'fit',
		                items: [{
							id:'designer_about_myself',
							name:'designer_about_myself',
		                    xtype:'htmleditor',	
                            enableFormat : true,    
                            enableFontSize : false,    
                            enableColors : false,    
                            enableAlignments : false,    
                            enableLists : true,    
                            enableSourceEdit : true,    
                            enableLinks : true,    
                            enableFont : false,
                            defaultFont: 'Courier New'
		                }]
		            }
		            
		            ]
		        }
	            ]
			}, {
				xtype:'fieldset',
				id:'change_account_type',
	            title: 'Change Account Type',
				collapsible:true,
				collapsed:true, 
				height:80, 
				html:'<br><span style=\'color:gray;\'>This feature is not currently active.</span>',        
	            items :[{
						xtype:'button',
						text:'Change Account Type To Customer',
                        disabled:true,
						handler:function(){                            
                        }
					}
	            ]
			}],
	
	        buttons: [{
				text: 'Back',
				handler: function(){
					//
                    window.location = "./";
				}
			},{
	            text: 'Edit Profile',
				handler: function(){
                    //console.log('trying to edit designer!!');
                    //console.log(this.form.el);
                    //var vals = BONBONKAKKU.forms.customerEditAccountFormToDesigner.form.getValues(true);
                    //console.log(vals);
                    //
					BONBONKAKKU.forms.customerEditAccountFormToDesigner.form.submit({
						method: "post",
						//params:vals,
						url: "php/update_designer_data.php",
						clientValidation: true,
						success: function(){
                            var panel = new Ext.Panel({
								title: 'Bon Bon Kakku Designer Account Edited',
								bodyStyle:'padding:35px',
								width: 640,
								height: 260,
								html: BONBONKAKKU.editCompletedMessage
							});
                            
                            Ext.get('menu').dom.innerHTML = "";
                            panel.render('menu');
                        }
					});
					//
					//
				}
	        }]
	    }),
		
		/**
		 * 
		 */
		submitDesignForm : new Ext.FormPanel({
		        labelWidth: 105, 
				header:false,
		        /*title: 'Submit Design',*/
		        bodyStyle:'padding:6px;border:none;background:#E5E5E5',
		        /*width: 380,
				height: 186,*/                
				fileUpload: true,				
					
		        items: [{
		            xtype: 'fieldset',
					autoHeight:true,
		            title: 'Bon Bon Kakku Templates',				
					defaults: {width: 300},
					html: "<p style='font-size:11px;color:gray;'>\
                        Templates (.psd files) for fitting your designs into 'real' environment can be found here. \
                        Select one of the templates and open it in PhotoShop and embed your design.\
                        Then save the image as gif or jpg. You can then use this image when you upload the template image at the bottom of this form.\
                        To download a template <b>right-click the image and press Save Target As</b>...<br/><br/>\
                        <a href='imgs/psd/bbk_template1.psd'><img title='template1.psd' style='border:1px solid gray;width:98px;' src='imgs/psd/bbk_template1.gif'></a>\
                        <a href='imgs/psd/bbk_template2.psd'><img title='template2.psd' style='border:1px solid gray;width:98px;' src='imgs/psd/bbk_template2.gif'></a>\
                        <a href='imgs/psd/bbk_template3.psd'><img title='template3.psd' style='border:1px solid gray;width:98px;' src='imgs/psd/bbk_template3.gif'></a>\
                        <a href='imgs/psd/bbk_template4.psd'><img title='template4.psd' style='border:1px solid gray;width:98px;' src='imgs/psd/bbk_template4.gif'></a>\
                        <a href='imgs/psd/bbk_template5.psd'><img title='template5.psd' style='border:1px solid gray;width:98px;' src='imgs/psd/bbk_template5.gif'></a>\
                        </p>",
		            items: null
				},{
		            xtype: 'fieldset',
					autoHeight:true,
		            title: 'Fabric information',
					defaultType: 'textfield',
					defaults: {width: 300},
					html: "<hr><p style='font-size:11px;color:gray;'>The name of the design is to have 3 characters at minimum. Description will be shown under the fabric image.</p>",
		            items :[{
							fieldLabel: "Name of design",
							name: "design_file_name",
							allowBlank:false,
							minLength:3,
							invalidText: "This field should have at least 3 characters"
						},{
							fieldLabel: "Description",
							xtype: "textarea",
							height:75,
							name: "design_desc",
							allowBlank:false
						},
						{
							inputType: "hidden",
							name:"username",
							value:""
						}
		            ]
				},{
		            xtype: 'fieldset',
					autoHeight:true,
		            title: 'Fabric Metadata',
					collapsible:false,
					collapsed:false,
					defaultType: 'textfield',
					defaults: {width: 300},
					html: "<hr><p style='font-size:11px;color:gray;'>Type the fabric metadata here. This information is optional.</p>",
		            items :[{
							fieldLabel: "Metadata",
							xtype: "textarea",
							height:60,
							name: "design_metadata",
							allowBlank:true
						}
		            ]
				},{
		            xtype: 'fieldset',
					autoHeight:true,
		            title: 'Fabric Images',
					collapsible:false,
					collapsed:false,
					defaultType: 'textfield',
                    labelWidth:160,
					defaults: {width: 200},
					html: "<hr><p style='font-size:11px;color:gray;'>Select the images for your design from the local PC. For each design there must exist \
								three image files (gif or jpg). The first image is for the thumbnail (165x200px) and the second image is the templated version (524x366px).\
                                Bon Bon Kakku templates can be downloaded from the top. The third image is to give preview of the fabric in the actually used printing ratio.\
                                Give the wanted actual height of the preview image in centimeters (the fabric width is always assumed to be 150cm), we use this information \
                                to generate preview of what the fabric would look like in 150x300 cm area. </p>",
		            items :[{
		                    fieldLabel: 'Thumbnail',
		                    name: 'design_image_file',
							inputType: "file",                            
							width:200,                            
							allowBlank:false
		                },{
		                    fieldLabel: 'Template',
		                    name: 'design_image_file2',
							inputType: "file",
							width:200,
                            disabled:false,
							allowBlank:false
		                },{
		                    fieldLabel: 'Preview',
		                    name: 'design_image_file3',
							inputType: "file",
							width:200,                            
							allowBlank:false
		                },{
                            xtype:'textfield',
                            fieldLabel:'Height of design (cm)',
                            name:'design_repeat_height',
                            width:30,
                            allowBlank:false,
                            vtype:'dheight'
                        }, {
							inputType:'hidden',
							name:'MAX_FILE_SIZE',
							value:'512000'
						}
		            ]
				}/*,{
		            xtype: 'fieldset',
					autoHeight:true,
		            title: 'Preview Image',
					collapsible:false,
					collapsed:false,
					defaultType: 'textfield',
					defaults: {width: 300},
					html: "<hr><p style='font-size:11px;color:gray;'>---</p>",
		            items :[{
		                    fieldLabel: 'Preview',
		                    name: 'design_image_file3',
							inputType: "file",
							width:200,                            
							allowBlank:false
		                },{
                            xtype:'textfield',
                            fieldLabel:'Height of design',
                            width:30,
                            allowBlank:false,
                            vtype:'dheight'
                        }						
		            ]
				}*/],
				
				buttons: [{
		            text: 'Submit',
					handler: function(){
						BONBONKAKKU.forms.submitDesignForm.form.submit({
							method: "post",
							url: "php/upload_design.php",
							clientValidation: true,
							success: function(){
								//var action = arguments[1];								
								//console.log(action.result); 
                                                               
								Ext.Msg.show({
								   title: 'Upload Succesfull.',
								   msg: 'The fabric you submitted is now in the vote!',
								   width: 300,
								   buttons: Ext.Msg.OK,
								   animEl: 'content',
								   icon: Ext.Msg.INFO
								});								
								Ext.get("content").load({
									url: "latest_fabrics.php",
									scripts: true
								});								
							},
                            failure: function(){
                                //var action = arguments[1];
                                //console.log(action.result);
                                //console.log(action.result.errors);
                                
                                Ext.Msg.show({
								   title: 'Upload Failed.',
								   msg: 'Problems occurred during submission. Check the form for any errors.',
								   width: 300,
								   buttons: Ext.Msg.OK,
								   animEl: 'content',
								   icon: Ext.Msg.ERROR
							    }); 
                            }
						});
					}
		        }]
			}),
            
        /**
		 * 
		 */
		submitDesignForm2 : new Ext.FormPanel({
		        labelWidth: 115, 
				header:false,
		        /*title: 'Submit Design',*/
		        bodyStyle:'padding:6px;border:none;',
		        width: 520,
				/*height: 186,*/                
				fileUpload: true,				
					
		        items: [{
		            xtype: 'fieldset',
					autoHeight:true,
		            title: '1. Fabric information',
					defaultType: 'textfield',
					defaults: {width: 300},                    
					html:"<hr class='dashed-line-submit'>",
		            items :[{
							fieldLabel: "Name of design*",
							name: "design_file_name",
                            value:"Type the fabric name here.",
                            selectOnFocus:true,
							allowBlank:false,
                            vtype: 'dname',
							minLength:3,
							invalidText: "This field should have at least 3 characters"
						},{
							fieldLabel: "Description",
							xtype: "textarea",
                            value: "Type information about your design here. Description will be shown on the site together with your design. (optional)",
                            selectOnFocus:true,
							height:75,
							name: "design_desc",
							allowBlank:true
						},{
							fieldLabel: "Metadata",
							xtype: "textarea",
                            value: "Tag your fabric with few descriptive words. This data is used when fabrics are searched with keywords. (optional)",
							selectOnFocus:true,
                            height:60,
							name: "design_metadata",
							allowBlank:true
						},{
							inputType: "hidden",
							name:"username",
							value:""
						}
		            ]
				}, {
		            xtype: 'fieldset',
					autoHeight:true,
		            title: '2. Upload fabric images',
					collapsible:false,
					collapsed:false,
					defaultType: 'textfield',
                    labelWidth:240,					
					html:"<hr class='dashed-line-submit'>",
		            items :[{
		                    fieldLabel: 'a. Thumbnail image* (165x200px)',
		                    name: 'design_image_file',
							inputType: "file",                            
							width:200,                            
							allowBlank:false
		                },{
		                    fieldLabel: 'b. Template image* (524x366px)',
		                    name: 'design_image_file2',
							inputType: "file",
							width:200,
                            disabled:false,
							allowBlank:false
		                },{
		                    fieldLabel: 'c. Preview image* (width 183px)',
		                    name: 'design_image_file3',
							inputType: "file",
							width:200,                            
							allowBlank:false
		                }/*,{
                            xtype:'textfield',
                            fieldLabel:'Height of design (max. 300cm)',
                            name:'design_repeat_height',
                            width:30,
                            allowBlank:false,
                            vtype:'dheight'
                        }*/,{
							inputType:'hidden',
							name:'MAX_FILE_SIZE',
							value:'512000'
						}
		            ]
				},{
		            xtype: 'fieldset',                    
                    bodyStyle:"padding-bottom:12px;",					
		            title: '3. Submit the design',
                    items:[{
                        xtype:'button',
                        text:'Submit',
                        ctCls:"mun-submit-btn",
                        handler: function(){                            
                            
    						BONBONKAKKU.forms.submitDesignForm2.form.submit({
    							method: "post",
    							url: "php/upload_design.php",
    							clientValidation: true,
    							success: function(){
                                    //var action = arguments[1];								
							        //console.log(action.result); 
    								Ext.Msg.show({
    								   title: 'Upload Succesfull.',
    								   msg: 'The fabric you submitted is now in the vote!',
    								   width: 300,
    								   buttons: Ext.Msg.OK,
    								   animEl: 'content',
    								   icon: Ext.Msg.INFO
    								});								
    								Ext.get("content").load({
    									url: "latest_fabrics.php",
    									scripts: true
    								});								
    							},
                                failure: function(){ 
                                    Ext.Msg.show({
    								   title: 'Upload Failed.',
    								   msg: 'Problems occurred during submission. Check the form for any errors.',
    								   width: 300,
    								   buttons: Ext.Msg.OK,
    								   animEl: 'content',
    								   icon: Ext.Msg.ERROR
    							    }); 
                                }
    						});
    						
    					}
                    }]
                }
                ],
				
				buttons: [/*{
		            text: 'Submit',
					handler: function(){
						BONBONKAKKU.forms.submitDesignForm2.form.submit({
							method: "post",
							url: "php/upload_design.php",
							clientValidation: true,
							success: function(){
								//var action = arguments[1];								
								//console.log(action.result); 
                                                               
								Ext.Msg.show({
								   title: 'Upload Succesfull.',
								   msg: 'The fabric you submitted is now in the vote!',
								   width: 300,
								   buttons: Ext.Msg.OK,
								   animEl: 'content',
								   icon: Ext.Msg.INFO
								});								
								Ext.get("content").load({
									url: "latest_fabrics.php",
									scripts: true
								});								
							},
                            failure: function(){
                                //var action = arguments[1];
                                //console.log(action.result);
                                //console.log(action.result.errors);
                                
                                Ext.Msg.show({
								   title: 'Upload Failed.',
								   msg: 'Problems occurred during submission. Check the form for any errors.',
								   width: 300,
								   buttons: Ext.Msg.OK,
								   animEl: 'content',
								   icon: Ext.Msg.ERROR
							    }); 
                            }
						});
					}
		        }*/]
			}),
            
            /**
             * 
             */
            leaveCommentForm : new Ext.FormPanel({
		        labelWidth: 75, 
		        header:false,
                cls:"leave-comment-area",
		        bodyStyle:'padding:15px;border:0px;',
		                        
                items:   [{
                    xtype:'panel',
                    baseCls:'bonbon-panel',
                    header:true,
                    title:'Leave a comment (in english)',
                    items: [{
						fieldLabel: "Comment",
						xtype: "textarea",                        
                        fieldClass:'bonbon-textarea',
                        id:"bonbon-comment-box",
						height: 130,
                        width: 473,
						name: "fabric_comment",
						allowBlank:false
					},{
                        xtype: "textfield",
						inputType: "hidden",
                        id:"fabric_id_comment",
						name:"fabric_id",
						value:""
					}]
                }],
		        
				
				buttons: [{
		            text: 'Cancel',
					handler: function(){
                        var id = Ext.get("fabric_id_comment").dom.value;
                         Ext.get("design-comments").load({
                    		url: "fabric_comments.php?fabric_id="+id
                    	});
				    }
                },{
		            text: 'Submit',
					handler: function(){
                        BONBONKAKKU.forms.leaveCommentForm.form.submit({
    						method: "post",
    						url: "php/leave_comment.php",
    						clientValidation: true,
    						success: function(){
                                var id = Ext.get("fabric_id_comment").dom.value;
                                Ext.get("bonbon-comment-box").dom.value = ""; // empty textarea
                                // update comments feed
                                //Ext.get("design-comments").dom.innerHTML = "done!";
                                Ext.get("design-comments").load({
                    				url: "fabric_comments.php?fabric_id="+id
                    			});
                                
                            }
                        });    
					}
		        }]
			}),
            
        /**
		 * 
		 */
		submitDesignFormEdit : new Ext.FormPanel({
		        labelWidth: 85, 
				header:false,		        
		        bodyStyle:'padding:6px;border:none;background:white;',		        				
					
		        items: [{
		            xtype: 'fieldset',
					autoHeight:true,
                    cls:'ext-edit-fabric',
		            title: ' Edit Fabric Information',
					defaultType: 'textfield',
					defaults: {width: 300},
					html: "<hr><p style='font-size:11px;color:gray;'>Type general fabric information here. The name is to have 3 characters at minimum. Description is optional.</p>",
		            items :[{
							fieldLabel: "Name",
                            cls:'ext-textfield',
							name: "design_file_name",
							allowBlank:false,
							minLength:3,
							invalidText: "This field should have at least 3 characters"
						},{
							fieldLabel: "Description",
                            cls:'ext-textfield',
							xtype: "textarea",
							height:75,
							name: "design_desc",
							allowBlank:true
						},
						{
							inputType: "hidden",
							name:"username",
							value:""
						},
						{
							inputType: "hidden",
							name:"fabric_id",
							value:""
						}
		            ]
				},{
		            xtype: 'fieldset',
                    cls:'ext-edit-fabric',
					autoHeight:true,
		            title: 'Edit Fabric Metadata',
					collapsible:false,
					collapsed:false,
					defaultType: 'textfield',
					defaults: {width: 300},
					html: "<hr><p style='font-size:11px;color:gray;'>Type the fabric metadata here. This information is optional.</p>",
		            items :[{
							fieldLabel: "Metadata",
                            cls:'ext-textfield',
							xtype: "textarea",
							height:60,
							name: "design_metadata",
							allowBlank:true
						}
		            ]
				}],
				
				buttons: [{
		            text: 'Submit',
					handler: function(){
						BONBONKAKKU.forms.submitDesignFormEdit.form.submit({
							method: "post",
							url: "php/update_design_edit_data.php",
							clientValidation: true,
							success: function(){
                                //showComments();
                                document.getElementById('edit_fabric_form').innerHTML = "Fabric information updated!";
                            }
						});
					}
		        }]
			}),
            
        /**
		 * 
		 */
		submitDesignFormEdit_IncludeFiles : new Ext.FormPanel({
		        labelWidth: 85, 
				header:false,		        
		        bodyStyle:'padding:6px;border:none;background:white;',
                fileUpload: true,		        				
					
		        items: [{
		            xtype: 'fieldset',
					autoHeight:true,
		            title: 'Edit Fabric Images',
					collapsible:false,
					collapsed:false,
					defaultType: 'textfield',
                    labelWidth:160,
					defaults: {width: 200},
					//html: "<hr><p style='font-size:11px;color:gray;'>Select the images for your design from the local PC. For each design there must exist \
					//			three image files (gif or jpg). The first image is for the thumbnail (165x200px) and the second image is the templated version (524x366px).\
                    //            Bon Bon Kakku templates can be downloaded from the top. The third image is to give preview of the fabric in the actually used printing ratio.\
                    //            Give the wanted actual height of the preview image in centimeters (the fabric width is always assumed to be 150cm), we use this information \
                    //            to generate preview of what the fabric would look like in 150x300 cm area. </p>",
		            items :[{
		                    fieldLabel: 'New Thumbnail',
		                    name: 'design_image_file',
							inputType: "file",                            
							width:200,                            
							allowBlank:true
		                },{
		                    fieldLabel: 'New Template',
		                    name: 'design_image_file2',
							inputType: "file",
							width:200,
                            disabled:false,
							allowBlank:true
		                },{
		                    fieldLabel: 'New Preview',
		                    name: 'design_image_file3',
							inputType: "file",
							width:200,                            
							allowBlank:true
		                },{
                            xtype:'textfield',
                            fieldLabel:'Height of design (cm)',
                            name:'design_repeat_height',
                            width:30,
                            allowBlank:false,
                            disabled:true,
                            vtype:'dheight'
                        },{
							inputType:'hidden',
							name:'MAX_FILE_SIZE',
							value:'512000'
						}
		            ]
				}, {
		            xtype: 'fieldset',
					autoHeight:true,
                    cls:'ext-edit-fabric',
		            title: ' Edit Fabric Information',
					defaultType: 'textfield',
					defaults: {width: 300},
					//html: "<hr><p style='font-size:11px;color:gray;'>Type general fabric information here. The name is to have 3 characters at minimum. Description is optional.</p>",
		            items :[{
							fieldLabel: "Name",
                            cls:'ext-textfield',
							name: "design_file_name",
							allowBlank:false,
							minLength:3,
							invalidText: "This field should have at least 3 characters"
						},{
							fieldLabel: "Description",
                            cls:'ext-textfield',
							xtype: "textarea",
							height:50,
							name: "design_desc",
							allowBlank:true
						},
						{
							inputType: "hidden",
							name:"username",
							value:""
						},
						{
							inputType: "hidden",
							name:"fabric_id",
							value:""
						}
		            ]
				},{
		            xtype: 'fieldset',
                    cls:'ext-edit-fabric',
					autoHeight:true,
		            title: 'Edit Fabric Metadata',
					collapsible:false,
					collapsed:false,
					defaultType: 'textfield',
					defaults: {width: 300},
					//html: "<hr><p style='font-size:11px;color:gray;'>Type the fabric metadata here. This information is optional.</p>",
		            items :[{
							fieldLabel: "Metadata",
                            cls:'ext-textfield',
							xtype: "textarea",
							height:50,
							name: "design_metadata",
							allowBlank:true
						}
		            ]
				}],
				
				buttons: [{
		            text: 'Submit',
					handler: function(){
						BONBONKAKKU.forms.submitDesignFormEdit_IncludeFiles.form.submit({
							method: "post",
							url: "php/update_design_edit_data2.php",
							clientValidation: true,
							success: function(){
                                //showComments();
                                document.getElementById('edit_fabric_form').innerHTML = "Fabric information updated!";
                            }
						});
					}
		        }]
			})            
                 
            
}