(function($) {

	HeaderView = Backbone.View.extend({
		el: $('.shellHeader')
		
		,events: {
			'mouseenter .menuItem'		: 'mouseOverHandler'
			,'mouseleave .menuItem'		: 'mouseOutHandler'
			,'mouseup .locationLink'	: 'showHideLanguages'
			,'focus .menuItem'			: 'focusHandler'
			,'blur .menuItem'			: 'blurHandler'
		}
		
		,initialize: function initialize () {

			// Set up our variables
			var self, dropDownArray, locationLink, menuItemArray; 

			// Set variables
			self = this;
			
			// Some necessary Backbone.js stuff
			_.bindAll(this, 'render');
			this.render();
			
			// Set the position of the dropdown menus
			this.positionDropDowns();

			// Subscribe to event that handles active/inactive 
			// state of this.locationLink
			pubsub.subscribe('ryerson/languages/view/closeClickHandler', function () {
				self.locationLink.removeClass('active');
			});
		}
		
		,render: function render () {
			// Set up our template and then render it before any 
			// pre-existing content
			var template = _.template( $('#header_template').html(), {} );
			$(this.el).prepend( template );

			// Set this.locationLink now that our view has been rendered
			this.locationLink = $(this.el).find('.locationLink');
		}

		,centerLinkText: function centerLinkText () {
			$.each( $('.dropDown ul p'), function (index, value) {
				var target = $(value)
					,textHeight = vsa.getNaturalHeight( target )
					,parentHeight = vsa.getNaturalHeight( target.parent() )
					,topPosition = (parentHeight - textHeight) / 2;

				target.css('top', topPosition);
			});
		}
		
		,mouseOverHandler: function mouseOverHandler (ev) {
			var target = $(ev.currentTarget);

			pubsub.publish('ryerson/navigationMouseOver');

			target.addClass('hover');
			
			this.setCurrentDropDown(ev);

			this.positionDropDowns();
			
			this.showDropDown();
		}
		
		,mouseOutHandler: function mouseOutHandler (ev) {
			var target = $(ev.currentTarget);

			pubsub.publish('ryerson/navigationMouseOut');

			$(ev.currentTarget).removeClass('hover');
			
			this.setCurrentDropDown(ev);
			
			this.hideDropDown();
		}

		,focusHandler: function focusHandler (ev) {
			this.mouseOverHandler(ev);
		}

		,blurHandler: function blurHandler (ev) {
			this.mouseOutHandler(ev);
		}

		,showDropDown: function showDropDown() {
			this.dropDown.show();

			this.centerLinkText();
		}		

		,hideDropDown: function hideDropDown() {
			this.dropDown.hide();
		}
		
		,setCurrentDropDown: function setCurrentDropDown (ev) {
			this.dropDown = $(ev.currentTarget).find('.dropDown');
		}
		
		,positionDropDowns: function positionDropDowns () {
			var navOffset = $(this.el).children('.mainNav').offset();
			var logoWidth = parseInt( $(this.el).find('.logo').css('width') ) + parseInt( $(this.el).find('.logo').css('margin-right') );

			$(this.dropDown).css({
				//'left' : navOffset.left + logoWidth
				'left': logoWidth
				//,'top'  : navOffset.top + vsa.getNaturalHeight($('.mainNav'))
			});
		}

		,showHideLanguages: function showHideLanguages (ev) {
			var target = $(ev.currentTarget);

			if ( target.hasClass('active')) {
				target.removeClass('active');
				pubsub.publish('ryerson/header/hideLanguages');
			} else {
				target.addClass('active');
				pubsub.publish('ryerson/header/showLanguages');
			}
		}
		
	});

}(jQuery));