// changeme
var buttongeneratorRoot = "/web/";

var objects = []
var embeds = []
var selects = []

window.onload = init;

var orgDivId = "carrouselitem1";
var carrouselDivs = ["carrouselitem1", "carrouselitem2", "carrouselitem3", "carrouselitem4"];
var tabDivs = ["carrouseltab1", "carrouseltab2", "carrouseltab3", "carrouseltab4"];

var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
var doFixPNGs = false;

function init() {
    // menubar();
    //Dropmenu.init();
    if (doFixPNGs) {
        fixHeadersPNG();
    }
}

function imgSrc(obj, needle) {
    return obj.src.substring(0, obj.src.indexOf(needle));
}

/**
 * nav
 */
function menubar() {
    var nav;
    if (nav = document.getElementById('nav')) {
        nav = nav.getElementsByTagName('IMG'), l = nav.length;
        while (l--) {
            if ('a' == nav[l].parentNode.nodeName.toLowerCase() && nav[l].src.indexOf('_sel.gif') == -1) {
                nav[l].onmouseover = function () {
                    this.src = imgSrc(this, '.gif') + '_ro.gif';
                }
                nav[l].onmouseout = function () {
                    this.src = imgSrc(this, '_ro.gif') + '.gif';
                }
            }
        }
    }
}

function showSubNav(el, imgSrc) {
  hideWindowedElements()
  if (DOM.lastChild(el).tagName == 'UL') {
    DOM.lastChild(el).style.display = 'block'
  }
  if (DOM.firstChild(DOM.firstChild(el)).tagName == 'IMG') {
    DOM.firstChild(DOM.firstChild(el)).src = imgSrc
  }
  if (DOM.firstChild(el).tagName == 'A') {
    DOM.firstChild(el).className = 'active'
  }
}

function hideSubNav(el, imgSrc) {
  showWindowedElements()
  if (DOM.lastChild(el).tagName == 'UL') {
    DOM.lastChild(el).style.display = 'none'
  }
  if (DOM.firstChild(DOM.firstChild(el)).tagName == 'IMG') {
    DOM.firstChild(DOM.firstChild(el)).src = imgSrc
  }
  if (DOM.firstChild(el).tagName == 'A') {
    DOM.firstChild(el).className = ''
  }
}

function setWindowedElements() {
	objects = document.getElementsByTagName("OBJECT")
	embeds = document.getElementsByTagName("EMBED")
	selects = document.getElementsByTagName("SELECT")
}

function hideWindowedElements() {
	video = document.getElementById('MediaPlayer');
	if (video) {
		video.style.visibility = "hidden";
	}
	/* Een beetje overdreven 
	for (var i=0; i<objects.length; i++) {
		objects[i].style.visibility = "hidden"
	}
	for (var i=0; i<embeds.length; i++) {
		embeds[i].style.visibility = "hidden"
	} */
	for (var i=0; i<selects.length; i++) {
		selects[i].style.visibility = "hidden"
	}
}

function showWindowedElements() {
	video = document.getElementById('MediaPlayer');
	if (video) {
		video.style.visibility = "visible";
	}
	/* Een beetje overdreven 
	for (var i=0; i<objects.length; i++) {
		objects[i].style.visibility = "visible"
	}
	for (var i=0; i<embeds.length; i++) {
		embeds[i].style.visibility = "visible"
	}
	*/
	for (var i=0; i<selects.length; i++) {
		selects[i].style.visibility = "visible"
	}
}

/**
 * subnav
 */
