App.Views.MessageList = Backbone.View.extend({

	lastMessageClicked:null,
	collection:null,
	idPrefix: '_emailId_',
	template: _.template( $('#message-list-template').html() ),
	msgTemplate: _.template( $('#message-template').html() ),
	state: null,

	initialize: function(){
		_.bindAll(this,'render');
		this.collection.on("sync", this.render);
		this.collection.on('sync', function() {
	
			var searchTerm = document.getElementById("search-term").innerHTML;
			var n = searchTerm.length;
			if(n >=1){
				var res = searchTerm.split(" "); 
				$('#message-list').highlight(res);	
			}
			$('#message-list').highlight(searchTerm);	
		});
	},

	render: function(){
		this.$el = $(this.el).empty();
		this.$el.append( this.template() );

		if(this.state !== null){
			this.state();
		} else {
			this.open();
		}

		App.emailChrome.bindDraggable();
		this.$el.append( App.emailChrome.pgrTmpl() );

		// this.$el.append( App.emailChrome.pgrTmpl() );
		/*
		this.collection.deferred.done(function(){
			view.$el.empty().append( view.template() );

			if(view.state !== null){
				view.state();
			} else {
				view.open();
			}

			App.emailChrome.bindDraggable();

		});
		*/

		// this triggers the re-application of draggable on each of the email rows
		// this.trigger('render');

		return this;
	},

	isTwoColumnView: function(){
		return $('.two-column-view').is(':visible');
	},

	events : {
		'click tr' : 'selectMessage',
		'click #email-list-checkbox-select-all' : 'toggleSelectedEmail',
		'change .email-selection-checkbox' : 'toggleItem'
	},

	contract: function(){
		this.$el.find('.multi-column-view').hide();
		this.$el.find('#tabular-email-list thead').hide();
		this.$el.find('.two-column-view').show();
		this.$el.css({'width':'268px','left':'0px'});
		this.state = this.contract;
	},

	close: function(){
		this.$el.css('left','-230px');
		this.state = this.close;
	},

	open: function(){
		this.$el.css({'width':'100%','left':'0px'});
		this.$el.find('#tabular-email-list thead').show();
		this.$el.find('.multi-column-view').show();
		this.$el.find('.two-column-view').hide();
		this.state = this.open;
	},

	selectMessage : function(e){
		
		var row = $(e.target).parents('tr[class^="message-"]'),
			 cid  = row.prop('id');

		console.log('selectMessage() cid: ' + cid);

		if( !$(e.target).hasClass('email-selection-checkbox') ){
			var msg = App.email.get(cid),
				// folder = document.getElementById("current-folder").innerHTML;
				folder = App.email.getCurrentFolder();
			if(folder == 'Drafts'){
				
				this.trigger('create-draft',e,msg);
			} 	else {

				// Not necessary, this is set by triggering message-select
				//	msg.setSeen();

			this.render( this.isTwoColumnView() );
				this.$el.find('tr[id="'+cid+'"] .email-selection-checkbox').click();
			this.trigger( 'message-select', msg.get('UID'), msg.get('acct') );
			}
		}

	},

	toggleSelectedEmail:function(e){

		$(this.el).find('tr[class^="message-"]').removeClass('active');
		if(e.target.checked){
			$('.email-selection-checkbox:not(:checked)').click();
			// $(this.el).find('tr[class^="message-"]').addClass('active');
			this.trigger('select-multiple');
		} else {
			$('.email-selection-checkbox:checked').click();
			this.trigger('select-none');
		}
	},

	toggleItem: function(e){
		var row = $(e.target).parents('tr.message-item');

		if(e.target.checked){
			row	.addClass('active');
			
		} else {
			row	.removeClass('active');
		}

		this.triggerListState();
	},

	triggerListState: function(){
		// console.log(row.prop('id') + " is" + ( row.draggable('option','disabled') ? ' ':' not ') + 'disabled...');
		var n = $('.email-selection-checkbox:checked').length;
		if(n===0){
			this.trigger('select-none');
		} else if( n === 1 ){
			this.trigger('select-single');
		} else if( n > 1 ){
			this.trigger('select-multiple');
		}
	}
});

