function onload_compare_trips() {
	var compareSelect1 = $('saved_trip_1');
	if($chk(compareSelect1)) {
		compareSelect1.addEvent("change", function() {
			if(this.selectedIndex > 0) {
				request_trip_details(this.get('value'),0);
			} else {
				clear_grid(0);
			}
			updateCompareSelect();
		});
		compareSelect1.selectedIndex = 1;
		// FIRE THE ONCHANGE EVENT. CHANGING THE SELECTEDINDEX DOES NOT TRIGGER THE ONCHANGE EVENT.
		compareSelect1.fireEvent("change");
	}
	var compareSelect2 = $('saved_trip_2');
	if($chk(compareSelect2)) {
		compareSelect2.addEvent("change", function() {
			if(this.selectedIndex > 0) {
				request_trip_details(this.get('value'),1);
			} else {
				clear_grid(1);
			}
			updateCompareSelect();
		});
		if(compareSelect2.getElements("option").length > 1) {
			compareSelect2.selectedIndex = 1;
			// FIRE THE ONCHANGE EVENT. CHANGING THE SELECTEDINDEX DOES NOT TRIGGER THE ONCHANGE EVENT.
			compareSelect2.fireEvent("change");
		}
	}
	var compareSelect3 = $('saved_trip_3');
	if($chk(compareSelect3)) {
		compareSelect3.addEvent("change", function() {
			if(this.selectedIndex > 0) {
				request_trip_details(this.get('value'),2);
			} else {
				clear_grid(2);
			}
			updateCompareSelect();
		});
		if(compareSelect3.getElements("option").length > 1) {
			compareSelect3.selectedIndex = 1;
			// FIRE THE ONCHANGE EVENT. CHANGING THE SELECTEDINDEX DOES NOT TRIGGER THE ONCHANGE EVENT.
			compareSelect3.fireEvent("change");
		}
	}
}

function request_trip_details(tripID,col){
	var req = new Request.JSON({
		url: '/webservices/trip/compare.cfc'
		,method: 'get'
		,data: 'method=get_trip_details&tripID=' + tripID + '&queryFormat=column&&dummy=' + new Date().getTime()
		,onSuccess: function(obj,txt) {
			update_grid(obj,col);
		}
		,onFailure: function(e) {
			alert('Error: ' + e.status + '\nPlease try again');
		}
	}).send();
}

function clear_grid(col) {
	
	// CLEAR THE TRIP NAME
	/*var td = $$('#c_trip_name td')[col];
	var h4 = td.getElement("h4");
	if(h4) {
		h4.empty();
	} else {
		new_h4 = new Element("h4");
		new_h4.inject(td);
	}*/
	
	// CLEAR THE TRIP NAME
	$$('#c_trip_name td')[col].empty();
		
	// CLEAR THE TRIP OVERVIEW
	$$('#c_trip_overview td')[col].empty();
	
	// CLEAR THE SERIES DESCRIPTION
	$$('#c_series_header td')[col].empty();
	$$('#c_series_desc td')[col].empty();
	
	// CLEAR THE TRIP DESCRIPTION
	$$('#c_trip_header td')[col].empty();
	$$('#c_trip_desc td')[col].empty();

	// CLEAR THE ITINERARY HIGHLIGHTS
	$$('#c_trip_itinerary_header td')[col].empty();
	$$('#c_trip_itinerary td')[col].empty();

	// CLEAR DATES AND PRICES
	$$('#c_trip_dates_header td')[col].empty();
	$$('#c_trip_dates td')[col].empty();
}