var Dropmenu = {
    init : function () {
        var subnav, l;
        if (subnav = document.getElementById('subnav')) {
            subnav = subnav.getElementsByTagName('LI'), l = subnav.length;
            while (l--) {
                if ('subnav' == subnav[l].parentNode.id) {
                    DOM.firstChild(subnav[l]).onmouseover = function () {
                        Dropmenu.show(this);
                    }
                    DOM.firstChild(subnav[l]).onmouseout  = function () {
                        Dropmenu.hide(this);
                    }
                    DOM.lastChild(subnav[l]).onmouseover = function () {
                        Dropmenu.show(this);
                    }
                    DOM.lastChild(subnav[l]).onmouseout  = function () {
                        Dropmenu.hide(this);
                    }
                }
            }
        }
    },
    show : function (elm) {
        if ('ul' == DOM.lastChild(elm.parentNode).nodeName.toLowerCase()) {
            DOM.lastChild(elm.parentNode).style.display = 'block';
            var a = DOM.firstChild(elm.parentNode);
            var img = DOM.firstChild(a);
        } else {
            var a = elm;
            var img = DOM.firstChild(a);
        }
        img.src = imgSrc(img, '.png') + '_hi.png';
        a.className = 'active';
    },
    hide : function (elm) {
        if ('ul' == DOM.lastChild(elm.parentNode).nodeName.toLowerCase()) {
            DOM.lastChild(elm.parentNode).style.display = 'none';
            var a = DOM.firstChild(elm.parentNode);
            var img = DOM.firstChild(a);
        } else {
            var a = elm;
            var img = DOM.firstChild(a);
        }
        img.src = imgSrc(img, '_hi.png') + '.png';
        a.className = '';
    }
};

/**
 * tabs
 */
var Tabs = {
    init : function (id) {
        var a, l, i;
        if ((a = this.collect(id)) && (l = a.length)) {
            while (l--) {
                if (0 != l && (i = document.getElementById(this.hash(a[l].href)))) {
                    i.style.display = 'none';
                }
                a[l].onclick = this.toggle;
            }
        }
    },
    toggle : function () {
        var elm = this, a, l, i, x;
        while (!elm.id) {
            elm = elm.parentNode;
        }
        a = Tabs.collect(elm.id), l = a.length;
        while (l--) {
            if (x = document.getElementById(Tabs.hash(a[l].href))) {
                if (a[l].href != this.href) {
                    a[l].parentNode.className = '';
                    x.style.display = 'none';
                } else {
                    a[l].parentNode.className = 'selected';
                    x.style.display = 'block';
                }
            }
        }
        return false;
    },
    collect : function (id) {
        return document.getElementById(id).getElementsByTagName('A');
    },
    hash : function (elm) {
        return elm.split('#')[1];
    }
};

var Toggle = {
    init : function (obj) {
        obj = document.getElementById(obj);
        var trigger = DOM.firstChild(obj);
        var target  = DOM.lastChild(obj);
        trigger.style.cursor = 'pointer';
        target.style.display = 'none';
        trigger.onclick = this.dispatch;
    },
    dispatch : function () {
        if ('none' == DOM.lastChild(this.parentNode).style.display) {
            DOM.lastChild(this.parentNode).style.display = '';
            this.className = 'active';
        } else {
            DOM.lastChild(this.parentNode).style.display = 'none';
            this.className = '';
        }
        return false;
    }
};

/**
 * overlay
 */
var Overlay = {
    bug: [],
    form : {},
    init : function (id) {
        var block, h;
        if (block = document.getElementById(id)) {
            this.form[id] = block;
            block.className = 'overlay';
            block.innerHTML = '<div class="popup"><div class="right">'
                + '<a href="#' + id + '" onclick="return Overlay.hide(this);">'
                + '<img src="../img/icons/close.png" alt="" /></a></div>'
                + block.innerHTML + '</div>';
        }
    },
    show : function (elm) {
        Overlay.offset(elm);
        window.onresize = function () {
            Overlay.offset(elm);
        }
        var l = Overlay.bug.length;
        while (l--) {
            Overlay.bug[l].style.position = 'static';
            Overlay.bug[l].style.overflow = 'visible';
        }
        return false;
    },
    hide : function (elm) {
        var target = Overlay.form[Tabs.hash(elm.href)];
        target.style.top = '';
        window.onresize = null;
        var l = Overlay.bug.length;
        while (l--) {
            Overlay.bug[l].style.position = '';
            Overlay.bug[l].style.overflow = '';
        }
        return false;
    },
    offset : function (elm) {
        h = document.body.offsetHeight;
        w = document.body.offsetWidth;
        var target = Overlay.form[Tabs.hash(elm.href)];
        target.style.height = h + 'px';
        target.style.width = w + 'px';
        target.style.top = '0';
        DOM.firstChild(target).style.marginTop = (
            document.documentElement.scrollTop
            + ((this.viewportHeight() / 2) - (DOM.firstChild(target).offsetHeight / 2))
            ) + 'px';
    },
    viewportHeight : function (){
        return (self.innerHeight) ? self.innerHeight
        : (document.documentElement && document.documentElement.clientHeight)
        ? document.documentElement.clientHeight
        : (document.body) ? document.body.clientHeight : null;
    },
    fix : function () {
   		setWindowedElements();
        var subnav = document.getElementById('subnav');
  for (var i = 0, l = subnav.childNodes.length; i < l; i++) {
            if (subnav.childNodes[i].tagName == "LI") {
                this.bug.push(subnav.childNodes[i]);
            }
  }
  var divs = document.getElementsByTagName("DIV");
  for (var i = 0, l = divs.length; i < l; i++) {
            if (divs[i].className == "infocentra" || divs[i].className == "meta") {
                this.bug.push(divs[i]);
            }
  }
    }
}

