$j(document).ready(function(){
    $j("#container_tabs > ul").tabs();
});

function selectYear(modelYear)
{
  $j("#maker").load(BASE_URL + "/new/build-a-car.htm?action=divisions&modelYear=" + modelYear, null, function(){$j("#maker").attr('disabled', false);});
  $j("#model").attr('disabled', true);
  return;
}

function selectDivision(divisionId)
{
    //get year
    var modelYear = document.getElementById("year").value;

    //do request
    $j("#model").load(BASE_URL + "/new/build-a-car.htm?action=models&modelYear=" + modelYear + "&divisionId=" + divisionId,
        null,
        function(){
            $j("#model").attr('disabled', false);
        }
    );
}

function goTrim(inctement)
{
    var countOptions = $j("#marketClassName option").size();
    var selectedIndex = $j("#marketClassName").attr("selectedIndex");

    if(typeof selectedIndex != 'number' || selectedIndex < 0 || selectedIndex == undefined) {
        selectedIndex = 0;
        if (inctement == -1) inctement = 0;
    }

    if (selectedIndex == countOptions - 1 && inctement == 1) inctement = 0;

    selectedIndex = (selectedIndex + inctement) % countOptions;

    if (selectedIndex == 0) {
        $j("#backTrimLink").hide();
        $j("#backTrimSpan").show();
        if (selectedIndex < countOptions - 1)  {
            $j("#nextTrimLink").show();
            $j("#nextTrimSpan").hide();
        }
    } else if (selectedIndex == countOptions - 1) {
        $j("#nextTrimLink").hide();
        $j("#nextTrimSpan").show();
        if (selectedIndex > 0){
            $j("#backTrimLink").show();
            $j("#backTrimSpan").hide();
        }
    } else {
        $j("#backTrimLink").show();
        $j("#backTrimSpan").hide();
        $j("#nextTrimLink").show();
        $j("#nextTrimSpan").hide();
    }

    $j("#marketClassName").attr("selectedIndex", selectedIndex);
    changeTrim();
    return false;
}

function changeTrim()
{
    var styleId = $j('#marketClassName').val();
    $j('#stockPhotoUrl').attr('src', jsonStyles[styleId].stockPhotoUrl);
    $j('#trimOverview').html($j('#marketClassName option:selected').html() + 'OVERVIEW');
    $j('#compare_vehicles').attr('href', BASE_URL + '/new/compare-vehicles.htm?'
        + 'action=step2&year=' + firstStyles_modelYear
        + '&id_make=' + firstStyles_divisionId 
        + '&id_model=' + firstStyles_modelId + '&id_style=' + styleId);
    var baseMsrp = Number(jsonStyles[styleId].baseMsrp);
    var baseMsrpStr = addCommas(baseMsrp.toFixed(2));
    var baseInvoice = Number(jsonStyles[styleId].baseInvoice);
    var baseInvoiceStr = addCommas(baseInvoice.toFixed(2));
    var destination = Number(jsonStyles[styleId].destination);
    var destinationStr = addCommas(destination.toFixed(2));

    $j('#priceTable tr:eq(1) td:eq(1) span').html(baseMsrpStr);
    $j('#priceTable tr:eq(1) td:eq(2) span').html(baseInvoiceStr);

    $j('#priceTable tr:eq(3) td:eq(1) span').html(baseMsrpStr);
    $j('#priceTable tr:eq(3) td:eq(2) span').html(baseInvoiceStr);

    $j('table.trimTable').each(function(i, obj){$j('tr:eq(1) td:eq(1) span', obj).html(baseMsrpStr)});
    $j('table.trimTable').each(function(i, obj){$j('tr:eq(2) td:eq(1) span', obj).html(baseInvoiceStr)});
    $j('table.trimTable').each(function(i, obj){$j('tr:eq(3) td:eq(1) span', obj).html(destinationStr)});
    $j('table.trimTable').each(function(i, obj){$j('tr:eq(4) td:eq(1)', obj).html(jsonStyles[styleId].manufacturerModelCode)});

    $j('table.trimTable').each(function(i, obj){$j('tr:eq(3) td:eq(3)', obj).html(jsonStyles[styleId].marketClassName)});
    $j('table.trimTable').each(function(i, obj){$j('tr:eq(3) td:eq(4)', obj).html(jsonStyles[styleId].consumerFriendlyDrivetrain)});

    $j.getJSON(
    	BASE_URL + '/new/build-a-car.htm',
        {action: 'equipment', styleId: styleId},
        function (data) {
            $j('table.trimTable').each(
                         function(i, obj) {
                             $j('tr:eq(1) td:eq(3)', obj).html(data[0] + ' ' + data[1])
                         }
            );
            $j('table.trimTable').each(
                         function(i, obj) {
                             $j('tr:eq(2) td:eq(3)', obj).html(data[2])
                         }
            );
        }
    );
    return;
}

