(function($) {
	
	FlagExpandingView = Backbone.View.extend({

		el: $('.flagList')

		,events: {
			'click a' : 'clickHandler'	
		}

		,initialize: function initialize () {

			_.bindAll(this, 'render');

			this.originalHeight = $('.flag').css('height');
		}

		,clickHandler: function clickHandler (ev) {
			var target = $(ev.currentTarget).parent('li');	

			ev.preventDefault();

			if( target.hasClass('active') ) {
				this.setInactive();
			} else {
				this.setActive(target);
			}
		}

		,setActive: function setActive (target) {
			var targetHeight = vsa.getNaturalHeight(target);

			this.setInactive();

			target.addClass('active');

			target.find('.fakeLink').addClass('close').text('Close');

			this.expandFlag(target, targetHeight);
		}

		,setInactive: function setInactive () {
			var self = this;

			$('.flag').removeClass('active');

			$('.flag').find('.fakeLink').removeClass('close').text('Explore')

			$('.flag').stop().animate({
				height: self.originalHeight
			});
		}

		,expandFlag: function expandFlag (target, height) {
			target.stop().animate({
				height: height + 20
			}, 350);
		}
	});

}(jQuery));