/**
 * whitespace
 */
var DOM = {
    firstChild : function (obj) {
        var node = obj.firstChild;
        while ('1' != node.nodeType) {
            node = node.nextSibling;
        }
        return node;
    },
    lastChild : function (obj) {
        var node = obj.lastChild;
        while ('1' != node.nodeType) {
            node = node.previousSibling;
        }
        return node;
    }
};

function showCarrouselItem(newDivId, tabId) {
    var newDiv = document.getElementById(newDivId);
    var orgDiv = document.getElementById(orgDivId);
    var div = null, elm;
    for (var i=0; i<carrouselDivs.length; i++) {
        div = document.getElementById(carrouselDivs[i]);
        if (div != null) {
        setOpacity(div, 0);
        div.style.zIndex = 0;
    }
    }
    for (var i=0; i<tabDivs.length; i++) {
        elm = document.getElementById(tabDivs[i]);
        if (elm != null) {
        elm.className = elm.className.replace(' selected', ' ');
    }
    }
    newDiv.style.zIndex = 1;
    setOpacity(orgDiv, 10);
    fadeDivOut(orgDiv, 0.5, function(){fadeDivIn(newDiv, 0.5)});
    orgDivId = newDivId;
    document.getElementById(tabId).className += " selected";
    
    // Solve weird IE behavior
		if (navigator.appName == "Microsoft Internet Explorer") {
			offsetHeight = document.getElementById('onderwerpenBox').offsetHeight
			document.getElementById('onderwerpenBox').style.height = offsetHeight;
		}

}

function fadeDivOut(el, duration, callback){
    var fadeOut = new YAHOO.util.Anim(el, {opacity: {to: 0}}, 1, YAHOO.util.Easing.easeOut);
    fadeOut.duration = duration;
    if(callback){
        fadeOut.onComplete.subscribe(callback);
    }
    fadeOut.animate();
}

function fadeDivIn(el, duration){
    var fadeIn = new YAHOO.util.Anim(el, {opacity: {to: 1}}, 0, YAHOO.util.Easing.easeOut);
    fadeIn.duration = duration;
    fadeIn.animate();
}

function setOpacity(el, value) {
    el.style.opacity = value/10;
    el.style.filter = 'alpha(opacity=' + value*10 + ')';
}

function fixHeadersPNG() {
    var imgs = getElementsByClassName("headerpng");
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].style.width = imgs[i].width + "px";
        imgs[i].style.visibility = "visible";
        imgs[i].style.height = imgs[i].height + "px";
        imgs[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + escapeSpecialChars(imgs[i].src) + "', sizingMethod='crop');";
        imgs[i].src = "/static/static_zibb4/images/trans.gif";
    }
}

function escapeSpecialChars(str) {
    str = str.replace(/%25/g, "%2525");
    str = str.replace(/%23/g, "%2523");
    str = str.replace(/%26/g, "%2526");
    str = str.replace(/\)/g, "%29");
    str = str.replace(/\'/g, "%27");
    str = str.replace(/%2B/g, "%252B");
    return str;
}


function stripImgUrl(imgUrl) {
    var x1 = imgUrl.substring(5, imgUrl.length);
    return x1.substring(0, x1.length - 2);
}

