//<using>
//  nui/nui.js
//  nui/prototype.js
//  nui/lang.js
//  nui/util.js
//  nui/widget.js
//</using>

/**
 * All kinds of panels in NUI
 * Copyright 2007, NetRanking.cn
 */
NUI.Widget.Panel = {
    ColorPanel : function(vAttributes) {},
    RoundConnerSize : {
        small : 0,
        large : 1
    },
    RoundConner : function(vAttributes) {},
    TabPanel : function() {}
};
 
/**
 * Color Panel
 * @class NUI.Widget.Panel.ColorPanel
 * @param vAttributes {object} The attributes of panel. 
 *      vAttributes = {
 *          id : "id",
 *          func : function(vColor){}   // the onclick event
 *      }
 */
NUI.Widget.Panel.ColorPanel = (function(){
    var g_dom = NUI.Util.DomService,
        g_sb = NUI.Util.StringService.StringBuilder,
        g_xCount = 8,
        g_yCount = 8,
        g_rgb = ["00", "55", "AA", "FF"],
        g_htmlTmplt = (function() {
                var m_sb = new g_sb();
                m_sb.append("<div class=\"colorPanel\"><div class=\"left\">");
                for(var y=0; y<g_yCount; y++) {
                    for(var x=0; x<g_xCount; x++) {
                        var color = _getColor( y*8 + x );
                        m_sb.append(
                            "<div class=\"colorCell\" ",
                            "onmouseover=\"NUI.Util.DomService.addCssClass(this, 'colorCellActive');",
                            "NUI.Util.DomService.getNode('{ID}_show').style.background = '#" + color + "';\" ",
                            "onmouseout=\"NUI.Util.DomService.removeCssClass(this, 'colorCellActive');",
                            "NUI.Util.DomService.getNode('{ID}_show').style.background = 'transparent';\" >",
                            "<div class=\"color\" style=\"background-color:#" + color + ";\"></div>",
                            "</div>"
                        );
                    }
                }
                m_sb.append("</div><div id=\"{ID}_show\" class=\"right\"></div></div>");
                return m_sb.toString();
            })();
    
    function _getColor(vValue) {
        var r = Math.round(vValue / 16 - 0.5),
            g = Math.round((vValue - r*16) / 4 - 0.5),
            b = vValue - r*16 - g*4;
        return [g_rgb[r], g_rgb[g], g_rgb[b]].join("");
    }
    
    return function(vAttributes){
        // private variables
        var m_secret = {},
            m_func = function(){};
        if(vAttributes) {
            if(vAttributes.id!=null) { m_secret.id = vAttributes.id; }
            if(vAttributes.func!=null) { m_func = vAttributes.func; }
        }
        
        var that = NUI.Widget.Base(m_secret);
        
        var m_attributes = {
            id : m_secret.id,
            className : "colorPanel",
            onclick : function() {
                var src = event.srcElement;
                if(src) {
                    if(g_dom.hasCssClass(src, "color")) {
                        m_func(src.style.backgroundColor);
                    } else if(g_dom.hasCssClass(src, "colorCell")) {
                        var _src = src.firstChild;
                        if(_src) {
                            m_func(_src.style.backgroundColor);
                        }
                    }
                }
            }
        };
        var m_node = g_dom.createNode("div", m_attributes, m_secret.document);
        g_dom.setInnerHTML(
            m_node, 
            g_htmlTmplt.supplant({ID:m_secret.id})
        );
        
        NUI.Util.ObjectService.annex(that, {
            nodeEntity : m_node
        });
        return that;
    };
})();

/**
 * Round Conner Panel
 * @class NUI.Widget.Panel.RoundConner
 * @param vAttributes {object} The attributes of panel. 
 *      vAttributes = {
 *          id : {string},
 *          border : {string},
 *          background : {string}
 *      }
 */
