//initiate drop down menus for the vehicle-specific nav menu
var form_elements_to_turn_on = new Array();
window.addEvent('domready', function() {
	
	//loop through each menu item
	$$("div.vehicle_item").each(function(menu_item){
		
		menu_item.addEvent("mouseenter", function() {
			menu_item.addClass('hover');
		});
		menu_item.addEvent("mouseleave", function() {
			menu_item.removeClass('hover');
		});
		
		var menu_item_link = menu_item.getElement('a.vehicle_nav_link');
		if($defined(menu_item_link) && menu_item_link.getProperty('id') == currentPage) {
			menu_item.addClass('on');
		}
		
		//if it doesn't have a drop-down, return false (it still continues looping through other menu_items)
		if(!menu_item.getElement('div.features_menu_pos'))
			return false;
		
		/* get the two container divs.*/
		var div_menu_pos = menu_item.getElement('div.features_menu_pos');
		var div_menu_container = div_menu_pos.getElement('div.features_menu_container');
		if(!div_menu_container.getElement('div.column'))
			return false;
		if(!div_menu_container.getElement('div.column').getElement('ul'))
			return false;
		
		var features_link = menu_item.getElement('a.vehicle_nav_sub_link');
		
		/* 
		*  setup the positioning 
		*/
		var columns = div_menu_container.getElements('div.column');
		var greatest_width = 0;
		var greatest_height = 0;
		var column_count = 0;
		var border_width = div_menu_container.getElement('div.column').getStyle('border-left-width').toInt()+div_menu_container.getElement('div.column').getStyle('border-right-width').toInt();
		//loop through each column and find the greatest width and greatest height
		columns.each(function(column) {
			//if(column.getSize().size.x > greatest_width)
			//	greatest_width = column.getSize().size.x;
			var height = 0;
			column.getElements('h3').each(function(element) {
				var size = element.getSize().size.x;
				var sizey = element.getSize().size.y;
				if(size > greatest_width)
					greatest_width = size;
				height += sizey;
			});
			column.getElements('li a').each(function(element) {
				var size = element.getSize().size.x;
				var sizey = element.getSize().size.y;
				if(size > greatest_width)
					greatest_width = size;
				height += sizey;
			});
			
			if(height > greatest_height)
				greatest_height = height;

			//increment the column count
			column_count++;
		});

		var container_width = (greatest_width + (border_width))*column_count + (border_width);
		var container_height = (greatest_height);
		var wrapper_width = $('wrapper').getStyle('width').toInt();
		//loop through again and make them all the same using the greatest width and height we just found
		//first we need to check to see if the features menu goes past the wrapper, if so, we want to break them into two rows of columns
		if(container_width > wrapper_width) {
			var dropcolumn = (wrapper_width/greatest_width).toInt();
			container_width = (greatest_width + (border_width))*dropcolumn + (border_width);
			// added for safari to allow the row count to expand - previously it allowed only 2 rows. MB 7/14/08
			var rowCountHack = Math.ceil((columns.length/dropcolumn));
			container_height = container_height*rowCountHack;
			
			//add a blank area to fill the rest of the area and add a mouseout rule to it
			var blankdiv = new Element('div');
			blankdiv.setStyle('float','left');
			blankdiv.setStyle('width',greatest_width*(column_count-dropcolumn+1));
			blankdiv.setStyle('height',greatest_height+border_width+border_width);
			blankdiv.addEvent('mouseenter',function() {
				menu_item.fireEvent('mouseleave');
			});
			blankdiv.injectInside(div_menu_container);
		}
		
		div_menu_container.setStyle('width', container_width-border_width);
		div_menu_pos.setStyle('width', container_width-border_width);
		div_menu_container.setStyle('height', container_height-border_width+3);
		columns.each(function(column) {
			var column_id = column.getElement('h3').getProperty('id');
			
			//if our current page is the column id, then highlight the features menu
			if(column_id == currentPage) {
				menu_item.addClass('on');
			}
			
			var h3 = column.getElement('h3');
			var ul = column.getElement('ul');
			h3.setStyle('width',greatest_width-h3.getStyle('padding-left').toInt()-h3.getStyle('padding-right').toInt());
			ul.setStyle('width',greatest_width);
			column.getElements('li a').each(function(element) {
				//if the currentFeature is equal to the property
				if($defined(window.currentFeature)) {
					if((column_id == currentPage) && (currentFeature+'_link' == element.getProperty('id'))) {
						element.addClass('on');
					}
				}
				element.setStyle('width',greatest_width-element.getStyle('padding-left').toInt()-element.getStyle('padding-right').toInt());
				element.setStyle('display','block');
			});
			//set the width
			column.setStyle('width',greatest_width);
			//set the height
			column.setStyle('height',greatest_height);
			
		});
		//put the div.vehicle_menu_pos into position
		var menu_item_left = menu_item.getLeft();
		var wrapper_left = $('wrapper').getLeft();
		var wrapper_width = $('wrapper').getSize().size.x;
		div_menu_pos.setStyle('position','absolute');
		div_menu_pos.setStyle('left',wrapper_width-container_width-menu_item_left+wrapper_left);
		
		
		/* 
		*  Add Events
		*/
		//add slide in and out effects on mouse handling events
		//this is applied to the parent container 'div.vehicle_item' 
		//since the event has to hold true on the link and in the dropdown
		//initiate the slide on the inner container
		
		if(window.ie6){
			var mySlide = new Fx.Slide(div_menu_container, {wait:false, duration: 10, fps:100, transition: Fx.Transitions.Quad.easeInOut,onComplete:fIE6funcHide}).hide();
		}else{
			var mySlide = new Fx.Slide(div_menu_container, {wait:false, duration: 300, fps:100, transition: Fx.Transitions.Quad.easeInOut}).hide();
		}
		
		div_menu_pos.setStyle('visibility', 'visible');
		menu_item.addEvent("mouseenter", function() {
			mySlide.slideIn();
			menu_item.getElement('a.vehicle_nav_sub_link').addClass('on');
		});
		menu_item.addEvent("mouseenter", function() {
			mySlide.slideIn();
			menu_item.getElement('a.vehicle_nav_sub_link').addClass('on');
		});
		menu_item.addEvent("mouseleave", function() {
			
			if(mySlide.from > mySlide.to)
				return;
			if(window.ie6){	
				//////////////////
				for (var t = 0; t < form_elements_to_turn_on.length; t++) {
					form_elements_to_turn_on[t].setStyle('visibility', 'visible');
				}
				form_elements_to_turn_on = [];
				//////////////////
			}
			
			mySlide.slideOut();
			menu_item.getElement('a.vehicle_nav_sub_link').removeClass('on');
		});
	
		function fIE6funcHide(){
				var menuHeight = div_menu_container.getSize().scrollSize.y;
		
				var menuWidth = div_menu_container.getSize().scrollSize.x;
		
				var menuX = div_menu_container.getPosition().x;
		
				var menuY = div_menu_container.getPosition().y;
		
				if(window.ie6){
					$$('select').each(function(s) {
						if (s.className != "menu_select_field") {
							var elX = s.getPosition().x;		
							var elY = s.getPosition().y;
							//if ((element begins between the left and right edge of the menu) OR (element starts to the left of the menu, but extends into the area))
							if ((elX  > menuX && elX  < (menuX + menuWidth)) || ( ((elX + s.getSize().scrollSize.x) > menuX ) && (elX < menuX))) {
								
								// if (element is contained within the vertical space occupied by the menu)
								if (elY > menuY && elY < (menuY + menuHeight)) {
									s.setStyle('visibility', 'hidden');
									form_elements_to_turn_on.push(s);
								}
							}
						}
					});
				}
		}
		
		
	});
});