App.Views.ContactsButtonBar = Backbone.View.extend({
	template:_.template( $("#buttonbar-template").html() ),
	primaryButtonId: 'add-contact-button',
	primaryButtonName: 'Add Contact',
	searchElementId: 'search-contact',
	buttons: [
		{
			id:'add-contact',
			icon: 'icon-add_contact',
			text: 'Add Contact',
			dropdown:false,
			context: ['default']
		},
		{
			id:'contact-new-group',
			icon:'icon-add_group',
			text:'New Group',
			dropdown:false,
			context: ['default']
		},
		{
			id:'sort-contacts',
			icon:'icon-sort_fill',
			text:'Sort',
			dropdown:true,
			context: ['initial']
		},
		{
			id:'select-contacts',
			icon:'icon-check_fill',
			text:'Select',
			dropdown:true,
			context: ['default']
		},
		{
			id:'more-contacts',
			icon:'icon-more_fill',
			text:'More',
			dropdown:true,
			context: ['default']
		},
		{
			id:'edit-contacts',
			icon:'icon-compose_fill',
			text:'Edit',
			dropdown:false,
			context: ['single-select']
		},
		{
			id:'email-contacts',
			icon:'icon-email_fill',
			text:'Email',
			dropdown:false,
			context: ['single-select']
		},
		{
			id:'share-contacts',
			icon:'icon-send_fill',
			text:'Share',
			dropdown:false,
			context: ['single-select','multi-select']
		},
		{
			id:'delete-contacts',
			icon:'icon-trash_fill',
			text:'Delete',
			dropdown:false,
			context: ['single-select','multi-select']
		},
		{
			id:'save-contacts',
			icon:'icon-save_fill',
			text:'Save',
			dropdown:false,
			context: ['compose']
		},
		{
			id:'close-contacts',
			icon:'icon-x_fill',
			text:'Close',
			dropdown:false,
			context: ['compose']
		},
		{
			id:'help-contacts',
			icon:'icon-help_fill',
			text:'Help',
			dropdown:false,
			context: ['default']
		}
	],

	initialize: function(){
		_.bindAll(this,'setStateInit','setStateMulti','setStateSingle',
			'setStateCompose','setState');
	},

	render: function(){
		var html = this.template()
		$(this.el).append( html );
		return this;
	},

	setStateInit: function(e){ this.setState('initial'); },
	setStateMulti: function(e){ this.setState('multi-select'); },
	setStateSingle: function(e){ this.setState('single-select'); },
	setStateCompose: function(e){ this.setState('compose'); },
	setState:function(state){
		
		this.$el.find("li:not(."+state+", .default)").hide();
		this.$el.find("."+state).show();
	}
});