var contentWithMediaMessages;
var contentNoMediaMessages;


 
function mediaMessageChangeHandler(ds){
	// show media messages only when we have messages!
	
	contentWithMediaMessages.setVisible(ds.getCount() > 0);
	contentNoMediaMessages.setVisible(ds.getCount() == 0);
	//mediaMessageBox.setVisible(ds.getCount() > 0);
} 



Ext.onReady(function() {

	contentWithMediaMessages = Ext.get('pageWithMediaMessages');
	contentNoMediaMessages = Ext.get('pageNoMediaMessages');
	//If Ext cannot get the DIV, that means the page cannot be loaded --> redirect to Unavailable page
	if (contentWithMediaMessages == null){
		window.location = contextPath + '/orsUnavailable.jsp';
	}
	if (contentNoMediaMessages == null) {
		window.location = contextPath + '/orsUnavailable.jsp';
	}	
	contentWithMediaMessages.setVisibilityMode(Ext.Element.DISPLAY);
	contentNoMediaMessages.setVisibilityMode(Ext.Element.DISPLAY);

       
	//------------------------------------------------------------
    //---          Initialize the media messages               ---
    //------------------------------------------------------------
      
  
   	var mmTemplate = new Ext.XTemplate(
    	'<tpl for=".">' +
	        '<div class="mmsg">' +
			  '<div class="mmdate">{date}</div>' +
			  '<div class="mmarea">{area}</div>' +
		  	  '<div class="mmtext">{message}</div>' +
			'</div>' +
	    '</tpl>' );
  
  
	var mmStore = new Ext.data.JsonStore({
    	url: contextPath + '/mediaMessages',
	    root: 'mediaMessages',
    	fields: ['date', 'area', 'message', 'url']
	});

	mmStore.on('load', mediaMessageChangeHandler);
	//mmStore.load();    
	
  	var mmView = new Ext.DataView({
  		applyTo: 'mediaMessages',
        loadingText: 'Loading Outage Messages',
        store: mmStore,
        tpl: mmTemplate,
        itemSelector: 'div.mmsg',
        //emptyText: '<div class="mmarea">No Messages to Report</div>',
		hideParent:true
    })
  
  	mmView.render();
	
	
	//------------------------------------------------------------
    //---                Periodic Updater Task                 ---
    //------------------------------------------------------------
	
	var task = {
	    run: function(){mmStore.reload()},
	    interval: 1000 * 60 * 10 //10 minutes
	}
	Ext.TaskMgr.start(task);
		
});