/* jshint onevar: false, smarttabs: true */

(function($){
	var Jetpack_CSS = {
		modes: {
			'default': 'text/css',
			'less': 'text/x-less',
			'sass': 'text/x-scss'
		},
		init: function() {
			this.$textarea = $( '#safecss' );
			this.editor = window.CodeMirror.fromTextArea( this.$textarea.get(0),{
				mode: this.getMode(),
				lineNumbers: true,
				tabSize: 2,
				indentWithTabs: true,
				lineWrapping: true
			});
			this.setEditorHeight();
		},
		addListeners: function() {
			// nice sizing
			$( window ).on( 'resize', _.bind( _.debounce( this.setEditorHeight, 100 ), this ) );
			// keep textarea synced up
			this.editor.on( 'change', _.bind( function( editor ){
				this.$textarea.val( editor.getValue() );
			}, this ) );
			// change mode
			$( '#preprocessor_choices' ).change( _.bind( function(){
				this.editor.setOption( 'mode', this.getMode() );
			}, this ) );
		},
		setEditorHeight: function() {
			var height = $('html').height() - $( this.editor.getWrapperElement() ).offset().top;
			this.editor.setSize( null, height );
		},
		getMode: function() {
			var mode = $( '#preprocessor_choices' ).val();
			if ( '' === mode || ! this.modes[ mode ] ) {
				mode = 'default';
			}
			return this.modes[ mode ];
		}
	};

	$( document ).ready( _.bind( Jetpack_CSS.init, Jetpack_CSS ) );
})(jQuery);