Ext.onReady(function(){

    Ext.namespace('TheCity');
    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.
    //Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    // create some portlet tools using built in Ext tool ids
    var tools = [{
        id:'close',
        handler: function(e, target, panel){
            panel.hide();
        }
    }];
    
    if(!TheCity.msg)
	{
	TheCity.msg = function(title, msg){
	        Ext.Msg.show({
	            title: title,
	            msg: msg,
	            minHeight: 500,
	            modal: true,
	            //shadow: false,
	            baseCls: 'msg-window',
	            //icon: Ext.Msg.INFO,
	            buttons: Ext.Msg.OK
	        });
	    };
	}
    
    TheCity.bookingForm = new Ext.FormPanel({
		columnWidth:1, 
		title:'Booking',
		baseCls:'booking',
		items:[{
		baseCls:'booking-content',
		layout: 'column',
		items: [{
		    columnWidth:0.13,
		    html: '<IMG style="float:left;" SRC="img/wine.png" />'
		},
		{
		    columnWidth:0.34,
		    baseCls: 'caramel-panel',
		    defaultType: 'textfield',
		    id:'functionsFormColumn1',
		    labelAlign: 'top',
		    layout:'form',
		    items: [{
		                //hideLabel:true,
		                fieldLabel: 'First Name',
		                id: 'functionFormFirstName',
		                allowBlank:false,
		                anchor: '0'
		            }
		    ]
		}
		,{
		    columnWidth:0.53,
		    baseCls: 'caramel-panel',
		    id:'functionsFormColumn2',
		    defaultType: 'textfield',
		    labelAlign: 'top',
		    layout:'form',
		    items: [{
		                //hideLabel:true,
		                fieldLabel: 'Last Name',
		                id: 'functionFormLastName',
		                allowBlank:false,
		                anchor: '0'
		            }
		            ]
		            }
		,{
		    columnWidth:0.25,
		    style: 'padding-top:10px;',
		    baseCls: 'caramel-panel',
		    id:'functionsFormColumn3',
		    defaultType: 'textfield',
		    labelAlign: 'top',
		    layout:'form',
		    items: [{
		            //hideLabel:true,
		            fieldLabel: 'Company',
		            id: 'functionFormCompany',
		            anchor: '0'
		            }
		            ]
		            }
		,{
		    columnWidth:0.25,
		    baseCls: 'caramel-panel',
		    style: 'padding-top:10px;',
		    id:'functionsFormColumn4',
		    defaultType: 'textfield',
		    labelAlign: 'top',
		    layout:'form',
		    items: [{
		            //hideLabel:true,
		            fieldLabel: 'Contact Number',
		            id: 'functionFormPhoneNumber',
		            allowBlank:false,
		            anchor: '0'
		            
		            }   
		            ]
		            }                
		,{
		    columnWidth:0.37,
		    baseCls: 'caramel-panel',
		    style: 'padding-top:10px;',
		    id:'functionsFormColumn5',
		    defaultType: 'textfield',
		    labelAlign: 'top',
		    layout:'form',
		    items: [{
		            //hideLabel:true,
		            fieldLabel: 'Email Address',
		            id: 'functionFormEmail',
		            allowBlank: false,
		            vtype:'email',
		            anchor: '0'
		            }
		            ]
		            } 
		,{
		    columnWidth:0.18,
		    baseCls: 'caramel-panel',
		    style: 'padding-top:10px;',
		    id:'functionsFormColumn6',
		    defaultType: 'textfield',
		    labelAlign: 'top',
		    layout:'form',
		    items: [new Ext.form.ComboBox({
		            //hideLabel:true,
		            fieldLabel: 'Type of Function',
		            store: ['Wedding','Corporate','Social','Birthday'],
		            anchor: '0',
		            id: 'functionFormType'
		            })
		            ]
		            }
		,{
		    columnWidth:0.16,
		    baseCls: 'caramel-panel',
		    style: 'padding-top:10px;',
		    id:'functionsFormColumn7',
		    defaultType: 'textfield',
		    labelAlign: 'top',
		    layout:'form',
		    items: [{
		            //hideLabel:true,
		            fieldLabel: 'No. of Guests',
		            id: 'functionFormNoGuests',
		            anchor: '0'
		            }
		            ]
		            } 
		,{
		    columnWidth:0.21,
		    baseCls: 'caramel-panel',
		    id:'functionsFormColumn8',
		    style: 'padding-top:10px;',
		    defaultType: 'textfield',
		    labelAlign: 'top',
		    layout:'form',
		    items: [new Ext.form.DateField({
		            //hideLabel:true,
		            fieldLabel: 'Date of Function',
		            anchor: '0',
		            id: 'functionFormDate',
		            format: 'd/m/Y'
		            })
		            ]
		            }
		,{
		    columnWidth:0.19,
		    baseCls: 'caramel-panel',
		    id:'functionsFormColumn9',
		    style: 'padding-top:10px;',
		    defaultType: 'textfield',
		    labelAlign: 'top',
		    layout:'form',
		    items: [new Ext.form.TimeField({
		            //hideLabel:true,
		            fieldLabel: 'Start Time',
		            anchor: '0',
		            id: 'functionFormTime',
		            increment: 30
		            })
		            ]
		            }
		,{
		    columnWidth:0.13,
		    baseCls: 'caramel-panel',
		    id:'functionsFormColumn10',
		    style: 'padding-top:10px;',
		    defaultType: 'textfield',
		    labelAlign: 'top',
		    layout:'form',
		    items: [{
		            //hideLabel:true,
		            fieldLabel: 'Duration',
		            id: 'functionFormDuration',
		            anchor: '0'
		            }
		            ]
		            }
		,{
		    columnWidth:1,
		    baseCls: 'caramel-panel',
		    id:'functionsFormColumn11',
		    style: 'padding-top:10px;padding-bottom:10px;',
		    defaultType: 'textfield',
		    labelAlign: 'top',
		    layout:'form',
		    items: [new Ext.form.TextArea({
		            //hideLabel:true,
		            fieldLabel: 'Additional Information',
		            anchor: '-3',
		            id: 'functionFormQuestions',
		            height:100,
		            emptyText: 'e.g dietry requirements, disablility access or any special requests'
		            })
		            ]
		            }                                                                                   
		],//End FormPanel
		buttons: [{
		        text: 'Cancel',
		        handler: function(btn,e){
			        Ext.getCmp('functionFormFirstName').reset();
			        Ext.getCmp('functionFormLastName').reset();
			        Ext.getCmp('functionFormCompany').reset();
			        Ext.getCmp('functionFormPhoneNumber').reset();
			        Ext.getCmp('functionFormEmail').reset();
			        Ext.getCmp('functionFormType').reset();
			        Ext.getCmp('functionFormNoGuests').reset();
			        Ext.getCmp('functionFormDate').reset();
			        Ext.getCmp('functionFormTime').reset();
			        Ext.getCmp('functionFormDuration').reset();
			        Ext.getCmp('functionFormQuestions').reset();
			        
			        TheCity.functionWindow.hide();
			        
			        
		        }
		        },
		        {
                text: 'Send',
                handler: function(btn,e){
                	if(TheCity.bookingForm.getForm().isValid()){
                        TheCity.bookingForm.getForm().submit({
                            url: 'email-submit.php',
                            waitMsg: 'Submitting your enquiry...',
                            success: function(fo, o){
                                
                                TheCity.bookingForm.getForm().reset();  
                              
                              	TheCity.functionWindow.hide();
                              
                                TheCity.msg('Success', 'Thanks for your enquiry!  We will get back to your shortly =)');
                                }
                            });
                    }
                }
                }]//End Buttons
		}]
	});
    
    /*Function Window*/
    if(!TheCity.functionWindow){
        TheCity.functionWindow = new Ext.Window({
                id          : 'functionWindow',
                layout      : 'fit',
                y			: 70,
                //width       : 810,
                //height		: 460,
                modal       : true,
                title: 'Booking Form',
                baseCls: 'function-window',
                //constrain   : true,
                draggable   : false,
                hideParent  : true,
                initHidden  : true,
                closeAction : 'hide',
                resizable   : false,
                plain       : true,
                html:		'<iframe src="http://www.myguestlist.com.au/mgl/ccp/citynightclub/" width="797" height="460" frameBorder="0" border="0" allowTransparency="true" style="border:none;" scrolling="no"></iframe>'
                //items		: [TheCity.bookingForm]
                })};
    
    
    /*Function Window*/
    if(!TheCity.membershipWindow){
        TheCity.membershipWindow = new Ext.Window({
                id          : 'membershipWindow',
                layout      : 'fit',
                y			: 70,
                //width       : 810,
                //height		: 460,
                modal       : true,
                title: 'Membership',
                baseCls: 'function-window',
                //constrain   : true,
                draggable   : false,
                hideParent  : true,
                initHidden  : true,
                closeAction : 'hide',
                resizable   : false,
                plain       : true,
                html:		'<iframe src="http://myguestlist.com.au/mgl/contact_forms/citynightclub/" width="797" height="301" frameBorder="0" border="0" allowTransparency="true" style="border:none;" scrolling="no"></iframe>'
                //items		: [TheCity.bookingForm]
                })};
    
            
            
    /*location map window*/    
    if(!TheCity.locationMapWindow){
            TheCity.locationMapWindow = new Ext.Window({
                id: 'locationMapWindow',
                layout: 'fit',
                title: '27 Hindley St, Adelaide, SA, 5000, Australia',
                baseCls: 'map-window',
                width:800,
                resizable: false,
                draggable: false,
                height:400,
                modal:true,
                closeAction :'hide',
                items: {
                    xtype: 'gmappanel',
                    region: 'center',
                    zoomLevel: 16,
                    gmapType: 'map',
                    mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                    mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
                    setCenter: {
                        geoCodeAddr: '27 Hindley Street, Adelaide, SA, 5000, Australia',
                        marker: {title: 'The City.nightclub'}
                    }
                }
            })};
    
    /*location map window*/    
    if(!TheCity.cocktailMenuWindow){
            TheCity.cocktailMenuWindow = new Ext.Window({
                id: 'cocktailMenuWindow',
                layout: 'fit',
                header: true,
                //title: 'Cocktail Menus',
                baseCls: 'msg-window',
                width:280,
                resizable: false,
                draggable: false,
                height:190,
                modal:true,
                closeAction :'hide',
                //initHidden: true,
                shadow:false,
                html:'<div id="cocktail-menu-body" style="font-size:12pt;color:#000 !important"><a href="pdf/Agwa%20Bomb%20$8%20A6%20Print.pdf" alt="Agwa Bombs $8" target="_blank">Agwa Bombs Promotion</a><br><br><a href="pdf/Cocktail%20A6%20Print.pdf" alt="Cocktail menus" target="_blank">Mystery Cocktail Promotion</a></div>',
                buttons:[{
                	text: 'Close',
		        	handler: function(btn,e){
		        		TheCity.cocktailMenuWindow.hide();
		        	}
                }]
            })};               
    
    TheCity.description = '<img style="float:left" src="img/logo.png" /><div style="float:left;margin-left:10px;margin-top:23px;"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FTheCityNightclub&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe></div><br><br><br><br><h3 style="margin-top:12px; cursor:pointer"><a id="googlemaplink" style="color:#fff">27 Hindley St, Adelaide South Australia</a><p style="padding:0px;margin:0px; margin-top:14px;width:270px;">The City Nightclub is the exciting new venue in Adelaide, South Australia featuring a fully functional LED paneling system over 3 levels. The basement level links to <a href="http://www.oxygennightclub.com.au" target="_blank">Oxygen Bar</a>, our premiere lounge area. Please use our <a id="bookingformlink">booking form</a> to enquiry about a private function. We also service a large array of cocktails at our events, so please take a look at our <a id="cocktailmenuslink">cocktail menus</a>. A list of our resident Djs can be seen <a href="residents.html" target="_blank">here</a>.</p>';
    
    TheCity.Application = new Ext.Viewport({
        renderTo: Ext.getBody(),
		layout:'column',
		items:[{
			baseCls: 'metal',
			//autoWidth:true,
			items:[{
				baseCls: 'platform',
				width: 1040,
        		//autoWidth:true,
        		height: 359,
				items:[{
					//book-left-bg
					layout: 'form',
			        width:685,
			        style: 'float:left',
			        items:
			        [{
			       		id: 'photos',
			        	baseCls:'photos'
			        }]
					},
					{
				    //book-right-bg
				    layout: 'form',
				    width:330,
				    style: 'float:left',
				    items:
				    [{
				    	//book-right
				    	id:'description',
				    	baseCls: 'description',
				    	html: TheCity.description
				  	}]
				}]//End Platform.items
			},{
				baseCls: 'footer',
				items:[{
					baseCls: 'platform-bottom',
					width:1024,
					height: 170,
					items:[{
							layout: 'form',
					        width:380,
					        height:150,
					        style: 'float:left',
					        items:[{
					        		id: 'upcoming',
					        		html: '<h2>Headlines</h2><p style="margin-top:15px">3/04 - <a href="http://www.facebook.com/TheCityNightclub?sk=app_150318048367368" target="_blank">Click here</a> to book a guestlist</p><p style="margin-top:5px">28/03 - <a id="membershiplink">Click here</a> to become a member</p><p style="margin-top:5px"></p>'
					        	}]
							},{
							layout: 'form',
					        width:186,
					        //height:235,
					        style: 'float:left',
					        items:[{
					        		id: 'bookingform',
					        		html: '<h2>Booking form</h2><img style="margin-top:10px" src="img/booking.png" />'
					        	}]
							},{
							layout: 'form',
					        width:186,
					        //height:235,
					        style: 'float:left',
					        items:[{
					        		id: 'findusonmap',
					        		html: '<h2>Find us on the map</h2><img style="margin-top:8px" src="img/map.png" />'
					        	}]
							},{
							layout: 'form',
					        width:186,
					        //height:235,
					        style: 'float:left',
					        items:[{
					        		id: 'cocktailmenus',
					        		html: '<h2>Cocktail menus</h2><img style="margin-top:8px" src="img/menus.png" />'
					        	}]
							}]
					},
					{
					baseCls: 'platform-footer',
					width:1024,
					height:80,
					html:'<div id="thecity-button"></div><a href="http://www.oxygennightclub.com.au" target="_blank"><div id="oxygenbar-button"></div></a><a href="http://www.oxygenclothing.com.au" target="_blank"><div id="oxygenclothing-button"></div></a><a href="http://www.facebook.com/TheCityNightclub" target="_blank"><div id="facebook">View our <img src="img/facebook.png" /> page</div></a>'
					}]
				}]//End Metal.items  
        }]//End Column.items
    });//End TheCity.Application
    
});//End function