registerNS("CoverProcess");

registerNS("CoverProcess.Enums");
CoverProcess.Enums.CoverProcessStep = {
    Vehicle: 1,
    Material: 2,
    Color: 3,
    Personalize: 4,
    Review: 5,
    Completed: 6
};

CoverProcess.AjaxRecoverProcessUrl = '/CoverDesigner/RecoverProcess';
CoverProcess.LocalStorageProcessKey = 'coverProcessKey';
CoverProcess.MyVehicleUrl = '/CoverDesigner/MyVehicle';

CoverProcess.WireUpSteps = function () {
    var self = this;
    
    $('.choose-cover-steps .done').each(function () {
        var stepDiv = $(this);
        stepDiv.attr('role', 'button');

        var step = stepDiv.data('step');

        switch (step) {
            case CoverProcess.Enums.CoverProcessStep.Review:
            case CoverProcess.Enums.CoverProcessStep.Personalize:
                stepDiv.click(function () { window.location.href = '/CoverDesigner/Personalize' });
                break;
            case CoverProcess.Enums.CoverProcessStep.Color:
                stepDiv.click(function () { window.location.href = '/CoverDesigner/ChooseColor' });
                break;
            case CoverProcess.Enums.CoverProcessStep.Material:
                stepDiv.click(function () { window.location.href = '/CoverDesigner/ChooseCover' });
                break;
            case CoverProcess.Enums.CoverProcessStep.Vehicle:
                stepDiv.click(function () { window.location.href = '/CoverDesigner/MyVehicle' });
                break;
        }
    });
};

CoverProcess.CheckForKey = function () {
    var self = CoverProcess;

    var coverProcessKey = $('#ProcessKey').val();

    if (self.CheckKeyValidGuid(coverProcessKey)) {
        self.SaveProcessKey(coverProcessKey);
    } else {
        var savedKey = self.GetProcessKey();

        if (self.CheckKeyValidGuid(savedKey)) {
            $('#recoverProcessModal').modal();
            $('#recoverProcessModal .btn-yes').click(self.ContinueProcess);
            $('#recoverProcessModal .btn-no').click(self.AbandonProcess);
        }
    }
};

CoverProcess.CheckKeyValidGuid = function (key) {
    var regex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;

    return regex.test(key);
};

CoverProcess.SaveProcessKey = function (key) {
    localStorage.setItem(CoverProcess.LocalStorageProcessKey, key);
};

CoverProcess.GetProcessKey = function () {
    return localStorage.getItem(CoverProcess.LocalStorageProcessKey);
};

CoverProcess.ContinueProcess = function () {
    var self = CoverProcess;

    var savedProcessKey = self.GetProcessKey();

    if (!self.CheckKeyValidGuid(savedProcessKey))
        return;

    var data = {
        processKey: savedProcessKey
    };

    $.ajax({
        url: self.AjaxRecoverProcessUrl,
        type: 'POST',
        data: JSON.stringify(data),
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            if (result.Success) {
                window.location.href = result.RedirectUrl;
            } else {
                if (Globals.LogErrors)
                    console.log('[Error]: ' + result.Message);
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (Globals.LogErrors)
                console.log("[Error] XHR Status: " + xhr.status + ", Error: " + thrownError);
        }
    });
};

CoverProcess.AbandonProcess = function () {
    var self = CoverProcess;

    localStorage.removeItem(self.LocalStorageProcessKey);
    window.location.href = self.MyVehicleUrl;
};
registerNS("CoverProcess.Vehicle");

CoverProcess.Vehicle.AjaxYearsUrl = API.LocalBaseUrl + "/getyears";
CoverProcess.Vehicle.AjaxMakesUrl = API.LocalBaseUrl + "/getmakes";
CoverProcess.Vehicle.AjaxModelsUrl = API.LocalBaseUrl + "/getmodels";
CoverProcess.Vehicle.AjaxTrimsUrl = API.LocalBaseUrl + "/gettrims";

CoverProcess.Vehicle.Initialize = function (year, make, model, trim) {
    var self = this;
    self.GetYears(year);

    if (year > 0) {
        self.GetMakes(year, make);
        self.GetModels(year, make, model);
        self.GetTrims(year, make, model, trim);
    } else {
        self.ClearVehicleInfo(CoverProcess.Enums.CoverProcessStep.Vehicle);
    };

    CoverProcess.WireUpSteps();
    CoverProcess.CheckForKey();

    $('#custom-cover-search').prop('disabled', true);
};

CoverProcess.Vehicle.InitializeCoverSeo = function(){

}

CoverProcess.Vehicle.ClearVehicleInfo = function (step) {
    switch (step) {
        case 1: // Years changed
            $('select[name="Make"]').find('option:gt(0)').remove();
            $('select[name="Make"]').val('0');
            // Pass through to also clear Model.
        case 2: // Makes changed
            $('select[name="Model"]').find('option:gt(0)').remove();
            $('select[name="Model"]').val('0');
            // Pass through to also clear Trim.
        case 3: // Models changed
            $('select[name="TrimSize"]').find('option:gt(0)').remove();
            $('select[name="TrimSize"]').val('0');
            break;
    };

    $('#custom-cover-search').prop('disabled', true);
}

CoverProcess.Vehicle.GetYears = function (selectedYear) {
    var self = this;

    $.ajax({
        url: self.AjaxYearsUrl,
        type: 'GET',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            if (result.Years.length > 0) {
                var yearsDropdown = $('select[name="Year"]');

                result.Years.forEach(function (year) {
                    var option = $('<option></option>').attr('value', year).text(year);

                    if (selectedYear === year)
                        option.attr('selected', 'selected');

                    yearsDropdown.append(option);
                });

                yearsDropdown.change(function () {
                    if (this.value == 0)
                        return;

                    self.ClearVehicleInfo(1);

                    self.GetMakes(this.value);
                });
            };
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (Globals.LogErrors)
                console.log("[Error] XHR Status: " + xhr.status + ", Error: " + thrownError);
        }
    });
};

