Ext.BLANK_IMAGE_URL = 'images/default/s.gif';

Ext.onReady(function(){
	Ext.History.init();
	Ext.QuickTips.init();
	
	var content = new Ext.Panel({	
		region: 'center',
		layout: 'fit',
		autoScroll: true,
		border: true,
		contentEl: 'content-panel',			
		bodyCfg: {cls: 'content-panel'},
		cls: 'content-background'
	});
	
	var center = new CenterPanel({
		layout: 'border',
		width: 1024,
		border: false,
		defaults:{			
			header: false
		},
		items: [{
			region: 'north',
			border: false,
			contentEl: 'header-panel',			
			bodyCfg: {cls: 'header-panel'},
			cls: 'header-panel',
			height: 188
		}, content ,{
			region: 'south',
			border: false,
			layout: 'fit',			
			bodyCfg: {cls: 'footer-panel'},
			contentEl: 'footer-panel',
			height: 20
		}]
	});
	
	var view = new Ext.Viewport({items: center});
	
	new Ext.ux.Menu({
		el: 'simple-horizontal-menu',
		transitionType: 'slide',
		direction: 'horizontal', // default
		delay: 0.2,              // default
		autoWidth: true,         // default
		transitionDuration: 0.3, // default
		animate: true,           // default
		currentClass: 'current'  // default
	});
	Ext.get('menu-container').removeClass('x-hidden');
	
	view.render(Ext.getBody());
	center.centerPanel();
	
	Loader.init(content);
})

CenterPanel = function(config){
	Ext.applyIf(config, {fixedWidth: 1024});
	CenterPanel.superclass.constructor.call(this, config);
};

Ext.extend(CenterPanel, Ext.Panel, {
	initComponent : function(){
		CenterPanel.superclass.initComponent.call(this);
		Ext.EventManager.onWindowResize(this.centerPanel, this);
		
		if(Ext.isGecko){
			this.centerPanel.defer(2000, this);			
		}
		else {
			this.on('render', function(){						
				this.centerPanel();			
			}, this, {single: true});
		}
	},
	centerPanel : function(){		
		var bsize = this.container.getSize();
		var psize = this.getSize();			
		this.setSize(this.fixedWidth, bsize.height);
		this.el.moveTo((bsize.width - this.fixedWidth) / 2, 0);
	}
});

Loader = function(){
	var content = null;
	var activeContent = null;
	var mask = null;
	var busy = false;
	var navigatingEvent = new Ext.util.Event();
	
	var initMask = function(){
		if(mask){
			return;
		}
		
		mask = Ext.get('load-mask');
		Ext.getBody().appendChild(mask);
		
		Ext.History.on('change', function(token){
			if(activeContent == token){
				return;
			}
			Loader.loadUrl(token);
		}, Loader);
	}
	
	return {
		init: function(contentPanel){
			if(content){
				return;
			}
			
			content = contentPanel;
			
			var updater = content.getUpdater();
			updater.loadScripts = true;
			updater.showLoadIndicator = false;
			updater.on('beforeupdate', function(){
				navigatingEvent.fire();
			}, Loader);
		},
		loadUrl: function(url){
			Loader.loadContent({url: url});
		},
		loadContent: function(config){
			if(!config.url || activeContent == config.url){
				return;
			}
			
			var callback = config.callback;
			var interceptor = function(el, response){
				if(callback){
					callback(el, response);
				}
				
				Loader.unmask();
				busy = false;
				activeContent = config.url;
				Ext.History.add(config.url);
			}
			
			Ext.apply(config, {
				nocache: true,
				scripts: true,
				callback: interceptor
			});
			
			content.getUpdater().abort();
			Loader.mask.defer(150, Loader);
			content.load(config);
			busy = true;
		},
		reload: function(){
			if(!activeContent){
				return;
			}
			var url = activeContent;
			activeContent = null;
			Loader.loadUrl(url);
		},
		mask : function(target){
			initMask();
			
			if(!busy){
				return;
			}
			
			var maskAnim = Ext.get('load-mask-animation');
			var target = Ext.get(target) || content.body;
			
			mask.setSize(target.getWidth(), target.getHeight());
			mask.setOpacity(0.8);
			
			mask.removeClass('x-hide-display');
			maskAnim.center(mask);
			mask.center(target);
			mask.show();
		},
		unmask : function(){
			if(!mask){
				return;
			}
			mask.addClass('x-hide-display');
			mask.hide();
		},		
		onBeforeNavigate: function(fn, scope, args){
			navigatingEvent.addListener(fn, scope, args);
		},
		unBeforeNavigate: function(fn, scope){
			navigatingEvent.removeListener(fn, scope);
		}
	};
}();