Ext.onReady(function(){

	Ext.ns('Ext.ux.layout');
	Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.ContainerLayout,{
		onLayout: function(ct, target) {
			if(!this.innerCt) {
				this.innerCt = target.createChild({tag:'center'});
			}
			this.renderAll(ct, this.innerCt);
		}
	});
	Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;

	var idcenterpanel = 'home-page';
	
	var contentHomePage =  new Ext.Panel({
        collapsible: false,
        id:'center-panel-home-page',
		frame:true,
		width: 640,
		height: 490,
		border : true,
		html: '<b> questa è la home page</b>'
    });
		
	var headerPanel = new Ext.Panel({
        collapsible: false,
        id:'header-panel',
		width: 990,
        height: 100,
		border : false
    });
	
	 var footerPanel = new Ext.Panel({
        collapsible: false,
        id:'footer-panel',
		width: 990,
        height: 40,
		border : false,
		html:'<a class="footer" href="mailto:info@viviamolamusica.it?Subject=Informazioni">Associazione culturale - Viviamo la musica - Sede dei Corsi in Via Sisto IV, 176 - Roma - E-mail: info@vivamolamusica.it</a>'
    });
		
	 var newsPanel = new Ext.Panel({
        collapsible: false,
        id:'news-panel',
		width: 175,
		height: 200,
		layout: 'fit',
		frame:true,
		items: [{
			collapsible: false,
			id:'msg-ct',
			layout: 'fit',
			items: [{
				collapsible: false,
				id:'msg',
				layout: 'fit',
				items: [{
					collapsible: false,
					id:'msg-inner',
					layout: 'fit'
					}]
				}]
			}]
	});

    var newsLetterForm = new Ext.FormPanel({
        frame:false,
		width: 140,
		height: 150,
		layout: 'form',
		buttonAlign : 'center',
        items: [{
				layout: 'form',				
				labelAlign: 'top',
				labelWidth:135,
                bodyStyle:'padding:0px 0px 0px 0px',
				items:[{
                    xtype:'textfield',
					labelSeparator : '',
					fieldLabel: 'Iscriviti alla NewsLetter',
                    id: 'indirizzoEmail',
                    allowBlank: false,
                    vtype:'email',
					vtypeText : 'Indicare un indirizzo email valido'
					}]
                },{
				layout: 'form',				
				labelWidth:108,
				labelAlign: 'left',
				bodyStyle:'padding:0px 0px 0px 0px',
				items:[{
				    xtype: 'checkbox',
					fieldLabel: 'Accetta i termini....',
					labelSeparator: '',
					id: 'accetta-termini',
					checked: false
                    },{
				    xtype: 'label',
					fieldLabel: '',
					labelSeparator: '',
					name: 'link-accetta-termini',
					html: '<a href="public/WebPage/PrivacyITA.aspx" target="_blank">Clicca quì per leggere i Temini e le Condizioni Generali.</a>'
                    }]
                }],
        buttons: [{
            text: 'Iscriviti',
	    	id: 'btn-iscriviti',
	    	listeners: {
						click:function(mi,e){
						Ext.MessageBox.confirm('Messaggio', 'Confermi la tua richiesta di iscrizione?', 
						function(btn){
									if (btn == 'yes')
									{
										if (!Ext.getCmp('indirizzoEmail').isValid())
										{
											Ext.Msg.show({
												title:'Errore',
												msg: 'Devi inserire un indirizzo email corretto',
												buttons: Ext.Msg.OK,
												icon: Ext.MessageBox.ERROR 
											});
											return false;
										}
										if (!Ext.getCmp('accetta-termini').getValue())
										{
											Ext.Msg.show({
												title:'Errore',
												msg: 'Devi accettare i termini e le condizione',
												buttons: Ext.Msg.OK,
												icon: Ext.MessageBox.ERROR 
											});
											return false;
										}
										Ext.Ajax.request({
											url:'handler/NewsLetterHandler.ashx?action=invia',
											params:{
													indirizzoEmail:Ext.getCmp('indirizzoEmail').getValue()
												},
											success:function()
											{                                                                    
												Ext.Msg.show({
															title:'Info',
															msg:'Richiesta inviata correttamente.',
															icon:Ext.Msg.INFO,
															buttons:Ext.Msg.OK
														});
												Ext.getCmp('accetta-termini').setValue(false);
												Ext.getCmp('indirizzoEmail').setValue('');
												
											},
											failure:function()
											{
												Ext.Msg.show({
															title:'Errore nell\'invio dell\'email',
															msg:'La tua richiesta non e\' stata inviata a causa di un errore. Digitare correttamente il tuo indirizzo email',
															icon:Ext.Msg.ERROR,
															buttons:Ext.Msg.OK
														});
											}
										});
									}
							});
						}
                    }
	    }]
    });
	
	var mailingListPanel = new Ext.Panel({
        collapsible: false,
        id:'mailing-list-panel',
		width: 175,
		height: 190,
		frame:true,
		items:[newsLetterForm]
	});
	
	var contaAccessiStore = new Ext.data.Store({
        url: 'handler/ContaAccessiHandler.ashx',  
        reader: new Ext.data.JsonReader({
            root:          'Itsb_Bean_ContaAccessi'
        }, [
            {name: 'Visite'},
            {name: 'Visitatori'}
        ])
    });
	
	var tplContaAccessi = new Ext.XTemplate(
		'<tpl for=".">',
            '<div class="conta-accessi-wrap" id="{Visite}">',
		    '<div class="conta-accessi">Num. visite: {Visite}<br/>Num Visitatori: {Visitatori}</div>',
		    '</div>',
        '</tpl>',
        '<div class="x-clear"></div>'
	);
	
	
    var contaAccessiPanel = new Ext.Panel({
        id:'conta-accessi-panel',
        frame:false,
        width:175,
        height:35,
        collapsible:false,
        layout:'fit',
		items: new Ext.DataView({
            store: contaAccessiStore,
            tpl: tplContaAccessi,
            autoHeight:true,
            overClass:'x-conta-accessi-over',
            itemSelector:'div.conta-accessi-wrap',
            emptyText: ''
		})
    });

	contaAccessiStore.load({
			params:{
				action:'CONTA'
			}
	});
	
 	var imagePagePanel = new Ext.Panel({
        collapsible: false,
		frame: false,
        id:'imagePage-panel',
		height: 490,
		border : false,
		layout:'fit',
		html: '<img src="public/Immagini/home.png" title="Home Page" alt="Home Page">'
    });
		
 	var sxUpPanel = new Ext.Panel({
        collapsible: false,
		region: 'center',
		frame:true,
        id:'menusx-panel',
		height: 490,
		border : false,
		layout:'fit',
		items:[imagePagePanel]
    });
		
 	 var centerPanel = new Ext.Panel({
        collapsible: false,
        id:'center-panel',
		frame:true,
		width: 640,
		height: 490,
		border : true,
		items:[new Itsb_HomePage({
                                id: 'home-page'
                            })]
    });
	
	var mainBottomBar = new Ext.Toolbar({
		height:  25,
		autoWidth: true,
	    items: [
				{
					id:       'home-toolbar-button',
					text:     'Home Page',
					tooltip:  'Home Page',
					handler:  onButtonClick,
					iconCls:  'x-tbar-page-next'
				},'-',
				{
					id:       'chi-siamo-toolbar-button',
					text:     'Chi siamo',
					tooltip:  'Chi siamo',
					handler:  onButtonClick,
					iconCls:  'x-tbar-page-next'
				},'-',
				{
					id:       'dove-siamo-toolbar-button',
					text:     'Dove siamo',
					tooltip:  'Dove siamo',
					handler:  onButtonClick,
					iconCls:  'x-tbar-page-next'
				},'-',
				{
					id:       'eventi-toolbar-button',
					text:     'Gli eventi',
					tooltip:  'Gli eventi',
					handler:  onButtonClick,
					iconCls:  'x-tbar-page-next'
				},'-',
				{
					id:       'corsi-toolbar-button',
					text:     'I corsi',
					tooltip:  'I corsi',
					handler:  onButtonClick,
					iconCls:  'x-tbar-page-next'
				},'-',
				{
					id:       'link-toolbar-button',
					text:     'Alcuni Link',
					tooltip:  'Alcuni link',
					handler:  onButtonClick,
					iconCls:  'x-tbar-page-next'
				},'-',
				{
					id:       'contatti-toolbar-button',
					text:     'Contatti',
					tooltip:  'Contatti',
					handler:  onButtonClick,
					iconCls:  'x-tbar-page-next'
				},{xtype:'tbfill'}
				]
	    })

	function onButtonClick(btn){
						if (idcenterpanel.length > 0)
						{
							centerPanel.remove(Ext.getCmp(idcenterpanel),true);
							centerPanel.ownerCt.doLayout();
						}
						
	                    switch(btn.id){
						
                        case 'home-toolbar-button':

							Ext.DomHelper.overwrite('imagePage-panel', '<img src="public/Immagini/home.png" title="Home Page" alt="Home Page">');
							var home = new Itsb_HomePage({
                                id: btn.id
                            });
                            centerPanel.add(home);
							idcenterpanel = btn.id;
							centerPanel.ownerCt.doLayout();
							break;
							
                        case 'chi-siamo-toolbar-button':  
							
							Ext.DomHelper.overwrite('imagePage-panel', '<img src="public/Immagini/chi.png" title="Chi Siamo" alt="Chi Siamo">');
                            var chisiamo = new Itsb_ChiSiamoPage({
                                id: btn.id
                            });
                            centerPanel.add(chisiamo);
							idcenterpanel = btn.id;
							centerPanel.ownerCt.doLayout();
							break;
							
                        case 'dove-siamo-toolbar-button':  
							
							Ext.DomHelper.overwrite('imagePage-panel', '<img src="public/Immagini/dove.png" title="Dove Siamo" alt="Dove Siamo">');
                            var dove = new Itsb_DovePage({
                                id: btn.id
                            });
                            centerPanel.add(dove);
							idcenterpanel = btn.id;
							centerPanel.ownerCt.doLayout();
							break;
							
                        case 'eventi-toolbar-button':  
							
							Ext.DomHelper.overwrite('imagePage-panel', '<img src="public/Immagini/eventi.png" title="Gli eventi" alt="Gli eventi">');
                            var eventi = new Itsb_EventiPage({
                                id: btn.id
                            });
                            centerPanel.add(eventi);
							idcenterpanel = btn.id;
                            centerPanel.ownerCt.doLayout();
                            break;
							
                        case 'corsi-toolbar-button':  
							
							Ext.DomHelper.overwrite('imagePage-panel', '<img src="public/Immagini/corsi.png" title="I Corsi" alt="I Corsi">');
                            var corsi = new Itsb_CorsiPage({
                                id: btn.id
                            });
                            centerPanel.add(corsi);
							idcenterpanel = btn.id;
                            centerPanel.ownerCt.doLayout();
                            break;
							
                        case 'link-toolbar-button':  
							
							Ext.DomHelper.overwrite('imagePage-panel', '<img src="public/Immagini/link.png" title="Link Page" alt="Link Page">');
                            var link = new Itsb_LinkPage({
                                id: btn.id
                            });
                            centerPanel.add(link);
							idcenterpanel = btn.id;
                            centerPanel.ownerCt.doLayout();
                            break;
							
                        case 'contatti-toolbar-button':
							
							Ext.DomHelper.overwrite('imagePage-panel', '<img src="public/Immagini/contatti.png" title="Contattaci" alt="Contattaci">');
                            var contatti = new Itsb_ContattiPage({
                                id: btn.id
                            });
                            centerPanel.add(contatti);
							idcenterpanel = btn.id;
                            centerPanel.ownerCt.doLayout();
                            break;
							
						}
					};
		
    var borderPanel = new Ext.Panel({
 	id:'border-panel',
	layout:'border',
	border : false,
	height: 650,
	width:  990,
    defaults: {
			collapsible: false,
			split: false,
			animFloat: false,
			autoHide: false,
			useSplitTips: false
		},
    items: [{
			region: 'north',
			id: 'north-region-panel',
			height: 120,
			border : false,
			items:[headerPanel],
			bbar:mainBottomBar
		},{
			region: 'south',
			id: 'south-region-panel',
			height: 40,
			floatable: true,
			border : false,
			bodyStyle: 'padding: 0px;',
			items: [footerPanel]
		},{
			region:'west',
			layout:'fit',
			id: 'west-region-panel',
			width: 175,
			minSize: 100,
			maxSize: 200,
			border : false,		
			bodyStyle: 'padding: 0px;',
			items:[{
				layout:'border',
				border:false,
				items:[sxUpPanel]
			}]											
		},{
			//title: 'Main Content',
			collapsible: false,
			region:'center',
			id: 'center-region-panel',
			border : false,
			height: 450,
			width: 640,
			items:[centerPanel]
		},{
			//title: 'Shopping news',
			region:'east',
			layout:'form',
			id: 'east-region-panel',
			//margins: '0 0 0 5',
			//cmargins: '0 0 0 0',
			border : false,
			width: 175,
			minSize: 100,
			maxSize: 250,
			items: [newsPanel,mailingListPanel,contaAccessiPanel]
		}]
	});
	
	var principale = new Ext.Panel({
		layout:'fit',
		renderTo: 'container',
		items: [borderPanel],
		border: false	
		});	
		
// messages
	var msgs = [
		{text: '<br/>Benvenuti <br/>sul sito della nostra associazione musicale<br/><br/><B>Viviamo La musica</B>', url:'#'},
		{text: '<br/>I nostri corsi iniziano <br/><br/>mercoledì <br/><br/><B>6 ottobre 2010</B>', url:'#'},
		{text: '<br/>Contattaci<br/><br/> e riceverai informazioni dettagliate e risposte ad ogni tua domanda <br/>sulle nostre attività', url:'#'}
	];
	
	var msgIndex = 0;
	var msg = Ext.get('msg'),
		msgInner = Ext.get('msg-inner'), 
		active = null;
		
	msgInner.addClassOnOver('msg-over');
	
	msg.on('click', function(){
		window.location = active.url;
	});
	
	function doUpdate(){
		msgInner.update(active.text);
		msg.slideIn('b');
	}
	
	function showMsg(index){
		if(!msgInner.hasClass('msg-over')) {
			active = msgs[index];
			if(msg.isVisible()){
				msg.slideOut('b', {callback: doUpdate});
			}else{
				doUpdate();	
			}			
		}
	}
	
	setInterval(function(){
        msgIndex = msgs[msgIndex+1] ? msgIndex+1 : 0;
        showMsg(msgIndex);      
    }, 10000);
    showMsg(0);
	
	setTimeout(function(){
        Ext.get('loading').remove();
        Ext.get('loading-mask').fadeOut({remove:true});
    }, 1000);
	
});