var interval;
var originalHeight = 0;
var currentTop = 0;
var animateSpeed = 500;
var moveSpeed = 20;
var containerHeight = 0;
var makeID = 0;
var modelID = 0;
var QuoteRequest_makeID = 0;
var QuoteRequest_modelID = 0;
var min = 0;
var max = 0;

/* Ajax dropdowns */
function populateMakes() {
    $.post("/webservices/MakeModelData.asmx/GetCarMakes", function(data) {
        var items = $('ListMake ', data);
        items.each(function() {
            // the car must be a car and be new to qualify as contract hire                        
            if (($(this).attr('DisplayInNewCars') == 'true')) {
                // variable to hold the name of the car
                var CarMake = $(this).attr('Name');

                // create the option for the car make
                var newOption = document.createElement('option');
                ValueAttr = document.createAttribute('value');
                ValueAttr.value = $(this).attr('ID');
                newOption.setAttributeNode(ValueAttr);

                // check to see if the current model id maches modelID
                //alert(" value " + $(this).attr('ID') + " makelID " + makeID);
                if ($(this).attr('ID') == makeID) {
                    // create a selected attribute
                    SelAttr = document.createAttribute('selected');
                    SelAttr.value = "selected";
                    newOption.setAttributeNode(SelAttr);
                }                                

                // add the name of the car to the link
                newOption.innerHTML = CarMake;

                // add the option to the select class
                $('#homeMakeDropDown').append(newOption);
            }
        }
        )
    });
}

/* Ajax dropdowns */
function populateModels(makeID) {
    addLoadingMessage('homeModelsDropDown');
    $.post("/webservices/MakeModelData.asmx/GetCarModels", 'carMakeID=' + makeID, function(data) {
    var items = $('Model', data);

    document.getElementById('homeModelsDropDown').options[0] = new Option('-- Select All Models --', '0');
        
        items.each(function() {
            //name of the car model
            var CarModel = $(this).attr('Name');

            // create the option for the car make
            var newOption = document.createElement('option');
            ValueAttr = document.createAttribute('value');
            ValueAttr.value = $(this).attr('ID');
            newOption.setAttributeNode(ValueAttr);

            // check to see if the current model id maches modelID
            // alert(" value " + $(this).attr('ID') + "modelID " + modelID);
            if ($(this).attr('ID') == modelID) {
                // create a selected attribute
                SelAttr = document.createAttribute('selected');
                SelAttr.value = "selected";
                newOption.setAttributeNode(SelAttr);
            }

            // add the name of the car to the link
            newOption.innerHTML = CarModel;

            // add the option to the select class
            $('#homeModelsDropDown').append(newOption);

        }
        )
    });
    clearLoadingMessage('homeModelsDropDown');
}


function moveUp(moveSpeed) {
    if (currentTop < 0) {
        $('#scrollUp').fadeTo(1, 1);
        currentTop += moveSpeed;
        $("div.scrollerContainer div.items").animate({ top: currentTop + "px" }, animateSpeed);
    }
    else {
        $('#scrollUp').fadeTo(50, 0.33);
    }
}


function moveDown(moveSpeed) {
    if (currentTop > originalHeight * -1) {
        currentTop -= moveSpeed;
        $("div.scrollerContainer div.items").animate({ top: currentTop + "px" }, animateSpeed);
    }
    else {
        $('#scrollDown').fadeTo(50, 0.33);
    }
}

function clearComboBox(BoxToClear) {
    for (var i = document.getElementById(BoxToClear).options.length; i > 1; i--) {
        document.getElementById(BoxToClear).options[i - 1] = null;
    }
}

//Adds the loading message
function addLoadingMessage(DropDownID) {
    document.getElementById(DropDownID).options[1] = new Option(document.getElementById(DropDownID).options[0].text, document.getElementById(DropDownID).options[0].value);
    document.getElementById(DropDownID).options[0] = new Option('Loading...', '0');
    document.getElementById(DropDownID).selectedIndex = 0;
}

function clearLoadingMessage(BoxToClear) {
    document.getElementById(BoxToClear).options[0] = null;
}

function clearComboBox(BoxToClear) {
    for (var i = document.getElementById(BoxToClear).options.length; i > 0; i--) {
        document.getElementById(BoxToClear).options[i] = null;
    }
}

//Adds the loading message
function addLoadingMessage(DropDownID) {
    document.getElementById(DropDownID).options[1] = new Option(document.getElementById(DropDownID).options[0].text, document.getElementById(DropDownID).options[0].value);
    document.getElementById(DropDownID).options[0] = new Option('Loading...', '0');
    document.getElementById(DropDownID).selectedIndex = 0;
}

