(function($) {
    $.fn.cGridIcon =
    {
        expand: "/content/jc/pi/ui/im/expand.png"
        , collapse: "/content/jc/pi/ui/im/collapse.png"
    }

    $.fn.cGridInitEvent = function(containerid) {
        var _rownum = -1;
        $("#" + containerid + " .gridicon").each(function() {
            _rownum++;
            var detailid = this.id + "_detail";
            //alert(detailid);
            if (!document.getElementById(detailid) || document.getElementById(detailid) == null) {

                //$(document.body).append("<div id=\"" + detailid + "\"></div>");
                return;
            }

            var timeout = null;

            var $offset = $(this).parent().parent().offset();

            var $_ = this;

            $(this).mouseover(function() {
                var detailid = this.id + "_detail";
                var $offset = $(this).parent().parent().offset();


                //set width
                var _th = 1;
                $("#" + containerid + " tr.column th").each(function() {
                    $("#" + detailid + " tr.row td:nth-child(" + _th + ")").width($(this).width());
                    _th++;
                });

                if (!timeout) {
                    clearTimeout(timeout);
                    timeout = null;
                }

                this.src = $.fn.cGridIcon.collapse;
                $("#" + detailid).css({
                    position: "absolute"
                                , top: $offset.top
                                , left: $offset.left
                });

                $("#" + detailid).fadeIn("fast", function() {
                    $("#" + detailid + " table").shadow();
                    $("#" + detailid + " table").shadowEnable();
                });

            }).mouseout(function() {
                timeout = setTimeout(function() {
                    $_.src = $.fn.cGridIcon.expand;
                    $("#" + detailid + " table").shadowDisable();
                    $("#" + detailid).fadeOut("fast", function() {
                        $("#" + detailid + " table").shadowDestroy();
                    });
                }, 400);
            });

            $("#" + detailid).mouseout(function() { $($_).mouseout(); });
            $("#" + detailid).mouseover(function() {
                clearTimeout(timeout);
                timeout = null;
            });



            //end
        });
    }
    $.fn.cGrid = function(opts) {
        var _options = { className: 'cGrid' };
        opts = $.extend({}, _options, opts);

        var _columnArr = [];
        var _rowArr = [];

        $this = $(this);
        return (
        {
            //add column
            addColumn: function(options) {
                var defaultColumn =
                {
                    title: ""
                    , expression: ""
                    , sort: "asc"
                    , sorting: false
                    , css: ({})
                };

                options = $.extend({}, defaultColumn, options);
                _columnArr.push(options);
                return this;
            }

            //add row
            , addRow: function(options) {
                var defaultRow =
                {
                    col: {}
                    , detail: ""
                    , css: ({})
                };

                options = $.extend({}, defaultRow, options);
                _rowArr.push(options);
                return this;
            }

            //bind data
            , bind: function(callback) {
                //this.id = $($this)[0].id;
                return $this.each(function() {
                    var containerid = this.id;
                    var html = "<div class=\"" + opts.className + "\">\r\n";

                    //add column
                    html += "  <table><tr class=\"column\">\r\n";
                    for (var i = 0; i < _columnArr.length; i++) {
                        html += "    <th>" + _columnArr[i].title + "</th>\r\n";
                    }
                    html += "    <th style=\"width:20px;text-align:center;\">&nbsp;</th>\r\n";
                    html += "  </tr>\r\n";


                    //add row
                    for (var i = 0; i < _rowArr.length; i++) {
                        html += "  <tr class=\"row\">\r\n";
                        var rowid = containerid + "_r" + i;
                        for (var c = 0; c < _columnArr.length; c++) {
                            html += "    <td>" + _rowArr[i].col[c] + "</td>\r\n";
                        }
                        html += "    <td style=\"text-align:right;\"><img src=\"" + $.fn.cGridIcon.expand + "\" alt=\"more detail\" class=\"gridicon\" id=\"" + rowid + "\" /></td>\r\n";
                        html += "  </tr>\r\n";
                    }

                    html += "</table></div>";


                    $("#" + containerid).html(html);

                    //apply style
                    //column

                    for (var i = 0; i < _columnArr.length; i++) {
                        $("#" + containerid + " tr.column th:nth-child(" + (i + 1) + ")").css(_columnArr[i].css);
                    }

                    //row
                    for (var i = 0; i < _rowArr.length; i++) {
                        $("#" + containerid + " tr.row:nth-child(" + (i + 1) + ") td:nth-child(n)").css(_rowArr[i].css);
                    }

                    //init event
                    //$.fn.cGridInitEvent(containerid);
                    var _rownum = -1;
                    $("#" + containerid + " .gridicon").each(function() {
                        _rownum++;
                        var detailid = this.id + "_detail";
                        //alert(detailid);
                        if (!document.getElementById(detailid) || document.getElementById(detailid) == null) {

                            $(document.body).append("<div id=\"" + detailid + "\"></div>");
                        } else {
                            $("#" + detailid).remove();
                            $(document.body).append("<div id=\"" + detailid + "\"></div>");
                        }

                        var timeout = null;

                        var $offset = $(this).parent().parent().offset();

                        var $_ = this;

                        $(this).mouseover(function() {
                            var detailid = this.id + "_detail";
                            var $offset = $(this).parent().parent().offset();
                            if ($("#" + detailid).html() == "") {
                                $("#" + detailid).addClass("cGrid");
                                $("#" + detailid).css(
                                {
                                    display: "none"
                                    , position: "absolute"
                                });
                                var number = this.id.replace(containerid + "_r", "");
                                $("#" + detailid).html("");
                                $("#" + detailid).append($("#" + containerid + " table").clone());
                                $("#" + detailid + " table").html($(this).parent().parent().clone());
                                $("#" + detailid + " table img.gridicon").parent().remove();
                                $("#" + detailid + " table tr.row").addClass("row_detail");

                                var _detail = "<tr><td class=\"detail\" colspan=\"" + $("#" + detailid + " tr.row:nth-child(1) td").length + "\">";
                                _detail += _rowArr[number].detail;
                                _detail += "</td></tr>";
                                $("#" + detailid + " table").append(_detail);

                                //set width
                                var _th = 1;
                                $("#" + containerid + " tr.column th").each(function() {
                                    $("#" + detailid + " tr.row td:nth-child(" + _th + ")").width($(this).width());
                                    _th++;
                                });
                            }

                            if (!timeout) {
                                clearTimeout(timeout);
                                timeout = null;
                            }

                            this.src = $.fn.cGridIcon.collapse;
                            $("#" + detailid).css({
                                position: "absolute"
                                , top: $offset.top
                                , left: $offset.left
                            });

                            $("#" + detailid).fadeIn("fast", function() {
                                $("#" + detailid + " table").shadow();
                                $("#" + detailid + " table").shadowEnable();
                            });

                        })
                        .mouseout(function() {
                            timeout = setTimeout(function() {
                                $_.src = $.fn.cGridIcon.expand;
                                $("#" + detailid + " table").shadowDisable();
                                $("#" + detailid).fadeOut("fast", function() {
                                    $("#" + detailid + " table").shadowDestroy();
                                });
                            }, 400);
                        });

                        $("#" + detailid).mouseout(function() { $($_).mouseout(); });
                        $("#" + detailid).mouseover(function() {
                            clearTimeout(timeout);
                            timeout = null;
                        });



                        //end
                    });
                    if (callback != null) callback();
                });
            }
        });
    };
})(jQuery);