<style>
	.x-cube-carousel .x-cube-carousel-item {
		position:absolute;
		background-color:#FFFFFF;
		overflow:hidden;
	}
	
	.img{
		width:100%;
		height:100%;
		display:inline-block;
		background-size:100% 100%;
	}
	.x-landscape .img{
		-webkit-transform-origin-x: 0%;
		-webkit-transform-origin-y: 0%;
		-webkit-transform: rotateZ(90Deg);
		left: 480px;
		position: absolute;
	}
	.x-desktop .img{
		-webkit-transform:none;
		left:0;
		position:relative;
		margin:0 auto;
	}
	.x-panel-body {
		background-color:transparent;
	}
</style>

	
var imagePath = uxPath+'images/iphone/';
if (Ext.is.Desktop || (window.devicePixelRatio && window.devicePixelRatio > 1)) {
	imagePath = uxPath+'images/iphone4/';
}
// Create a Carousel Items
var item1 = new Ext.TabPanel({
	tabBar:{
		dock: 'bottom',
		layout:{
			pack: 'center'
		}
	},
	cls:'imgOuter',
	html:'<div style="background-image:url(' + imagePath + 'cubeFace2.jpg)" class="img"></div>',
	items: [{
		iconCls: 'bookmarks',
		title: 'Bookmarks'
	},{
		iconCls: 'download',
		title: 'Download'
	},{
		iconCls: 'favorites',
		title: 'Favorites'
	},{
		iconCls: 'info',
		title: 'Info'
	},{
		iconCls: 'more',
		title: 'More'
	},{
		iconCls: 'search',
		title: 'Search'
	},{
		iconCls: 'settings',
		title: 'Settings'
	}],
	dockedItems: [{
		xtype: 'toolbar',
		dock: 'top',
		layout: {
			pack: 'center'
		},
		defaults: {
			iconMask: true,
			ui: 'plain'
		},
		items: [{
			iconCls: 'action'
		},{
			iconCls: 'add'
		},{
			iconCls: 'arrow_up'
		},{
			iconCls: 'arrow_right'
		},{
			iconCls: 'arrow_down'
		},{
			iconCls: 'arrow_left'
		},{
			iconCls: 'compose'
		}]
	}]
});
Ext.regModel('Ranks', {
	fields: [{
		name: 'rank',
		type: 'string'
	},{
		name: 'title',
		type: 'string'
	}]
});
var ranksStore = new Ext.data.JsonStore({
	data: [{
		rank: 'master',
		title: 'Master'
	},{
		rank: 'padawan',
		title: 'Student'
	},{
		rank: 'teacher',
		title: 'Instructor'
	},{
		rank: 'aid',
		title: 'Assistant'
	}],
	model: 'Ranks',
	autoLoad: true,
	autoDestroy: true
});
var item2 = {
	scroll: 'vertical',
	items: [{
		xtype: 'fieldset',
		title: 'Personal Info',
		instructions: 'Please enter the information above.',
		defaults: {
			required: true,
			labelAlign: 'left',
			labelWidth: '40%'
		},
		items: [{
			xtype: 'textfield',
			name: 'name',
			label: 'Name',
			useClearIcon: true,
			autoCapitalize: false
		},{
			xtype: 'passwordfield',
			name: 'password',
			label: 'Password',
			useClearIcon: false
		},{
			xtype: 'textfield',
			name: 'disabled',
			label: 'Disabled',
			disabled: true,
			useClearIcon: true
		},{
			xtype: 'emailfield',
			name: 'email',
			label: 'Email',
			placeHolder: 'you@sencha.com',
			useClearIcon: true
		},{
			xtype: 'urlfield',
			name: 'url',
			label: 'Url',
			placeHolder: 'http://sencha.com',
			useClearIcon: true
		},{
			xtype: 'checkboxfield',
			name: 'cool',
			label: 'Cool',
			value: true
		},{
			xtype: 'spinnerfield',
			name: 'spinner',
			label: 'Spinner'
		},{
			xtype: 'selectfield',
			name: 'rank',
			label: 'Rank',
			valueField: 'rank',
			displayField: 'title',
			store: ranksStore,
			tpl: '<tpl for=".">' + '<tpl if="this.group != values.group">' + '<tpl exec="this.group = values.group"></tpl>' + '<h1>{group}</h1>' + '</tpl>' + '<div class="x-combo-list-item">{text}</div>' + '</tpl>'
		},{
			xtype: 'hiddenfield',
			name: 'secret',
			value: 'false'
		},{
			xtype: 'textareafield',
			name: 'bio',
			label: 'Bio',
			maxLength: 60,
			maxRows: 10
		},{
			xtype: 'sliderfield',
			name: 'height',
			label: 'Height'
		},{
			xtype: 'togglefield',
			name: 'enable',
			label: 'Security Mode'
		},{
			xtype: 'radiofield',
			name: 'team',
			label: 'Red Team',
			value: 'redteam'
		},{
			xtype: 'radiofield',
			name: 'team',
			label: 'Blue Team',
			value: 'blueteam'
		}]
	},{
		xtype: 'fieldset',
		title: 'Favorite color',
		defaults: {
			xtype: 'radiofield'
		},
		items: [{
			name: 'color',
			label: 'Red',
			value: 'red'
		},{
			name: 'color',
			label: 'Green',
			checked: true,
			value: 'green'
		}]
	},{
		xtype: 'fieldset',
		title: 'HTML5',
		items: [{
			xtype: 'numberfield',
			name: 'number',
			label: 'Number',
			maxValue: 20,
			minValue: 2
		},{
			xtype: 'emailfield',
			name: 'email2',
			label: 'Email',
			useClearIcon: true
		},{
			xtype: 'urlfield',
			name: 'url2',
			label: 'URL',
			useClearIcon: true
		}]
	},{
		xtype: 'fieldset',
		title: 'Single Select (in fieldset)',
		items: [{
			xtype: 'selectfield',
			name: 'options',
			options: [{
				text: 'This is just a big select with text that is overflowing',
				value: '1'
			},
			{
				text: 'Another item',
				value: '2'
			}]
		}]
	},{
		xtype: 'fieldset',
		title: 'Single Text (in fieldset)',
		items: [{
			xtype: 'textfield',
			name: 'single_text',
			useClearIcon: true
		}]
	},{
		xtype: 'fieldset',
		title: 'Single Toggle (in fieldset)',
		items: [{
			xtype: 'togglefield',
			name: 'single_toggle',
			value: 1
		}]
	},{
		xtype: 'fieldset',
		title: 'Single Slider (in fieldset)',
		items: [{
			xtype: 'sliderfield',
			name: 'single_slider',
			value: 60
		}]
	}],
	dockedItems: [{
		xtype: 'toolbar',
		dock: 'top',
		title: 'Sample Form'
	},{
		xtype: 'toolbar',
		dock: 'bottom',
		items: [{
			text: 'Load Model',
			ui: 'round'
		},{
			xtype: 'spacer'
		},{
			text: 'Reset'
		},{
			text: 'Save',
			ui: 'confirm'
		}]
	}]
};

