(function($) {
	
	LanguagesView = Backbone.View.extend({
		el: $('.languagesWrapper')
		
		,events: { 
			'click a.button': 'closeClickHandler'
			,'click li a': 'setNewLanguage'
		}
		
		,initialize: function initialize () {
			var self = this;
			
			_.bindAll(this, 'render', 'conceal', 'setNewLanguage');
			
			pubsub.subscribe('ryerson/header/showLanguages', function () {
				self.reveal();
			});

			pubsub.subscribe('ryerson/header/hideLanguages', function () {
				self.conceal();
			});
			
			// this.render();
		}
		
		,render: function render () {
			// var self = this;
			// var vars = { 
			// 	countries: self.model.get('countries') 
			// 	,startIndex: 0
			// };

			// var template = _.template( $('#languages_template').html(), vars );
			// this.el.html( template );
		}
		
		,closeClickHandler: function closeClickHandler () {
			this.conceal();
		}

		,reveal: function reveal () {
			var self = this;
			
			this.el.css('display', 'block').animate({
				height: vsa.getNaturalHeight(self.el)
			}, { 
				duration: 200
				,easing: 'easeOutQuad'
			});
		}		
		
		,conceal: function conceal () {
			// Fire event so that the locationLink knows to change classes
			pubsub.publish('ryerson/languages/view/closeClickHandler');

			var self = this;

			// Animate out the language section
			$(this.el).animate({
				height: 0
			}, {
				duration: 150
				,easing: 'easeInCubic'
				,callback: function () {
					self.el.css('display', 'none');
			}});
		}

		,setNewLanguage: function setNewLanguage (ev) {
			var target,
				self,
				conceal;

			target = $(ev.currentTarget);
			self = this;
			// we have to set this.conceal to a variable
			// so that the setTimeout call works properly
			conceal = this.conceal;

			// Remove active class from all child a's
			$(this.el).find('a').removeClass('active');

			// Get the new current language
			this.currentLanguage = target.text();

			// console.log(vsa.Util);

			// this.currentLanguage = vsa.Util.capitalizeString(this.currentLanguage);

			// Set the current element as active
			target.addClass('active');

			// console.log(this.currentLanguage);

			$('.locationLink').text(this.currentLanguage);

			// After a delay, close the language section
			setTimeout(conceal, 1000);
		}
	});
	
}(jQuery));