CoverProcess.Vehicle.GetMakes = function (year, selectedMake) {
    var self = this;

    $.ajax({
        url: self.AjaxMakesUrl,
        type: 'GET',
        data: { yearId: year },
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            if (result.Makes.length > 0) {
                var makesDropdown = $('select[name="Make"]');

                result.Makes.forEach(function (make) {
                    var option = $('<option></option>').attr('value', make).text(make);

                    if (make === selectedMake)
                        option.attr('selected', 'selected');

                    makesDropdown.append(option);
                });
                 makesDropdown.unbind('change');
                makesDropdown.change(function () {
                    if (this.value == 0)
                        return;
                    self.ClearVehicleInfo(2);

                    self.GetModels(year, this.value);
                });
            };
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (Globals.LogErrors)
                console.log("[Error] XHR Status: " + xhr.status + ", Error: " + thrownError);
        }
    });
}

CoverProcess.Vehicle.GetModels = function (year, make, selectedModel) {
    var self = this;

    $.ajax({
        url: self.AjaxModelsUrl,
        type: 'GET',
        data: { yearId: year, make: make },
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            if (result.Models.length > 0) {
                var modelsDropdown = $('select[name="Model"]');

                result.Models.forEach(function (model) {
                    var option = $('<option></option>').attr('value', model).text(model);

                    if (model === selectedModel)
                        option.attr('selected', 'selected');

                    modelsDropdown.append(option);
                });
                modelsDropdown.unbind('change');
                modelsDropdown.change(function () {
                    if (this.value == 0)
                        return;
                    self.ClearVehicleInfo(3);

                    self.GetTrims(year, make, this.value);
                });
            };
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (Globals.LogErrors)
                console.log("[Error] XHR Status: " + xhr.status + ", Error: " + thrownError);
        }
    });
}

CoverProcess.Vehicle.GetTrims = function (year, make, model, selectedTrim) {
    var self = this;

    $.ajax({
        url: self.AjaxTrimsUrl,
        type: 'GET',
        data: { yearId: year, make: make, vehicleModel: model },
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            if (result.Trims.length > 0) {
                var trimsDropdown = $('select[name="TrimSize"]');

                trimsDropdown.find('option:gt(0)').remove();

                result.Trims.forEach(function (trim) {
                    var option = $('<option></option>').attr('value', trim.SubModel + '|' + trim.Size + '|' + trim.PartNumber).text(trim.SubModel);

                    if (trim.SubModel === selectedTrim)
                        option.attr('selected', 'selected');

                    trimsDropdown.append(option);
                });
                trimsDropdown.unbind('change');
                trimsDropdown.change(function () {
                    if (this.value == 0) {
                        $('#custom-cover-search').prop('disabled', true);
                        return;
                    }

                    //console.log("this.value: " + this.value);
                    $('#custom-cover-search').prop('disabled', false);
                });
                //console.log("selectedTrim: " + selectedTrim);
                //console.log("show green");
                if (selectedTrim !== undefined)
                    $('#custom-cover-search').prop('disabled', false);
            };
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (Globals.LogErrors)
                console.log("[Error] XHR Status: " + xhr.status + ", Error: " + thrownError);
        }
    });
}



// diverge for CoverSeoProcess

registerNS("CoverSeoProcess.Vehicle");
CoverSeoProcess.Vehicle.AjaxYearsUrl = "/coverdesigner/CoverSeoGetYears";
CoverSeoProcess.Vehicle.AjaxMakesUrl = "/coverdesigner/CoverSeoGetMakes";
CoverSeoProcess.Vehicle.AjaxModelsUrl = "/coverdesigner/CoverSeoGetModels";
CoverSeoProcess.Vehicle.AjaxTrimsUrl = API.LocalBaseUrl + "/gettrims";

CoverSeoProcess.Vehicle.Initialize = function () {
    var self = this;
};

CoverSeoProcess.Vehicle.GetMakes = function () {
    var self = this;
    $.ajax({
        url: self.AjaxMakesUrl,
        type: 'GET',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            if (result.Makes.length > 0) {
                var makesDropdown = $('select[name="Make"]');
                result.Makes.forEach(function (make) {
                    var option = $('<option></option>').attr('value', make).text(make);
                    makesDropdown.append(option);
                });
            };
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (Globals.LogErrors)
                console.log("[Error] XHR Status: " + xhr.status + ", Error: " + thrownError);
        }
    });
}

CoverSeoProcess.Vehicle.GetModels = function () {
    var self = this;
    var currentMake = $('#urlMake').val();
    $.ajax({
        url: self.AjaxModelsUrl,
        type: 'GET',
        data: {  make: currentMake },
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            if (result.Models.length > 0) {
                var modelsDropdown = $('select[name="Model"]');
                var currentModel = $('#urlModel').val();
                self.ClearVehicleInfo([ 'Model']);
                result.Models.forEach(function (model) {
                    var option = $('<option></option>').attr('value', model).text(model);
                    var currentMake = $('#urlMake').val();

                    if (model === currentModel){
                        option.attr('selected', 'selected');
                        
                        self.GetYears(currentMake, currentModel);
                    }
                    modelsDropdown.append(option);
                });
            };
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (Globals.LogErrors)
                console.log("[Error] XHR Status: " + xhr.status + ", Error: " + thrownError);
        }
    });
}

CoverSeoProcess.Vehicle.GetYears = function () {
    var self = this;
    var currentMake = $('#urlMake').val();
    var currentModel = $('#urlModel').val();
    $.ajax({
        url: self.AjaxYearsUrl,
        type: 'GET',
        dataType: 'json',
        data: {  make: currentMake, model: currentModel },
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            if (result.Years.length > 0) {
                var yearsDropdown = $('select[name="Year"]');
                var currentYear = $('#urlYear').val();
                self.ClearVehicleInfo([ 'Year' ]);
                result.Years.forEach(function (year) {
                    var option = $('<option></option>').attr('value', year).text(year);
                    if (currentYear == year)
                        option.attr('selected', 'selected');
                    yearsDropdown.append(option);
                });

               
            };
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (Globals.LogErrors)
                console.log("[Error] XHR Status: " + xhr.status + ", Error: " + thrownError);
        }
    });
};

