$( window ).ready( function() {
	new PrefsRouter( $('#content') );
});


/* ---------------------------------------------- */
/* Router for the various Pref sections */
/* ---------------------------------------------- */
PrefsRouter = can.Control({
	defaults: {
		menu: $( '#sections' ),
		default_route: 'app'
	}
}, {
	init: function() {
		var self = this;
		self.controls = [];

		if ( window.location.hash == "" ) window.location.hash = "#" + self.options.default_route;
	},

	// Remove controllers (and their children DOM elements) and reflect
	// the currently selected route.
	//
	reset: function() {
		var self = this;
		var current_route = can.route.attr( 'route' );
		var menu = self.options.menu;

		// FIXME
		menu.find( 'a' ).removeClass( 'selected' );
		console.log( menu.find( 'a' ) );
		console.log( menu.find( 'a[href="#' + current_route + '"]' ) );

		while ( control = self.controls.pop() ) control.destroy();
	},

	"app route": function() {
		this.reset();
		this.controls.push( new PrefsAppWidget(this.element) );
	},

	"server route": function() {
		this.reset();
		this.controls.push( new PrefsServerWidget(this.element) );
	},
});


/* ---------------------------------------------- */
/* App behavior section */
/* ---------------------------------------------- */
PrefsAppWidget = can.Control({
	defaults: {
		view: 'app://window/prefs/app.ejs'
	}
}, {
	init: function() {
		var self = this;

		// Get the current preference values.
		//
		var bool_prefs = {
			hidesplash: [ D.getBoolPref( 'hidesplash' ), 'Skip splash screen at startup' ],
			fullscreen: [ D.getBoolPref( 'fullscreen' ), 'Go full screen by default' ],
			devmode:    [ D.getBoolPref( 'devmode' ), 'Developer mode' ]
		}

		self.element.html(
			can.view( self.options.view, {
				bool_prefs: bool_prefs
			})
		);
	},

	'input click': function( ele, event ) {
		var pref = ele.data( 'field' );

		if ( ele.attr('type') == 'checkbox' ) {
			var bool = ele.is( ':checked' );
			D.setBoolPref( pref, ele.is(':checked') );

			if ( pref == 'devmode' && bool ) D.window.main.showInspector( true );
		}
	},
});


/* ---------------------------------------------- */
/* Server section */
/* ---------------------------------------------- */
PrefsServerWidget = can.Control({
	defaults: {
		view: 'app://window/prefs/servers.ejs'
	}
}, {
	init: function() {
		var self = this;
		var server = D.getPref( 'server_uri' );

		self.element.html(
			can.view( self.options.view, {
				server: server
			})
		);
	},

	// Update the server URI preference.
	//
	updateServer: function( uri ) {
		console.log( 'Updated server_uri to ' + uri + '.' );
		D.setPref( 'server_uri', uri );
		D.tf.uri = uri;
	},

	// Hitting the return key on input fields defer to the 'blur' event,
	// which in turn fires the 'change' event.
	//
	"#server keypress": function( ele, event ) {
		if ( event.which == 13 ) ele.trigger( 'blur' );
	},
	'#server change': function( ele, event ) {
		this.updateServer( ele.val() );
	},
	'#server keyup': function( ele, event ) {
		D.delay( function() {
			this.updateServer( ele.val() );
		}, 500, true );
	},


	// Talk to the remote server, check to see if it's really
	// a ThingFish handler or not.
	//
	'#test click': function( ele, event ) {
		var server = $( '#server' ).val();
		D.checkServer( server );
	},
});