function update_grid(obj,col) {
	// START BY CLEARING THE GRID
	clear_grid(col);
	
	// UPDATE THE TRIP NAME
	//var h4 = $$('#c_trip_name td')[col].getElement("h4");
	
	var h4 = new Element("h4");
	
	// CREATE THE A TAG
	var a = new Element("a", {
		'href': '/travel/index.cfm?tid=' + obj.ID,
		'text': obj.NAME.replaceHTMLEntity()
	});
	a.inject(h4);
	var td = $$('#c_trip_name td')[col];
	h4.inject(td);
	// FINISHED UPDATING THE TRIP NAME
	
	/* ------------------------------------------------------------------------ */
	
	// UPDATE THE TRIP DETAILS
	var td = $$('#c_trip_overview td')[col];
	
	
	// CREATE THE UL TAG
	var ul = new Element("ul",{
		'class': 'clear_list_style line_rule'
	});
	ul.inject(td);
	
	// CREATE THE SERIES LI TAG
	var li_series = new Element("li",{
		'class': 'self_clear',
		'text': obj.DETAILS.SERIES_HEADER + ':'
	});
	li_series.inject(ul);
	var li_series_span = new Element("span",{
		'text': obj.DETAILS.SERIES.replaceHTMLEntity()
	});
	// INSERT THE SPAN BEFORE THE TEXT NODE
	li_series_span.inject(li_series,"top");
	
	// CREATE THE DAYS LI TAG
	var li_days = new Element("li",{
		'class': 'self_clear',
		'text': 'Days:'
	});
	li_days.inject(ul);
	var li_days_span = new Element("span",{
		'text': obj.DETAILS.DAYS
	});
	// INSERT THE SPAN BEFORE THE TEXT NODE
	li_days_span.inject(li_days,"top");
	
	// CREATE THE PRICED FROM LI TAG
	var li_price = new Element("li",{
		'class': 'self_clear',
		'text': 'Priced From:'
	});
	li_price.inject(ul);
	var li_price_span = new Element("span",{
		'html': obj.DETAILS.PRICEDFROM
	});
	// INSERT THE SPAN BEFORE THE TEXT NODE
	li_price_span.inject(li_price,"top");
	
	// CREATE THE MAX GROUP SIZE LI TAG
	var li_size = new Element("li",{
		'class': 'self_clear',
		'text': 'Max Group Size:'
	});
	li_size.inject(ul);
	var li_size_span = new Element("span",{
		'text': obj.DETAILS.MAXGROUPSIZE
	});
	// INSERT THE SPAN BEFORE THE TEXT NODE
	li_size_span.inject(li_size,"top");
	
	// CREATE THE DEPARTURES LI TAG
	var li_departures = new Element("li",{
		'class': 'self_clear',
		'text': 'Departures:'
	});
	li_departures.inject(ul);
	var li_departures_span = new Element("span",{
		'text': obj.DETAILS.AVAILABLEDEPARTURES
	});
	// INSERT THE SPAN BEFORE THE TEXT NODE
	li_departures_span.inject(li_departures,"top");
	// FINISHED UPDATING TRIP DETAILS
	
	/* ------------------------------------------------------------------------ */
	
	// UPDATE THE SERIES DESCRIPTION
	var header_td = $$('#c_series_header td')[col];
	var h3 = new Element("h3",{
		'text': obj.DETAILS.SERIES.replaceHTMLEntity()
	});
	h3.inject(header_td);
	
	var content_td = $$('#c_series_desc td')[col];
	content_td.set('html', "<p>" + obj.SERIESDESCRIPTION.replaceHTMLEntity() + "</p>");
	// FINISHED UPDATING THE SERIES DESCRIPTION
	
	/* ------------------------------------------------------------------------ */
		
	// UPDATE THE TRIP DESCRIPTION
	var header_td = $$('#c_trip_header td')[col];
	var h3 = new Element("h3",{
		'text': 'Description'
	});
	h3.inject(header_td);
	
	var content_td = $$('#c_trip_desc td')[col];
	content_td.set('html', "<p>" + obj.DESCRIPTION.replaceHTMLEntity() + "</p>");
	// FINISHED UPDATING THE TRIP DESCRIPTION

	/* ------------------------------------------------------------------------ */
	
	// UPDATE THE ITINERARY HIGHLIGHTS
	var header_td = $$('#c_trip_itinerary_header td')[col];
	var h3 = new Element("h3",{
		'text': 'Itinerary Highlights'
	});
	h3.inject(header_td);
	
	var content_td = $$('#c_trip_itinerary td')[col];
	
	// CREATE THE DL TAG
	var dl = new Element("dl",{
		'class': 'clear_list_style line_rule'
	});
	dl.inject(content_td);
	
	// LOOP THROUGH THE ITINERARY ITEMS AND CREATE DT AND DD TAGS
	obj.HIGHLIGHTS.each(function(itinItem,itinItemIndex){
		var dt = new Element("dt",{
			'html': itinItem.DAYS
		});
		dt.inject(dl);
		
		var dd = new Element("dd");
		dd.inject(dl);
		
		var ul = new Element("ul",{
			'class': 'clear_list_style bullet_list'
		});
		ul.inject(dd);
		
		// LOOP THROUGH THE POIS FOR THIS DAY BLOCK AND ADD THEM TO THE POI UL OR THE LODGING UL
		itinItem.POI.each(function(poi,poiIndex){
			var li = new Element("li",{
				'html': poi
			});
			li.inject(ul);
		});
		
		// ADD DYD IF NECESSARY
		if(itinItem.DYD.length > 0){
			var li = new Element("li",{
				'html': itinItem.DYD
			});
			li.inject(ul);
			var span = new Element("span",{
				'class': 'icon dyd',
				'html': '\u00A0'
			}).setStyle('margin-left','5px');
			span.inject(li);
		}
		
		// ADD AKP IF NECESSARY
		itinItem.AKP.each(function(akp,akpIndex){
			var li = new Element("li",{
				'html': akp
			});
			li.inject(ul);
			var span = new Element("span",{
				'class': 'icon akp',
				'html': '\u00A0'
			}).setStyle('margin-left','5px');
			span.inject(li);
		});
		
		// ADD THE LODGING
		if(itinItem.LODGING.length > 0){
			//var p = new Element("p").setStyle('margin-top','8px');
			//p.inject(dd);
			var em = new Element("em",{
				'html': itinItem.LODGING
			});
			em.inject(dd);
		}
	});
	// FINISHED UPDATING THE ITINERARY HIGHLIGHTS
	
	/* ------------------------------------------------------------------------ */

	//	UPDATE DATES AND PRICES
	var header_td = $$('#c_trip_dates_header td')[col];
	var h3 = new Element("h3",{
		'text': 'Dates & Prices'
	});
	h3.inject(header_td);
	
	var content_td = $$('#c_trip_dates td')[col];
	
	// CREATE THE MAIN UL TO HOLD THE DATES AND PRICES
	/*var dl = new Element("dl",{
		'class': 'clear_format line_rule'
	});
	dl.inject(content_td);
	
	// LOOP THROUGH THE DEPARTURES AND CREATE LIS WITH NESTED ULS
	obj.DEPARTURES.each(function(departure,departureIndex){
		// CREATE THE DATE DT
		var dt = new Element("dt",{
			'text': departure.DATE
		});
		dt.inject(dl);
		
		var dd = new Element("dd");
		dd.inject(dl);
		
		// CREATE THE UL TO BE NESTED INSIDE THIS DT
		var ul_child = new Element("ul",{
			'class': 'clear_list_style clear_margins'
		});
		ul_child.inject(dd);
		
		// CREATE THE PRICE LI
		var li_price = new Element("li");
		li_price.inject(ul_child);
		
		var strong = new Element("strong",{
			'html': departure.PRICE
		});
		strong.inject(li_price);
		
		// CREATE THE LODGING LI
		if(departure.LODGING.length > 0){
			var li_lodging = new Element("li",{
				'text': departure.LODGING
			});
			li_lodging.inject(ul_child);
		}
		
		// CREATE THE AVAILABILITY LI
		if(departure.AVAILABILITY.length > 0){
			var li_availability = new Element("li",{
				'text': departure.AVAILABILITY
			});
			li_availability.inject(ul_child);
		}
	});*/
	
	
	// CREATE THE MAIN UL TO HOLD THE DATES AND PRICES
	var ul = new Element("ul",{'class': 'clear_list_style line_rule'}).inject(content_td);
	
	
	// LOOP THROUGH THE DEPARTURES AND CREATE LIS WITH NESTED ULS
	obj.DEPARTURES.each(function(departure,departureIndex){
		var html = departure.DATE + "<br /><strong>" + departure.PRICE + "</strong>";
		//Add lodging
		if(departure.LODGING.length > 0){
			html += "<br />" + departure.LODGING;
		
		}
		//Add availability
		if(departure.AVAILABILITY.length > 0){
			html += "<br />" + departure.AVAILABILITY;
		
		}
		//Create and append "li" element
		var li = new Element("li", {"html": html}).inject(ul);
	
	});
	// FINISHED UPDATING DATES AND PRICES
}

