var testControl = function () {
    UI.makeControl(this);
}

testControl.prototype.onDraw = function () {
    Debug.print("__onDraw");
}

var textureChangeDialog = {
    xmlTemplate: "Terrain/TextureDialog.xml",
    pages: [],
    curPage: 0,
    activeBlocks: [],
    nextButton: null,
    prevButton: null,
    test: null,

    onTemplateLoaded: function () {
        var me = this;

        VFileSystem.OnLoaded(function () {
            me.onFileSystemReady();
        });

        this.textureDialog.tileBox.SelectionChanged.Add(function (index, value) {
            me.selectionChanged(index, value);
        });

        this.test = new testControl();
        this.textureDiaog.addElement(this.test);
    },

    onFileSystemReady: function () {
        for(var i in VFileSystem.Root.Tileset.Directories) {
            var dir = VFileSystem.Root.Tileset.Directories[i];

            this.textureDialog.tileBox.addItem(dir.Name);
        }
    },

    selectionChanged: function (index, value) {
        var dir = VFileSystem.Root.Tileset[value];

        this.pages = [];
        var curPage = [];
        this.curPage = 0;

        for (var i in dir.Files) {
            var file = dir.Files[i].FullName;

            if (file.toLowerCase().endsWith("_s.blp")) {
                continue;
            }

            curPage.push(dir.Files[i].FullName);
            if (curPage.length == 12) {
                this.pages.push(curPage);
                curPage = [];
            }
        }

        if (curPage.length > 0) {
            this.pages.push(curPage);
        }

        if (this.nextButton === null || this.prevButton === null) {
            this.prevButton = new Button(
                {
                    position: { x: 160, y: 205 },
                    large: false,
                    caption: "prev",
                    name: "prevButton",
                    onClick: (function (_me) { return function (button) { _me.prevClick(button); }; })(this),
                }
            );

            this.nextButton = new Button(
                {
                    position: { x: 364, y: 205 },
                    large: false,
                    caption: "next",
                    name: "nextButton",
                    onClick: (function (_me) { return function (button) { _me.nextClick(button); }; })(this),
                }
            );

            this.textureDialog.addElement(this.prevButton);
            this.textureDialog.addElement(this.nextButton);
        }

        this.prevButton.disabled = true;
        this.nextButton.disabled = true;

        if (this.pages.length > 1) {
            this.nextButton.disabled = false;
        }

        if (this.pages.length > 0) {
            this.loadPage(0);
        }
    },

    loadPage: function (pageNum) {
        if (pageNum >= this.pages.length || pageNum < 0) {
            throw "Invalid page index (must be 0 <= pageNum < this.pages.length)";
        }

        for (var i in this.activeBlocks) {
            var curBlock = this.activeBlocks[i];
            curBlock.CheckChanged.Clear();

            this.textureDialog.removeElement(curBlock);
        }

        this.activeBlocks = [];

        var page = this.pages[pageNum];
        for (var i in page) {
            var file = page[i];

            var curBlock = new TextureBlock(
                {
                    name: "textureBlock_" + i,
                    texture: file
                }
            );

            var me = this;

            (function (block) {
                block.CheckChanged.Add(function (check) { me.updateCheck(block, check); });
            })(curBlock);

            curBlock.clickable = true;
            curBlock.blockPosition = { x: 160 + (i % 4) * 68, y: Math.floor((i / 4)) * 68 };
            curBlock.blockSize = { w: 64, h: 64 };

            this.activeBlocks.push(curBlock);

            this.textureDialog.addElement(curBlock);
        }
    },

    prevClick: function(button) {
        if (this.curPage === 0) {
            return;
        }

        this.nextButton.disabled = false;

        --this.curPage;
        if (this.curPage === 0) {
            this.prevButton.disabled = true;
        }

        this.loadPage(this.curPage);
    },

    nextClick: function (button) {
        this.prevButton.disabled = false;
        ++this.curPage;
        this.curPage = Math.min(this.curPage, this.pages.length - 1);

        if (this.curPage + 1 >= this.pages.length) {
            this.nextButton.disabled = true;
        }

        this.loadPage(this.curPage);
    },

    updateCheck: function (block, checked) {
        if (checked === false) {
            return;
        }

        PropertyStore.setOrCreate("Terrain.Texture", block.texture);

        for (var i in this.activeBlocks) {
            var cur = this.activeBlocks[i];
            if (cur === block) {
                continue;
            }

            cur.clicked = false;
        }
    }
};

UI.load(textureChangeDialog);