var objColorLibrary = {};
var objColor = Object();
var selectedColorCode = '';
var lastStyleId = 0;

function getColors()
{
        $j('#build_continue_button').show();
        $j('#build_complete_button').hide();
        var styleId = $j('#marketClassName').val();
		if (typeof objColorLibrary[styleId] == 'object') {
			if (lastStyleId != styleId) {
				colorDataAfterLoad(objColorLibrary[styleId]);
				lastStyleId = styleId;
			}
			return;
		}
        $j.ajax({
            url: BASE_URL + '/new/build-a-car.htm',
            type: 'POST',
            data: {action: 'color', styleId: styleId},
            dataType: 'json',
            async: true,
			beforeSend: function(){
				$j('#select-color').addClass('loading');
				$j('#selectColorOptions').hide();
				$j('#selectInteriorColorOptions').hide();
				$j('#imgSelectColor').hide();
			},
            success: function (data, textStatus)
            {
				objColorLibrary[styleId] = data;
				objColor = data;
				colorDataAfterLoad(data);
				lastStyleId = styleId;
                return true;
            },
            error:  function(xhr) {
            }
        });
}

var defaultImageColorCar = {vif: '', manufacturersCode: ''};
var firstImg = '';

function colorDataAfterLoad(data)
{
	$j('#select-color').removeClass('loading');
	$j('#selectColorOptions').show();
	$j('#selectInteriorColorOptions').show();
	$j('#selectColorOptions div').remove();

	$j.each(data, function (key, val) {
				var ppp = [val.interiorColor];
				var divHtml = '<div class="car_exterior_color" id="' + key +
						'" onclick="return setCarColor(\'' + key + '\', \''  + val.primaryExteriorColor.name + '\');" '+
						'onmouseover="return prewievCarColor(\''+ val.StyleColorMapping.vif + '\', \'' + val.primaryExteriorColor.manufacturersCode + '\');" '+
						' onmouseout = "return viewSelectedCarColor();"' +
						'>';
				divHtml  += '<img alt="" onError="if (this.src != \'img/empty_color.JPG\') {this.src = \'img/empty_color.JPG\';}" src="';
			    divHtml  += BASE_URL + '/' + EVOX_MEDIA_SWATCH + '/'
				divHtml  += val.StyleColorMapping.vif + '/' +  val.StyleColorMapping.filename_swatch;
				divHtml  += '">';
				divHtml  += val.primaryExteriorColor.name + '</div>';
				$j(divHtml).appendTo('#selectColorOptions');
                if (defaultImageColorCar.vif == '' && val.StyleColorMapping.vif != undefined) {
                    defaultImageColorCar = {vif: val.StyleColorMapping.vif, 
                        manufacturersCode: val.primaryExteriorColor.manufacturersCode};
                }
                
                if (firstImg == '') {
                	firstImg  = BASE_URL + '/' + EVOX_MEDIA_COLOR + '/';
                    firstImg  += val.StyleColorMapping.vif + '/' +  val.StyleColorMapping.filename;
                }
			}
	);
    $j('#imgSelectColor').attr('src', firstImg);
    $j('#imgSelectColor').load(function(){	
		this.style.display = '';
	});
}


function imgError(img)
{
    img.src = 'img/not_available_320.jpg';
    return true;
}