CoverSeoProcess.Vehicle.ClearVehicleInfo = function (stepsToClear) {
    for(var i = 0; i < stepsToClear.length; i++){
         $('select[name="' + stepsToClear[i] + '"]').find('option:gt(0)').remove();
         $('select[name="' + stepsToClear[i] + '"]').val('0');
        $('#url' + stepsToClear[i]).val('');
    }
}

CoverSeoProcess.Vehicle.GetTrims = function () {
    var self = this;
    var currentMake = $('#urlMake').val();
    var currentModel = $('#urlModel').val();
    var currentYear = $('#urlYear').val();
    $.ajax({
        url: self.AjaxTrimsUrl,
        type: 'GET',
        data: { yearId: currentYear, make: currentMake, vehiclemodel: currentModel },
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            if (result.Trims.length > 0) {
                var trimsDropdown = $('select[name="TrimSize"]');

                trimsDropdown.find('option:gt(0)').remove();

                result.Trims.forEach(function (trim) {
                    var option = $('<option></option>').attr('value', trim.SubModel + '|' + trim.Size + '|' + trim.PartNumber).text(trim.SubModel);
                    trimsDropdown.append(option);
                });

                $('#custom-cover-search').prop('disabled', false);
            };
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (Globals.LogErrors)
                console.log("[Error] XHR Status: " + xhr.status + ", Error: " + thrownError);
        }
    });
}



registerNS("CoverProcess.Cover");

CoverProcess.Cover.AjaxMaterialsUrl = API.LocalBaseUrl + "/getmaterials";
CoverProcess.Cover.ReviewsUrl = "";
CoverProcess.Cover.BatchUrl = "";
CoverProcess.Cover.Initialize = function () {
    var self = this;

    var size = $('#size').val();

    self.RegisterHelpers();

    self.LoadCovers(size);

    $('#all').click(self.ShowAll);
    $('#indoor').click(self.ShowIndoor);
    $('#outdoor').click(self.ShowOutdoor);


    CoverProcess.WireUpSteps();
    CoverProcess.CheckForKey();
};

CoverProcess.Cover.Submit = function (e) {
  var $button = $(e.target).closest("button");
  localStorage.setItem('ExternalId', $button.data("externalid"));
  return true;
};

CoverProcess.Cover.RegisterHelpers = function () {
    Handlebars.registerHelper('rating', function (rating) {
        var html = "";

        for (var i = 10; i > 0; i--) {
            var off = i > rating ? ' off' : '';
            html = html + '<i class="rate' + off + '"></i>\r\n';
        }

        return new Handlebars.SafeString(html);
    });

    Handlebars.registerHelper('randomCar', function () {
        var min = Math.ceil(1);
        var max = Math.floor(4);
        return Math.floor(Math.random() * (max - min + 1)) + min;
    });

    Handlebars.registerHelper('randomReview', function () {
        // var minReviewCount = Math.ceil(9);
        // var maxReviewCount = Math.floor(35);
        // var reviewCount = Math.floor(Math.random() * (maxReviewCount - minReviewCount + 1)) + minReviewCount;
        //
        // var minReviewStars = Math.ceil(3);
        // var maxReviewStars = Math.floor(5);
        // //(123.8 * 2).toFixed() / 2
        // var reviewStars = Math.random() * (maxReviewStars - minReviewStars) + minReviewStars;
        // reviewStars = (reviewStars * 2).toFixed() / 2;
        var reviewCount = 0;
        var reviewStars = 0;
        var html = "";

        for (var i = 1; i <= reviewStars; i++) {
            html = html + '<i class="fa fa-star" aria-hidden="true"></i>\r\n';
        }

        var emptyStars = 5 - reviewStars;

        if (reviewStars % 1 != 0) {
            html = html + '<i class="fa fa-star-half-o" aria-hidden="true"></i>\r\n';
            emptyStars = emptyStars - .5;
        }
        for (var i = 0; i < emptyStars; i++) {
            html = html + '<i class="fa fa-star-o" aria-hidden="true"></i>\r\n';
        }

        html = html + '(' + reviewCount + ')';
        console.log(html);
        return new Handlebars.SafeString(html);
    });
};

CoverProcess.Cover.LoadCovers = function (size) {
    var self = this;

    $.ajax({
        url: self.AjaxMaterialsUrl,
        type: 'GET',
        data: { size: size },
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            if (result.Materials.length > 0) {
                var container = $('#covers-container');

                var source = $('#template-covers').html();
                var template = Handlebars.compile(source);

                result.Materials.map(function(e){
                  e.ExternalId = e.ExternalId.toLowerCase();
                  return e;
                });

                //var items = template(result);

                container.empty();
//                self.LoadReviews(result.Materials, function(){
//                  container.html(items);
//                });
            };
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (Globals.LogErrors)
                console.log("[Error] XHR Status: " + xhr.status + ", Error: " + thrownError);
        }
    });
};

CoverProcess.Cover.LoadReviews = function (products, callback) {
  if (callback && typeof callback === 'function') {
    callback();
  }
  var self = this,
      productIds = products.map(function(e){
        return e.ExternalId;
      }) || [];

  $('button[type=submit]').click(self.Submit);
    $.ajax({
        url: self.BatchUrl + "&filter=productid:" + productIds.join(","),
            type: 'GET',
      dataType: 'json',
      success: function (result) {
          if (result.BatchedResults) {
              self.RenderReviewsAjax(result.BatchedResults.q0.Results);
        }
      },
      error: function (xhr, ajaxOptions, thrownError) {
          if (Globals.LogErrors)
              console.log("[Error] XHR Status: " + xhr.status + ", Error: " + thrownError);
      }
  });
}

