App.SettingsChrome = Backbone.View.extend({

	settingsPane:null,
	verticalBar:null,
	events: {

	},

	initialize: function(){
		_.bindAll(this,'render','showPane');
	},

	render: function(){

		this.verticalBar = new App.Views.AccountsSettingsMenu({
			el: $('#settings-pane .vertical-bar'),
			collection: App.accounts
		}).render();

		this.settingsPane = new App.Views.SettingsPane({
			el: $('#options-pane')
		}).render();

		// this.settingsPane.$el.find('.toggle-switch').toggleSwitch();

		this.verticalBar
			.bind('button-press',this.showPane);

		return this;
	},

	showPane: function(e){
		var $btn   = $(e.target), 
			self   = this,
			notNew = ( ! $btn.hasClass('new-account-button') ),
			newPane;

		if( $btn.hasClass('new-account-button') ){
			newPane = new App.Views.NewAccountSettings();
		}

		if( $btn.hasClass('general-settings-button') ){
			newPane = new App.Views.SettingsPane({
				model:App.settings
			})
		}

		if( notNew && ($btn.hasClass('account-button') || $btn.hasClass('account-settings-button')) ){
			var modelId = $btn.data('account'), md;
			if(modelId==='primary'){
				md = App.accounts.getPrimaryAccount();
			} else {
				console.log('showPane() modelId: ' + modelId);
				md = App.accounts.get(modelId);
			}

			newPane = new App.Views.Account({
				model: md
			});
		}

		if(newPane){
			this.settingsPane.remove();
			this.$el.find('.primary-content-pane').append('<div id="options-pane"></div>');
			newPane.setElement( this.$el.find('#options-pane') );
			this.settingsPane = newPane.render();
			this.settingsPane.$el.find('.toggle-switch').toggleSwitch();
			
			// todo: add new editor
			//var cke = this.settingsPane.$el.find('textarea').ckeditor(function(textarea){
			//	self.$el.find('#options-pane').scrollTop(0);
			//});
		}
	}
})