function prewievCarColor(vif, manufacturersCode)
{
    var divHtml = '';
    	divHtml  += BASE_URL + '/' + EVOX_MEDIA_COLOR + '/';
    if (vif == 'undefined') {
        if (typeof objColor['_' + defaultImageColorCar.manufacturersCode] != 'undefined') {
            divHtml  += defaultImageColorCar.vif + '/' + objColor['_' + defaultImageColorCar.manufacturersCode].StyleColorMapping.filename;
        }
        $j('<div id="imgNotAvalibe" style="position:absolute;  z-index:197; top:95px; left:100px; width:108px; font-weight:bold; text-align:center; text-transform:uppercase; padding:5px; background:white; border:1px solid #AAC3D6; color:#000">Not Available</div>').appendTo('#contForImg');
    } else {
        if (typeof objColor['_' + manufacturersCode] != 'undefined') {
            divHtml  += vif + '/' + objColor['_' + manufacturersCode].StyleColorMapping.filename;
        }
        $j('#imgNotAvalibe').remove();
    }   
    $j('#imgSelectColor').attr('src', divHtml);
    
    return false;
}

function viewSelectedCarColor()
{
	try
	{
		prewievCarColor(objColor[selectedColorCode].StyleColorMapping.vif, selectedColorCode.replace('_',''));
	}
	catch (e)
	{
	}
	
}

function setCarColor(_ColorCode, nameColor)
{
    selectedColorCode = _ColorCode;
	$j('#ext').text(nameColor);
    $j('#selectInteriorColorOptions div').remove();
	$j('#selectColorOptions .car_exterior_color').removeClass('shown');
    $j('#' + _ColorCode).addClass('shown');
    $j.each(objColor[_ColorCode].interiorColor, function (key, val) {
            var divHtml = '<div class="car_exterior_color" style="padding: 0 0 0 20px;" id="car_interior_color_' + key + '" onclick="return setInteriorColor(' + key + ');">' + val.name + '</div>'
            $j(divHtml).appendTo('#selectInteriorColorOptions');
            }
    );
    return false;
}

function setInteriorColor (key) 
{
	$j('#selectInteriorColorOptions .car_exterior_color').removeClass('shown');
    $j('#car_interior_color_' + key).addClass('shown');
}
var lastOptionsStyleId = 0;

function showLoadingBar(where)
{
	$j(where).append('<div class="loading loading_bar" style="width:32px; height:32px;">&nbsp;</div>');	
}

function setOptions()
{
        $j('#build_continue_button').show();
        $j('#build_complete_button').hide();
        var styleId = $j('#marketClassName').val();
		if ($j('#selectOptionsContainer div.optionsGrayBar').size() && lastOptionsStyleId == styleId) {
			return;
		}
        $j.ajax({
            url: BASE_URL + '/new/build-a-car.htm',
            type: 'POST',
            data: {action: 'options', styleId: styleId},
            dataType: 'text',
            async: true,
			beforeSend: function(){
				//$j('#select-options').addClass('loading');
				showLoadingBar('#select-options');
				$j('#selectOptionsContainer div:gt(0)').remove();
			},
            success: function (data, textStatus) {
				setOptionsSuccess(data, textStatus);
				lastOptionsStyleId = styleId;
			},
            error:  function(xhr) {
                alert(xhr.statusText + xhr.status);
            }
        });
    return false;
}

function setOptionsSuccess(data, textStatus)
{
	$j('#select-options div.loading_bar').remove();
    $j('#selectOptionsContainer div:gt(0)').remove();
    $j(data).appendTo('#selectOptionsContainer');
	var configuredOptionsMsrp = $j('#selectOptionsContainer #hidden_data #configuredOptionsMsrp').text();
	var configuredTotalMsrp = $j('#selectOptionsContainer #hidden_data #configuredTotalMsrp').text();
	$j('#priceTable tr:eq(2) td:eq(1) span').html(addCommas(Number(configuredOptionsMsrp).toFixed(2)));
	$j('#priceTable tr:eq(3) td:eq(1) span').html(addCommas(Number(configuredTotalMsrp).toFixed(2)));
			
    return true;
}

var ajaxErrorCount = 0;