CoverProcess.Cover.RenderReviewsAjax = function (stats) {
  var products = stats,
      reviews = [];
    //Render star reviews under product name
    for (var productId in products) {

        var stat = products[productId].ProductStatistics;
        var reviewCount = + (stat.ReviewStatistics.TotalReviewCount),
            reviewStars = + (stat.ReviewStatistics.AverageOverallRating);
        qualityStars = + stat.ReviewStatistics.AverageOverallRating;

        var html = "";

        for (var i = 1; i <= reviewStars; i++) {
            html = html + '<i class="fa fa-star" aria-hidden="true"></i>\r\n';
        }

        var emptyStars = 5 - reviewStars;
        if (reviewStars % 1 != 0) {
            html = html + '<i class="fa fa-star-half-o" aria-hidden="true"></i>\r\n';
            emptyStars = emptyStars - .5;
        }

        for (var i = 0; i < emptyStars; i++) {
            html = html + '<i class="fa fa-star-o" aria-hidden="true"></i>\r\n';
        }
        html = html + '(' + reviewCount + ')';

        var elementId = products[productId].ProductStatistics.ProductId.toLowerCase();
        if ($('#' + elementId).length) {
            $('#' + elementId).html(html);
            //Rating snapshot and Average Customer Ratings
            $('#' + elementId + "-bv-rating-stars").css("width", reviewStars / 5 * 100 + "%");
            $('#' + elementId + "-bv-rating-summary-rating").html(reviewStars);
            $('#' + elementId + "-bv-secondary-rating-summary-value").get(0).style.setProperty('width', qualityStars / 5 * 100 + "%", 'important');
            $('#' + elementId + "-bv-secondary-rating-summary-rating").html(qualityStars);

            //var ratingDistribution = stat.ReviewStatistics.RatingDistribution;
            //ratingDistribution.forEach(function (val) {
            //    $('#' + elementId + "-bv-content-secondary-ratings-container-" + val.RatingValue).css("width", val.Count / reviewCount * 100 + "%");
            //    $('#' + elementId + "-bv-inline-histogram-ratings-score-" + val.RatingValue).html(val.Count);
            //});
            var reviewCount = + (stat.ReviewStatistics.TotalReviewCount),
                reviewStars = + (stat.ReviewStatistics.AverageOverallRating);
            var html = "";
            console.log(stat.ReviewStatistics.AverageOverallRating);
            for (var i = 1; i <= reviewStars; i++) {
                html = html + '<i class="fa fa-star" aria-hidden="true"></i>\r\n';
            }

            var emptyStars = 5 - reviewStars;
            if (reviewStars % 1 != 0) {
                html = html + '<i class="fa fa-star-half-o" aria-hidden="true"></i>\r\n';
                emptyStars = emptyStars - .5;
            }

            for (var i = 0; i < emptyStars; i++) {
                html = html + '<i class="fa fa-star-o" aria-hidden="true"></i>\r\n';
            }

            html = html + '(' + reviewCount + ')';
            $('#' + products[productId].ProductStatistics.ProductId.toLowerCase()).html(html);
            //});
        }
    };

  //Render user reviews for each product
  reviews = stats.Results.reduce(function(obj, item){
      obj[item.ProductId] = obj[item.group] || [];
      if (obj[item.ProductId].length === 0) {
        obj[item.ProductId].push(item);
      }
      return obj;
  }, {});
        for (var productId in reviews) {
            var elementId = productId.toLowerCase();
            var review = reviews[productId][0]; //only display 1 latest review per product to avoid flooding choose cover page
            $('#' + elementId + "-isReviews").get(0).style.setProperty('display', "block", 'important');
            $('#' + elementId + "-isNoReviews").get(0).style.setProperty('display', "none", 'important');
            $('#' + elementId + "-bv-rating-max").css("width", review.Rating / 5 * 100 + "%");
            $('#' + elementId + "-bv-author").html(review.UserNickname);
            $('#' + elementId + "-bv-content-title").html(review.Title);
            $('#' + elementId + "-bv-content-summary-body-text").html(review.ReviewText);
            if (review.SecondaryRatings && review.SecondaryRatings.Quality && review.SecondaryRatings.Quality.Value) {
                $('#' + elementId + "-bv-content-secondary-ratings-value").css("width", review.SecondaryRatings.Quality.Value / 5 * 100 + "%");
            }
            $('#' + elementId + "-bv-content-data-recommend-yes").toggleClass("hide", review.IsRecommended);
            if (!review.IsRatingsOnly) {
                $('#' + elementId + "-ratings-only").get(0).style.setProperty('display', "none", 'important');
            }
        }
  };

CoverProcess.Cover.RenderReviews = function (result) {
  var stats = result.map(function(e){return e.ProductStatistics});
  stats.forEach(function(stat){
    var reviewCount = + (stat.ReviewStatistics.TotalReviewCount),
        reviewStars = + (stat.ReviewStatistics.AverageOverallRating);
    var html = "";

    for (var i = 1; i <= reviewStars; i++) {
        html = html + '<i class="fa fa-star" aria-hidden="true"></i>\r\n';
    }

    var emptyStars = 5 - reviewStars;
    if (reviewStars % 1 != 0) {
        html = html + '<i class="fa fa-star-half-o" aria-hidden="true"></i>\r\n';
        emptyStars = emptyStars - .5;
    }

    for (var i = 0; i < emptyStars; i++) {
        html = html + '<i class="fa fa-star-o" aria-hidden="true"></i>\r\n';
    }

    html = html + '(' + reviewCount + ')';
    $('#' + stat.ProductId.toLowerCase()).html(html);
  });
}

CoverProcess.Cover.ShowAll = function () {
    $('.btn-group').find('a').removeClass('active');
    $('#all').addClass('active');

    $('div[data-classification]').show();
}

