function plog(info) {
    if(DEBUG) {
        desktop.elements.debug_info.innerHTML = info + "<br>" + desktop.elements.debug_info.innerHTML;
    }
}

colorsChart = [
    ["#FFEEEE", "#FFCCCC", "#FFAAAA", "#FF8888", "#FF6666", "#FF4444", "#FF2222", "#FF0000", "#EE0000", "#CC0000", "#AA0000", "#880000", "#770000", "#660000", "#550000", "#440000", "#330000"],
    ["#EEFFEE", "#CCFFCC", "#AAFFAA", "#88FF88", "#66FF66", "#44FF44", "#22FF22", "#00FF00", "#00EE00", "#00CC00", "#00AA00", "#008800", "#007700", "#006600", "#005500", "#004400", "#003300"],
    ["#EEEEFF", "#CCCCFF", "#AAAAFF", "#8888FF", "#6666FF", "#4444FF", "#2222FF", "#0000FF", "#0000EE", "#0000CC", "#0000AA", "#000088", "#000077", "#000066", "#000055", "#000044", "#000033"],
    ["#FFFFEE", "#FFFFCC", "#FFFFAA", "#FFFF88", "#FFFF66", "#FFFF44", "#FFFF22", "#FFFF00", "#EEEE00", "#CCCC00", "#AAAA00", "#888800", "#777700", "#666600", "#555500", "#444400", "#333300"],
    ["#FFEEFF", "#FFCCFF", "#FFAAFF", "#FF88FF", "#FF66FF", "#FF44FF", "#FF22FF", "#FF00FF", "#EE00EE", "#CC00CC", "#AA00AA", "#880088", "#770077", "#660066", "#550055", "#440044", "#330033"],
    ["#FFF0D0", "#FFEECC", "#FFEEBB", "#FFDDAA", "#FFCC99", "#FFC090", "#EEBB88", "#DDAA77", "#CC9966", "#BB8855", "#AA7744", "#886633", "#775522", "#664411", "#553300", "#442200", "#331100"],
    ["#EEFFFF", "#CCFFFF", "#AAFFFF", "#88FFFF", "#66FFFF", "#44FFFF", "#22FFFF", "#00FFFF", "#00EEEE", "#00CCCC", "#00AAAA", "#008888", "#007777", "#006666", "#005555", "#004444", "#003333"],
    ["#FFFFFF", "#EEEEEE", "#DDDDDD", "#CCCCCC", "#BBBBBB", "#AAAAAA", "#A0A0A0", "#999999", "#888888", "#777777", "#666666", "#555555", "#444444", "#333333", "#222222", "#111111", "#000000"]
];


fontsChart = [
    "Arial, Helvetica",
    "Verdana, Arial, Helvetica", 
    "Times New Roman, Times, Serif", 
    "Comic Sans MS",
    "MS Sans Serif, sans-serif",
    "Courier New, Courier, Monospace",
    "Trebuchet MS, Arial, Helvetica"
]

fontSizesChart = [
    "11px", "14px", "18px", "22px", "26px", "32px"
]



function createColorSelectDom(title, target, id) {
    var colorsTable = { tag: "table", cellSpacing: "0", cellPadding: "0", 
                        style: {borderLeft: "1px solid gray", borderTop: "1px solid gray"}, 
                        childs: [] }

    for(var i=0; i<colorsChart.length; i++) {
        var tds = [];
        for(var j=0; j<colorsChart[i].length; j++) {
            tds.push({ tag: "td",
                       childs: [
                         { tag: "div", 
                           style: {borderRight: "1px solid gray", borderBottom: "1px solid gray", background: colorsChart[i][j], width: "16px", height: "16px", cursor: "pointer"},
                           events: {onclick: "selectColor(\""+id+"_popup\",\"" + target + "\", \"" + colorsChart[i][j] + "\")"}
                         }
                       ]
                     });            
        }
        colorsTable.childs.push({tag: "tr", childs: tds});
    }




    return [ 
      createButtonDom(title, "showPopup(\""+id+"\",\""+id+"_popup\")", theme.icons.select_colour, id),
      { tag: "div", className: "panel", id: id+"_popup", display: false, 
        style: {position: "absolute", width: "298px"},
        childs: [
          { tag: "div", className: "caption",
            childs: [
              createTableDom([{content: "<b>Select color</b>", width: "100%"},
                              {content: createButtonDom(false, "closePopup(\""+id+"_popup\")", theme.icons.close), width: "1%"}
                             ])
            ]
          },
          { tag: "div", className: "content",
            childs: [ colorsTable ]
          }
        ]
      }
    ]
}