function clearLoadingMessage(BoxToClear) {
    document.getElementById(BoxToClear).options[0] = null;
}

var makeID = 0;
var modelID = 0;

/* Ajax dropdowns */
function EmptyGapPopulateMakes() {
    $.post("/webservices/MakeModelData.asmx/GetCarMakes", function(data) {
        var items = $('ListMake ', data);
        items.each(function() {
            // the car must be a car and be new to qualify as contract hire                        
            if (($(this).attr('DisplayInNewCars') == 'true')) {
                // variable to hold the name of the car
                var CarMake = $(this).attr('Name');

                // create the option for the car make
                var newOption = document.createElement('option');
                ValueAttr = document.createAttribute('value');
                ValueAttr.value = $(this).attr('ID');
                newOption.setAttributeNode(ValueAttr);

                // check to see if the current modelID maches QuoteRequest_makeID
                if ($(this).attr('ID') == QuoteRequest_makeID) {
                    // create a selected attribute
                    SelAttr = document.createAttribute('selected');
                    SelAttr.value = "selected";
                    newOption.setAttributeNode(SelAttr);
                }

                // add the name of the car to the link
                newOption.innerHTML = CarMake;

                // add the option to the select class
                $('#QuoteRequestMakeDropDown').append(newOption);
            }
          }
        )
    });
}

/* Ajax dropdowns */
function EmptyGapPopulateModels(QuoteRequest_makeID) {
    $.post("/webservices/MakeModelData.asmx/GetCarModels", 'carMakeID=' + QuoteRequest_makeID, function(data) {
        var items = $('Model', data);

        document.getElementById('QuoteRequestModelsDropDown').options[0] = new Option('-- Select All Models --', '0');

        items.each(function() {
            //name of the car model
            var CarModel = $(this).attr('Name');

            // create the option for the car make
            var newOption = document.createElement('option');
            ValueAttr = document.createAttribute('value');
            ValueAttr.value = $(this).attr('ID');
            newOption.setAttributeNode(ValueAttr);

            // check to see if the current modelID maches QuoteRequest_modelID
            if ($(this).attr('ID') == QuoteRequest_modelID) {
                // create a selected attribute
                SelAttr = document.createAttribute('selected');
                SelAttr.value = "selected";
                newOption.setAttributeNode(SelAttr);
            }

            // add the name of the car to the link
            newOption.innerHTML = CarModel;

            // add the option to the select class
            $('#QuoteRequestModelsDropDown').append(newOption);

        }
        )
    });
}

/* Ajax dropdowns */
function EmptyGapPopulateDerivative(QuoteRequest_makeID, QuoteRequest_modelID) {
    $.post("/webservices/MakeModelData.asmx/GetCarModels", 'carMakeID=' + QuoteRequest_makeID, function(data) {
        var items = $('Model', data);

        document.getElementById('QuoteRequestDerivativeDropDown').options[0] = new Option('-- Select a Derivative --', '0');


        items.each(function() {
            if ($(this).attr('ID') == QuoteRequest_modelID) {
                $(this).find("CapModel").find("CapDerivative").each(function() {
                    // match up the modelID with the ID attribute

                    //name of the car model
                    var CarModel = $(this).attr('Name');

                    // create the option for the car make
                    var newOption = document.createElement('option');
                    ValueAttr = document.createAttribute('value');
                    ValueAttr.value = $(this).attr('ID');
                    newOption.setAttributeNode(ValueAttr);

                    // check to see if the current derivative id maches derivativeID
                    if ($(this).attr('ID') == QuoteRequest_derivativeID) {
                        // create a selected attribute
                        SelAttr = document.createAttribute('selected');
                        SelAttr.value = "selected";
                        newOption.setAttributeNode(SelAttr);
                    }

                    // add the name of the car to the link
                    newOption.innerHTML = CarModel;

                    // add the option to the select class
                    $('#QuoteRequestDerivativeDropDown').append(newOption);

                });
            }
        }
             )
    });
}