/******************** now build the CubeCarousel **************/
var carousel = new Ext.CubeCarousel({
	dockedItems:appDemo.getPanelDockedItems('home', 'Cube Carousel'),
	cls:'pageBody',
	name:'home',
	defaults: {
		cls: 'imgOuter'
	},
	items: [item1, item2, {
		html: '<div style="background-image:url(' + imagePath + 'cubeFace3.jpg)" class="img"></div>'
	},{
		html: '<div style="background-image:url(' + imagePath + 'cubeFace4.jpg)" class="img"></div>'
	},{
		html: '<div style="background-image:url(' + imagePath + 'cubeFace5.jpg)" class="img"></div>'
	},{
		html: '<div style="background-image:url(' + imagePath + 'cubeFace6.jpg)" class="img"></div>'
	},{
		html: '<div style="background-image:url(' + imagePath + 'cubeFace7.jpg)" class="img"></div>'
	},{
		html: '<div style="background-image:url(' + imagePath + 'cubeFace8.jpg)" class="img"></div>'
	},{
		html: '<div style="background-image:url(' + imagePath + 'cubeFace9.jpg)" class="img"></div>'
	}]
});
	
	
this.tabs = new Ext.Panel({
	fullscreen:true,			
	cardSwitchAnimation:'slide',
	layout:'card',
	items:[carousel]
});