var idCount;
var vehIds;

function updateVehIdSession(){
	idCount = 0;
	vehIds = '';
	
	$('.vehId').each(function(){
		if(idCount > 0){
			vehIds += "," + $(this).val();
		}else{
			vehIds += $(this).val();
		}
		idCount++;
	});
	
	$('#vehId').val(vehIds);
	$('#comparrisonHTML').val($('#compare-list-items').html());

	$.post('http://www.apollorv.ca/compare-session.aspx', $('#compare-details').serialize());
}

$(function(){
	
	var selVehIds = $('#vehId').val();
	if(selVehIds != ""){
		vehIds = selVehIds.split(',');
		
		var x;
		for (x in vehIds){
			$('a#vehicle' + vehIds[x]).addClass('selected-vehicle');
		}
		
		$('.empty-text').hide();
		$('#compare-list-items').append($('#comparrisonHTML').val());
		
		if($('#compare-list-items .compare-item').size() > 1){
			$('#compare-btn').removeClass('disabled');
		}
	}
	
	$('a.add-vehicle').click(function(e){
		var vehDetail = $(this).attr('rel');
		vehDetail = vehDetail.split(','); // vehDetail[0] = vehicle ID, vehDetail[1] = vehicle name, vehDetail[2] = vehicle subtitle
		
		$('.empty-text').hide();
		
		if($(this).is('.selected-vehicle')){
			$('.vehicle' + vehDetail[0]).slideUp(100, function(){
				$(this).remove();
				updateVehIdSession();
			});
			
			if($('#compare-list-items .compare-item').size() == 2){
				setTimeout("$('#compare-btn').addClass('disabled')", 100);
			}
			if($('#compare-list-items .compare-item').size() == 1){
				setTimeout("$('.empty-text').show();", 100);
			}
			
			$(this).removeClass('selected-vehicle');
			return false;
		}else{
			if($('#compare-list-items .compare-item').size() == 1){
				$('#compare-btn').removeClass('disabled');
			}
		}
		
		var string = "<div class='compare-item vehicle" + vehDetail[0] + "'>";
		string += "<a href='#' class='remove-item' rel='" + vehDetail[0] + "' title='Remove this vehicle from the list'>remove</a>";
		string += "<img src='/graphics/compare/thumb-" + vehDetail[0] + ".png' class='compare-item-img' /><div class='compare-item-details'><div class='vehicle-name'>";
		string += vehDetail[1];
		string += "</div><div class='vehicle-subtitle'>";
		string += vehDetail[2];
		string += "</div><input type='hidden' name='compare-id' class='vehId' value='" + vehDetail[0] + "' />";
		string += "<div class='clear'></div></div>";
		
		$('#compare-list-items').append(string);
		
		$(this).addClass('selected-vehicle');
		
		updateVehIdSession();
		
		e.preventDefault();
	});
	
	$('a.remove-item').live('click', function(e){
		var vehId = $(this).attr('rel');
		$('#vehicle' + vehId).removeClass('selected-vehicle');
		
		$(this).parents('.compare-item').slideUp(100, function(){
			$(this).remove();
			updateVehIdSession();
		});
		
		if($('#compare-list-items .compare-item').size() == 2){
			setTimeout("$('#compare-btn').addClass('disabled')", 100);
		}
		if($('#compare-list-items .compare-item').size() == 1){
			setTimeout("$('.empty-text').show();", 100);
		}
		
		e.preventDefault();
	});
	
	$('#compare-btn').click(function(){
		if($(this).is('.disabled')){
			alert("Please select more than one vehicle to compare");
			return false;
		}
		
		var count = 0;
		var idString = '';
		var langId = 1;
		if($(this).attr('rel') > 1){
			langId = $(this).attr('rel');
		}
		
		$('.vehId').each(function(){
			if(count > 0){
				idString += "&v=" + $(this).val();
			}else{
				idString += "v=" + $(this).val();
			}
			count++;
		});
		
		var colWidth = ($('#compare-list-items .compare-item').size() * 322) + (($('#compare-list-items .compare-item').size() - 1) * 10) + 60;

		var width = $(window).width() - 20;
		var height = $(window).height() - 100;
		
		if(colWidth < width){
			width = colWidth;
		}
		
		$.colorbox({
			href:    "http://www.apollorv.com/rv_rentals_vehicles_compare.aspx?" + idString + "&l=" + langId,
			iframe:     true,
			title:      "Compare Vehicles",
			height:     height,
			innerWidth: width
		});
	});
	
	$('a.shadowbox').colorbox();
	
	$('#showthrough').colorbox({
		iframe:true,
		innerWidth:640,
		innerHeight:580
	});
});