/* 
 Copyright 2010 Xmarks Inc.

 tabs.js: Implements the logic for "syncing" open tabs. 

 */

var Cc = Components.classes;
var Ci = Components.interfaces;
var Cu = Components.utils;

Xmarks.tabs = {};
Cu.import("resource://xmarks/tabsync.jsm", Xmarks.tabs);

var indentWidth = 20;
var indentOffset = 10;
var indentUnit = "px";
const DEFAULT_ICON = "chrome://global/skin/tree/item.png";

function Element(tag, attrs, listeners) {
    var el = document.createElement(tag);
    if (attrs) forEach(attrs, function(v, k) {
            el.setAttribute(k, v);
        });

    if (listeners) forEach(listeners, function(v, k) {
            el.addEventListener(k, v, false);
        });

    return el;
}

var evenRow;
function ColorRow(el, indent) {
    var classList = el.getAttribute("class");
    if (evenRow) {
        el.setAttribute("class", classList ? classList + " even" : "even");
    }
    var style = "padding-left: " + String(indent * indentWidth + indentOffset) 
        + indentUnit + ";";
    el.setAttribute("style", style);
    evenRow = !evenRow;
    return el;
}


function BrowserDisplayName(type) {
    var name;
    type = (type || "firefox").toLowerCase();

    try {
        name = Xmarks.Bundle().GetStringFromName("browser.name." + type);
    } catch(e) {
        name = "Firefox";
    }
    return name;
}

var browserList = ['firefox', 'chrome', 'safari', 'ie'];

function BrowserIcon(type) {
    type = (type || "firefox").toLowerCase();
    if (browserList.indexOf(type) < 0) {
        type = "firefox"
    }
    return "chrome://foxmarks/skin/images/browser_" + type + ".png";
}

function BuildClient(c, clientName, container, indent) {
    var clientRow = ColorRow(Element("hbox", { align: "center", 
                class: "xmarks-client-row" }), indent);
    var icon = Element("image", 
        { class: "xmarks-tab-client-icon", 
          src : "chrome://foxmarks/skin/images/computer.png"
        });
    var label = Element("label", 
        { value: clientName + " (" + c.length + ")",
          style: "background-color: inherit;" });
    clientRow.appendChild(icon);
    clientRow.appendChild(label);
    container.appendChild(clientRow);

    indent += 1;
    forEach(c.mids, function(mid) {
            forEach(mid.windows, function(w) {
                    BuildWindow(w, mid, container, indent);
                });
        });
}

function BuildWindow(w, mid, container, indent) {
    var winRow = ColorRow(
        Element("hbox", 
            {
                align: 'center', flex: 1, 
                class: "xmarks-tab-window-row",
                tooltiptext: Xmarks.Bundle().
                    GetStringFromName("tabs.tooltip.window") 
            },
            { click: function() { 
                Xmarks.OpenTabs(w.tabs, true, Xmarks.OpenTabsPanel); 
                setTimeout(function() { 
                        Xmarks.OpenTabsPanel();
                    }, 1000);
                }
            }), 
        indent);
    var icon = Element("image", {
            class: "xmarks-tab-browser-icon",
            src: BrowserIcon(mid.browserName)
        });
    var label = Element("label", 
        { value: BrowserDisplayName(mid.browserName) + " (" + 
                w.tabs.length + ")"});
    winRow.appendChild(icon);
    winRow.appendChild(label);
    container.appendChild(winRow);

    indent += 1;
    forEach(w.tabs, function(t) {
            BuildTab(t, container, indent);
        });
}

function BuildTab(t, container, indent) {

    var title = t.title || t.url;
    var tab = ColorRow(Element("hbox", 
        { align: "center", class: "xmarks-tab", flex: 1,
            tooltiptext: t.title + '\n' + t.url },
        { click: function() { Xmarks.OpenTabs([t], false); }}), indent);
    var icon = Element("image", 
        { class: "xmarks-tab-favicon", src: t.icon || DEFAULT_ICON });
    var label = Element("label", 
        { value: title, crop: "end", flex: 1});
    tab.appendChild(icon);
    tab.appendChild(label);
    container.appendChild(tab);
}

var evenRow;

function SetContents(el) {
    var panel = document.getElementById("xmarks-tabs-container");
    if (panel.hasChildNodes()) {
        panel.replaceChild(el, panel.firstChild);
    } else {
        panel.appendChild(el);
    }
}

function SetHeader(msg) {
    var el = document.createTextNode(msg);

    var desc = document.getElementById("xmarks-tabs-header");
    desc.replaceChild(el, desc.firstChild);
}

function Update(status, clients) {
    var contents = Element("vbox", { style: "overflow: auto;", flex: "1"});

    if (status) {
        SetHeader(Xmarks.MapErrorMessage(status)); 
    } else {
        var found = false;
        evenRow = false;

        forEach(clients, function(c, clientName) {
                BuildClient(c, clientName, contents, 0);
                found = true;
            });

        var spacer = Element("spacer", { flex: 1000} );
        contents.appendChild(spacer);
        if (!found) {
            SetHeader(Xmarks.Bundle().GetStringFromName("tabs.header.nodata"));
        }
    }
    SetContents(contents);
}

function TabsOnLoad() {
    var vbox = Element("vbox", { flex: 1});
    var spacer1 = Element("spacer", { flex: 1});
    var spacer2 = Element("spacer", { flex: 2});
    var spacer3 = Element("spacer", { flex: 1});
    var spacer4 = Element("spacer", { flex: 1});

    var hbox = Element("hbox", { align: "center", flex: 1});
    var throbber = Element("image", { 
            src: "chrome://foxmarks/skin/images/Throbber-small.gif",
            height: 16, width: 16 });
    var label = Element("label", { value: "Loading..." });
    hbox.appendChild(spacer3);
    hbox.appendChild(throbber);
    hbox.appendChild(label);
    hbox.appendChild(spacer4);
    vbox.appendChild(spacer1);
    vbox.appendChild(hbox);
    vbox.appendChild(spacer2);
    SetContents(vbox);

    // Turn off the cancel button at the bottom of the dialog
    var cancel = document.getAnonymousElementByAttribute(
        document.getElementById("xmarks-tabs-dialog"), "dlgtype", "cancel");
    cancel.setAttribute("hidden", true);

    Xmarks.tabs.Read(Update);
}


