function CatalogItem(Id, ThemeKey) {
    this.Id = Id;
    this.ThemeKey = ThemeKey;
    this.Items = Array(0);
    this.Rests = Array(0);

    this.ObjItem = $(this.Id + "_item");
    this.ObjLeft = $(this.Id + "_left");
    this.ObjRight = $(this.Id + "_right");
    this.ObjTop = $(this.Id + "_top");
    this.ObjImage = $(this.Id + "_image");
    this.ObjSizes = $(this.Id + "_sizes");
    this.ObjColors = $(this.Id + "_colors");
    this.ObjDepots = $(this.Id + "_depots");
    this.ObjTable = $(this.Id + "_table");
    this.TableItems = $(this.Id + "_table_items");

    this.ObjImages = $(this.Id + "_images");

    this.ObjSel = null;

    this.SelectIndex = 0;

    this.ObjImages.setStyle("display", "none");
    this.ObjTable.setStyle("display", "none");

    this.Add = function(src, src2) {
        var l = this.Items.length;


        var div = new Element("div");
        div.inject(this.ObjImages);
        var img = new Element("img", { "src": src2 });
        img.inject(div);

        div.addEvents({
            "mouseover": function() {
                this.addClass("over");
            },
            "mouseout": function() {
                if (!this.hasClass("select"))
                    this.removeClass("over");
            },
            "click": function(a, b) {
                return function() {
                    a.OnSelect(b);
                }
            } (this, l)
        });

        this.Items[l] = {
            "big": src,
            "small": src2,
            "obj": div
        };

        this.ObjImages.setStyle("display", "block");
    };

    this.AddRest = function(color, size, depot_name) {
        var l = this.Rests.length;
        this.Rests[l] = {
            "color": color,
            "size": size,
            "depot_name": depot_name
        };

        this.ObjTable.setStyle("display", "block");
    };

    this.OnLeft = function() {
        if (this.SelectIndex == 0 || this.Items.length <= 1)
            return;
        this.OnSelect(this.SelectIndex - 1);
    };

    this.OnRight = function() {
        if (this.SelectIndex == (this.Items.length - 1) || this.Items.length <= 1)
            return;
        this.OnSelect(this.SelectIndex + 1);
    };

    this.OnSelect = function(id) {
        if (this.SelectIndex !== null) {
            this.Items[this.SelectIndex].obj.removeClass("select");
            this.Items[this.SelectIndex].obj.removeClass("over");
        }
        this.SelectIndex = id;
        this.ObjImage.src = this.Items[this.SelectIndex].big;
        this.Items[this.SelectIndex].obj.addClass("select");
        this.Refresh();
    }

    this.Init = function () {
        if (this.Items.length > 0) {
            this.OnSelect(0);
        }
        this.Refresh();

        if (this.Rests.length == 0)
            this.ObjTable.setStyle("display", "none");

        this.TableItems.empty();

        var i = 0;
        var b = false;
        for (i = 0; i < this.Rests.length; i++) {
            var temp = this.TableItems.getElements("tr.row");
            b = false;
            var i2 = 0;
            for (i2 = 0; i2 < temp.length; i2++) {
                if (temp[i2].getProperty("color") == this.Rests[i].color) {
                    b = temp[i2];
                    break;
                }
            }
            var div = null;    //строка для цвета и размеров этого цвета
            var sizes = null;  //таблица с размерами
            if (b) {
                //такой цвет уже существует
                div = b;
                sizes = div.getElement("table.sizes tr");
            }
            else {
                div = new Element("tr", { "class": "row" });
                div.inject(this.TableItems);
                div.setProperty("color", this.Rests[i].color);
                var div1 = new Element("td", { "class": "column1", "text": this.Rests[i].color });
                var div2 = new Element("td", { "class": "column2" });
                div1.inject(div);
                div2.inject(div);
                var tsizes = new Element("table", { "class": "sizes" });
                sizes = new Element("tr");
                sizes.inject(tsizes);
                tsizes.inject(div2);

                //var color = new Element("div", { "class": "item color", "text": this.Rests[i].color });
                //color.inject(div1);
            }

            var temp = sizes.getElements("td.size_item");
            var b = false;
            var i2 = 0;
            for (i2 = 0; i2 < temp.length; i2++) {
                if (temp[i2].getProperty("size") == this.Rests[i].size) {
                    b = true;
                    break;
                }
            }
            if (b == false) {
                var divsize = new Element("td", { "class": "size_item", "text": this.Rests[i].size });
                divsize.setProperty("size", this.Rests[i].size);
                divsize.setProperty("isclick", 0);
                divsize.inject(sizes);
                divsize.addEvents({
                    "click": function (a, b, c, d) {
                        return function () {
                            a.TableItems.getElements("td.size_item_over").each(function (el) {
                                el.removeClass("size_item_over");
                                el.setProperty("isclick", 0);
                            });
                            c.setProperty("isclick", 1);
                            a.SelectSize(b, d);
                            this.addClass("size_item_over");
                        }
                    } (this, this.Rests[i].size, divsize, this.Rests[i].color),
                    "mouseout": function () {
                        if (this.getProperty("isclick") == 0) {
                            this.removeClass("size_item_over");
                        }
                    },
                    "mouseover": function () {
                        if (!this.hasClass("size_item_over")) {
                            this.addClass("size_item_over");
                        }
                    }
                });
            }
        }
    };

    this.SelectSize = function(size, color) {
        this.ObjDepots.empty();
        var i = 0;
        for (i = 0; i < this.Rests.length; i++) {
            if (this.Rests[i].size == size && this.Rests[i].color == color) {
                var temp = this.ObjDepots.getElements("div.item");
                b = false;
                var i2 = 0;
                for (i2 = 0; i2 < temp.length; i2++) {
                    if (temp[i2].get("text") == this.Rests[i].depot_name) {
                        b = true;
                        break;
                    }
                }
                if (b == true)
                    continue;

                var div = new Element("div", { "class": "depot_item", "text": this.Rests[i].depot_name });
                div.inject(this.ObjDepots);
            }
        }
    };

    this.Refresh = function() {
        if (this.Items.length <= 1) {
            this.ObjLeft.src = "/themes/" + this.ThemeKey + "/images/l_small.gif";
            this.ObjRight.src = "/themes/" + this.ThemeKey + "/images/r_small.gif";
            return;
        }
        if (this.SelectIndex == 0) {
            this.ObjLeft.src = "/themes/" + this.ThemeKey + "/images/l_small.gif";
            this.ObjRight.src = "/themes/" + this.ThemeKey + "/images/r_na_small.gif";
        }
        else if (this.SelectIndex == (this.Items.length - 1)) {
            this.ObjLeft.src = "/themes/" + this.ThemeKey + "/images/l_na_small.gif";
            this.ObjRight.src = "/themes/" + this.ThemeKey + "/images/r_small.gif";
        }
        else {
            this.ObjLeft.src = "/themes/" + this.ThemeKey + "/images/l_na_small.gif";
            this.ObjRight.src = "/themes/" + this.ThemeKey + "/images/r_na_small.gif";
        }
    };

    this.ObjLeft.addEvent("click", function(a) {
        return function() {
            a.OnLeft();
        }
    } (this));

    this.ObjRight.addEvent("click", function(a) {
        return function() {
            a.OnRight();
        }
    } (this));

    WE.AddReady(function(a) {
        return function() {
            a.Init();
        }
    } (this));
}