(function ($) {
    $.fn.clearSelect = function () {
        return this.each(function () {
            if (this.tagName == 'SELECT') {
                this.options.length = 0;
                $(this).attr('disabled', 'disabled');
            }
        });
    }
    $.fn.clearField = function (selector) {
        this.nextAll(selector).remove();
        return this;
    }
    $.fn.fillSelect = function (dataArray) {
        return this.clearSelect().each(function () {
            if (this.tagName == 'SELECT') {
                var currentSelect = this;
                var start = new Option('Выбрать...', '-1');
                if ($.support.cssFloat) {
                    currentSelect.add(start, null);
                } else {
                    currentSelect.add(start);
                }
                $.each(dataArray, function (index, data) {
                    if (data.name) {
                        var option = new Option(data.name, data.id);
                        if ($.support.cssFloat) {
                            currentSelect.add(option, null);
                        } else {
                            currentSelect.add(option);
                        }
                    }
                });
                $(this).removeAttr('disabled').find('option:first').attr('selected', 'selected');
            }
        });
    }
})(jQuery);

function getCategory(pcategory, level) {
    $.ajax({
        url: 'list.php',
        type: 'POST',
        data: 'pcategory=' + pcategory + '&level=' + level,
        dataType: 'JSON',
        timeout: 5000,
        beforeSend: function () {
            $('select[name^=category_]').attr('disabled', 'disabled');
        },
        complete: function () {
            $('select[name^=category_]').removeAttr('disabled');
        },
        success: function (response) {
            var data = eval('(' + response + ')');
            if (data.count === 'undefined' || data.count == 0) {
                $('select[name=category_' + (data.level - 1) + ']').clearField('select[name^=category]').clearField('span');
                return false;
            }
            if ($('select[name=category_' + data.level + ']').length) {
                $('select[name=category_' + data.level + ']').clearField('select[name^=category]').clearField('span').fillSelect(data.item);
            } else {
                $('#categories select:last').after('<span>&gt;</span> <select name="category_' + data.level + '"></select>');
                $('select[name=category_' + data.level + ']').fillSelect(data.item);
            }
            $('select[name=category_' + data.level + ']').unbind('change');
            $('select[name=category_' + data.level + ']').change(function () {
                return clickEvent($(this));
            });
            return false;
        },
        error: function () {
            $('#msg').append('<p>Some error with categories. Please, try later ;)</p>');
            return false;
        }
    });
}

function clickEvent(select) {
    var id = select.find('option:selected').attr('value');
    if (id == '-1') {
        select.clearField('select[name^=category]').clearField('span');
        return false;
    }
    var level = parseInt(select.attr('name').replace('category_', '')) + 1;
    return getCategory(id, level);
}
$(document).ready(function () {
    $('select[name^=category] option').live("click", function () {
        var select = $(this).parents('select');
        var level = parseInt(select.attr('name').replace('category_', '')) + 1;
        return getCategory(select.find('option:selected').attr('value'), level);
    })
    getCategory(0, 0);
});