function TabbedCity(el, prev, table, height, url) {
    this.el = el;
    this.prev = prev;
    this.next = null;
    this.table = table;
    this.label = null;
    this.title = "";
    this.url = url;
    this.active = false;
    this.height = height;
    this.isDivisible = false;
    
    if (this.prev) {
        this.prev.next = this;
    }

    this.check = function() {
        if (!this.active) {
            this.el.className += " checked";
            if (this.next) {
                this.next.el.className += " checkedLeft";
            }
        }
    };

    this.uncheck = function() {
        if (!this.active) {
            this.el.className = this.el.className.replace(/(^| )checked( |$)/, " ");
            if (this.next) {
                this.next.el.className = this.next.el.className.replace(/(^| )checkedLeft( |$)/, " ");
            }
        }
    };

    this.activate = function() {
        if (!this.active) {
            if (TabbedCity.active) {
                TabbedCity.active.deactivate();
            }
            
            this.uncheck();
            this.check();
            this.active = true;

            this.el.className += " active";
            if (this.prev) {
                this.prev.el.className += " activeRight";
            }
            TabbedCity.active = this;

            window.location.hash = encodeURIComponent(this.url);
            this.el.parentNode.replaceChild(this.table, this.el.parentNode.lastChild);
        }
    };

    this.deactivate = function() {
        this.active = false;
        this.uncheck();

        this.el.className = this.el.className.replace(/(^| )active( |$)/, " ");
        if (this.prev) {
            this.prev.el.className = this.prev.el.className.replace(/(^| )activeRight( |$)/, " ");
        }
    };

    this.findLabel = function() {
        var nodes = this.el.childNodes;
        var i=0;
        while (nodes[i].className != "label") {
            i++;
        }
        this.label = nodes[i];
        this.title = nodes[i].firstChild.nodeValue;
        this.isDivisible = this.title.indexOf(' ') >= 0;
    };

    this.iniMouseActions = function() {
        this.el.className = "tab";
        this.el.onmouseover = (function(t) {
            return function() {
                t.check();
            };
        })(this);
        this.el.onmouseout = (function(t) {
            return function() {
                t.uncheck();
            };
        })(this);
        this.el.onclick = (function(t) {
            return function() {
                t.activate();
            };
        })(this);
    };

    this.findLabel();
    this.iniMouseActions();
}

TabbedCity.active = null;
TabbedCity.fontSize = 9;
TabbedCity.tabMargin = 10;
TabbedCity.tabMarginStep = 3;

TabbedCity.findCity = function(cityHash, cities) {
    for (var i = 0; i < cities.length; i++) {
        if (decodeURIComponent(cityHash) == "#"+cities[i].url) {
            cities[i].activate();
        }
    }
};

function TabbedCitiesRenderer() {
    
}

TabbedCitiesRenderer.render = function () {
    TabbedCitiesRenderer.hideNavi();
    var cityHash = window.location.hash;

    var pl = document.getElementById("pricelist");
    var tabs = [];
    var lastTab = null;
    var lastButton = null;
    var lastName = null;
    var width = 0;
    var maxTableHeight = 0;
    var activate = null;

    var nodes = pl.childNodes;
    for (var i = 0; i < nodes.length; i++) {
        var node = nodes[i];
        var tag = node.tagName.toLowerCase();
        if (tag == "a") {
            if (node.name) {
                lastName = node.name;
            }
            pl.removeChild(node);
            i--;
        } else if (tag == "h3") {
            lastButton = node;
        } else if (tag == "div" && node.className == "pricelist") {
            var height = node.offsetHeight;
            if (maxTableHeight < height) {
                maxTableHeight = height;
            }

            lastTab = new TabbedCity(lastButton, lastTab, pl.removeChild(node), height, lastName);
            tabs.push(lastTab);
            lastTab.el.style.display = "none";

            if (decodeURIComponent(window.location.hash) == "#"+lastTab.url) {
                activate = lastTab;
            }

            i--;
        }
    }

    if (tabs.length > 0) {
        tabs[0].el.className += " first";
        lastTab.el.className += " last";
        lastTab.el.parentNode.appendChild(tabs[0].table);
        if (activate) {
            activate.activate();
        } else {
            tabs[0].activate();
        }

        for (i = 0; i < tabs.length; i++) {
            tabs[i].el.style.display = "block";
            tabs[i].table.style.marginBottom = (maxTableHeight-tabs[i].height)+"px";
            width += tabs[i].el.offsetWidth;
        }

        while (width > 550) {
            TabbedCity.fontSize--;
            TabbedCity.tabMargin = Math.round(TabbedCity.tabMargin / 3 - TabbedCity.tabMarginStep);

            if (TabbedCity.fontSize < 6) {
                TabbedCity.fontSize = 6;
                TabbedCity.tabMarginStep++;
            }

            for (i = 0; i < tabs.length; i++) {
                var originalWidth = tabs[i].el.offsetWidth;
                tabs[i].el.style.fontSize = TabbedCity.fontSize + "pt";
                tabs[i].el.title = tabs[i].title;
                if (TabbedCity.fontSize <= 7 && tabs[i].isDivisible) {
                    if (TabbedCity.fontSize == 7) {
                        tabs[i].el.style.lineHeight = "10px";
                        tabs[i].label.innerHTML = tabs[i].label.innerHTML.replace(" ", "<br />");
                        tabs[i].el.firstChild.style.marginRight = (TabbedCity.tabMargin + 1) + "px";
                        tabs[i].el.lastChild.style.marginLeft = (TabbedCity.tabMargin + 1) + "px";
                    }
                } else {
                    tabs[i].el.firstChild.style.marginRight = TabbedCity.tabMargin + "px";
                    tabs[i].el.lastChild.style.marginLeft = TabbedCity.tabMargin + "px";
                }
                width -= originalWidth - tabs[i].el.offsetWidth;
            }
        }
    }

    window.setInterval(function() {
        if (window.location.hash != cityHash) {
            TabbedCity.findCity(window.location.hash, tabs);
            cityHash = window.location.hash;
        }
    }, 200);
};

