js problem

    var selectedRange = null;
    var selectedStyle = null;
    var selectedColour = null;
    var ranges = [];
    var styles = [];
    var colours = [];
    var dropdownStyleClickable = false;
    var dropdownColourClickable = false;

    $(function() {

        //Load ranges
        $.getJSON('wallAjax?action=getRanges', function(response)
        {
            console.log('ranges');
            console.log(response);
            ranges = response;

            updateUi();
        });

        // top selection actions for dropdowns
        $(".wall-selection .span4 a").click(function(e) {

            e.preventDefault();

            var target = $(this).data("dropdown");  // range, style, colour
            var dropdown = $(".wall-dropdown."+target);
            var delay = 0;

            //Check if we're allowed to view these dropdowns
            if(target == 'styles' && !dropdownStyleClickable) return;
            if(target == 'colours' && !dropdownColourClickable) return;

            //If a dropdown is visible, hide it, and add delay to show clicked dropdown
            if(dropdown.is(':visible'))
            {
                dropdown.slideUp(500);
            }
            else
            {
                if($(".wall-dropdown").is(':visible'))
                {
                    $(".wall-dropdown").slideUp(500);
                    delay = 600;
                }

                dropdown.delay(delay).slideDown(500);
            }
        });
    });

    function updateUi()
    {
        bindClickEvents();

        var dropdownRangeText = $(".text.range");
        var dropdownStyleText = $(".text.style");
        var dropdownColourText = $(".text.colour");
        var textRange = $(".selected.range");
        var textStyle = $(".selected.style");
        var textColour = $(".selected.colour");


        // NOT selected range
        // NOT selected style
        // NOT selected colour
        if(selectedRange == null && selectedStyle == null && selectedColour == null)
        {
            dropdownRangeText.html('Cork Collections');
            dropdownStyleText.html('Select your collection first');
            dropdownColourText.html('Select your collection first');
            textRange.html('');
            textStyle.html('');
            textColour.html('');
            dropdownStyleClickable = false;
            dropdownColourClickable = false;

            updateRangesDropdown();
        }

        // Selected range
        // NOT selected style
        // NOT selected colour
        if(selectedRange != null && selectedStyle == null && selectedColour == null)
        {
            dropdownRangeText.html('Cork Collections');
            dropdownStyleText.html('Cork Range');
            dropdownColourText.html('Select your collection first');

            if(typeof ranges[selectedRange] != 'undefined')
                textRange.html(' - ' + ranges[selectedRange]['RN Range']);

            textStyle.html('');
            textColour.html('');

            dropdownStyleClickable = true;
            dropdownColourClickable = false;

            updateStylesDropdown();
        }

        // Selected range
        // Selected style
        // NOT selected colour
        if(selectedRange != null && selectedStyle != null && selectedColour == null)
        {
            dropdownRangeText.html('Cork Collections');
            dropdownStyleText.html('Cork Range');
            dropdownColourText.html('Cork Colour');

            if(typeof ranges[selectedRange] != 'undefined')
                textRange.html(' - ' + ranges[selectedRange]['RN Range']);

            if(typeof styles[selectedStyle] != 'undefined')
                textStyle.html(' - ' + styles[selectedStyle]['SY Style']);

            textColour.html('');

            dropdownStyleClickable = true;
            dropdownColourClickable = true;

            updateColoursDropdown();
        }

        // Selected range
        // Selected style
        // Selected colour
        if(selectedRange != null && selectedStyle != null && selectedColour != null)
        {

        }
    }

    function runFilter()
    {
        $.getJSON('wallAjax?action=runFilter&rangeId='+selectedRange+'&styleId='+selectedStyle+'&colourId='+selectedColour, function(response)
        {
            styles = response['styles'];
            colours = response['colours'];

            console.log('Filter result');
            console.log(response);
            updateUi();
        });
    }

    function updateColoursDropdown()
    {
        return;

        var dropdown = $(".wall-dropdown.styles .container");

        dropdown.html('');

        for(var k in colours)
        {
            var id = k;
            var name = colours[id]['SY Style'];

            var $div = $('<div></div>');
            $div.addClass('item');
            $div.addClass('style');
            $div.data('id', id);

            var $img = $('<img>');
            $img.attr('src', 'images/no_picture.jpg');

            var $p = $('<p></p>');
            $p.html(name);

            $div.append($p);
            $div.append($img);

            dropdown.append($div);
        }
    }

    function updateStylesDropdown()
    {
        var dropdown = $(".wall-dropdown.styles .container");

        dropdown.html('');

        for(var k in styles)
        {
            var id = k;
            var name = styles[id]['SY Style'];

            var $div = $('<div></div>');
            $div.addClass('item');
            $div.addClass('style');
            $div.data('id', id);

            var $img = $('<img>');
            $img.attr('src', 'images/no_picture.jpg');

            var $p = $('<p></p>');
            $p.html(name);

            $div.append($p);
            $div.append($img);

            dropdown.append($div);
        }
    }

    function updateRangesDropdown()
    {
        var dropdown = $(".wall-dropdown.ranges .container");

        dropdown.html('');

        for(var k in ranges)
        {
            var id = k;
            var name = ranges[id]['RN Range'];

            var $div = $('<div></div>');
            $div.addClass('item');
            $div.addClass('range');
            $div.data('id', id);

            var $img = $('<img>');
            $img.attr('src', 'images/no_picture.jpg');

            var $p = $('<p></p>');
            $p.html(name);

            $div.append($p);
            $div.append($img);

            dropdown.append($div);
        }
    }

    function bindClickEvents()
    {
        console.log('bindClickEvents');

        $(".wall-dropdown .item").unbind('click').on('click', function() {

            console.log('Item clicked');

            if($(this).hasClass('range'))
            {
                $(".item.range").removeClass('active');

                selectedRange = $(this).data('id');

                $(this).addClass('active');

                selectedStyle = null;
                selectedColour = null;
            }

            if($(this).hasClass('style'))
            {
                $(".item.style").removeClass('active');

                selectedStyle = $(this).data('id');

                $(this).addClass('active');

                selectedColour = null;
            }

            if($(this).hasClass('colour'))
            {
                $(".item.colour").removeClass('active');

                selectedColour = $(this).data('id');

                $(this).addClass('active');
            }

            runFilter();
        });
    }