Ext.setup({
		tabletStartupScreen: 'tablet_startup.png',
		phoneStartupScreen: 'phone_startup.png',
		icon: 'icon.png',
		glossOnIcon: true, 
			
        onReady: function() {
			
			
var emailForm = Ext.create('Ext.form.Panel', {
			fullscreen: true,
				title: 'Basic',
				xtype: 'form',
				id: 'basicform',
				cls:'emailForm',
				padding:10,
				scroll: 'vertical',
				items: [
				{
					xtype:'button',
					text:'back',
					ui: 'back',
					width:'30%',
					handler:function(){
						contact.setActiveItem(0);
					}
				}, {
					xtype: 'fieldset',
					title: 'Email message',
					instructions: '* Please enter the information above.',
					defaults: {
						labelAlign: 'left',
						labelWidth: '35%'
					},
					items: [{
						xtype: 'textfield',
						name: 'name',
						label: 'Name',
						//placeHolder: 'Enter..',
						required: true,
						useClearIcon: true
					}, {
						xtype: 'emailfield',
						name: 'email',
						//placeHolder: 'Enter..',
						label: 'Email',
						required: true,
						useClearIcon: true
					}, {
						xtype: 'numberfield',
						name: 'phone_number',
						label: 'Phone',
						//placeHolder: 'Enter..',
						useClearIcon: true,
					}, {
						xtype: 'numberfield',
						name: 'imgnumber',
						label: 'Relates to <br/>Image No.',
						placeHolder: 'HH 000'
					}, {
						xtype: 'textareafield',
						name: 'bemerkung',
						label: 'Bemerkung'
					}]
				}, {
					layout: 'vbox',
					defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;', ui:'confirm', width:'30%',},
					items: [{
						text: 'send',
						handler: function(){
							var form = Ext.getCmp('basicform');
							//Ext.getCmp('basicform').reset();
							form.submit({
								url: 'http://www.velvet.ch/privatecollection_temp/contact.php',
								method: 'POST',
								success: function() {
									alert('form submitted successfully!');
									//alert('Form submitted: ' + res.customfield);
									form.reset();
									contact.setActiveItem(0);
								},
								failure: function() {
									alert('form not submitted!');
								}
							});
						}
					}]
				}]
		});



// if (Ext.is.Android) {
//     demos.Forms.insert(0, {
//         xtype: 'component',
//         styleHtmlContent: true,
//         html: '<span style="color: red">Forms on Android are currently under development. We are working hard to improve this in upcoming releases.</span>'
//     });


			
			
			var adresse = new Ext.Panel({
                    title: 'Contact',
					iconCls: 'compose',
					scroll:'vertical',
					padding : 18,
					margin:0,
                    items: [
                        {
							xtype: 'fieldset',
							title: 'Contact',
							padding : 10,
							/*margin:40,*/
							style: 'text-align:left',
							html: adresseHTML,
							//html:'Hallo Adresse'
						},
                        {
                            xtype: 'button',
                            text: 'To Email Form',
                            //ui: 'action',
							iconCls: 'arrow_right',
    						iconMask: true,
                            handler: function() {
                                contact.setActiveItem(1);
                            }
                        },
                    ],
			});
			
			var contact = new Ext.Panel({
				title: 'Contact',
				scrollable: false,
				iconCls: 'compose',
				layout: {
					type:'card',
					animation:'pop'
					//animation:'pop',
					//align:'stretch',
				},
				activeItem:0,
				items:[adresse, emailForm]
			});
			
			
			//////////////////////////////////////////////////
			//////////////////////////////////////////////////
			
			var project = new Ext.Panel({
				title: 'Project',
				iconCls: 'star',
				html: '',
				cls: 'homeCard',
				scrollable: true,
				
			});
			var homePanel = new Ext.Panel({
				title: 'Home',
				html: '',
				cls: 'homeCard',
				iconCls: 'home'
			})
			
			/*-----------------------------------------------*/
			/* Kollektionen                                       */
			var curtigrandits = new Ext.Panel({
				xtype: 'panel',
				scroll: 'vertical',
			});
			var vollenweider = new Ext.Panel({
				xtype: 'panel',
				scroll: 'vertical',
			});
			var othschlegel = new Ext.Panel({
				xtype: 'panel',
				scroll: 'vertical',
			});
			var danschlegel = new Ext.Panel({
				xtype: 'panel',
				scroll: 'vertical',
			});
			var bitmuc = new Ext.Panel({
				xtype: 'panel',
				scroll: 'vertical',
			});
			var trewit = new Ext.Panel({
				xtype: 'panel',
				scroll: 'vertical',
			});
			var andjes = new Ext.Panel({
				xtype: 'panel',
				scroll: 'vertical',
			});
			var jausto = new Ext.Panel({
				xtype: 'panel',
				scroll: 'vertical',
			});
			var benhaf = new Ext.Panel({
				xtype: 'panel',
				scroll: 'vertical',
			});
			var katlan = new Ext.Panel({
				xtype: 'panel',
				scroll: 'vertical',
			});
			var hubhof = new Ext.Panel({
				xtype: 'panel',
				scroll: 'vertical',
			});
			/*-----------------------------------------------*/
			var sortByPerson = new Ext.Carousel({
				flex: 1,
				title: 'Collection',
				cls: 'carouselWork',
				iconCls: 'photo',
				/*direction:'horizontal',*/
				scrollable: false,
				defaults: {
					styleHtmlContent: true
				},
				items:[
				{
				xtype: 'panel',
				scroll: 'vertical',
				html: curtigranditsHTML,
				},
				{
				xtype: 'panel',
				scroll: 'vertical',
				html: vollenweiderHTML
				},
				{
				xtype: 'panel',
				scroll: 'vertical',
				html: othschlegelHTML
				},
				{
				xtype: 'panel',
				scroll: 'vertical',
				html: danschlegelHTML
				},
				{
				xtype: 'panel',
				scroll: 'vertical',
				html: bitmucHTML
				},
				{
				xtype: 'panel',
				scroll: 'vertical',
				html: trewitHTML
				},
				{
				xtype: 'panel',
				scroll: 'vertical',
				html: andjesHTML
				},
				{
				xtype: 'panel',
				scroll: 'vertical',
				html: jaustoHTML
				},
				{
				xtype: 'panel',
				scroll: 'vertical',
				html: benhafHTML
				},
				{
				xtype: 'panel',
				scroll: 'vertical',
				html: katlanHTML
				}
				]
			})
			
			
			
			var sortByNumbers = new Ext.Carousel({
				flex: 1,
				title: 'Numbers',
				iconCls: 'photo',
				cls: 'carouselWork',
				/*direction:'horizontal',*/
				scrollable: false,
				defaults: {
					styleHtmlContent: true
				},
			})
			
			
			var myTabs = Ext.create('Ext.tab.Panel', {
				/*type: 'dark',*/
				sortable: true,
				xtype: 'tabbar',
				/*flex:4,*/
				tabBarPosition: 'bottom',
				tabBar: {
                	/*docked: 'bottom',*/
                	layout: {
                    	pack: 'center',
						/*animation: {
							type: 'slide',
							direction: 'left'
						}*/
                	}
            	},
				defaults: {
					scrollable: true
				},
				items: []
			});
			
			
			
					
			
			
			var titlebar = new Ext.Panel({
				xtype:'toolbar',
				cls:'titlebar',
				dock:'top',
			 	height:76,
				html: '',
				
				items:[]
			});
			
			
			/* Root Panel */
            var rootPanel = new Ext.Container({
                fullscreen: true,
				layout: 'card',
				/*layout: {
					type:'card',
					//animation:'flip'
					//animation:'pop',
					//align:'stretch',
				},*/
                defaults: {
                    xtype: 'container'
                },
				//activeItem: 0,
                items: [myTabs],
				dockedItems:[titlebar]
            });
			//login.add(titlebarLogin);
			//newAccount.add(titlebarLogin);
			myTabs.add(homePanel);
			myTabs.add(project);
			myTabs.add(sortByPerson);
			//myTabs.add(sortByNumbers);
			
			myTabs.add(contact);
			
			
			
			project.setHtml(projectHTML);
			homePanel.setHtml(homeHTML);
			titlebar.setHtml(introText);
			
			
			
			
		/*	curtigrandits.setHtml(curtigranditsHTML);
			vollenweider.setHtml(vollenweiderHTML);
			othschlegel.setHtml(othschlegelHTML);
			danschlegel.setHtml(danschlegelHTML);
			bitmuc.setHtml(bitmucHTML);
			trewit.setHtml(trewitHTML);
			andjes.setHtml(andjesHTML);
			jausto.setHtml(jaustoHTML);
			benhaf.setHtml(benhafHTML);
			katlan.setHtml(katlanHTML);*/
			
			
			
			/*sortByPerson.add(katlan);
			sortByPerson.add(curtigrandits);
			sortByPerson.add(vollenweider);
			sortByPerson.add(othschlegel);
			sortByPerson.add(danschlegel);
			sortByPerson.add(bitmuc);
			sortByPerson.add(trewit);
			sortByPerson.add(andjes);
			sortByPerson.add(jausto);
			sortByPerson.add(benhaf);*/
        }
    });