NUI.Widget.Panel.RoundConner = (function(){
    var g_dom = NUI.Util.DomService,
        g_sb = NUI.Util.StringService.StringBuilder,
        g_lang = NUI.Lang,
        g_tmplt = "<div style=\"background:{BACKGROUND}; height:1px; line-height:1px; border:solid {BORDER}; border-width:0 {BORDER_WIDTH}px; margin:0 {MARGIN}px; font-size:1px;\" ></div>";
    
    return function(vAttributes){
        var m_border = "#999",
            m_background = "#ccc",
            m_secret = {};
        if(vAttributes) {
            if(vAttributes.id != null) { m_secret.id = vAttributes.id; }
            if(vAttributes.border) { m_border = vAttributes.border; }
            if(vAttributes.background) { m_background = vAttributes.background; }
        }
        
        var that = NUI.Widget.Base(m_secret);
        
        var m_innerNode = g_dom.createNode("div", {
                style : {
                    padding: "0 5px",
                    height : "100%",
                    borderWidth : "0 1px",
                    borderStyle : "solid",
                    borderColor : m_border,
                    background : m_background
                }
            }),
            m_node = (function() {
                var retval = g_dom.createNode("div", { id : m_secret.id }),
                    b1 = g_tmplt.supplant({BACKGROUND : m_border, BORDER : m_border, BORDER_WIDTH:1, MARGIN:5}),
                    b2 = g_tmplt.supplant({BACKGROUND : m_background, BORDER : m_border, BORDER_WIDTH:2, MARGIN:3}),
                    b3 = g_tmplt.supplant({BACKGROUND : m_background, BORDER : m_border, BORDER_WIDTH:1, MARGIN:2}),
                    b4 = g_tmplt.supplant({BACKGROUND : m_background, BORDER : m_border, BORDER_WIDTH:1, MARGIN:1}),
                    b5 = g_tmplt.supplant({BACKGROUND : m_background, BORDER : m_border, BORDER_WIDTH:1, MARGIN:1}),
                    sb = new g_sb();
                sb.append(b1, b2, b3, b4, b5);
                g_dom.setInnerHTML(retval, sb.toString());
                g_dom.appendNode(retval, m_innerNode);
                sb = new g_sb();
                sb.append(b5, b4, b3, b2, b1);
                var foot = g_dom.createNode("div");
                g_dom.setInnerHTML(foot, sb.toString());
                g_dom.appendNode(retval, foot);
                return retval;
            })();
            
        NUI.Util.ObjectService.annex(that, {
            nodeEntity : m_node,
            
            /**
             * Set the inner node of the round conner
             * @param vNode {string | object}
             */
            setInnerNode : function(vNode) {
                if(g_lang.isString(vNode)) {
                    g_dom.setInnerHTML(m_innerNode, vNode);
                } else if(g_lang.isObject(vNode)) {
                    g_dom.removeChildren(m_innerNode);
                    g_dom.appendNode(m_innerNode, vNode);
                }
            }
        });
        return that;
    };
})();

/**
 * Tab Panel
 * @class NUI.Widget.Panel.TabPanel
 * @param vAttributes {object} The attributes of panel. 
 *      vAttributes = {
 *          id : {string},
 *          width : {int},
 *          height : {int}
 *      }
 */
