// 85x56 365x241
// THIS VERSION ADDS THUMBNAILS WORKING
// Passes in year=year instead of year=acode now
// And sitelinks are working
// This version tries to get all the details right (colors, text, etc.)
function popmake() {
	$("select#makeselectA").empty();
	$("select#makeselectA").append('<option value="">Select a Make</option>');
	$("select#makeselectB").empty();
	$("select#makeselectB").append('<option value="">Select a Make</option>');
	$.each(dropdowns, function(index, item) {
		$("select#makeselectA").append('<option value="'+index+'">'+index+'</option>');	
		$("select#makeselectB").append('<option value="'+index+'">'+index+'</option>');	
	});
	$('#makeselectA option:first').attr('selected', 'selected');
	$('#makeselectB option:first').attr('selected', 'selected');
}
function popmodelA(make) {
	makeA = make;
	$("select#modbodstyleselectA").empty();
	$("select#modbodstyleselectA").append('<option value="">Select a Model/Style</option>');
	$.each(dropdowns[make], function(index, item) {
		$("select#modbodstyleselectA").append('<option value="'+index+'">'+index+'</option>');	
	});
	$('#modbodstyleselectA option:first').attr('selected', 'selected');
}
function popyearA(modbodstyle) {
	$("select#yearselectA").empty();
	$("select#yearselectA").append('<option value="">Select a Year</option>');
	$.each(dropdowns[makeA][modbodstyle], function(index, item) {
		$("select#yearselectA").append('<option value="'+index+'">'+index+'</option>');	
	});
	$('#yearselectA option:first').attr('selected', 'selected');
	if ( $('#yearselectA option').length == 2 ) $('#yearselectA option:last').attr('selected', 'selected');
}
function popmodelB(make) {
	makeB = make;
	$("select#modbodstyleselectB").empty();
	$("select#modbodstyleselectB").append('<option value="">Select a Model/Style</option>');
	$.each(dropdowns[make], function(index, item) {
		$("select#modbodstyleselectB").append('<option value="'+index+'">'+index+'</option>');	
	});
	$('#modbodstyleselectB option:first').attr('selected', 'selected');
}
function popyearB(modbodstyle) {
	$("select#yearselectB").empty();
	$("select#yearselectB").append('<option value="">Select a Year</option>');
	$.each(dropdowns[makeB][modbodstyle], function(index, item) {
		$("select#yearselectB").append('<option value="'+index+'">'+index+'</option>');	
	});
	$('#yearselectB option:first').attr('selected', 'selected');
	if ( $('#yearselectB option').length == 2 ) $('#yearselectB option:last').attr('selected', 'selected');
}
function popthumbs(acode, which, model) {
	$("#tab"+which).html(model); // Write the model to the tab
	$("#thumbs"+which+" img").attr("src", "images/thumbblank.jpg" ); // Blank out the thumbnails
	$("button#tab"+which).click(); // Show the respective thumb table
	if ( images[acode]['101'] == 1 ) { $("img#"+which+"101").attr("src", imageprefix+images[acode]['imgcode']+'101.jpg'); } else if ( images[acode]['101'] ) { $("img#"+which+"101").attr("src", imageprefix + images[acode]['101'] ) } else { $("img#"+which+"101").attr("src", "images/thumbna.jpg" ) }
	if ( images[acode]['112'] == 1 ) { $("img#"+which+"112").attr("src", imageprefix+images[acode]['imgcode']+'112.jpg'); } else if ( images[acode]['112'] ) { $("img#"+which+"112").attr("src", imageprefix + images[acode]['112'] ) } else { $("img#"+which+"112").attr("src", "images/thumbna.jpg" ) }
	if ( images[acode]['113'] == 1 ) { $("img#"+which+"113").attr("src", imageprefix+images[acode]['imgcode']+'113.jpg'); } else if ( images[acode]['113'] ) { $("img#"+which+"113").attr("src", imageprefix + images[acode]['113'] ) } else { $("img#"+which+"113").attr("src", "images/thumbna.jpg" ) }
	if ( images[acode]['102'] == 1 ) { $("img#"+which+"102").attr("src", imageprefix+images[acode]['imgcode']+'102.jpg'); } else if ( images[acode]['102'] ) { $("img#"+which+"102").attr("src", imageprefix + images[acode]['102'] ) } else { $("img#"+which+"102").attr("src", "images/thumbna.jpg" ) }
	if ( images[acode]['109'] == 1 ) { $("img#"+which+"109").attr("src", imageprefix+images[acode]['imgcode']+'109.jpg'); } else if ( images[acode]['109'] ) { $("img#"+which+"109").attr("src", imageprefix + images[acode]['109'] ) } else { $("img#"+which+"109").attr("src", "images/thumbna.jpg" ) }
	if ( images[acode]['105'] == 1 ) { $("img#"+which+"105").attr("src", imageprefix+images[acode]['imgcode']+'105.jpg'); } else if ( images[acode]['105'] ) { $("img#"+which+"105").attr("src", imageprefix + images[acode]['105'] ) } else { $("img#"+which+"105").attr("src", "images/thumbna.jpg" ) }
	if ( images[acode]['106'] == 1 ) { $("img#"+which+"106").attr("src", imageprefix+images[acode]['imgcode']+'106.jpg'); } else if ( images[acode]['106'] ) { $("img#"+which+"106").attr("src", imageprefix + images[acode]['106'] ) } else { $("img#"+which+"106").attr("src", "images/thumbna.jpg" ) }
	if ( images[acode]['104'] == 1 ) { $("img#"+which+"104").attr("src", imageprefix+images[acode]['imgcode']+'104.jpg'); } else if ( images[acode]['104'] ) { $("img#"+which+"104").attr("src", imageprefix + images[acode]['104'] ) } else { $("img#"+which+"104").attr("src", "images/thumbna.jpg" ) }
	if ( images[acode]['314'] == 1 ) { $("img#"+which+"314").attr("src", imageprefix+images[acode]['imgcode']+'314.jpg'); } else if ( images[acode]['314'] ) { $("img#"+which+"314").attr("src", imageprefix + images[acode]['314'] ) } else { $("img#"+which+"314").attr("src", "images/thumbna.jpg" ) }
	if ( images[acode]['304'] == 1 ) { $("img#"+which+"304").attr("src", imageprefix+images[acode]['imgcode']+'304.jpg'); } else if ( images[acode]['304'] ) { $("img#"+which+"304").attr("src", imageprefix + images[acode]['304'] ) } else { $("img#"+which+"304").attr("src", "images/thumbna.jpg" ) }
	if ( images[acode]['302'] == 1 ) { $("img#"+which+"302").attr("src", imageprefix+images[acode]['imgcode']+'302.jpg'); } else if ( images[acode]['302'] ) { $("img#"+which+"302").attr("src", imageprefix + images[acode]['302'] ) } else { $("img#"+which+"302").attr("src", "images/thumbna.jpg" ) }
	if ( images[acode]['310'] == 1 ) { $("img#"+which+"310").attr("src", imageprefix+images[acode]['imgcode']+'310.jpg'); } else if ( images[acode]['310'] ) { $("img#"+which+"310").attr("src", imageprefix + images[acode]['310'] ) } else { $("img#"+which+"310").attr("src", "images/thumbna.jpg" ) }
	if ( images[acode]['301'] == 1 ) { $("img#"+which+"301").attr("src", imageprefix+images[acode]['imgcode']+'301.jpg'); } else if ( images[acode]['301'] ) { $("img#"+which+"301").attr("src", imageprefix + images[acode]['301'] ) } else { $("img#"+which+"301").attr("src", "images/thumbna.jpg" ) }
	if ( images[acode]['312'] == 1 ) { $("img#"+which+"312").attr("src", imageprefix+images[acode]['imgcode']+'312.jpg'); } else if ( images[acode]['312'] ) { $("img#"+which+"312").attr("src", imageprefix + images[acode]['312'] ) } else { $("img#"+which+"312").attr("src", "images/thumbna.jpg" ) }
	if ( images[acode]['313'] == 1 ) { $("img#"+which+"313").attr("src", imageprefix+images[acode]['imgcode']+'313.jpg'); } else if ( images[acode]['313'] ) { $("img#"+which+"313").attr("src", imageprefix + images[acode]['313'] ) } else { $("img#"+which+"313").attr("src", "images/thumbna.jpg" ) }
}
function writelinks(acode, which, year) {
	$("#carDisplay"+which+" .siteLinks").empty();
	if ( images[acode]['carsmakeid'] == null ) {
		$("#carDisplay"+which+" .siteLinks").append('<a href="http://research.cars.com/go/crp/research.jsp?myid='+images[acode]['myid']+'&year='+year+'&call=crp&section=summary&logtype=6">Research</a>');
	}
	else if ( year > 2006 ) {
		$("#carDisplay"+which+" .siteLinks").append('<a href="http://research.cars.com/go/crp/research.jsp?myid='+images[acode]['myid']+'&year='+year+'&makeid='+images[acode]['carsmakeid']+'&modelid='+images[acode]['carsmodelid']+'&call=crp&section=summary&logtype=6">Research</a> ');
		$("#carDisplay"+which+" .siteLinks").append(' | <a href="http://www.cars.com/go/dealersearch/checkConfiguratorZip.jsp?mdnm='+images[acode]['carsmodel']+'&mknm='+images[acode]['carsmake']+'&makeid='+images[acode]['carsmakeid']+'&modelid='+images[acode]['carsmodelid']+'&myid='+images[acode]['myid']+'">Build Your Own</a> ');
		$("#carDisplay"+which+" .siteLinks").append(' | <a href="http://www.cars.com/go/search/provideZip.jsp?mknm='+images[acode]['carsmake']+'&mdnm='+images[acode]['carsmodel']+'">Search Inventory</a>');
	} else {
		$("#carDisplay"+which+" .siteLinks").append('<a href="http://www.cars.com/go/search/provideZip.jsp?mknm='+images[acode]['carsmake']+'&mdnm='+images[acode]['carsmodel']+'">Search Used</a> ');
		$("#carDisplay"+which+" .siteLinks").append(' | <a href="http://research.cars.com/go/crp/research.jsp?myid='+images[acode]['myid']+'&year='+year+'&makeid='+images[acode]['carsmakeid']+'&modelid='+images[acode]['carsmodelid']+'&call=crp&section=summary&logtype=6">Research</a>');
	}
}

