small.loadCss("resource/styles/ui.css" + "?t=" + new Date().getTime());
small.extendMethods({
    button: function(text, callback){
        var result = this;
        if(typeof text == "string" && this.nodes.length > 0){
            if(typeof callback == "undefined") callback = function(){};
            var array = [];
            small.each(this.nodes, function(object){
                var button = small.create("table").setClass("button");
                var tr = button.append("tbody").append("tr");
                tr.append("td").setClass("button_left");
                var content = tr.append("td").setClass("button_body").text(text);
                tr.append("td").setClass("button_right");
                button.bind("click", function(event){
                    callback.call(content.node(), event);
                });
                small(object).append(button);
                array[array.length] = content.node();
            });
            result = new small(array);
        }
        return result;
    },
    hint: function(text, timeout){
        if(typeof text == "string" && this.nodes.length > 0){
            if(typeof timeout == "undefined") timeout = 1000;
            this.each(function(object){
                if(object.hint) small(object.hint).remove();
                var hint = small.create("table").setClass("hint").opacity(80).hide();
                var tr = hint.append("tbody").append("tr");
                tr.append("td").setClass("hint_left");
                tr.append("td").setClass("hint_body").text(text);
                tr.append("td").setClass("hint_right");

                small(object).hover(function(event){
                    hint.start({
                        time: timeout,
                        callback: function(){
                            hint.show();
                        }
                    });
                }, function(){
                    hint.stop();
                    hint.hide();
                }).mousemove(function(event){
                    var windowWidth = small.viewport().width;
                    var hintWidth = hint.bound().width;
                    var left = event.pageX + 16 + hintWidth > windowWidth ? event.pageX - hintWidth : event.pageX + 16;
                    var top = event.pageY + 4;
                    hint.css({
                        "left": left + "px",
                        "top": top + "px"
                    });
                });
                small.body().mousedown(function(){
                    hint.stop();
                    hint.hide();
                }).append(hint);
                object.hint = hint;
            });
        }
        return this;
    }
});
small.extendFunctions({
    showDialog: function(parameters){
        if(typeof parameters == "undefined") parameters = {};
        var closeOnEscape = typeof parameters.closeOnEscape != "undefined" ? parameters.closeOnEscape : false;
        var height = parameters.height || Math.ceil(small.viewport().height / 4);
        var width = parameters.width || Math.ceil(small.viewport().width / 4);
        var maxHeight = parameters.maxHeight || small.viewport().height;
        var maxWidth = parameters.maxWidth || small.viewport().width;
        var minHeight = parameters.minHeight || Math.ceil(small.viewport().height / 5);
        var minWidth = parameters.minWidth || Math.ceil(small.viewport().width / 5);
        var modal = typeof parameters.modal != "undefined" ? parameters.modal : true;
        var position = parameters.position ||
        {
            left: small.center().left - width / 2,
            top: small.center().top - height / 2
        };
        var resizable = parameters.resizable || false;
        var title = parameters.title || "";
        var content = parameters.content || small.create("div");
        var onClose = typeof parameters.onClose != "undefined" ? parameters.onClose : function(){};

        var offsetX, offsetY, startX, startY;
        var layerMouseDown = function(){
            small.find(".show_dialog").css("zIndex", "99");
            info.css("zIndex", "100");

            small.find("td", info)
            .setAttr("unselectable", "on")
            .css("MozUserSelect", "none");

            small.body()
            .setAttr("unselectable", "on")
            .css("MozUserSelect", "none");
        };
        var layerMouseUp = function(){
            small.find("td", info)
            .setAttr("unselectable", "off")
            .css("MozUserSelect", "");

            small.body()
            .setAttr("unselectable", "off")
            .css("MozUserSelect", "");
        };
        function savePosition(event){
            var bound = info.bound();
            offsetX = bound.left - event.pageX;
            offsetY = bound.top - event.pageY;
            startX = event.pageX;
            startY = event.pageY;
        };
        var escapeHandler = function(event){
            if(event.keyCode == 27){
                small.body().unbind("keydown", escapeHandler);
                close();
            }
        };
        var close = function(){
            onClose.call();
            info.remove();
            if(modal) ground.remove();
        };
        var moveMouseUp = function(){
            small.document().unbind("mousemove", moveMouseMove);
            small.document().unbind("mouseup", moveMouseUp);
            layerMouseUp();
        };
        var moveMouseMove = function(event){
            info.css({
                "left": event.pageX + offsetX + "px",
                "top": event.pageY + offsetY + "px"
            });
            return false;
        };
        var moveMouseDown = function(event){
            small.document().bind("mousemove", moveMouseMove);
            small.document().bind("mouseup", moveMouseUp);
            layerMouseDown();
            savePosition(event);
            return false;
        };
        var leftMouseUp = function(event){
            small.document().unbind("mousemove", leftMouseMove);
            small.document().unbind("mouseup", leftMouseUp);
            layerMouseUp();
            width += startX - event.pageX;
        };
        var leftMouseMove = function(event){
            var tempWidth = width + startX - event.pageX;
            if(tempWidth > minWidth && tempWidth < maxWidth){
                info.css({
                    "left": event.pageX + offsetX + "px",
                    "width": tempWidth + "px"
                });
            }
            return false;
        };
        var leftMouseDown = function(event){
            small.document().bind("mousemove", leftMouseMove);
            small.document().bind("mouseup", leftMouseUp);
            layerMouseDown();
            savePosition(event);
            return false;
        };
        var rightMouseUp = function(event){
            small.document().unbind("mousemove", rightMouseMove);
            small.document().unbind("mouseup", rightMouseUp);
            layerMouseUp();
            width -= startX - event.pageX;
        };
        var rightMouseMove = function(event){
            var tempWidth = width - startX + event.pageX;
            if(tempWidth > minWidth && tempWidth < maxWidth){
                info.css({
                    "width": width - startX + event.pageX + "px"
                });
            }
            return false;
        };
        var rightMouseDown = function(event){
            small.document().bind("mousemove", rightMouseMove);
            small.document().bind("mouseup", rightMouseUp);
            layerMouseDown();
            savePosition(event);
            return false;
        };
        var bottomMouseUp = function(event){
            small.document().unbind("mousemove", bottomMouseMove);
            small.document().unbind("mouseup", bottomMouseUp);
            layerMouseUp();
            height -= startY - event.pageY;
        };
        var bottomMouseMove = function(event){
            var tempHeight = height - startY + event.pageY;
            if(tempHeight > minHeight && tempHeight < maxHeight){
                info.css({
                    "height": tempHeight + "px"
                });
                overflow.css({
                    "height": tempHeight - 43 + "px"
                });
            }
            return false;
        };
        var bottomMouseDown = function(event){
            small.document().bind("mousemove", bottomMouseMove);
            small.document().bind("mouseup", bottomMouseUp);
            layerMouseDown();
            savePosition(event);
            return false;
        };
        var leftTopMouseUp = function(event){
            small.document().unbind("mousemove", leftTopMouseMove);
            small.document().unbind("mouseup", leftTopMouseUp);
            layerMouseUp();
            width += startX - event.pageX;
            height += startY - event.pageY;
        };
        var leftTopMouseMove = function(event){
            var tempWidth = width + startX - event.pageX;
            var tempHeight = height + startY - event.pageY;
            if(tempWidth > minWidth && tempWidth < maxWidth && tempHeight > minHeight && tempHeight < maxHeight){
                info.css({
                    "left": event.pageX + offsetX + "px",
                    "width": tempWidth + "px",
                    "top": event.pageY + offsetY + "px",
                    "height": tempHeight + "px"
                });
                overflow.css({
                    "height": tempHeight - 43 + "px"
                });
            }
            return false;
        };
        var leftTopMouseDown = function(event){
            small.document().bind("mousemove", leftTopMouseMove);
            small.document().bind("mouseup", leftTopMouseUp);
            layerMouseDown();
            savePosition(event);
            return false;
        };
        var rightTopMouseUp = function(event){
            small.document().unbind("mousemove", rightTopMouseMove);
            small.document().unbind("mouseup", rightTopMouseUp);
            layerMouseUp();
            width -= startX - event.pageX;
            height += startY - event.pageY;
        };
        var rightTopMouseMove = function(event){
            var tempWidth = width - startX + event.pageX;
            var tempHeight = height + startY - event.pageY;
            if(tempWidth > minWidth && tempWidth < maxWidth && tempHeight > minHeight && tempHeight < maxHeight){
                info.css({
                    "width": tempWidth + "px",
                    "top": event.pageY + offsetY + "px",
                    "height": tempHeight + "px"
                });
                overflow.css({
                    "height": tempHeight - 43 + "px"
                });
            }
            return false;
        };
        var rightTopMouseDown = function(event){
            small.document().bind("mousemove", rightTopMouseMove);
            small.document().bind("mouseup", rightTopMouseUp);
            layerMouseDown();
            savePosition(event);
            return false;
        };
        var leftBottomMouseUp = function(event){
            small.document().unbind("mousemove", leftBottomMouseMove);
            small.document().unbind("mouseup", leftBottomMouseUp);
            layerMouseUp();
            width += startX - event.pageX;
            height -= startY - event.pageY;
        };
        var leftBottomMouseMove = function(event){
            var tempWidth = width + startX - event.pageX;
            var tempHeight = height - startY + event.pageY;
            if(tempWidth > minWidth && tempWidth < maxWidth && tempHeight > minHeight && tempHeight < maxHeight){
                info.css({
                    "left": event.pageX + offsetX + "px",
                    "width": tempWidth + "px",
                    "height": tempHeight + "px"
                });
                overflow.css({
                    "height": tempHeight - 43 + "px"
                });
            }
            return false;
        };
        var leftBottomMouseDown = function(event){
            small.document().bind("mousemove", leftBottomMouseMove);
            small.document().bind("mouseup", leftBottomMouseUp);
            layerMouseDown();
            savePosition(event);
            return false;
        };
        var rightBottomMouseUp = function(event){
            small.document().unbind("mousemove", rightBottomMouseMove);
            small.document().unbind("mouseup", rightBottomMouseUp);
            layerMouseUp();
            width -= startX - event.pageX;
            height -= startY - event.pageY;
        };
        var rightBottomMouseMove = function(event){
            var tempWidth = width - startX + event.pageX;
            var tempHeight = height - startY + event.pageY;
            if(tempWidth > minWidth && tempWidth < maxWidth && tempHeight > minHeight && tempHeight < maxHeight){
                info.css({
                    "width": tempWidth + "px",
                    "height": tempHeight + "px"
                });
                overflow.css({
                    "height": tempHeight - 43 + "px"
                });
            }
            return false;
        };
        var rightBottomMouseDown = function(event){
            small.document().bind("mousemove", rightBottomMouseMove);
            small.document().bind("mouseup", rightBottomMouseUp);
            layerMouseDown();
            savePosition(event);
            return false;
        };
        var resizeMouseDown = function(event){
            var bound = body.bound();
            var left = bound.left + bound.width - event.pageX;
            var top = bound.top + bound.height - event.pageY;
            if(left >= 0 && top >= 0 && left <= 16 && top <= 16){
                small.document().bind("mousemove", rightBottomMouseMove);
                small.document().bind("mouseup", rightBottomMouseUp);
                layerMouseDown();
                savePosition(event);
            }
            return false;
        };

        var info = small.create("table").setClass("show_dialog");
        var table = info.append("tbody");
        var first = table.append("tr");
        var leftTop = first.append("td").setClass("left_top");
        var top = first.append("td").setClass("top");
        top.append("table").css({
            "width": "100%",
            "height": "35px",
            "border-collapse": "collapse"
        }).append("tbody").append("tr").append("td").css({
            "cursor": "move"
        }).setAttr("unselectable", "on")
        .css("MozUserSelect", "none")
        .mousedown(moveMouseDown)
        .text(title).parent().append("td").css("width", "22px").append("div").setClass("close").opacity(80)
        .hover(function(){
            small(this).opacity(100);
        },function(){
            small(this).opacity(80);
        }).click(function(event){
            close(event);
        });
        var rightTop = first.append("td").setClass("right_top");
        var second = table.append("tr");
        var left = second.append("td").setClass("left");
        var body = second.append("td").setClass("body");
        var overflow = body.append("div").setClass("overflow");
        overflow.append(content);
        var right = second.append("td").setClass("right");
        var third = table.append("tr");
        var leftBottom = third.append("td").setClass("left_bottom");
        var bottom = third.append("td").setClass("bottom");
        var rightBottom = third.append("td").setClass("right_bottom");
        if(resizable){
            left.css("cursor", "w-resize")
            .mousedown(leftMouseDown);
            right.css("cursor", "e-resize")
            .mousedown(rightMouseDown);
            bottom.css("cursor", "s-resize")
            .mousedown(bottomMouseDown);
            leftTop.css("cursor", "nw-resize")
            .mousedown(leftTopMouseDown);
            rightTop.css("cursor", "ne-resize")
            .mousedown(rightTopMouseDown);
            leftBottom.css("cursor", "sw-resize")
            .mousedown(leftBottomMouseDown);
            rightBottom.css("cursor", "se-resize")
            .mousedown(rightBottomMouseDown);
            body.addClass("resize")
            .mousedown(resizeMouseDown);
        }
        var ground = null;
        if(modal){
            ground = small.body().append("div").setClass("modal").opacity(70);
        }
        if(closeOnEscape){
            small.body().bind("keyup", escapeHandler);
        }
        info.css({
            "left": position.left + "px",
            "top": position.top + "px",
            "width": width + "px",
            "height": height + "px"
        });
        overflow.css({
            "height": height - 43 + "px"
        });
        small.body().append(info);
        info.node().focus();

        small.extend(info, {
            close: function(){
                info.remove();
                if(modal) ground.remove();
            }
        });

        return info;
    }
});