TabbedCitiesRenderer.hideNavi = function () {
    var cont = document.getElementById("contentText");
    var divs = cont.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) {
        if (divs[i].className.search(/^contentNavigation[123]_4$/) >= 0) {
            divs[i].style.display = "none";
        }
    }
};

function ToolTip(el) {
    this.el = el;
    this.text = el.title;
    this.toolTip = null;

    this.createToolTip = function() {
        this.el.title = "";
        var box = document.createElement("div");
        box.className = "toolTip";

        var box2 = document.createElement("div");
        box.appendChild(box2);

        box2.innerHTML = this.text.replace(/\x0a/g, "<br />");
        box2.innerHTML = box2.innerHTML.replace(/\*([^*]*)\*/g, "<strong>$1</strong>");

        var body = document.body ? document.body : document.documentElement;

        body.appendChild(box);
        this.toolTip = box;
    };

    this.iniMouseActions = function() {
        this.el.onmouseover = this.el.onmousemove = (function(t) {
            return function(e) {
                if (!e) {
                    var e = window.event;
                }
                t.show(e);
            };
        })(this);
        this.el.onmouseout = (function(t) {
            return function() {
                t.hide();
            };
        })(this);
    }

    this.show = function(e) {
        this.toolTip.style.display = "block";
        var mx = 0;
        var my = 0;
        var sLeft = document.body.scrollLeft ? document.body.scrollLeft : document.documentElement.scrollLeft;
        var sTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
        var wWidth = window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth);
        var wHeight = window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight);
        var tWidth = this.toolTip.scrollWidth;
        var tHeight = this.toolTip.scrollHeight;
        if (e.pageX || e.pageY) {
            mx = e.pageX;
            my = e.pageY;
        }
        else if (e.clientX || e.clientY) {
            mx = e.clientX + sLeft;
            my = e.clientY + sTop;
        }
        if (sLeft + wWidth >= mx + 15 + tWidth + 20) {
            this.toolTip.style.left = (mx+15)+"px";
        } else if (sLeft < mx - 15 - tWidth) {
            this.toolTip.style.left = (mx - 5 - tWidth)+"px";
        } else {
            this.toolTip.style.left = Math.round(sLeft+wWidth/2-(tWidth+20)/2)+"px";
        }
        if (sTop + wHeight >= my + 15 + tHeight + 20) {
            this.toolTip.style.top = (my+15)+"px";
        } else if (sTop < my - 15 - tHeight) {
            this.toolTip.style.top = (my - 5 - tHeight)+"px";
        } else {
            this.toolTip.style.top = Math.round(sTop+wHeight/2-(tHeight+20)/2)+"px";
        }
        this.toolTip.style.visibility = "visible";
    };

    this.hide = function() {
        this.toolTip.style.display = "none";
        this.toolTip.style.visibility = "hidden";
    };

    this.createToolTip();
    this.iniMouseActions();
}

function ToolTipRenderer() {
    
}

ToolTipRenderer.render = function(el) {
    if (el == null) {
        el = document.getElementById("pricelist");
    }

    var children = el.childNodes;
    for (var i = 0; i < children.length; i++) {
        var child = children[i];
        if (child.nodeType == 1) {
            if (child.title && child.title.length > 0) {
                new ToolTip(child);
            }
            ToolTipRenderer.render(child);
        }
    }
};