NUI.Widget.Panel.TabPanel = (function(){
    var g_dom = NUI.Util.DomService,
        g_sb = NUI.Util.StringService.StringBuilder,
        g_lang = NUI.Lang,
        g_htmlTmplt = (function() {
            var sb = new g_sb();
            sb.append(
                "<div class=\"tabs\"><div class=\"l\"><div class=\"r\"><div class=\"c\">",
                "<div id=\"{ID}_tabs\"></div>",
                "</div></div></div></div>",
                "<div id=\"{ID}_contents\" class=\"contents\" style=\"width:{WIDTH}px;height:{HEIGHT}px\"></div>",
                "<div class=\"foot\"><div class=\"l\"><div class=\"r\"><div class=\"c\">",
                "</div></div></div></div>"
            );
            return sb.toString();
        })(),
        g_tabTmplt = (function() {
            var sb = new g_sb();
            sb.append(
                "<div class=\"l\"><div class=\"r\"><div class=\"c\">",
                "<div>{CAPTION}</div>",
                "</div></div></div>"
            );
            return sb.toString();
        })();
        
    return function(vAttributes){
        // private variables
        var m_secret = {},
            m_width = 650,
            m_height = 200;
        if(vAttributes) {
            if(vAttributes.id) {
                m_secret.id = vAttributes.id;
            }
            if(vAttributes.width > 0) {
                m_width = vAttributes.width;
            }
            if(vAttributes.height > 0) {
                m_height = vAttributes.height;
            }
        }
        
        var that = NUI.Widget.Base(m_secret),
            m_id = m_secret.id;
            
        var m_node = (function() {
                var retval = g_dom.createNode("div", {
                    className : "tabPanel",
                    style : {
                        width : m_width + 10 + "px",
                        height : m_height + 50 + "px"
                    }
                });
                g_dom.setInnerHTML(retval, g_htmlTmplt.supplant({
                    ID : m_id,
                    WIDTH : m_width,
                    HEIGHT : m_height
                }));
                return retval;
            })();
        
        var m_index = 0,
            m_crtIndex = -1;        // the current showed tab
        function _getTabId(vIndex) {
            return m_id + "_tab_" + vIndex;
        }
        function _getContentId(vIndex) {
            return m_id + "_content_" + vIndex;
        }
        function _addTab(vCaption, vContent){
            if(!g_lang.isString(vCaption)) {
                return;
            }
            
            var tabCon = m_secret.getChild(m_id + "_tabs"),
                cntCon = m_secret.getChild(m_id + "_contents");
            if(!tabCon || !cntCon) {
                return;
            }
            // add tab
            var tab = g_dom.createNode("div", {
                id : _getTabId(m_index),
                className : "tab",
                onmouseover : function() {
                    g_dom.addCssClass(this, "tabhover");
                },
                onmouseout : function() {
                    g_dom.removeCssClass(this, "tabhover");
                },
                onclick : function() {
                    var idx = this.id.controlId();
                    _clickTab(idx);
                }
            });
            g_dom.setInnerHTML(tab, g_tabTmplt.supplant({
                CAPTION : vCaption
            }));
            g_dom.appendNode(tabCon, tab);
            // add content
            var cnt = g_dom.createNode("div", {
                id : _getContentId(m_index),
                className : "cnt"
            });
            if(g_lang.isObject(vContent)) {
                g_dom.appendNode(cnt, vContent);
            } else if(g_lang.isString(vContent)) {
                g_dom.setInnerHTML(cnt, vContent);
            }
            g_dom.hide(cnt);
            g_dom.appendNode(cntCon, cnt);
            
            _clickTab(m_index);
            
            //increase index
            m_index ++;
        }
        function _clickTab(vIndex) {
            if(m_crtIndex == vIndex) {
                return;
            }
            // hide the old tab
            if(m_crtIndex >= 0) {
                var ctab = m_secret.getChild(_getTabId(m_crtIndex)),
                    ccontent = m_secret.getChild(_getContentId(m_crtIndex));
                if(ctab != null) {
                    g_dom.removeCssClass(ctab, "tabselected");
                }
                if(ccontent != null) {
                    g_dom.hide(ccontent);
                }
            }
            // show the current tab
            var tab = m_secret.getChild(_getTabId(vIndex)),
                content = m_secret.getChild(_getContentId(vIndex));
            if(tab != null) {
                g_dom.addCssClass(tab, "tabselected");
            }
            if(content != null) {
                g_dom.show(content);
            }
            // set m_crtIndex to vIndex
            m_crtIndex = vIndex;
        }
        
        NUI.Util.ObjectService.annex(that, {
            nodeEntity : m_node,
            
            /**
             * Add a new tab to the tabpanel
             * @param vCaption {string}. The caption of the tab
             * @param vContent {object|string}. The content of the tab. It can be a dom node or a html string
             */
            addTab : function(vCaption, vContent) {
                var cap = vCaption, 
                    cnt = vContent;
                if(!g_lang.isString(cap)) {
                    return;
                }
                if(g_lang.isNull(cnt)) {
                    cnt = "";
                } else if(!g_lang.isObject(cnt) && !g_lang.isString(cnt)) {
                    return;
                }
                _addTab(cap, cnt);
            },
            
            /**
             * Trigger a tab
             * @param vIndex {int}. The index of the tab
             */
            triggerTab : function(vIndex) {
                if(!g_lang.isNumber(vIndex) && !vIndex >= 0) {
                    return;
                }
                _clickTab(vIndex);
            }
        });
        return that;
    };
})();