function toggleOption(chromeOptionCode)
{
    var styleId = $j('#marketClassName').val();
        $j.ajax({
            url: BASE_URL + '/new/build-a-car.htm',
            type: 'POST',
            data: {action: 'toggleOption', styleId: styleId, optionCode: chromeOptionCode},
            dataType: 'json',
            async: true,
			beforeSend: function(){
				showLoadingBar('#select-options');
				$j('#selectOptionsContainer img').css('visibility', 'hidden');
			},
            success: toggleOptionSuccess,
            error:  function(xhr) {
				if (ajaxErrorCount >= 3) {
					ajaxErrorCount = 0;
					alert("Sorry, the internet connection to the server is broken.\n Please try again in a little while.");
					$j('#selectOptionsContainer img').css('visibility', 'visible');
					$j('#select-options div.loading_bar').remove();
				} else {
					ajaxErrorCount++;
					toggleOption(chromeOptionCode);
				}
            }
        });

    return false;
}

function toggleOptionSuccess(data, textStatus)
{
	ajaxErrorCount = 0;
	$j('#selectOptionsContainer img').css('visibility', 'visible');
	$j('#select-options div.loading_bar').remove();
    var image = {Excluded:'b', Included: 'i', Required: 'r', Selected:'s', Unselected: 'b', Upgraded: 'u'};

    if (data.conflict == 'yesConflict' ) {
    } else {
        $j.each(data.allOptions, function (i, val) {
            $j('#' + val.chromeOptionCode + 'ch').attr('src', 'img/checkboxes/' + image[val.selectionState] + '.gif');
            $j('#' + val.chromeOptionCode + 'ch').attr('title', val.selectionState);
            $j('#' + val.chromeOptionCode + 'msrp').text('$'+val.msrp);
        });

        $j('#priceTable tr:eq(2) td:eq(1) span').html(addCommas(Number(data.totalOptionMsrp).toFixed(2)));
        $j('#priceTable tr:eq(2) td:eq(2) span').html(addCommas(Number(data.totalOptionInvoice).toFixed(2)));

        $j('#priceTable tr:eq(3) td:eq(1) span').html(addCommas(Number(data.totalMsrp).toFixed(2)));
        $j('#priceTable tr:eq(3) td:eq(2) span').html(addCommas(Number(data.totalInvoice).toFixed(2)));

    }
    return false;
}

function getSummary()
{
        $j('#build_continue_button').hide();
        $j('#build_complete_button').show();
        var styleId = $j('#marketClassName').val();
        $j.ajax({
            url: BASE_URL + '/new/build-a-car.htm',
            type: 'POST',
            data: {action: 'summary', styleId: styleId},
            dataType: 'text',
            async: true,
            beforeSend: function(){
                $j('#summary').addClass('loading');
            },
            success: setSummarySuccess,
            error:  function(xhr) {
                alert(xhr.statusText + xhr.status);
            }
        });
    return false;
}

function setSummarySuccess(data, textStatus)
{
    $j('#summary_div').html('');
    $j('#summary').removeClass('loading');
    $j(data).appendTo('#summary_div');
	var configuredOptionsMsrp = $j('#summary_div #summary_hidden_data #summary_configuredOptionsMsrp').text();
	var configuredTotalMsrp = $j('#summary_div #summary_hidden_data #summary_configuredTotalMsrp').text();
	$j('#priceTable tr:eq(2) td:eq(1) span').html(addCommas(Number(configuredOptionsMsrp).toFixed(2)));
	$j('#priceTable tr:eq(3) td:eq(1) span').html(addCommas(Number(configuredTotalMsrp).toFixed(2)));
    return true;
}

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

var arrTabFn = ['', 'getColors();', 'setOptions();', 'getSummary();'];

function nextTab()
{
    var $tabs = $j('#container_tabs').tabs();
    var selected = $tabs.data('selected.tabs');
    if (selected < 4) {
        $j('#container_tabs').tabs("select", selected + 1);
        eval(arrTabFn[selected + 1]);
    }
    return false;
}

function getTrim()
{
        $j('#build_continue_button').show();
        $j('#build_complete_button').hide();
        return false;
}