$(document).ready(function(){

acodeA = '';
acodeB = '';

//imageprefix = 'http://imageonthefly.cars.com/images/?quality=20&width=365&height=241&img=';
//imageprefix = 'http://a137.g.akamai.net/f/137/3538/120m/imageonthefly.cars.com/images/?quality=20&width=365&height=241&img=';
imageprefix = 'http://car-pictures.cars.com/images/?quality=20&width=365&height=241&img=';

$("a.angle").click(function(){
	var angle = $(this).attr("href");
	$("#thumbTabBox img").css("border", "1px solid #666"); // Reset the borders on the thumbnails
	$("img#A"+angle+", img#B"+angle).css("border", "1px solid #df4600"); // Set the border on the thumbnail
	if ( acodeA ) if ( images[acodeA][angle] == 1 ) { $("img#CarA").attr("src", imageprefix+images[acodeA]['imgcode']+angle+'.jpg'); } else if ( images[acodeA][angle] ) { $("img#CarA").attr("src", imageprefix + images[acodeA][angle] ) } else { $("img#CarA").attr("src", "images/vehiclePhotoNotAvailable.jpg" ) }
	if ( acodeB ) if ( images[acodeB][angle] == 1 ) { $("img#CarB").attr("src", imageprefix+images[acodeB]['imgcode']+angle+'.jpg'); } else if ( images[acodeB][angle] ) { $("img#CarB").attr("src", imageprefix + images[acodeB][angle] ) } else { $("img#CarB").attr("src", "images/vehiclePhotoNotAvailable.jpg" ) }
	if ( typeof racecar != 'undefined' ) $("img#CarA").attr( "src", "racecar/"+angle+".jpg" );
	return false;
});

popmake();
$("select#makeselectA").change( function() { 
	popmodelA( $(this).val() );
});
$("select#modbodstyleselectA").change( function() { 
	popyearA( $(this).val() );
});
$("#formA").submit( function(event) {
	var make = event.target.make.value; // Get make from form submission
	var modbodstyle = event.target.modbodstyle.value; // Get modbodstyle from form submission
	var year = event.target.year.value; // Get year from form submission
	if ( year == '' ) return false;
	$("#displayHeader1 .changeCar").show().click();
	$("#carDisplay1 .bttntxt a").html("Change Car");
	acodeA = dropdowns[make][modbodstyle][year]['acode']; // Get ACODE from lookup
	var headername = year + ' ' + make + ' ' + dropdowns[make][modbodstyle][year]['model'];
	$("#carDisplay1 .carName").html(headername); // Write the YMM to the tab
	$("#carDisplay1 .vardesc").html(dropdowns[make][modbodstyle][year]['caption']); // Write caption
	writelinks(acodeA, '1', year); // Write siteLinks
 	$("img#CarA").attr("src", imageprefix + images[acodeA]['101']); // Show the first pose
	if ( images[acodeA]['101'] == 1 ) { $("img#CarA").attr("src", imageprefix+images[acodeA]['imgcode']+'101.jpg'); } else if ( images[acodeA]['101'] ) { $("img#CarA").attr("src", imageprefix + images[acodeA]['101'] ) } else { $("img#CarA").attr("src", "images/vehiclePhotoNotAvailable.jpg" ) } // Show the first pose
	if ( acodeB ) if ( images[acodeB]['101'] == 1 ) { $("img#CarB").attr("src", imageprefix+images[acodeB]['imgcode']+'101.jpg'); } else if ( images[acodeB]['101'] ) { $("img#CarB").attr("src", imageprefix + images[acodeB]['101'] ) } else { $("img#CarB").attr("src", "images/vehiclePhotoNotAvailable.jpg" ) } // Show the first pose of the other vehicle
	$("#thumbTabBox img").css("border", "1px solid #666"); // Reset the borders on the thumbnails
	$("img#A101, img#B101").css("border", "1px solid #df4600"); // Set the border on the thumbnail
	popthumbs(acodeA, 'A', dropdowns[make][modbodstyle][year]['model']);  // Populate the thumbnails
	return false;
});
$("#displayHeader1 .changeCar").toggle( function() {
 	$("#styleSelector1").hide(); // Cancel dropdowns
 	$("#displayHeader1 .changeCar a").html("Change Car");
 },function() {
 	$("#styleSelector1").show(); // Show the dropdowns
	$("#displayHeader1 .changeCar a").html("Cancel");
});
$("button#tabA").click( function() {
	$("#tabA").css( "background", "transparent url(images/1activeThumbTitle.gif) no-repeat" );
	$("#tabB").css( "background", "transparent url(images/1deactiveThumbTitle.gif) no-repeat" );
	$("#displayHeader1").css( "background", "transparent url(images/activeHeader.gif) no-repeat" );
	$("#displayHeader2").css( "background", "transparent url(images/deactiveHeader.gif) no-repeat" );
	$("#thumbDisplay1").show(); // Show the A thumbnails
	$("#thumbDisplay2").hide(); // Hide the B thumbnails
});
$("#carDisplay1 .carName").click( function() {
	$("button#tabA").click();
});
$("button#tabB").click( function() {
	$("#tabB").css( "background", "transparent url(images/2deactiveThumbTitle.gif) no-repeat" );
	$("#tabA").css( "background", "transparent url(images/2activeThumbTitle.gif) no-repeat" );
	$("#displayHeader2").css( "background", "transparent url(images/activeHeader.gif) no-repeat" );
	$("#displayHeader1").css( "background", "transparent url(images/deactiveHeader.gif) no-repeat" );
	$("#thumbDisplay2").show(); // Show the B thumbnails
	$("#thumbDisplay1").hide(); // Hide the A thumbnails
});
$("#carDisplay2 .carName").click( function() {
	$("button#tabB").click();
});
$("select#makeselectB").change( function() { 
	popmodelB( $(this).val() );
});
$("select#modbodstyleselectB").change( function() { 
	popyearB( $(this).val() );
});
$("#formB").submit( function(event) {
	var make = event.target.make.value; // Get make from form submission
	var modbodstyle = event.target.modbodstyle.value; // Get modbodstyle from form submission
	var year = event.target.year.value; // Get year from form submission
	if ( year == '' ) return false;
	$("#displayHeader2 .changeCar").show().click();
	$("#carDisplay2 .bttntxt a").html("Change Car");
	acodeB = dropdowns[make][modbodstyle][year]['acode']; // Get ACODE from lookup
	var headername = year + ' ' + make + ' ' + dropdowns[make][modbodstyle][year]['model'];
	$("#carDisplay2 .carName").html(headername); // Write the YMM to the tab
	$("#carDisplay2 .vardesc").html(dropdowns[make][modbodstyle][year]['caption']); // Write caption
	writelinks(acodeB, '2', year); // Write siteLinks
	if ( images[acodeB]['101'] == 1 ) { $("img#CarB").attr("src", imageprefix+images[acodeB]['imgcode']+'101.jpg'); } else if ( images[acodeB]['101'] ) { $("img#CarB").attr("src", imageprefix + images[acodeB]['101'] ) } else { $("img#CarB").attr("src", "images/vehiclePhotoNotAvailable.jpg" ) } // Show the first pose
	if ( acodeA ) if ( images[acodeA]['101'] == 1 ) { $("img#CarA").attr("src", imageprefix+images[acodeA]['imgcode']+'101.jpg'); } else if ( images[acodeA]['101'] ) { $("img#CarA").attr("src", imageprefix + images[acodeA]['101'] ) } else { $("img#CarA").attr("src", "images/vehiclePhotoNotAvailable.jpg" ) } // Show the first pose of the other vehicle
	if ( typeof racecar != 'undefined' ) $("img#CarA").attr( "src", "racecar/101.jpg" );
	$("#thumbTabBox img").css("border", "1px solid #666"); // Reset the borders on the thumbnails
	$("img#A101, img#B101").css("border", "1px solid #df4600"); // Set the border on the thumbnail
	popthumbs(acodeB, 'B', dropdowns[make][modbodstyle][year]['model']);
	return false;
});
$("#displayHeader2 .changeCar").toggle( function() {
 	$("#styleSelector2").hide(); // Cancel dropdowns
 	$("#displayHeader2 .changeCar a").html("Change Car");
 },function() {
 	$("#styleSelector2").show(); // Show the dropdowns
	$("#displayHeader2 .changeCar a").html("Cancel");
});
$("#carDisplay1 .BttnPill").click( function() {
	$("#formA").submit();
	return false;
});
$("#carDisplay2 .BttnPill").click( function() {
	$("#formB").submit();
	return false;
});

});