Ext.ns('App');

App = function(){
	var navbar, themebtn;
	
	return {
		init: function(){
			navbar = Ext.select("a[class^=nav]");
			navbar.each(function(el){
				el.on({
					'click': {
						fn: function(e, el){
							e.preventDefault();
							path = el.pathname+'format/json/';
							
							Ext.get('main').load({
								url: path,
								scripts: true,
								callback: function(el, success, response, options){
									Ext.Ajax.request({
										url : '/track/navigation/'+this.id,
										method: 'POST',
										callback: Ext.emptyFn
									});
								},
								scope: el
							});
						},
						scope: this
					}
				});
			}, this);
			
			themebtn = new Ext.CycleButton({
			    showText: true,
			    prependText: 'Music Genre: ',
			    items: [{
				    id: 'genre-drama',
			        text: 'Drama',
			        checked: true
			    },{
			    	id: 'genre-action',
			        text:'Action'
			    },{
				    id: 'genre-horror',
				    text: 'Horror'
			    },{
				    id: 'genre-atmosphere',
				    text: 'Atmosphere'
			    }],
			    tooltip: 'Select a different musical style',
			    changeHandler:function(btn, item){
			    	var genre = item.id.split("-")[1];
			    	var player = window.document['musicplayer'];
					try{
						player.sendEvent('STOP');
					}catch(e){};

					Ext.util.CSS.swapStyleSheet('theme', RPATH+'/resources/css/'+CSSBUILD+'/'+genre+'.css');
					Players[genre]();
					site_theme = genre;
					Ext.util.Cookies.set('site_theme', genre);
					
					Ext.Ajax.request({
						url: '/track/theme/'+genre,
						method: 'POST',
						callback: Ext.emptyFn
					});
			    },
			    scope: this,
			    renderTo: 'musical-theme'
			});
		},
		getThemeBtn: function(){
			return themebtn;
		},
		loadPage: function(path){
			Ext.Ajax.request({
				url: path,
				disableCaching: false,
				success: this.handlePage,
				scope: this
			});
		},
		handlePage: function(response, opts){
			Ext.get('main').update(response.responseText);
		}
	};
}();

Ext.onReady(App.init, App);