function ToolBarItem(src, title)
{
    var temp = document.createElement('img');
    temp.src = src;
    temp.alt = title;
    temp.title = title;
    temp.className = 'clickable';
    return temp;
}

function ToolBarSep()
{
    var temp = document.createElement('img');
    temp.src = '/images/map_common/toolBoxGrabHoriz.png';
    return temp;
}


function clearInnerHTML(div)
{
    while(div.firstChild)
        div.removeChild(div.firstChild);
}

var ToolBoxPlugin = Class.create();
ToolBoxPlugin.prototype = {
    selected: false,
    selectable: true,
    itemClass: 'toolBoxMenuItem',
    itemSelectedClass: 'toolBoxMenuItem toolBoxMenuItemSelected',
    basic: function(parent, name)
    {
        this.parent = parent;
        this.name = name
        this.div = document.createElement('div');
        this.toolBoxColorDiv = document.createElement('div');
        this.toolBoxColorDiv.className = 'smallColorBox';
        this.div.appendChild(this.toolBoxColorDiv);
        this.nameDiv = document.createElement('div');
        this.nameDiv.innerHTML = this.name;
        this.div.appendChild(this.nameDiv);
        this.div.onclick = this.clicked.bind(this);
        this.div.className = this.itemClass;
    },
    initialize: function(parent, name)
    {
        this.basic(parent, name);
    },
    getName: function()
    {
        return this.name;
    },
    getDiv: function()
    {
        return this.div;
    },
    onresize: function()
    {
    },
    clicked: function()
    {
        this.parent.select(this);
    },
    select: function(state)
    {
        if (this.selectable)
        {
            if (state)
                this.div.className = this.itemSelectedClass;
            else
                this.div.className = this.itemClass;
            this.selected = state;
            if (state == false)
            {
                this.onDeselect();
            }
        }
    },
    getPluginDiv: function()
    {
        return this.pluginDiv;
    },
    setName: function(name)
    {
        this.name = name;
        this.nameDiv.innerHTML = this.name;
    },
    onDeselect: function()
    {
    }
};

