Ext.onReady(function(){

	var homeData = [
        ['images/base/guida.png','Residenze Integrasys','guida','images/base/guida_off.png'],
        ['images/base/popoli.png','Popoli','popoli','images/base/popoli_off.png'],
        ['images/base/blank_space.png','Residenze Integrasys','no-action','images/base/blank_space.png'],
        ['images/base/mappa.png','Dove siamo','mappa','images/base/mappa_off.png'],

        ['images/base/blank_space.png','Residenze Integrasys','no-action','images/base/blank_space.png'],
        ['images/base/blank_fume.png','Residenze Integrasys','no-action','images/base/blank_fume.png'],
        ['images/base/iter.png','Gli Itinerari','itinerari','images/base/iter_off.png'],
        ['images/base/app.png','Gli appartamenti','appartamenti','images/base/app_off.png'],

        ['images/base/contattaci.png','Contattaci','contatti','images/base/contattaci_off.png'],
        ['images/base/blank_space.png','Residenze Integrasys','no-action','images/base/blank_space.png'],
        ['images/base/terme.png','Le terme','terme','images/base/terme_off.png'],
        ['images/base/blank_fume.png','Residenze Integrasys','no-action','images/base/blank_fume.png'],

        ['images/base/blank_space.png','Residenze Integrasys','no-action','images/base/blank_space.png'],
        ['images/base/listino.png','Listino Prezzi','listino','images/base/listino_off.png'],
        ['images/base/blank_fume.png','Residenze Integrasys','no-action','images/base/blank_fume.png'],
        ['images/base/blank_space.png','Residenze Integrasys','no-action','images/base/blank_space.png']
		];

	var homeStore = new Ext.data.ArrayStore({
        fields: [
           {name: 'image'},
           {name: 'title'},
           {name: 'id'},
           {name: 'image_off'}
        ]
    });
    homeStore.loadData(homeData);
	
	homeTemplate = new Ext.XTemplate(
		'<tpl for=".">',
			'<div class="thumb-wrap" id="{id}">',
			'<div class="thumb"><img id="{id}_image" src="{image}" title="{title}" alt="{title}"></div>',
			'</div>',
		'</tpl>'
	);

	homeDataView = new Ext.DataView({
        id:'images-view',
		tpl: homeTemplate,
	    width:826,
        height:489,
		singleSelect: true,
		overClass:'x-view-over',
		itemSelector: 'div.thumb-wrap',
		emptyText : '<div style="padding:10px;">Nulla da visualizzare</div>',
		store: homeStore,
		listeners: {
            	click: {
	            		fn: function(dv,index,node,e){
							switch(node.id){
								case 'guida':
									var p = new Itsb_GuidaPage({
											id:'guida-page',
											title:'Guida all\'utilizzo del sito'
										});                   
									p.show();
									break;
									
								case 'popoli':
									var p = new Itsb_PopoliPage({
											id:'popoli-page',
											title:'Popoli'
										});                   
									p.show();
									break;
									
								case 'mappa':
									var p = new Itsb_DoveSiamoPage({
											id:'dove-siamo-page',
											title:'Dove siamo'
										});                   
									p.show();
									break;
									
								case 'itinerari':
									var p = new Itsb_ItinerariPage({
											id:'itinerari-page',
											title:'Gli Itinerari'
										});                   
									p.show();
									break;
									
								case 'appartamenti':
									var p = new Itsb_AppartamentiPage({
											id:'appartamenti-page',
											title:'Gli appartamenti'
										});                   
									p.show();
									break;
									
								case 'contatti':
									var p = new Itsb_ContattiPage({
											id:'contatti-page',
											title:'Contattaci'
										});                   
									p.show();
									break;
									
								case 'terme':
									var p = new Itsb_TermePage({
											id:'terme-page',
											title:'Le terme'
										});                   
									p.show();
									break;
									
								case 'listino':
									var p = new Itsb_PrezziPage({
											id:'prezzi-page',
											title:'Listino Prezzi'
										});                   
									p.show();
									break;
							}
						}
				},
            	mouseenter: {
	            		fn: function(dv,index,node,e){
							if (node.id!='no-action')
							{
								var el = Ext.get(node);
								if (Ext.isIE )
								{
									el.frame('8E8E8E',10, { duration: 1 });								
								}
								if (Ext.isChrome)
								{
									var img = document.getElementById(node.id+"_image");
									img.src=dv.getRecord(node).get("image_off");
								}
								if (Ext.isGecko || Ext.isGecko2 || Ext.isGecko3)
								{
									var img = document.getElementById(node.id+"_image");
									img.src=dv.getRecord(node).get("image_off");
								}
								
							}
		            	}
				},
            	mouseleave: {
	            		fn: function(dv,index,node,e){
							if (node.id!='no-action')
							{
								if (Ext.isIE)
								{
									var el = Ext.get(node);							
									el.stopFx();
								}
								if (Ext.isChrome)
								{
									var img = document.getElementById(node.id+"_image");
									img.src=dv.getRecord(node).get("image");
								}
								if (Ext.isGecko || Ext.isGecko2 || Ext.isGecko3)
								{
									var img = document.getElementById(node.id+"_image");
									img.src=dv.getRecord(node).get("image");
								}
							}
		            	}
				}
		}
	});

	var testaPanel = new Ext.Panel({
		height: 80,
		width : 877,
		border:false,
		html: '<img src="images/base/titolo.png" width="877" title="" alt="">'
	});	
	
	var myBorderPanel = new Ext.Panel({
	    layout: 'border',
		height: 548,
		width : 877,
		border:false,
	    items: [{
	        region: 'north',
	        height: 30,
			width : 877,
	        layout: 'fit',
			border:false,
			id:'area-nord',
			html: '<img src="images/base/bordo_nord.png" title="" alt="">'
	    },{
	        region: 'south',
	        height: 30,
			width : 877,
	        layout: 'fit',
			border:false,
			id:'area-sud',
			html: '<img src="images/base/bordo_sud.png" title="" alt="">'
		},{
	        region:'west',
	        height: 488,
	        width : 35,
	        layout: 'fit',
			border:false,
			id:'area-ovest',
			html: '<img src="images/base/bordo_ovest.png" height="488" title="" alt="">'
	    },{
	        region: 'center',
	        height: 488,
	        width : 826,
	        layout: 'fit',
			id:'area-centro',
			border:false,
			items:[homeDataView]
	    },{
	        region: 'east',
	        height: 488,
			width : 34,
	        layout: 'fit',
			border:false,
			id:'area-est',
			html: '<img src="images/base/bordo_est.png" height="488" title="" alt="">'
	    }]
	});	


	var footerPanel = new Ext.Panel({
		height: 25,
		id:'footer-panel',
		width : 877,
		border:false,
		html: '<table width="100%" border="0" colspan="0" cellpadding="0"><tr><td align="right"><a href="http://www.itsb.it" target="_blank" class="copyright">Powered by I.T.S.B. group 2009.</a></td></tr></table>'
	});	
	
	var mainPanel = new Ext.Panel({
	    id:'mainPanel',
	    layout:'ux.center',
	    width : 877,
	    height: 653,
	    renderTo: 'container',
	    border:false,
	    items:[
		{
	        id:'contentPanel',	        
	        autoScroll: false,
		    width : 877,
		    height: 653,
            border:false,
            bodyStyle: 'padding:0px;',   
            items:[testaPanel,myBorderPanel,footerPanel]
	    }]
	});

	setTimeout(function(){
        Ext.get('loading').remove();
        Ext.get('loading-mask').fadeOut({remove:true});
    }, 1000);
	
});