$(document).ready(function() {

    // vars to store the make and model ID, thses are used for the selected values on postback
    makeID = $('#homeMakeDropDown').attr('value');
    modelID = $('#homeModelsDropDown').attr('value');

    $('.rtHide').hide();

    QuoteRequest_makeID = $('#QuoteRequestMakeDropDown').attr('value');
    QuoteRequest_modelID = $('#QuoteRequestModelsDropDown').attr('value');
    QuoteRequest_derivativeID = $('#QuoteRequestDerivativeDropDown').attr('value');

    // Populate the empty gap makes
    EmptyGapPopulateMakes();

    // check to see if the make box already contains a make. ie the browser has been refreshed or the user has enterted invalid data
    if (($('#QuoteRequestMakeDropDown').val()) > 0) {
        EmptyGapPopulateModels($('#QuoteRequestMakeDropDown').val());
        // this removed the duplicated make name at the specified index
        document.getElementById('QuoteRequestMakeDropDown').options[1] = null;
        $('#QuoteRequestModelsDropDown').removeAttr("disabled");

        // now all the makes have been populated...
        if ($('#QuoteRequestModelsDropDown').val() > 0) {
            makeID = $('#QuoteRequestMakeDropDown').attr('value');
            modelID = $('#QuoteRequestModelsDropDown').attr('value');
            EmptyGapPopulateDerivative(QuoteRequest_makeID, modelID);
            // this removed the duplicated make name at the specified index
            document.getElementById('QuoteRequestDerivativeDropDown').options[1] = null;
            $('#QuoteRequestDerivativeDropDown').removeAttr("disabled");
        }
        document.getElementById('QuoteRequestModelsDropDown').options[1] = null;
    }

    // Check to see if the element exists, then lose the gap.
    if ($('#QuoteRequestMakeDropDown').length > 0 )  {
        if ($('#QuoteRequestMakeDropDown option:selected').text() == "") {
            document.getElementById('QuoteRequestMakeDropDown').options[1] = null;
        }
    }

    // now all the makes have been populated...
    $('#QuoteRequestMakeDropDown').change(function() {
        // make the model dropdown enabled
        var makeID = $('#QuoteRequestMakeDropDown').attr('value');
        if (makeID != 0) {
            clearComboBox('QuoteRequestModelsDropDown');
            EmptyGapPopulateModels(makeID);
            clearComboBox('QuoteRequestDerivativeDropDown');

            $('#QuoteRequestModelsDropDown').removeAttr("disabled");
            // lose the select make on the All Models drop down once a Make has been selected
            document.getElementById('QuoteRequestModelsDropDown').options[0] = null;

            // store the model ID as a var
            var currentModelID = document.getElementById("QuoteRequestModelsDropDown").value;
            var makeID = $('#QuoteRequestMakeDropDown').attr('value');
            if (makeID > 0 && currentModelID > 0) {
                EmptyGapPopulateDerivative(makeID, currentModelID);
            }
        }
        else {
            $('#QuoteRequestModelsDropDown').attr("disabled", "disabled");
        }
    });

    // now all the makes have been populated...
    $('#QuoteRequestModelsDropDown').change(function() {
        clearComboBox('QuoteRequestDerivativeDropDown');
        // store the model ID as a var
        $('#QuoteRequestDerivativeDropDown').removeAttr("disabled");
        makeID = $('#QuoteRequestMakeDropDown').attr('value');
        modelID = $('#QuoteRequestModelsDropDown').attr('value');
        EmptyGapPopulateDerivative(makeID, modelID);
    }
    );


    /* functions for the top search bar */

    // call the populate makes function
    populateMakes();

    // check to see if the make box already contains a make.
    if ($('#homeMakeDropDown').val() > 0) {
        addLoadingMessage('homeModelsDropDown');
        populateModels($('#homeMakeDropDown').val());
        clearLoadingMessage('homeModelsDropDown');
        // this removed the duplicated make name at the specified index
        document.getElementById('homeMakeDropDown').options[1] = null;
        $('#homeModelsDropDown').removeAttr("disabled");
    }

    // now all the makes have been populated...
    $('#homeMakeDropDown').click(
        function() {
            // initially, clear the models dropdown
            if (document.getElementById('homeModelsDropDown').options.length > 0) {
                var BoxToClear = 'homeModelsDropDown';
                clearComboBox(BoxToClear);
            }
        }
    );

    // if the clear button is pressed, clear the data
    $('#clearAllSearchBoxes').click
    (
        function() {
            populateMakes();
        }
    );

    $('#contactFormImageContainer').click(function() {
        $('#DealerContactFormContainer').toggle('slow');
    }
    );

    $('#contactFormTextContainer').click(function() {
        $('#DealerContactFormContainer').toggle('slow');
    }
    );

    /* the contact envelope  */
    $('#envelope').mouseover(function() {
        $('#envelope').attr({ src: "/images/templateElements/contact-us-over.gif", alt: "Contact Dealer about this great Lease Car offer" });
    }
    );

    $('#envelope').mouseout(function() {
        $('#envelope').attr({ src: "/images/templateElements/contact-us-out.gif", alt: "Contact Dealer" });
    }
    );

    // now all the makes have been populated...
    $('#homeMakeDropDown').change(
        function() {
            // make the model dropdown enabled
            var makeID = $('#homeMakeDropDown').attr('value');
            if (makeID != 0) {
                addLoadingMessage('homeModelsDropDown');
                populateModels(makeID);
                clearLoadingMessage('homeModelsDropDown');

                $('#homeModelsDropDown').removeAttr("disabled");
                // lose the select make on the All Models drop down once a Make has been selected
                document.getElementById('homeModelsDropDown').options[0] = null;
            }
            else {
                $('#homeModelsDropDown').attr("disabled", "disabled");
            }
        }
    );

    // show & hide the bodystyle dropdown
    $('#bodyStyleImage').click(function() {
        // store the height of the body style div
        var height = $('#quickLinksColoumnBodyStyle').height()
        if (height == 0) {
            $('#bodyStyleImage').attr({ src: "/images/templateElements/chooseBodyStyle-up.gif", alt: "Contact Dealer" });
        }
        else if (height == 240) {
            $('#bodyStyleImage').attr({ src: "/images/templateElements/chooseBodyStyle-down.gif", alt: "Contact Dealer" });
        }
        $('#BodyStyle').toggle('normal');
        return false;
    });

    // show & hide the bodystyle dropdown
    $('#MakeButton').click(function() {
        // store the height of the body style div
        var height = $('#quickLinksColoumnMakes').height()
        if (height == 0) {
            $('#makeImage').attr({ src: "/images/templateElements/chooseMake-up.gif", alt: "Contact Dealer" });
        }
        else if (height == 240) {
            $('#makeImage').attr({ src: "/images/templateElements/chooseMake-down.gif", alt: "Contact Dealer" });
        }
        $('#ChooseMake').toggle('normal');
        return false;
    });

    // show & hide the bodystyle dropdown
    $('#monthlyPriceButton').click(function() {
        // store the height of the body style div
        var height = $('#quickLinksColoumnMonthlyPrice').height()
        if (height == 0) {
            $('#monthlyPriceImage').attr({ src: "/images/templateElements/monthlyPrice-up.gif", alt: "Contact Dealer" });
        }
        else if (height == 240) {
            $('#monthlyPriceImage').attr({ src: "/images/templateElements/monthlyPrice-down.gif", alt: "Contact Dealer" });
        }
        $('#monthlyPrice').toggle('normal');
        return false;
    });

    // show hide the empty gap form
    $("#EmptyGapFormImage").click(function() {
        $(".emptyGapContainerDiv").toggle('normal');
    });

    $(".showEmptyGapLink").click(function() {
        $(".emptyGapContainerDiv").toggle('normal');
    });

    $(".showEmptyGapLink").hover(function() {
        $(".showEmptyGapLink").addClass('showHand');
    });

    $(".showEmptyGapLink").mouseout(function() {
        $(".showEmptyGapLink").removeClass('showHand');
    });

    $("#EmptyGapFormImage").hover(function() {
        $("#EmptyGapFormImage").addClass('showHand');
    });

    $("#EmptyGapFormImage").mouseout(function() {
        $("#EmptyGapFormImage").removeClass('showHand');
    });




    // hover quick link buttons, move 1px
    $('.quickLinkButtons').mouseover(
        function() {
            $(this).css({ "margin-left": "-1px" });
        }
    )

    // hover quick link buttons, move 1px
    $('.quickLinkButtons').mouseout(
        function() {
            $(this).css({ "margin-left": "1px" });
        }
    )

    // hover search button
    $('#MainSearchButton').mouseover(function() {
        $('#MainSearchButton').attr({ src: "/images/templateElements/searchButton-down.gif", alt: "Search Contact Hire Deals" });
        $(this).css({ "margin-left": "-1px" });
    }
    );

    $('#MainSearchButton').mouseout(function() {
        $('#MainSearchButton').attr({ src: "/images/templateElements/searchButton-up.gif", alt: "Search Contact Hire Deals" });
        $(this).css({ "margin-left": "1px" });
    }
    );

    /* scroll widget */
    containerHeight = $('div.scrollerContainer').height();
    originalHeight = $('div.items').height() - (containerHeight);

    $("div.scrollerContainer").css('overflow', 'hidden');

    $('#scrollUp').click
    (
        function() {
            $('#scrollDown').fadeTo(1, 1);
            moveUp(170);
        }
    );

    $('#scrollDown').click
    (
        function() {
            $('#scrollUp').fadeTo(1, 1);
            moveDown(170);
        }
    );
});