Shadowbox.init({
	overlayOpacity: 0.8
});

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('/compare-session.aspx', $('#compare-details').serialize());
}

function checkOverflow(){
	var scrollWrapperWidth = $('.scrollWrapper').outerWidth();
	var scrollAreaWidth = $('.scrollableArea').outerWidth();
	var compareItemWidth = 0;
	
	$('.compare-item').each(function(){
		compareItemWidth += ($(this).outerWidth() + 10);
	});
	
	$('.scrolling .scrollableArea').css({width:compareItemWidth});
			
	if(compareItemWidth < scrollAreaWidth){
		$('.scrolling .scrollWrapper').scrollLeft(0);
		$('.scrolling .scrollingHotSpotLeft, .scrolling .scrollingHotSpotRight').hide();
	}
	
	if(compareItemWidth > scrollWrapperWidth){
		$("div#compare-list-wrapper").not('.scrolling').addClass('scrolling').smoothDivScroll({mouseDownSpeedBooster: 2, scrollingSpeed: 7, visibleHotSpots: "always"});
		$('.scrolling .scrollingHotSpotRight').show();
	}else{
		$('.scrolling .scrollWrapper').scrollLeft(0);
		$('.scrolling .scrollingHotSpotLeft, .scrolling .scrollingHotSpotRight').hide();
	}
}

$(function(){
	
	var selVehIds = $('#vehId').val();
	if(selVehIds != ""){
		vehIds = selVehIds.split(',');
		
		var x;
		for (x in vehIds){
			$('a#vehicle' + vehIds[x]).addClass('selected-vehicle');
		}
		
		$('#compare-wrapper').show();
		$('body').addClass('toolbar');
		$('#compare-list-items').append($('#comparrisonHTML').val());
		
		if($('#compare-list-items .compare-item').size() > 1){
			$('#compare-btn').removeClass('disabled');
		}
		
		checkOverflow();
	}
	
	$('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
		
		$('#compare-wrapper').show();
		$('body').addClass('toolbar');
		
		if($(this).is('.selected-vehicle')){
			$('.vehicle' + vehDetail[0]).slideUp(100, function(){
				$(this).remove();
				updateVehIdSession();
				checkOverflow();
			});
			
			if($('#compare-list-items .compare-item').size() == 2){
				setTimeout("$('#compare-btn').addClass('disabled')", 100);
			}
			if($('#compare-list-items .compare-item').size() == 1){
				setTimeout("$('#compare-wrapper').hide(); $('body').removeClass('toolbar');", 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] + " new-compare-item'><div class='compare-item-inner'>";
		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' />";
		string += "<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></div>";
		
		$('#compare-list-items').append(string);
		
		$('.new-compare-item').animate({backgroundColor:	'white'}, {duration:200, complete:function(){
			$(this).removeClass('new-compare-item').removeAttr('style');
			updateVehIdSession();
			checkOverflow();
		}})
		
		$(this).addClass('selected-vehicle');
		
		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();
			checkOverflow();
		});
		
		if($('#compare-list-items .compare-item').size() == 2){
			setTimeout("$('#compare-btn').addClass('disabled')", 100);
		}
		if($('#compare-list-items .compare-item').size() == 1){
			setTimeout("$('#compare-wrapper').hide(); $('body').removeClass('toolbar');", 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 = '';
		$('.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) + 70;

		var width = $(window).width() - 20;
		var height = $(window).height() - 100;
		
		if(colWidth < width){
			width = colWidth;
		}
		
		Shadowbox.open({
			content:    "/compare-vehicles.aspx?" + idString,
			player:     "iframe",
			title:      "Compare Vehicles",
			height:     height,
			width:      width
		});
	});
	
	$('a.shadowbox').click(function(e){
		Shadowbox.open({
			content:    $(this).attr('href'),
			player:     "iframe",
			title:      $(this).attr('title'),
			height:     450,
			width:      600
		});
		
		e.preventDefault();
	});
});