var ToolBox = Class.create();
ToolBox.prototype = {
    drag: false,
    selected: -1,
    initialize: function(div, contentDiv, map)
    {
        this.innerCounter = 1;
        this.parentDiv = div;
        this.toolBoxContentDiv = contentDiv;
        this.toolBoxDiv = document.createElement('div');
        this.toolBoxDiv.className = 'toolBoxMenu';
        //this.plugins = [ new ToolBoxPluginMap(this, 'Moja mapka') ];
        this.plugins = [];
        this.statusBar = new ToolBoxStatusBar(this);
        this.visiblePlugins = this.plugins.length;
        this.updateToolBoxDiv();
        this.parentDiv.appendChild(this.toolBoxDiv);
        this.map = map;
        if (restoredPlugins == false)
          this.newGroupPlugin();
	this.map.buttonSave.onclick = function() { window.print(); };
        this.map.buttonRoute.onclick = this.showToolBox.bind(this);
        this.map.buttonRouteOn.onclick = this.hideToolBox.bind(this);
        
    },
    select: function(no)
    {
        if ((no >= 0)==false)
            no = this.plugins.indexOf(no);
        var plugin = this.plugins[no];

        if (!plugin.selected && plugin.selectable)
        {
            this.deselectAll();
            this.loadPlugin(plugin);
            plugin.select(true);
        }
        this.selected = no;
    },
    selectByPlugin: function(plugin)
    {
        for (var i=0; i<this.plugins.length; i++)
        if (this.plugins[i] == plugin)
        {
            this.select(i);
            break;
        }
    },
    deselectAll: function()
    {
        this.plugins.each( function(item, index){
            item.select(false);
        });
    },
    loadPlugin: function(no)
    {
        clearInnerHTML(this.toolBoxContentDiv);

        if ((no >= 0)==false)
            no = this.plugins.indexOf(no);
        plugin = this.plugins[no];

        this.toolBoxContentDiv.appendChild(plugin.getPluginDiv());
    },
    onresize: function(height)
    {
        this.parentDiv.style.height = height + "px";
        if (height>0)
        {
            this.plugins.each( function(item, index){
                              item.onresize(height);
            });
        } else
        {
            this.updateToolBoxDiv(true);
        }
    },
    grabHold: function()
    {
        this.drag = true;
    },
    grabRelease: function()
    {
        this.drag = false;
    },
    grabDrag: function(e)
    {
        if (this.drag)
        {
            var top = e.clientY - Position.cumulativeOffset(this.toolBoxDiv)[1];
          
            if(Math.abs(top)>20)
            {
                var last = this.visiblePlugins;
                this.changeVisiblePluginsNo(Math.round(top/20.0));
                if (last != this.visiblePlugins)
                    this.updateToolBoxDiv();
            }
        }
    },
    changeVisiblePluginsNo: function(no)
    {
        this.visiblePlugins -= no;
        if (this.visiblePlugins < 0)
            this.visiblePlugins = 0;
        if (this.visiblePlugins > this.plugins.length)
            this.visiblePlugins = this.plugins.length;
    },
    updateToolBoxDiv: function(cancel)
    {
        // TODO: zmniejsz this.visiblePlugins gdy trzeba
        clearInnerHTML(this.toolBoxDiv);
        this.insertGrabDiv();
        for (var i=0; i<this.visiblePlugins; i++)
        {
            var item = this.plugins[i];
            this.toolBoxDiv.appendChild(item.getDiv());
        }
        this.statusBar.updateDiv();
        this.toolBoxDiv.appendChild(this.statusBar.getDiv());
        if (toolBox && !cancel)
            onResize();
    },
    insertGrabDiv: function()
    {
        this.toolBoxGrab = document.createElement('div');
        this.toolBoxGrab.className = 'toolBoxGrab';
        this.toolBoxDiv.appendChild(this.toolBoxGrab);
        this.toolBoxGrab.onmousedown = this.grabHold.bind(this);
        document.getElementsByTagName('body').item(0).onmouseup = this.grabRelease.bind(this);
        this.parentDiv.onmousemove = this.grabDrag.bindAsEventListener(this);
    },
    newGroupPlugin: function()
    {
        this.visiblePlugins++;
        this.plugins.reverse();
        this.plugins.push(new ToolBoxPluginPlaces(this, lang[14] + ' ' + this.innerCounter, this.map));
        this.plugins.reverse();
        this.updateToolBoxDiv();
        this.select(0);
        this.innerCounter++;
    },
    restoreGroupPlugins: function(plugins)
    {
        this.visiblePlugins = plugins.length;
        this.plugins = plugins;
        for (var i=0; i<this.plugins.length; i++)
          this.plugins[i].parent = this;
        this.updateToolBoxDiv();
        this.select(0);
        this.innerCounter = plugins.length+1;
    },
    deletePluginGroup: function(plugin)
    {
        this.plugins.splice(this.plugins.indexOf(plugin),1);
        this.changeVisiblePluginsNo(1);
        this.updateToolBoxDiv();
        this.select(0);
        if (this.plugins.length == 0)
            clearInnerHTML(this.toolBoxContentDiv);
    },
    changeStatusBarOptionLabel: function(plugin)
    {
        this.statusBar.changeOptionLabel(this.plugins.indexOf(plugin), plugin.getName());
    },
    hideToolBox: function()
    {
      this.parentDiv.style.display = "none";
      this.map.buttonRouteOn.style.display = "none";
      this.map.buttonRoute.style.display = "block";
      onResize();
    },
    showToolBox: function()
    {
       this.parentDiv.style.display = "block";
       this.map.buttonRouteOn.style.display = "block";
       this.map.buttonRoute.style.display = "none";
       onResize();
    }
};