var Navigation = Class.create();
Navigation.selected = location.href;
Object.extend(Navigation.prototype, {
	initialize: function(root_node) {
		this.root_node = $(root_node);
		this._set_active(arguments[1] || Navigation.selected);
		this._navigation_links().each(this._image_replacement.bind(this));
		this._add_arrows();
		this._slide_down_active();
	},

	/* Will let a node know it is the active node */
	_set_active: function(current) {
		['ul', 'li'].each(function(tag) {
			$$(tag).each(function(e) {e.removeClassName('active');});
		});
		current = this._basename(current);
		this._navigation_links().each((function(element) {
			var href = element.getAttribute('href');
			href = this._basename(href);

			if( href == current ) {
				$$('#'+this.root_node.id+' li li').each(Element.hide);
				var ele = element;
				while(ele = ele.parentNode) {
					if(ele == this.root_node) return;
					var tag_name = ele.tagName.toLowerCase();
					if(tag_name == 'li' || tag_name == 'ul') {
						ele.addClassName('active');
						if( tag_name == 'li' )
							this._disable_link(ele.down('a'));
					}
				}
			}
		}).bind(this));
	},

	/* By default we provide a "text" interface to be more accessible
	and provide a fallback if images cannot be loaded. This method will
	update the element so that images are used instead to provide
	higher quality typography. */
	_image_replacement: function(element) {
		var base_name = this._to_base_name(element.innerHTML);
		var extension = '.gif';
		var path = '/images/navimages/';

		var off_image = path + base_name + extension;
		var active_image = path + base_name + '_active' + extension;
		var hover_image = path + base_name + '_hover' +  extension;
		var active_hover_image = path + base_name + '_active' + extension;

		var normal_image = off_image;
		var normal_hover_image = hover_image;
		if( element.parentNode.hasClassName('active') ) {
			normal_image = active_image;
			normal_hover_image = active_hover_image;
		}

		this.__cache_normal_image = new Image();
		this.__cache_normal_image.src = normal_image;
		this.__cache_normal_hover_image = new Image();
		this.__cache_normal_hover_image.src = normal_hover_image;

		Event.observe(element, 'mouseover', (function(event) {
			var img = element.down('img');

			if( this._basename(img.getAttribute('src')) ==
				this._basename(normal_hover_image) ) return;
			img.setAttribute('src', normal_hover_image);

		}).bindAsEventListener(this));

		Event.observe(element, 'mouseout', (function(event) {
			var img = element.down('img');
			if( this._basename(img.getAttribute('src')) == 
			this._basename(normal_image) ) return;
			img.setAttribute('src', normal_image);
		}).bindAsEventListener(this));

		this._image_replace(element, normal_image);
	},

	/* Converts text into something suitable for a filename */
	_to_base_name: function(name) {
		name = name.toLowerCase();
		name = name.replace('&', 'and');
		name = name.replace(/\W/g, '_');
		name = name.replace(/_+/g, '_');
		name = this._custom_base_name(name);
		return name;
	},

	/* To handle those files that need a custom name */
	_custom_base_name: function(name) {
		switch(name) {
			case 'company_profile_and_philosophy': return 'profile';
			case 'company_directory': return 'directory';
			case 'detail_of_services': return 'services';
			case 'inside_the_firm': return 'firm';
			case 'interior_design': return 'interiors';
			case 'map_and_directions': return 'map_directions';
			default: return name;
		}
	},

	/* Will replace the contents of the element with the given image */
	_image_replace: function(element, image) {

		var padding = parseInt(element.getStyle('padding-top'));
		var height = parseInt(element.getStyle('height'));

		if( padding && height ) {
			element.style.height = (padding + height) + 'px';
			element.style.paddingTop = '0px';
		}

		var alt_txt = element.innerHTML;
		while(element.firstChild) Element.remove(element.firstChild);
		var img = document.createElement('img');
		img.setAttribute('src', image);
		img.setAttribute('alt', alt_txt);
		img.setAttribute('align', 'bottom');
		element.appendChild(img);

		element.addClassName('image-replaced');
	},

	_basename: function(path) {
		path = path.split('/');
		return path.last();
	},

	_navigation_links: function() {
		return $$('#' + this.root_node.id + ' a');
	},

	_slide_down_active: function() {
		var active = this.root_node.down('li.active');
		if( !active ) return;
		var active_child = active.down('li.active');
		if( !active_child ) {
			active.down('a').morph("padding-top: 23px;", {duration: 0.375});
			return;
		}
		active_child = active_child.down('a');
		active = active.down('a');
		if( active_child.href == active.href ) {
			var af = function() {this._show_subnav()};
			af = af.bind(this);
			active.morph("padding-top: 23px;", {
				duration: 0.375,
				afterFinish: af
			});
		} else {
			active.setStyle({paddingTop: '23px'});
			this._show_subnav(true);
		}
	},

	_show_subnav: function(/* immediate */) {
		var immediate = arguments[0];
		var active_parent = this.root_node.down('li.active');
		if( !active_parent ) return;
		var show_left = active_parent.hasClassName('left');
		lis = $A(active_parent.getElementsByTagName('li'));
		if(lis.size() == 0) return;
		active_parent = active_parent.down('a');

		var current_top = Position.positionedOffset(active_parent)[1] +
			active_parent.getHeight();
		var current_left = Position.positionedOffset(active_parent)[0] +
			active_parent.getWidth();
		if(show_left) current_left -= active_parent.getWidth();
	
		var end_nav = Position.positionedOffset(this.root_node)[0];
		if(!show_left) end_nav += this.root_node.getWidth();

		var arrow = this.right_arrow;
		if(show_left) arrow = this.left_arrow;
		lis.unshift(arrow);

		lis.each((function(li) {
			li.style.position = 'absolute';
			li.style.top = (current_top - li.getHeight()) + 'px';
			if( show_left ) {
				li.style.left = (current_left - li.getWidth()) + 'px';
				current_left -= li.getWidth();
			} else {
				li.style.left = current_left + 'px';
				current_left += li.getWidth();
			}
			if( li == lis.last() ) {
				li.style.width = (li.getWidth() +
					Math.abs(end_nav - current_left)) + 'px';
				if( show_left ) {
					li.style.left = Position.positionedOffset(this.root_node)[0] + 'px'
					li.style.textAlign = 'right';
				}
			}
			if( immediate ) {
				li.show();
			} else {
				var end_opacity = 1;
				li.setStyle({opacity: 0});
				li.show();
				setTimeout(function(){Effect.Appear(li,
					{to: end_opacity, duration: 0.125,
					queue: 'end'})}, 75);
			}
		}).bind(this));
	},

	_add_arrows: function() {
		var extension = '.gif';
		var path = '/images/navimages/';

		this.__cache_arrow_left = new Image();
		this.__cache_arrow_left.src = path + 'arrow-left' + extension;
		this.left_arrow = $(document.createElement('img'));
		this.left_arrow.setAttribute('src', path + 'arrow-left' + extension);
		this.left_arrow.setAttribute('alt', '');
		this.left_arrow.addClassName('arrow');
		this.left_arrow.style.position = 'absolute';
		this.left_arrow.style.width = '6px';
		this.left_arrow.hide();
		this.root_node.parentNode.insertBefore(this.left_arrow, this.root_node);

		this.__cache_arrow_right = new Image();
		this.__cache_arrow_right.src = path + 'arrow-right' + extension;
		this.right_arrow = $(document.createElement('img'));
		this.right_arrow.setAttribute('src', path + 'arrow-right' + extension);
		this.right_arrow.setAttribute('alt', '');
		this.right_arrow.addClassName('arrow');
		this.right_arrow.style.position = 'absolute';
		this.right_arrow.style.width = '6px';
		this.right_arrow.hide();
		this.root_node.parentNode.insertBefore(this.right_arrow, this.root_node);
	},

	_disable_link: function(link) {
		link = $(link);
		link.style.cursor = 'default';
		Event.observe(link, 'click', (function(event) {
			Event.stop(event);
		}).bindAsEventListener(this));
	}
});