CoverProcess.Cover.ShowIndoor = function () {
    $('.btn-group').find('a').removeClass('active');
    $('#indoor').addClass('active');

    $('div[data-classification="Indoor"]').show();
    $('div[data-classification="Outdoor"]').hide();
}

CoverProcess.Cover.ShowOutdoor = function () {
    $('.btn-group').find('a').removeClass('active');
    $('#outdoor').addClass('active');

    $('div[data-classification="Indoor"]').hide();
    $('div[data-classification="Outdoor"]').show();
}

registerNS("CoverProcess.Color");

CoverProcess.Color.AjaxColorsUrl = API.LocalBaseUrl + "/getmaterialcolors";
CoverProcess.Color.BuildPriceTimer = null;
CoverProcess.Color.VehicleImageTimer = null;

CoverProcess.Color.Initialize = function () {
    var self = CoverProcess.Color;

    var size = $('#size').val();
    var sku = $('#SKU').val();

    self.LoadColors(size, sku);

    // Wire up vehicle image changes
    $('.color-options').mouseover(self.SetCarColorImage);

    //init
    setTimeout(self.SetCarColorImage, 1000);

    CoverProcess.WireUpSteps();
    CoverProcess.CheckForKey();
};

CoverProcess.Color.SetCarColorImage = function () {
    var targetColor = $('.color-options .color-target');
    var vehicleImage = $('#color-car');

    if (targetColor.length === 0)
        targetColor = $('.color-options .color-selected');

    var colorCode = targetColor.data('colorcode');
    if (colorCode) {
        vehicleImage.attr('src', '/Images/ccc/CarCovers/MaterialColors/Vehicles/' + colorCode + '.jpg');
    }
};

CoverProcess.Color.LoadReviews = function () {
  var id = localStorage.getItem('ExternalId');
  //if (id) {
  //  if ($(window).width() < 768) {
  //    $BV.configure('global', {
  //      productId : id,
  //      displayType: "mobile"
  //    });
  //    $("#product-content-desktop").remove();
  //    $BV.ui( 'rr', 'show_reviews', {
  //      doShowContent : function () {
  //          $("#tab-reviews-m").click();
  //      }
  //    });
  //    $BV.ui( 'qa', 'show_questions', {
  //      doShowContent : function () {
  //        $("#tab-qanda-m").click();
  //      }
  //    });
  //  } else {
  //    $BV.configure('global', { productId : id });
  //    $BV.ui( 'rr', 'show_reviews', {
  //      doShowContent : function () {
  //          $("#tab-reviews").click();
  //      }
  //    });
  //    $BV.ui( 'qa', 'show_questions', {
  //      doShowContent : function () {
  //        $("#tab-qanda").click();
  //      }
  //    });
  //  }


  //}
};

CoverProcess.Color.LoadColors = function (size, sku) {
    var self = this;

    $.ajax({
        url: self.AjaxColorsUrl,
        type: 'GET',
        data: { size: size, materialCode: sku },
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            if (result.MaterialColors.length > 0) {
                self.SetColorOptions(result);
                self.SetBasePrice(result);
                self.SetSKU($('#SKU').val());
                self.SetProductId(result.MaterialColors[0].ProductId);
                self.WireUpColorOptions();
                self.BuildExtraCost();
                //self.LoadReviews();
                self.SetProductDescription(result.MaterialColors[0].ProductDescription);
            };
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (Globals.LogErrors)
                console.log("[Error] XHR Status: " + xhr.status + ", Error: " + thrownError);
        }
    });
};

CoverProcess.Color.SetColorOptions = function (result) {
    var container = $('.color-options');

    var source = $('#template-coloroptions').html();
    var template = Handlebars.compile(source);

    var items = template(result);

    container.empty();
    container.html(items);

    var firstOption = $('.color-options-choose > div:first');
    firstOption.addClass('color-selected');
    $('#MaterialColorCode').val(firstOption.data('colorcode'));

    $('#CoverPrice').val(firstOption.data('price'));
    $('#CoverColor').val(firstOption.data('color'));
};

CoverProcess.Color.SetBasePrice = function (result) {
    var basePrice = Math.min.apply(Math, result.MaterialColors.map(function (o) { return o.ItemPrice; }));

    var container = $('.p-price');
    container.text('$' + basePrice);
    $('#basePrice').val(basePrice); // Data attribute doesn't want to work at this level or parent and I'm done fighting with it.
};

CoverProcess.Color.SetSKU = function (sku) {
    $('.sku').text('SKU: ' + sku);
};

CoverProcess.Color.SetProductDescription = function (productDescription) {
    $('.productDescription').html(productDescription);
};

CoverProcess.Color.SetProductId = function (productId) {
    $('#ProductId').val(productId);
};

CoverProcess.Color.WireUpColorOptions = function() {
    var self = this;

    var colorOptions = $('.color-options-choose').find('div');

    colorOptions.mouseover(self.Highlight);
    colorOptions.mouseout(self.UnHighlight);
    colorOptions.click(self.Select);
};

CoverProcess.Color.Highlight = function (e) {
    var self = CoverProcess.Color;

    clearTimeout(self.BuildPriceTimer);
    clearTimeout(self.VehicleImageTimer);

    var target = $(e.target);

    target.addClass('color-target');
    self.BuildExtraCost();
};

CoverProcess.Color.UnHighlight = function (e) {
    var self = CoverProcess.Color;

    var target = $(e.target);

    target.removeClass('color-target');
    self.BuildPriceTimer = setTimeout(self.BuildExtraCost, 100);
    self.VehicleImageTimer = setTimeout(self.SetCarColorImage, 100);
};

CoverProcess.Color.Select = function(e) {
    var target = $(e.target);

    $('.color-options-choose').find('div').removeClass('color-selected');
    target.addClass('color-selected');

    $('#MaterialColorCode').val(target.data('colorcode'));

    $('#CoverPrice').val(Number($('.color-selected').data('price')));
    $('#CoverColor').val($('.color-selected').data('color'));
};

