window.onresize = function () {
    setElem();
};
window.onload = function () {
    setElem();
    setTXTMW();
};

var txtLimit = 124;
var mehrVT = "mehr";
var wenigerVT = "weniger";
function setElem() {
    var viewportWidth = getViewport("width");
    var viewportHeight = getViewport("height");
    var maxWidth = 1000;

    var modeEl = document.getElementById("mode");
    if (modeEl != null) {
        modeEl.innerHTML = "© 2011 Markus Albrecht - Viewport " + viewportWidth + " x " + viewportHeight + " Pixel";
    }

    var headerimgEl = document.getElementById("headerimg");
    if (viewportWidth > maxWidth) {
        if (headerimgEl != null) {
            headerimgEl.width = maxWidth;
            headerimgEl.height = (maxWidth / 4);
        }
    } else {
        if (headerimgEl != null) {
            headerimgEl.width = viewportWidth;
            headerimgEl.height = (viewportWidth / 4);
        }
    }

    var naviEl = document.getElementById("navigation");
    var contentEl = document.getElementById("content");
    if (viewportWidth > 760) {
        naviEl.className = "navigross";
        contentEl.className = "contentgross";
    } else {
        naviEl.className = "naviklein";
        contentEl.className = "contentklein";
    }

}

function getViewport(was) {
    var viewPortWidth;
    var viewPortHeight;
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 
    if (typeof window.innerWidth != 'undefined') {
        viewPortWidth = window.innerWidth, viewPortHeight = window.innerHeight
    }
    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 
    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
        viewPortWidth = document.documentElement.clientWidth, viewPortHeight = document.documentElement.clientHeight
    }
    // older versions of IE 
    else {
        viewPortWidth = document.getElementsByTagName('body')[0].clientWidth, viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
    }

    if (was == "width") {
        return [viewPortWidth];
    } else if (was == "height") {
        return [viewPortHeight];
    } else {
        return [viewPortWidth, viewPortHeight];
    }
}

var spanTXT = new Array();
function setTXTMW() {
    var nameID = "";
    var allSpan = document.getElementsByTagName('span');
    for (var i = 0; i < allSpan.length; i++) {
        nameID = allSpan[i].id;
        if (nameID.substring(0, 6) == "txtMW_") {
            spanTXT[i] = new Array(2);
            spanTXT[i][0] = nameID;
            spanTXT[i][1] = document.getElementById(nameID).innerHTML;
            spanTXT[i][2] = spanTXT[i][1].length;
            setTXT(txtLimit, i);
        }
    }
}

function setTXT(txtLng, i) {
    var spanElement = document.getElementById(spanTXT[i][0]);
    var txtLong = spanTXT[i][1];
    var txtLength = spanTXT[i][2];
    var txtShort = txtLong.substring(0, txtLimit);
    if (txtLng > txtLimit) {
        spanElement.innerHTML = txtLong + " <a href='javascript:setTXT(" + txtLimit + "," + i + ");'>" + wenigerVT + "</a>";
    } else {
        spanElement.innerHTML = txtShort + " ... <a href='javascript:setTXT(" + txtLength + "," + i + ");'>" + mehrVT + "</a>";
    }
}