function createFontSelectDom(title, target, id) {
    var fontsTable = [];
    for(var i=0; i<fontsChart.length; i++) {
        fontsTable.push({tag: "div", className: "bevel_section", 
                         style: {fontFamily: fontsChart[i], fontSize: "18px", cursor: "pointer", color: "#000000"},
                         events: {onclick: "selectFont(\""+id+"_popup\",\"" + target + "\", \"" + fontsChart[i] + "\")"},
                         innerHTML: "ABCDEF abcdef 12345"
                        });
    }

    return [ 
      createButtonDom(title, "showPopup(\""+id+"\",\""+id+"_popup\")", theme.icons.select_font, id),
      { tag: "div", className: "panel", id: id+"_popup", display: false, 
        style: {position: "absolute", width: "250px"},
        childs: [
          { tag: "div", className: "caption",
            childs: [
              createTableDom([{content: "<b>Select font</b>", width: "100%"},
                              {content: createButtonDom(false, "closePopup(\""+id+"_popup\")", theme.icons.close), width: "1%"}
                             ])
            ]
          },
          { tag: "div", className: "content",
            childs: fontsTable 
          }
        ]
      }
    ]
}



function createFontSizeSelectDom(title, target, id) {
    var fontSizesTable = [];
    for(var i=0; i<fontSizesChart.length; i++) {
        fontSizesTable.push({tag: "div", className: "bevel_section", 
                             style: {fontSize: fontSizesChart[i], cursor: "pointer", color: "#000000"},
                             events: {onclick: "selectFontSize(\""+id+"_popup\",\"" + target + "\", \"" + fontSizesChart[i] + "\")"},
                             innerHTML: "Size "+(i+1)
                            });
    }

    return [ 
      createButtonDom(title, "showPopup(\""+id+"\",\""+id+"_popup\")", theme.icons.select_font_size, id),
      { tag: "div", className: "panel", id: id+"_popup", display: false, 
        style: {position: "absolute", width: "120px"},
        childs: [
          { tag: "div", className: "caption",
            childs: [
              createTableDom([{content: "<b>Select font size</b>", width: "100%"},
                              {content: createButtonDom(false, "closePopup(\""+id+"_popup\")", theme.icons.close), width: "1%"}
                             ])
            ]
          },
          { tag: "div", className: "content",
            childs: fontSizesTable 
          }
        ]
      }
    ]
}


// make interface
function createButtonDom(title, action, icon, id, img_id) {
    if(icon) {
        if(title) {
            var button = { tag: "span", /*style: {position: "relative"},*/
                           childs: [
                             { tag: "img", id: img_id, src: icon, width: 16, height: 16, 
                               style: {margin: "0px 4px 0px 0px", verticalAlign: "middle"}},
                             { tag: "a",  href: "void", events: {onclick: action}, innerHTML: title}
                           ]};
            if(id) button.childs[1].id = id;
        } else {
            var button = { tag: "a", href: "void", events: {onclick: action}, 
                           childs: [
                             { tag: "img", id: img_id, src: icon}
                           ]};
            if(id) button.id = id;
        }
    } else {
        var button = { tag: "a", href: "void", events: {onclick: action}, innerHTML: title};
        if(id) button.id = id;
    }

    return button;
}



// tds: [{content:dom, width: ""}]
function createTableDom(tds, width) {
    var table = { tag: "table", width: (width ? width : "100%"), 
                  childs: {
                    tr: { tag: "tr",
                          childs: {} }
                  }
                };
    for(var i=0; i<tds.length; i++) {
        if(typeof(tds[i].content) == "string") {
            table.childs.tr.childs[i] = { tag: "td", width: tds[i].width, innerHTML: tds[i].content };
        } else {
            table.childs.tr.childs[i] = { tag: "td", width: tds[i].width, 
                                          childs: [tds[i].content] };
        }
    }
    return table;
}