CoverProcess.Color.BuildExtraCost = function () {
    var container = $('.extra-cost');
    var colorCost;
    var costDifference;
    var colorName;
    var newText = "";

    var baseCost = Number($('#basePrice').val());
    var colorTarget = $('.color-target');

    if (colorTarget.length != 0) {
        colorCost = Number(colorTarget.data('price'));
        costDifference = Number(colorCost - baseCost);;
        colorName = colorTarget.data('color');

        newText = colorName + ' +$' + costDifference;
    } else {
        var colorSelected = $('.color-selected');
        if (colorSelected.length != 0) {
            colorCost = Number(colorSelected.data('price'));
            costDifference = Number(colorCost - baseCost);;
            colorName = colorSelected.data('color');

            newText = colorName + ' +$' + costDifference;
        }
    }

    container.text(newText);
};

registerNS("CoverProcess.Personalize");

CoverProcess.Personalize.AjaxGetLogosUrl = API.LocalBaseUrl + '/getlogos';
CoverProcess.Personalize.AutoYear = '';
CoverProcess.Personalize.AutoMake = '';
CoverProcess.Personalize.AutoModel = '';
CoverProcess.Personalize.ColorNameTimer = null;
CoverProcess.Personalize.LoadingPage = false;

CoverProcess.Personalize.Initialize = function (year, make, model) {
    var self = this;

    self.LoadingPage = true;

    self.WireUpClickEvents();
    self.WireUpColorOptions();

    CoverProcess.WireUpSteps();
    CoverProcess.CheckForKey();

    self.AutoYear = year;
    self.AutoMake = make;
    self.AutoModel = model;

    self.SetDisplayFromFields();

    self.PopulateLogos();

    self.LoadingPage = false;
};

CoverProcess.Personalize.WireUpClickEvents = function () {
    var self = CoverProcess.Personalize;

    self.WireUpSingleToggle('.js-mod-on', '.js-mod-off', self.ShowModificationOption, self.HideModificationOption);
    self.WireUpSingleToggle('.js-emb-on', '.js-emb-off', self.ShowEmbroideryOptions, self.HideEmbrioderyOptions);
    self.WireUpSingleToggle('.js-auto-on', '.js-auto-off', self.ShowLogos, self.HideLogos);
    self.WireUpSingleToggle('.js-ccc-on', '.js-ccc-off', function () { self.SetInputTrueByName('Options.NoCccLogoSelected') }, function () { self.SetInputFalseByName('Options.NoCccLogoSelected') });
    self.WireUpSingleToggle('.js-pip-on', '.js-pip-off', function () { self.SetInputTrueByName('Options.PipingSelected') }, function () { self.SetInputFalseByName('Options.PipingSelected') });
    self.WireUpMultipleToggle('.js-ant-on', '.js-ant-off', self.UpdateAntennaOptions, self.ClearAntennaOptions);
    self.WireUpMultipleToggle('.js-jel-on', '.js-jel-off', self.UpdateJellyBladeOptions, self.ClearJellyBladeOptions);
    self.WireUpSingleToggle('.js-dst-on', '.js-dst-off', function () { self.SetInputTrueByName('Options.DusterSelected') }, function () { self.SetInputFalseByName('Options.DusterSelected') });
    self.WireUpSingleToggle('.js-tie-on', '.js-tie-off', function () { self.SetInputTrueByName('Options.GustClampSelected') }, function () { self.SetInputFalseByName('Options.GustClampSelected') });
    self.WireUpSingleToggle('.js-lck-on', '.js-lck-off', function () { self.SetInputTrueByName('Options.LockSelected') }, function () { self.SetInputFalseByName('Options.LockSelected') });
    self.WireUpMultipleToggle('.js-str-on', '.js-str-off', self.UpdateStorageBagOptions, self.ClearStorageBagOptions);
    self.WireUpMultipleToggle('.js-bag-on', '.js-bag-off', self.ShowBagColors, self.HideBagColors);

    $('#accordion').find('.panel-heading').click(function() {
        $('.panel-heading .fa-minus-circle').removeClass('fa-minus-circle');
        $(this).find(".fa").addClass('fa-minus-circle');
    });
    
};

CoverProcess.Personalize.SetDisplayFromFields = function() {
    if ($('.js-mod-opt').val() != '')
        $('.js-mod-on').click();

    if ($('.js-emb-opt').val() != '') {
        $('.js-emb-on').click();

        var color = $('.js-emb-opt-color').val();
        setTimeout(function() { $('#embroidery-container div[data-color="' + color + '"]').click(); }, 1000);
    }

    var autoLogoCode = $('.js-auto-opt').val();
    if (autoLogoCode != '') {
        $('.js-auto-on').click();

        setTimeout(function () { $('img[data-logocode="' + autoLogoCode + '"]').click(); }, 500);
    }

    var cccLogo = $('.js-ccc-opt').val();
    if (cccLogo != '' && cccLogo != 'False')
        $('.js-ccc-on').click();

    var piping = $('.js-pip-opt').val();
    if (piping != '' && piping != 'False')
        $('.js-pip-on').click();

    var antennaSkuText = $('.js-ant-opt').val();
    if (antennaSkuText != '') {
        var antennaSkus = antennaSkuText.split(',');

        $(antennaSkus).each(function () {
            var sku = this;

            $('div[data-sku="' + sku + '"]').click();
        });
    }

    var storageBagSkuText = $('.js-str-opt').val();
    if (storageBagSkuText != '') {
        var storageBagSkus = storageBagSkuText.split(',');

        $(storageBagSkus).each(function () {
            var sku = this;

            $('div[data-sku="' + sku + '"]').click();
        });
    }

    var jellyBladeSkuText = $('.js-jel-opt').val();
    if (jellyBladeSkuText != '') {
        var jellyBladeSkus = jellyBladeSkuText.split(',');

        $(jellyBladeSkus).each(function () {
            var sku = this;

            $('div[data-sku="' + sku + '"]').click();
        });
    }

    var duster = $('.js-dst-opt').val();
    if (duster != '' && duster != 'False')
        $('.js-dst-on').click();

    var gustClamp = $('.js-tie-opt').val();
    if (gustClamp != '' && gustClamp != 'False')
        $('.js-tie-on').click();

    var lock = $('.js-lck-opt').val();
    if (lock != '' && lock != 'False')
        $('.js-lck-on').click();

    var toteBagSkuText = $('.js-bag-opt').val();
    if (toteBagSkuText != '') {
        var toteBagSkus = toteBagSkuText.split(',');

        $(toteBagSkus).each(function () {
            var sku = this.toString();

            var skuLeft5 = sku.substr(0, 5).toString();
            var skuRight2 = sku.substr(5, 2).toString();

            $('div[data-skuprefix="' + skuLeft5 + '"]').click();
            $('div[data-skusuffix="' + skuRight2 + '"]').click();
        });
    }
};

