// frameinvehicle.js

// load up jquery and the ui library
jQuery(document).ready(function () {
    var $ = jQuery;

    // load up the validation and such
    ValidatorLib.init([]);

    /// load dependencies
    // http request for vehicle select script
    $.getScript("/js/request.js", function () {
        // vehicle select script
        $.getScript("/js/vehicleselectboxes.js", function () {
            $("#interiorBox1").css("display", "block");
            $("#interiorBox2").css("display", "block");
            $("#vehicleImageBox").css("display", "block");

            function onchange(imageId) {
                // get the image id of the selected item
                $("<img/>")
                    .attr("id", "mainImage")
                    .attr("src", "/vehicle_images/Multiview/Transparent/320/" + imageId + "_01grid.png")
                    .error(function () {
                        $(this).unbind("error");
                        $(this).attr("src", "/images/noimage.png");
                    })
                    .appendTo($("#vehicleImageBox").empty());
                $("<img/>")
                    .attr("src", "/vehicle_images/Multiview/Transparent/320/" + imageId + "/" + imageId + "_12.jpg")
                    .error(function () {
                        $(this).unbind("error");
                        $(this).attr("src", "/vehicle_images/Multiview/Transparent/320/" + imageId + "/" + imageId + "_11.jpg");
                    })
                    .click(function () {
                        var oldSrc = $("#mainImage").attr("src");
                        $("#mainImage").attr("src", this.src);
                        this.src = oldSrc;
                    })
                    .appendTo($("#interiorBox1").empty());
                $("<img/>")
                    .attr("src", "/vehicle_images/Multiview/Transparent/320/" + imageId + "/" + imageId + "_02.png")
                    .error(function () {
                        $(this).unbind("error");
                        $(this).attr("src", "/vehicle_images/Multiview/Transparent/320/" + imageId + "/" + imageId + "_03.png");
                    })
                    .click(function () {
                        var oldSrc = $("#mainImage").attr("src");
                        $("#mainImage").attr("src", this.src);
                        this.src = oldSrc;
                    })
                    .appendTo($("#interiorBox2").empty());
            }

            // populate model box
            if (document.getElementById("makeSelect") !== null) {
                // we create a new type of vehicle select in which you can have images
                VehicleSelectBoxes.prototype.populateModel = function (selectedId) {
                    var self = this;
                    this.imageIds = new Array();
                    $(this.modelBox).change(function () { onchange(self.imageIds[self.modelBox.options.selectedIndex]) });

                    DataAccess.getActiveModelListForDivisionIdWithImage(selectedId, function (data) {
                        self.modelBox.options.length = 0;
                        for (var i = 0; i < data.length; i++) {
                            // always skip the econoline
                            if (data[i].Model.indexOf("Econoline") === -1) {
                                self.addOption(self.modelBox, data[i].Model, data[i].Model);
                                self.imageIds[self.imageIds.length] = data[i].ImageId;
                            }
                        }
                        onchange(self.imageIds[self.modelBox.options.selectedIndex]);
                    });
                }

                var v = new VehicleSelectBoxes("makeSelect", "model");
                // remove this make: no picture and unlikely buy
                window.setTimeout(function () {
                    $("#makeSelect option[value=56]").remove(); // tesla
                }, 500);
            }
            else {
                if (document.getElementById("model") !== null) {
                    var divisionId = null;
                    var imageId = null;
                    var self = this;
                    if (document.getElementById("makeSelect") === null) {
                        self.imageIds = new Array();

                        // no make selection
                        DataAccess.getActiveMakeList(function (data) {
                            var hiddenMake = $("#hiddenMake").val();
                            for (var i = 0; i < data.length; i++) {
                                if (hiddenMake === data[i].Value) {
                                    divisionId = data[i].Key;
                                    break;
                                }
                            }
                            $("#model").unbind();
                            DataAccess.getActiveModelListForDivisionIdWithImage(divisionId, function (data) {
                                $("#model").get(0).options.length = 0;
                                for (var i = 0; i < data.length; i++) {
                                    // always skip the econoline
                                    if (data[i].Model.indexOf("Econoline") === -1) {
                                        $("#model").get(0).options[$("#model").get(0).options.length] = new Option(data[i].Model, data[i].Model);
                                        self.imageIds[self.imageIds.length] = data[i].ImageId;
                                    }
                                }
                                // adjust the location of the image boxes
                                $("#vehicleImageBox").css("top", "8.5em");
                                $("#interiorBox1").css("top", "20em");
                                $("#interiorBox2").css("top", "20em");

                                $("#model").change(function () {
                                    // show the images
                                    onchange(self.imageIds[$("#model").get(0).options.selectedIndex]);
                                });

                                $("#model").change();
                            });
                        });
                    }
                }
                else { // (document.getElementById("model") === null)
                    // no make selection
                    DataAccess.getActiveMakeList(function (data) {
                        var hiddenMake = $("#hiddenMake").val();
                        for (var i = 0; i < data.length; i++) {
                            if (hiddenMake === data[i].Value) {
                                divisionId = data[i].Key;
                                break;
                            }
                        }

                        DataAccess.getActiveModelListForDivisionIdWithImage(divisionId, function (data) {
                            for (var i = 0; i < data.length; i++) {
                                if ($("#hiddenModel").val() === data[i].Model) {
                                    onchange(data[i].ImageId);
                                    break;
                                }
                            }
                        });
                    });

                    // adjust the location of the image boxes
                    $("#vehicleImageBox").css("top", "5.5em");
                    $("#interiorBox1").css("top", "16em");
                    $("#interiorBox2").css("top", "16em");
                }
            }
        });
    });
});