function getElementsByClassName(className, tag, elm) {
    var testClass = new RegExp("(^.*|\s)" + className + "(\s|.*$)");
    var tag = tag || "*";
    var elm = elm || document;
    var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
    var returnElements = [];
    var current;
    var length = elements.length;
    for(var i=0; i<length; i++){
        current = elements[i];
        if(testClass.test(current.className)){
            returnElements.push(current);
        }
    }
    return returnElements;
}

function getStyle(x,styleProp) {
    if(!x){
        return false;
    }
    if(x.currentStyle){
        var y = x.currentStyle[styleProp];
    } else if(window.getComputedStyle){
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    }
    return y;
}

function replaceHeaders() {

	doFixPNGs = (version >= 5.5) && (version < 7) && (typeof document.body.filters != 'undefined');

    if (!document.getElementsByTagName || !document.createElement) { // For old browsers
        return;
    }
    var h1Headers = document.getElementsByTagName("H1");
    h2Headers = document.getElementsByTagName("H2");
    var src, i;
    i = h1Headers.length;
    while (i--) {
		if (h1Headers[i].firstChild) {
			switch (h1Headers[i].className) {
				case "starters":
					src = "starters";
					break;
				case "starters2":
					src = "starters2";
					break;
				case "extra":
					src = "extra";
					break;
				case "article":
					if (document.getElementById('user-input')) { //Show only when user-input block is shown
						src = "1kort";
					} else {
						src = "1";
					}
					break;
				default:
					src = "1";
			}
			if (src) {
				alterHeaderTag(h1Headers[i], src, doFixPNGs);
			}
		}
    }
    i = h2Headers.length;
    while (i--) {
		if (h2Headers[i].firstChild) {
			switch (h2Headers[i].className) {
				case "carrouselheader":
					src = "carrousel";
					break;
				case "bestelauto":
					src = "bestelauto";
					break;
				case "small-margin":
				case "feature":
					src = "feature";
					break;
				case "columnist":
					src = "columnist";
					break;
				case "subheader":
					src = "";
					break;
				case "fotoberichtheader":
					src="fotobericht"
					break;
				default:
					src = "2";
			}
			if (src) {
				alterHeaderTag(h2Headers[i], src, doFixPNGs);
			}
		}
    }
}

function alterHeaderTag(tag, src, doFixPNGs) {
	if (tag.firstChild.nodeValue) { // no link
		tag.innerHTML = headerTag(src, tag.firstChild.nodeValue, doFixPNGs);
	} else if (tag.firstChild.href) {
		tag.innerHTML = '<a href="' + tag.firstChild.href + '" title="' + tag.firstChild.title + '">' + headerTag(src, tag.firstChild.innerHTML, doFixPNGs) + '</a>';
	}
}

function headerTag(src, alt, doFixPNGs) {
	var returnstr = '<img class="headerpng" '
	returnstr += 'src="' + buttongeneratorRoot + 'zibbheader' + src + '?text=' + encodeURIComponent(alt) + '" ';
	if (doFixPNGs) returnstr += 'style="visibility:hidden;" ';
	returnstr += 'alt="' + alt + '" title="" />';
	return returnstr;
}

function hideBlock(id) {
    var layer1;
    if (document.layers) {
        layer1 = document.layers[id]
            layer1.visibility = "hide";
    } else if (document.all) {
        layer1 = document.all[id]
            layer1.style.display="none";
    } else if(document.getElementById) {
        layer1 = document.getElementById(id);
        layer1.style.display="none";
        layer1.style.visibility = "hidden";
    }
}

function toggleRating(el) {
    var parent = el.parentNode;
    for (var i=0; i<el.parentNode.childNodes.length; i++) {
        if (el.parentNode.childNodes[i].className == "rating-numbers") {
            if (el.parentNode.childNodes[i].style.display == "block") {
                el.parentNode.childNodes[i].style.display = "none";
                el.parentNode.className = "rate-reaction";
            } else {
                el.parentNode.childNodes[i].style.display = "block";
                el.parentNode.className = "activeoption";
            }
        }
    }
}