var activeNaviButton;
StyleSheet = {};

var delay = 10;
var step = 5;
var intv = null;

function NaviPoint(pic, page, headline) {
        this.pic = pic;
        this.page = page;
        this.headline = headline;

        this.button = document.createElement("div");
        this.button.className = "naviButton";
        this.button.style.backgroundImage = "url(./images/navi_button_blank.png)";

        var textPic = document.createElement("div");
        textPic.style.backgroundImage = "url(./images/navi_text_" + pic + ".png)";
        textPic.className = "naviButtonText";
        this.button.appendChild(textPic);

        this.container = document.createElement("div");
        this.container.className = "naviContainer";
        this.container.style.backgroundImage = "url(./images/navi_bg_" + pic + ".png)";
        this.container.appendChild(this.button);
}

var menupoints = new Array(
        new NaviPoint("vitapeter","vitapeter.html", "Vita Peter"),
        new NaviPoint("guestbook","guestbook.php", "Gästebuch"),
        new NaviPoint("umfragen","umfragen.php", "Umfragen"),
        new NaviPoint("kontakt","kontakt.txt", "Kontakt")
);

function createNavigation() {
        makeRequest('./contents/' + menupoints[0].page,SHOW_CONTENT);
        document.getElementById("contentspecific_headline").innerHTML = menupoints[0].headline;
        var naviContainer = document.getElementById("navi");
        var containerWidth = parseInt(StyleSheet.findRule('div.naviContainer').style.width);
        var butWidth = parseInt(StyleSheet.findRule('div.naviButton').style.width);
        for (i = 0; i < menupoints.length; i++) {
                var container = menupoints[i].container;
                if (i == 0) {
                        container.style.left = 0;
                } else {
                        container.style.left = containerWidth - (menupoints.length - (i)) * butWidth + "px";
                }
                menupoints[i].button.onclick = new Function("moveNaviButton(" + i + ")");
                naviContainer.appendChild(container);
        }
        activeNaviButton = 0;
}

function moveNaviButton(idx) {
        //var container = menupoints[idx].container;
        if (idx > activeNaviButton) {                        //bewegung nach links
                if (intv == null) {
                        intv = setInterval("animateButton('links'," + idx + ")",delay);
                        document.getElementById("contentspecific_headline").innerHTML = menupoints[idx].headline;
                        makeRequest('contents/' + menupoints[idx].page,SHOW_CONTENT);
                        activeNaviButton = idx;
                }
        } else {
                if (idx < activeNaviButton) {        //bewegung nach rechts
                        if (intv == null) {
                                intv = setInterval("animateButton('rechts'," + idx + ")",delay);
                                document.getElementById("contentspecific_headline").innerHTML = menupoints[idx].headline;
                                makeRequest('contents/' + menupoints[idx].page,SHOW_CONTENT);
                                activeNaviButton = idx;
                        }
                }
        }
}

function animateButton(direction, idx) {
        butWidth = parseInt(StyleSheet.findRule('div.naviButton').style.width);
        if (direction == "links") {
                clearIntervalFlag = true;
                for (i = idx; i > 0; i--) {
                        if (parseInt(menupoints[i].container.style.left) > (i * butWidth) + step) {
                                menupoints[i].container.style.left = parseInt(menupoints[i].container.style.left) - step + "px";
                                clearIntervalFlag = false;
                        } else {
                                menupoints[i].container.style.left = i * parseInt(StyleSheet.findRule('div.naviButton').style.width) + "px";
                        }
                }
        } else {
                containerWidth = parseInt(StyleSheet.findRule('div.naviContainer').style.width);
                clearIntervalFlag = true;
                for (i = (idx + 1); i < menupoints.length; i++) {
                        if (parseInt(menupoints[i].container.style.left) <  ((containerWidth - (menupoints.length - (i)) * butWidth) - step)) {
                                menupoints[i].container.style.left = parseInt(menupoints[i].container.style.left) + step + "px";
                                clearIntervalFlag = false;
                        } else {
                                menupoints[i].container.style.left = containerWidth - (menupoints.length - (i)) * butWidth + "px";
                        }
                }
        }
        if (clearIntervalFlag) {
                clearInterval(intv);
                intv = null;
        }
}














StyleSheet.findRule = function(ruleName) {
        var rule = null;
        for (var i = 0; i < document.styleSheets.length; i++) {
                rule = StyleSheet.findRuleInStyleSheet(document.styleSheets[i], ruleName);
                if (rule != null) break;
        }
        return rule;
}

StyleSheet.findRuleInStyleSheet = function(styleSheet, ruleName) {
        ruleName = ruleName.toUpperCase();
        var rules = null;
        if (styleSheet.rules) // IE
                rules = styleSheet.rules;
        if (styleSheet.cssRules) // FF
                rules = styleSheet.cssRules;
        var rule = null;
        for (var i = 0; i < rules.length; i++) {
                if (rules[i].selectorText.toString().toUpperCase() == ruleName) {
                        rule = rules[i];
                        break;
                }
        }
        rules = null;
        return rule;
}


/*

function moveNaviButton(idx) {
        makeRequest('./contents/' + pages[idx], SHOW_CONTENT);
        if (activeNaviButton >= 0) {
                naviButtons[activeNaviButton].style.left = null;
                naviButtons[activeNaviButton].style.right = naviButtons[idx].style.right;
        } else {
                if (idx < naviButtons.length - 1) {
                        for (i = idx + 1; i < naviButtons.length; i++) {
                                naviButtons[i].style.right = parseInt(naviButtons[i].style.right) - parseInt(StyleSheet.findRule('div.naviButton').style.width) + "px";
                        }
                }
        }
        naviButtons[idx].style.left = 0;
        activeNaviButton = idx;
}        */