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

	template: _.template( $('#contacts-group-template').html() ),
	collection:null,
	paddingLeftMin: 28,
	paddingLeftStep: 10,
	
	events : {
		'click .contact-group-button':'onButtonGroupPress',
		'click #add-new-group-button':'showNewGroupCtrl',
		'click #remove-group-button' : 'deleteGroup',
		'keyup .new-group-name-control':'onKeyPress',
		'click .create-group-folder' : 'saveGroup',
		'click .cancel-group-create' : 'cancelNewFolder'

	},

	initialize: function(){
		_.bindAll(this,'render','activateDefault');
		App.groups.on('add sort remove',this.render);
	},

	render: function(){
		this.$el = $(this.el).empty();
		this.$el.append( this.template() );
		this.trigger('render');
		return this;
	},

	activateDefault: function(){
		this.$el.find('button').removeClass('active');
		this.$el.find('button:first').addClass('active');
	},

	onButtonGroupPress:function(e){
		var $btn, isUsr;

		$btn  = $(e.target);
		isUsr = $btn.data('user-group');

		this.$el.find('button').removeClass('active');
		$btn.addClass('active');
		if(isUsr){
			this.showRemoveCtrl();
		} else {
			this.hideRemoveCtrl();
		}

		this.trigger('group-button-press',e);
	},

	showRemoveCtrl:function(){
		this.$el.find('#remove-group-button').show();
	},

	hideRemoveCtrl: function(){
		this.$el.find('#remove-group-button').hide();
	},

	setGroup : function(e){
		
	},

	showNewGroupCtrl: function(e){
		this.$el.find('.new-group-control').show();
		this.$el.find('.new-group-name-control').focus();
		this.$el.find('.folder-list-divider').css('border-bottom-color','transparent');
	},

	hideNewGroupCtrl: function(){
		this.$el.find('.new-folder-control').hide();
		this.$el.find('.folder-list-divider').css('border-bottom-color','#dedede');
	},

	onKeyPress: function(e){
		var key,group;

		key   = e.which;

		if( key === App.keyCode.ENTER ){
			this.saveGroup();
			this.hideNewGroupCtrl();
		}

		if( key === App.keyCode.ESCAPE ){
			this.hideNewGroupCtrl();
		}
	},

	saveGroup: function(){
		var groupName,sCallback,eCallback;

		sCallback = function(model,response,options){
			if(response.error){
				App.alert(response.error.text);
				model.set( model.previousAttributes() );
			}
			App.contactsChrome.groupsBar.render();
		};

		eCallback = function(model,response,options){
			App.contactsChrome.groupsBar.render();
			App.alert(response.error.text);
		}

		groupName = this.$el.find('.new-group-name-control').val();

		if(groupName && groupName.length){
			this.collection.create({GroupName:groupName},{wait:true,error:eCallback,success:sCallback});
		}
	},

	deleteGroup: function(e){
		var id,$btn,group;

		$btn  = this.$el.find('.contact-group-button.active');
		id   = $btn.data('group-id');
		group = App.groups.get(id);

		if(group){
			// remove the group from both tables
			group.destroy();
		}
	},

	cancelNewFolder: function(e){
		this.$el.find('.new-folder-control').hide();
		this.$el.find('.folder-list-divider').css('border-bottom-color','#dedede');
	}

});