CoverProcess.Personalize.WireUpSingleToggle = function (selectorOn, selectorOff, eventOn, eventOff) {
    $(selectorOff).click(function () {
        $(selectorOn).removeClass('on');
        $(this).addClass('on');

        if (eventOff && (typeof eventOff == "function"))
            eventOff();
    });

    $(selectorOn).click(function () {
        var selection = $(this);

        if (selection.hasClass('on')) {
            selection.removeClass('on');
            $(selectorOff).addClass('on');

            if (eventOff && (typeof eventOff == "function"))
                eventOff();
        } else {
            $(selectorOff).removeClass('on');
            selection.addClass('on');

            if (eventOn && (typeof eventOn == "function"))
                eventOn();
        }
    });
};

CoverProcess.Personalize.WireUpMultipleToggle = function (selectorOn, selectorOff, eventOn, eventOff) {
    $(selectorOff).click(function () {
        $(selectorOn).removeClass('on');
        $(this).addClass('on');

        if (eventOff && (typeof eventOff == "function"))
            eventOff();
    });

    $(selectorOn).click(function () {
        var selection = $(this);

        if (selection.hasClass('on')) {
            selection.removeClass('on');
        } else {
            $(selectorOff).removeClass('on');
            selection.addClass('on');
        }

        if ($(selectorOn + '.on').length == 0) {
            $(selectorOff).addClass('on');

            if (eventOff && (typeof eventOff == "function"))
                eventOff();
        } else {
            if (eventOn && (typeof eventOn == "function"))
                eventOn();
        }
    });
};

CoverProcess.Personalize.SetInputTrueByName = function (fieldName) {
    $('input[name="' + fieldName + '"]').val('true');
};

CoverProcess.Personalize.SetInputFalseByName = function (fieldName) {
    $('input[name="' + fieldName + '"]').val('false');
};

CoverProcess.Personalize.ShowModificationOption = function () {
    var container = $('#modification-container');
    container.removeClass('hidden');
    container.find('input').focus();
};

CoverProcess.Personalize.HideModificationOption = function () {
    var container = $('#modification-container');
    container.find('input').val('');
    container.addClass('hidden');
};

CoverProcess.Personalize.ShowEmbroideryOptions = function () {
    var self = CoverProcess.Personalize;

    self.WireUpColorOptions();

    var container = $('#embroidery-container');
    container.find('.color-options div').removeClass('color-selected');
    container.find('.color-options div:first').click();
    container.removeClass('hidden');
    container.find('input').focus();
};

CoverProcess.Personalize.HideEmbrioderyOptions = function () {
    var container = $('#embroidery-container');
    container.find('.color-options div').removeClass('color-selected');
    $('input[name="Options.EmbroideryText"]').val('');
    container.addClass('hidden');
};

CoverProcess.Personalize.WireUpColorOptions = function () {
    var self = CoverProcess.Personalize;

    var colorOptions = $('.color-options').find('div');

    colorOptions.mouseover(self.ColorHighlight);
    colorOptions.mouseout(self.ColorUnHighlight);
    colorOptions.click(self.ColorSelect);

    self.SetColorName();
};

CoverProcess.Personalize.ColorHighlight = function (e) {
    var self = CoverProcess.Personalize;

    clearTimeout(self.ColorNameTimer);

    var target = $(e.target);

    target.addClass('color-target');
    self.SetColorName(target);
};

CoverProcess.Personalize.ColorUnHighlight = function (e) {
    var self = CoverProcess.Personalize;

    var target = $(e.target);

    target.removeClass('color-target');

    if (target.parent('div').find('.color-selected').length === 0)
        self.ClearColorName(target);

    self.ColorNameTimer = setTimeout(function(target) { self.SetColorName(target); }, 250);
};

CoverProcess.Personalize.ColorSelect = function (e) {
    var self = CoverProcess.Personalize;

    var target = $(e.target);

    var parentDiv = target.parent('div');
    parentDiv.find('div').removeClass('color-selected');
    target.addClass('color-selected');
    self.SetColorName(target);

    var hiddenField = parentDiv.find('input');

    if (hiddenField.attr('name') == 'Options.EmbroideryColor' && !self.LoadingPage ) {
        hiddenField.val(target.data('color'));
    } else if (hiddenField.attr('name') == 'Options.ToteBagSkus') {
        var skuPrefixes = $('.js-bag-on.on').map(function() {
            return $(this).data('skuprefix');
        }).get();

        var suffix = target.data('skusuffix');
        var skus = $(skuPrefixes).map(function () {
            return this + suffix;
        }).get().join(',');

        hiddenField.val(skus);
    };
};