function updateCompareSelect() {
	// MAKE SURE ALL 3 COMPARE SELECTS EXIST ON THE PAGE
	var select1 = $('saved_trip_1');
	var select2 = $('saved_trip_2');
	var select3 = $('saved_trip_3');
	
	if($chk(select1) && $chk(select2) && $chk(select3)){
		// SAVE THE CURRENT VALUE OF THE SELECTS SO WE CAN KEEP TRACK OF SELECTED NODES
		if(select1.selectedIndex != 0) {
			var select1_value = select1.get('value');
		} else {
			var select1_value = -1;
		}
		
		if(select2.selectedIndex != 0) {
			var select2_value = select2.get('value');
		} else {
			var select2_value = -1;
		}
		
		if(select3.selectedIndex != 0) {
			var select3_value = select3.get('value');
		} else {
			var select3_value = -1;
		}
		
		// CLEAR THE SELECTS
		select1.empty();
		select2.empty();
		select3.empty();
		
		// RESET THE SELECTED INDEX FOR THE SELECTS
		select1.selectedIndex = 0;
		select2.selectedIndex = 0;
		select3.selectedIndex = 0;
		
		// LOOP THROUGH THE MASTER SAVED TRIPS OBJECT
		for(var j=0; j < objCompareTrips.PACKAGEID.length; j++){
			// CREATE NEW OPTION FOR THE CURRENT TRIP
			var option = new Element("option",{
				'value': objCompareTrips.PACKAGEID[j],
				'html': objCompareTrips.TPCPACKAGE[j]
			});
			
			// CREATE AN OPTGROUP FOR THE CURRENT TRIP. THIS IS USED IF THIS TRIP IS ALREADY SELECTED.
			var optGroup = new Element("optgroup",{
				'label': objCompareTrips.TPCPACKAGE[j].replaceHTMLEntity(),
				'class': 'disabled'
			});
			
			/*
				IF THE CURRENT TRIP WAS SELECTED IN THE FIRST SELECT, APPEND THE OPTION TO SELECT1 AND SET THE
				SELECTED INDEX. THEN APPEND THE OPTGROUP TO THE OTHER 2 SELECTS SO IT APPEARS, BUT CANNOT BE SELECTED.
			*/
			if(select1_value == objCompareTrips.PACKAGEID[j]) {
				option.inject(select1);
				select1.selectedIndex = select1.length - 1;
				
				var optGroup2 = optGroup.clone();
				
				optGroup.inject(select2);
				optGroup2.inject(select3);
			/*
				IF THE CURRENT TRIP WAS SELECTED IN THE SECOND SELECT, APPEND THE OPTION TO SELECT2 AND SET THE
				SELECTED INDEX. THEN APPEND THE OPTGROUP TO THE OTHER 2 SELECTS SO IT APPEARS, BUT CANNOT BE SELECTED.
			*/
			} else if(select2_value == objCompareTrips.PACKAGEID[j]) {
				option.inject(select2);
				select2.selectedIndex = select2.length - 1;
				
				var optGroup2 = optGroup.clone();
				
				optGroup.inject(select1);
				optGroup2.inject(select3);
			/*
				IF THE CURRENT TRIP WAS SELECTED IN THE THIRD SELECT, APPEND THE OPTION TO SELECT3 AND SET THE
				SELECTED INDEX. THEN APPEND THE OPTGROUP TO THE OTHER 2 SELECTS SO IT APPEARS, BUT CANNOT BE SELECTED.
			*/
			} else if(select3_value == objCompareTrips.PACKAGEID[j]) {
				option.inject(select3);
				select3.selectedIndex = select3.length - 1;
				
				var optGroup2 = optGroup.clone();
				
				optGroup.inject(select1);
				optGroup2.inject(select2);
			/*
				IF THE CURRENT TRIP WAS NOT SELECTED IN ANY OF THE SELECTS, APPEND THE OPTION TO ALL 3 SELECTS.
			*/
			} else {
				var option2 = option.clone();
				var option3 = option.clone();
				
				option.inject(select1);
				option2.inject(select2);
				option3.inject(select3);
			}
		}
		// THE FOLLOWING NONSENSE IS ONLY HERE BECAUSE IN IE7 THE SELECT CHANGES SIZE IF IT
		// IS SPECIFIED AS A PERCENTAGE. SO IF IT IS SET TO WIDTH:50% THEN EACH TIME AN OPTION IS ADDED
		// OR REMOVED IT WILL BECOME ABOUT HALF AS WIDE AS BEFORE. THE FOLLOWING HACK SEEMS TO FIX THIS.
		select1.setStyle('visibility','hidden');
		select1.setStyle('visibility','visible');
		select2.setStyle('visibility','hidden');
		select2.setStyle('visibility','visible');
		select3.setStyle('visibility','hidden');
		select3.setStyle('visibility','visible');
	}
}