// ############################################################################
// vehicle_sorter.js -- sorter
// ============================================================================
// CREATED BY:	Zander Waldman -- zwaldman@organic.com
//			Organic Det
//
// CREATED ON: 09/05/06
// ############################################################################
	
	var vehiclesArray = new Array();
	var cur_tab;
	var currentUsage;
	var currentEngine;
	var tableOpen = false;
	
	/*var browser=navigator.appName
	var b_version=navigator.appVersion
	var version=parseFloat(b_version)

if ((browser=="Microsoft Internet Explorer")
&& (version<=4))
  {alert("IE6")}*/
	
	// ======================================================
	// Vehicle() -- class construct
	// ======================================================
	var Vehicle = new Class({
			initialize: function(name, id, image, url, seating, payload, towing, engines, usage, startingPrice, shownPrice, seatingData, payloadData, towingData, engineData, usageTypes, engineTypes){
			this.name = name;
			this.id = id;
			this.url = url;
			this.seating = seating;
			this.payload = payload;
			this.towing = towing;
			this.engines = engines;
			this.usage = usage;
			this.image = image;
			this.startingPrice = startingPrice;
			this.shownPrice = shownPrice;
			this.seatingData = seatingData;
			this.payloadData = payloadData;
			this.towingData = towingData;
			this.engineData = engineData;
			this.usageTypes = usageTypes;
			this.engineTypes = engineTypes;
		}
	});
	
	// ======================================================
	// sortVehicles()
	// ======================================================
	function sortVehicles(element) {
				
		if(tableOpen) {
			closeWeightsTable();
		} else {
			$('weights-table-box').setStyle('display', 'none');
			$('disabler').setStyle('display', 'none');
		}
		
		if(element != "seating") {
		
			// get the type of sort
			var sortType = $(element.id).getProperty('id');
		
		} else {
			var sortType = "seating";
			//linkTrack('sorter', sortType);
		}
		
		// swapTabs
		swapTabs(sortType);
	
		// get the appropriate list
		var categories = eval(sortType + 'Categories');
		
		// get the div for the results
		var resultsDiv = $('results');
		resultsDiv.empty();
		
		if(sortType == "payload") {
			$('weights_table_button').setStyle('display', 'block');	
		} else {
			$('weights_table_button').setStyle('display', 'none');		
		}
		
		switch (sortType) {
			
			case "usage":
				$('find_upfitter_button').setStyle('display', 'block');
				$('upfit_button').setStyle('display', 'block');
				
				var div = new Element('div').setProperty('id', 'usage-left-column').injectInside(resultsDiv);
				div.addClass('left-column');
				var h4 = new Element('h4').injectInside(div);
				h4.setText('Select an Industry or Upfit from the lists below');
				
				var industryTitle = new Element('span').setProperty('class', 'menu-title').injectInside(div);
				industryTitle.setText('Industry');
				
				var menuBox = new Element('div').setProperty('class', 'menu-box').injectInside(div);
				var ul = new Element('ul').injectInside(menuBox);
				
				// create  industry list
				for(var i = 0; i < industryArray.length; i++) {
				
					var li = new Element('li').setProperty('id', industryArray[i][0]).injectInside(ul);
					var a = new Element('a').injectInside(li);
					a.setProperty('href',  'javascript:selectUsage("' + industryArray[i][0] + '")');
					a.setHTML(industryArray[i][1]);
				
				}
				
				var upfitTitle = new Element('span').setProperty('class', 'menu-title').injectInside(div);
				upfitTitle.setText('Upfit');
				
				var menuBox = new Element('div').setProperty('class', 'menu-box').injectInside(div);
				var ul = new Element('ul').injectInside(menuBox);
				
				// create  upfit list
				for(var i = 0; i < upfitArray.length; i++) {
				
					var li = new Element('li').setProperty('id', upfitArray[i][0]).injectInside(ul);
					var a = new Element('a').injectInside(li);
					a.setProperty('href',  'javascript:selectUsage("' + upfitArray[i][0] + '")');
					a.setHTML(upfitArray[i][1]);
				
				}
				
				// create the def list
				var dl = new Element('dl').injectInside(resultsDiv);
					
				var dt = new Element('dt').injectInside(dl);
				dt.setText('');
				
				break;
				
			case "engines":
			
				$('find_upfitter_button').setStyle('display', 'none');
				$('upfit_button').setStyle('display', 'none');
				
				var div = new Element('div').setProperty('id', 'menu-left-column').injectInside(resultsDiv);
				div.addClass('left-column');
				var h4 = new Element('h4').injectInside(div);
				h4.setText('Select an Engine from the list below');
				
				var engineTitle = new Element('span').setProperty('class', 'menu-title').injectInside(div);
				engineTitle.setText('Engines');
				
				var menuBox = new Element('div').setProperty('class', 'menu-box').injectInside(div);
				var ul = new Element('ul').injectInside(menuBox);
				
				// create  industry list
				for(var i = 0; i < engineArray.length; i++) {
				
					var li = new Element('li').setProperty('id', engineArray[i][0]).injectInside(ul);
					var a = new Element('a').injectInside(li);
					a.setProperty('href',  'javascript:selectEngine("' + engineArray[i][0] + '")');
					a.setHTML(engineArray[i][1]);
				
				}
				
				
				
				// create the def list
				var dl = new Element('dl').injectInside(resultsDiv);
					
				var dt = new Element('dt').injectInside(dl);
				dt.setText('');
				break;
			
			default:
				$('find_upfitter_button').setStyle('display', 'none');
				$('upfit_button').setStyle('display', 'none');
		
				// loop and fill the categories
				for(var i = 0; i < categories.length; i++) {
					
					// create the def list
					var dl = new Element('dl').injectInside(resultsDiv);
					
					var dt = new Element('dt').injectInside(dl);
					dt.setHTML(categories[i]);
					
				}
				break;
			
		}
		
		var dtArray = $$('#results dt');
		
		// loop on vehicles and place in appropriate list
		for(var i = 0; i < vehiclesArray.length; i++) {
			
			// get the dt number that this vehicle falls in
			var categoryNumber = Number(vehiclesArray[i][sortType]);
			var dd =  new Element('dd').setProperty('id', i).injectAfter(dtArray[categoryNumber]);
			//if(sortType == "usage" || sortType == "engines") {dd.setStyle('opacity', .99); dd.addClass('on');}
			dd.setStyle('opacity', .9); 
			dd.addClass('on');
			var a = new Element('a').setProperty('class', 'vehicle-tip').injectInside(dd);
			a.setProperty('href', 'javascript:selectVehicle("' + vehiclesArray[i].url + '","' + vehiclesArray[i].id + '");');
			var br = new Element('br').setProperty('class','spacer').injectInside(a);
			var span = new Element('span').setText(vehiclesArray[i].name).injectInside(a);
			
			// set tip data
			var html = "<span class=\"vehicle-name\">" + vehiclesArray[i].name + "</span>";
			//html += vehiclesArray[i].startingPrice + "<br/>";
			//html += vehiclesArray[i].shownPrice;
			html += "<span class=\"category-title\">" + seatingFlyoutTitle + " </span>" + vehiclesArray[i].seatingData;
			html += "<span class=\"category-title\">" + payloadFlyoutTitle + " </span>" + vehiclesArray[i].payloadData;
			html += "<span class=\"category-title\">" + towingFlyoutTitle + " </span>" + vehiclesArray[i].towingData;
			html += "<span class=\"category-title\">" + enginesFlyoutTitle + " </span>" + vehiclesArray[i].engineData;
			//html += "<span class=\"tip-disclaimer\">*EPA estimated miles when properly equipped</span>"
			
			a.setProperty('title', html);
			var img = new Element('img').setProperty('src',vehiclesArray[i].image).injectTop(a);		

			
		}
		
		// set width based on amount of items
		var dlArray = $$('#main_content dl');
		
		if (sortType == "engines" || sortType == "usage") {
			
			dlArray[0].setStyle('width', '718px');
			if(sortType == "usage") { $('all').addClass('selected');};
			if(sortType == "engines") {$('all').addClass('selected');};
			
		} else {
			
			var doubleColumn = false;
			
			for(var i = 0; i < dlArray.length; i++) {
				
				if(dlArray[i].getChildren().length > 6  && dlArray[i].getChildren().length < 10) {
					
					dlArray[i].setStyle('width', '39%');
					doubleColumn = true;
					
				} else if(dlArray[i].getChildren().length > 10) {
					
					dlArray[i].setStyle('width', '537px');
					doubleColumn = true;
					
				}

				if(i == dlArray.length-1 && !doubleColumn) {

					dlArray[i].setStyle('width', '39%');
					
				}
				
			}
		}
		
		
		var clear = new Element('br').setProperty('class', 'clear').injectInside(resultsDiv);
		
		makeTips({x:25,y:25},'.vehicle-tip','vehicle-tool');
		
	}
	
	// ======================================================
	// selectVehicle()
	// ======================================================
	function selectVehicle(url, id) {
		
		linkTrack('sorter', id);
		window.location = url;

		
	}
	
	// ======================================================
	// swapTabs()
	// ======================================================
	function swapTabs(sortType) {
		
		pageTrack('sorter', sortType)
		
		
		// if we have a selected tab
		if($(cur_tab)){
			
			// clean class
			$(cur_tab).removeClass('tab_on');
			$('tab_left').removeClass('tab_corner_on');
			$('tab_right').removeClass('tab_corner_on');
		}else{
			//alert('first load');
			linkTrack('sorter', sortType);
		}
		
		// add the new class
		$(sortType).addClass('tab_on');
		if($(sortType).getParent().hasClass('first_tab')){
			$('tab_left').addClass('tab_corner_on');
		}
		if($(sortType).getParent().hasClass('last_tab')){
			$('tab_right').addClass('tab_corner_on');
		}
		
		// set cur tab
		cur_tab = sortType;
		
	}
	
	// ======================================================
	// makeTips()
	// ======================================================
	function makeTips(browserOffset,eleClass,tipClassName){
		
        if (window.ie6 || navigator.appVersion.indexOf("Mac")!=-1){
            var HeaderTips = new Tips($$(eleClass), {className: tipClassName,offsets: browserOffset});
        }else{
             var HeaderTips = new Tips($$(eleClass), {
             className: tipClassName,
             offsets: browserOffset,
             initialize:function(){
             this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);},
             onShow: function(toolTip) {this.fx.start(1);},
             onHide: function(toolTip) {this.fx.start(0);}});
        }
	   
    }
    
	// ======================================================
	// selectUsage()
	// ======================================================
	function selectUsage(usageType){
		
		linkTrack("sorter", usageType);
		
		// if we have a selcted usage
		if(currentUsage) { $(currentUsage).removeClass('selected'); }
		
		// set currentUsage
		currentUsage = usageType;
		
		// set menu item selected
		$(usageType).addClass('selected');
		
		
		
		// loop on vehicles and check for usage
		for(var i = 0; i < vehiclesArray.length; i++) {
			
			var found = false;
			
			var startValue = .99;
		
			for(var j = 0; j < vehiclesArray[i].usageTypes.length; j++) {
				
				//alert($(String(i)).getStyle('opacity').toInt());
				
				if(vehiclesArray[i].usageTypes[j] == currentUsage) {
					
					
					if($(String(i)).getProperty('class') != "on") {
						startValue = .1;
					}
					
					var myFx = new Fx.Style($(String(i)),'opacity',{duration:500});
					myFx.start(startValue,.99);
					found = true;
					$(String(i)).addClass('on');
					
				}
				
			}
			
			if(!found) {
				
				if($(String(i)).getProperty('class') != "on") {
					startValue = .1;
				}
				
				var myFx = new Fx.Style($(String(i)),'opacity',{duration:500});
				myFx.start(startValue,.1);
				$(String(i)).removeClass('on');
				
			}
		
		}
		
	}


	// ======================================================
	// selectEngine()
	// ======================================================
	function selectEngine(engineType){
		
		linkTrack("sorter", engineType)
		
		// if we have a selcted usage
		if(currentEngine) { $(currentEngine).removeClass('selected'); }
		
		// set currentUsage
		currentEngine = engineType;
		
		// set menu item selected
		$(engineType).addClass('selected');
		
		
		
		// loop on vehicles and check for usage
		for(var i = 0; i < vehiclesArray.length; i++) {
			
			var found = false;
			
			var startValue = .99;
		
			for(var j = 0; j < vehiclesArray[i].engineTypes.length; j++) {
				
				//alert($(String(i)).getStyle('opacity').toInt());
				
				if(vehiclesArray[i].engineTypes[j] == currentEngine) {
					
				
					
					if($(String(i)).getProperty('class') != "on") {
						startValue = .3;
					}
					
					var myFx = new Fx.Style($(String(i)),'opacity',{duration:500});
					myFx.start(startValue,.99);
					found = true;
					$(String(i)).addClass('on');
					
				}
				
			}
			
			if(!found) {
				
				if($(String(i)).getProperty('class') != "on") {
					startValue = .3;
				}
				
				var myFx = new Fx.Style($(String(i)),'opacity',{duration:500});
				myFx.start(startValue,.3);
				$(String(i)).removeClass('on');
				
			}
		
		}
		
	}
	
	// ======================================================
	// showWeightsTable()
	// ======================================================
	function showWeightsTable() {
		
		if(!tableOpen) {
		
			$('disabler').setOpacity(0);
			$('weights-table-box').setOpacity(0)
			var myFx = new Fx.Style($('weights-table-box'),'opacity',{duration:500});
			myFx.start(0,1);
			var myFx2 = new Fx.Style($('disabler'),'opacity',{duration:500});
			myFx2.start(0,.7);
			$('weights-table-box').setStyle('display', 'block');
			$('disabler').setStyle('display', 'block');
			
			//var myFx = new Fx.Style($('sorter-tabs-box'),'opacity',{duration:500});
			//myFx.start(1,.3);
			
			tableOpen = true;
			
		}
		
	}
	
	// ======================================================
	// closeWeightsTable()
	// ======================================================
	function closeWeightsTable() {
		
		$('weights-table-box').setStyle('display', 'none');
		$('disabler').setStyle('display', 'none');
		var myFx = new Fx.Style($('weights-table-box'),'opacity',{duration:500});
		myFx.start(1,0);
		var myFx2 = new Fx.Style($('disabler'),'opacity',{duration:500});
		myFx2.start(.7, 0);
		
		//var myFx = new Fx.Style($('sorter-tabs-box'),'opacity',{duration:500});
		//myFx.start(.3,1);
		
		tableOpen = false;
		
	}