CoverProcess.Personalize.SetColorName = function (target) {
    if (target) {
        target.parent('div').find('.js-color-name').text(target.data('color'));
    } else {
        $('.js-color-name').each(function() {
            var colorNameSpan = $(this);

            var selectedColor = colorNameSpan.parent('label').parent('div').find('.color-selected');

            if (selectedColor.length > 0) {
                colorNameSpan.text(selectedColor.data('color'));
            } else {
                selectedColor = colorNameSpan.parent('label').parent('div').find('.color-target');

                if (selectedColor.length > 0)
                    colorNameSpan.text(selectedColor.data('color'));
                else
                    colorNameSpan.text('');
            }
        });
    }
};

CoverProcess.Personalize.ClearColorName = function (target) {
    target.parent('div').find('.js-color-name').text('');
    $('.js-color-options').find('div:first').addClass('color-selected');
};

CoverProcess.Personalize.PopulateLogos = function () {
    var self = CoverProcess.Personalize;

    $.ajax({
        url: self.AjaxGetLogosUrl,
        type: 'GET',
        data: { yearId: self.AutoYear, make: self.AutoMake, vehicleModel: self.AutoModel },
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            if (result.CoverLogos.length === 0) {
                // Remove the automotive logo option if there are no auto logos.
                if (!self.HasLogos) {
                    var panel = $('#collapse3');
                    var panelHeader = panel.prev('.panel-heading');

                    panel.remove();
                    panelHeader.remove();
                }
            } else {
                // Populate the vehicle logos.
                var source = $('#template-logos').html();
                var template = Handlebars.compile(source);
                var logosHtml = template(result);

                var container = $('#logos-container');
                container.empty();
                container.html(logosHtml);
                self.WireUpLogoOptions();

                // Select logo in case this is loading from saved cover process.
                var logoCode = $('.js-auto-opt').val();
                if (logoCode != '')
                    $('#logos-container img[data-logocode="' & logoCode & '"').click();
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (Globals.LogErrors)
                console.log("[Error] XHR Status: " + xhr.status + ", Error: " + thrownError);
        }
    });
};

CoverProcess.Personalize.ShowLogos = function () {
    var container = $('#logos-container');
    container.removeClass('hidden');
};

CoverProcess.Personalize.HideLogos = function() {
    var container = $('#logos-container');
    container.empty();
    $('input[name="Options.CoverLogoCode"]').val('');
    container.addClass('hidden');
};

CoverProcess.Personalize.WireUpLogoOptions = function () {
    var self = CoverProcess.Personalize;

    var logoOptions = $('#logos-container').find('img');

    logoOptions.mouseover(self.LogoHighlight);
    logoOptions.mouseout(self.LogoUnHighlight);
    logoOptions.click(self.LogoSelect);
};

CoverProcess.Personalize.LogoHighlight = function (e) {
    var target = $(e.target);

    target.addClass('logo-target');
};

CoverProcess.Personalize.LogoUnHighlight = function (e) {
    var target = $(e.target);

    target.removeClass('logo-target');
};

CoverProcess.Personalize.LogoSelect = function (e) {
    var target = $(e.target);

    $('#logos-container').find('img').removeClass('logo-selected');
    target.addClass('logo-selected');

    $('input[name="Options.CoverLogoCode"]').val(target.data('logocode'));
};

CoverProcess.Personalize.UpdateAntennaOptions = function () {
    var antennaSkus = $('.js-ant-on.on').map(function () {
        return $(this).data('sku');
    }).get().join(',');

    $('input[name="Options.AntennaOptionSkus"]').val(antennaSkus);
};

CoverProcess.Personalize.ClearAntennaOptions = function () {
    $('input[name="Options.AntennaOptionSkus"]').val('');
};

CoverProcess.Personalize.UpdateStorageBagOptions = function () {
    var storageBagSkus = $('.js-str-on.on').map(function () {
        return $(this).data('sku');
    }).get().join(',');

    $('input[name="Options.StorageBagSkus"]').val(storageBagSkus);
};

CoverProcess.Personalize.ClearStorageBagOptions = function () {
    $('input[name="Options.StorageBagSkus"]').val('');
};

CoverProcess.Personalize.UpdateJellyBladeOptions = function () {
    var jellyBladeSkus = $('.js-jel-on.on').map(function () {
        return $(this).data('sku');
    }).get().join(',');

    $('input[name="Options.JellyBladeSkus"]').val(jellyBladeSkus);
};

CoverProcess.Personalize.ClearJellyBladeOptions = function () {
    $('input[name="Options.JellyBladeSkus"]').val('');
};

CoverProcess.Personalize.ShowBagColors = function () {
    var self = CoverProcess.Personalize;

    var container = $('#tote-container');
    container.removeClass('hidden');

    self.UpdateToteBagSkus();
    self.SetColorName();
};

CoverProcess.Personalize.HideBagColors = function () {
    var self = CoverProcess.Personalize;

    var container = $('#tote-container');
    container.find('.color-options').find('div').removeClass('color-selected');
    container.addClass('hidden');
    self.ClearColorName(container);

    self.UpdateToteBagSkus();
};

CoverProcess.Personalize.UpdateToteBagSkus = function () {
    var hiddenField = $('input[name="Options.ToteBagSkus"]');

    var skuPrefixes = $('.js-bag-on.on').map(function () {
        return $(this).data('skuprefix');
    }).get();

    var suffix = hiddenField.parent('div').find('.color-selected').data('skusuffix');

    if (!suffix || suffix == '') {
        hiddenField.val('');
        return;
    }

    var skus = $(skuPrefixes).map(function () {
        return this + suffix;
    }).get().join(',');

    hiddenField.val(skus);
};

registerNS("CoverProcess.Review");

CoverProcess.Review.Initialize = function () {
    var self = this;

    CoverProcess.WireUpSteps();
    CoverProcess.CheckForKey();

    self.WireUpAddToCartSubmit();
};

CoverProcess.Review.WireUpAddToCartSubmit = function() {
    $('.js-addtocart').submit(function () {
        // Remove saved cart process key from local storage.
        // This way it won't bother you about this cover process next time you look at covers.
        CoverProcess.AbandonProcess();
    });
}