/* Attaches mouseover events to images based on class 'rollover' */
function initMouseovers() {
    if (!document.getElementById) return;
    var elements = getElementsByClassName('rollover', 'img');
    if (elements.length < 0) return;
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].addEventListener) {
            elements[i].addEventListener('mouseover', function(event){changeImage(event);}, false);
            elements[i].addEventListener('mouseout', function(event){resetImage(event);}, false);
        } else if (elements[i].attachEvent) {
            elements[i].attachEvent('onmouseover', function(event){changeImage(event);});
            elements[i].attachEvent('onmouseout', function(event){resetImage(event);});
        }
    }
}

/* Attaches click events to the 'boom' */
function initBoom() {
    var bomen = getElementsByClassName('boom', 'ul');
    if (bomen.length < 0) return;
    for (var i = 0; i < bomen.length; i++) {
        var uls = bomen[i].getElementsByTagName('ul');
        var lis = bomen[i].getElementsByTagName('a');
        for (var j = 0; j < uls.length; j++) {
            uls[j].className = "closed";
        }
        for (var k = 0; k < lis.length; k++) {
            if (lis[k].addEventListener) {
                lis[k].addEventListener('click', function(event){toggleBoom(event);}, false);
            } else if (lis[k].attachEvent) {
                lis[k].attachEvent('onclick', function(event){toggleBoom(event);});
            }
        }        
    }
}

/* Attaches click events to a 'faq' */
function initFAQ() {
    var faqs = getElementsByClassName('faq', 'dl');
    if (faqs.length < 0) return;
    for (var i = 0; i < faqs.length; i++) {
        var dts = faqs[i].getElementsByTagName('dt');
        var dds = faqs[i].getElementsByTagName('dd');
        for (var j = 0; j < dts.length; j++) {
            dts[j].className += " closed";
            if (dts[j].addEventListener) {
                dts[j].addEventListener('click', function(event){toggleFAQ(event);}, false);
            } else if (dts[j].attachEvent) {
                dts[j].attachEvent('onclick', function(event){toggleFAQ(event);});
            }
        }
        for (var j = 0; j < dds.length; j++) {
            dds[j].className = "closed";
        }
    }
}

/* Attaches mouseovers to preview divs based on class 'clippreview' */
function initPreviews() {
    if (!document.getElementById) return;
    var elements = getElementsByClassName('clippreview', 'a');
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].addEventListener) {
            elements[i].addEventListener('mouseover', function(event){showBox(event);}, false);
            elements[i].addEventListener('mouseout', function(event){showBox(event);}, false);
        } else if (elements[i].attachEvent) {
            elements[i].attachEvent('onmouseover', function(event){showBox(event);});
            elements[i].attachEvent('onmouseout', function(event){showBox(event);});
        }
    }
}

/* Attaches mouseovers to help divs based on a class 'cliphelp' */
function initHelp() {
    if (!document.getElementById) return;
    
    var cliphelps = getElementsByClassName('cliphelp', 'img');
    for (var i = 0; i < cliphelps.length; i++) {
        if (cliphelps[i].addEventListener) {
            cliphelps[i].addEventListener('click', function(event){showHelp(event);return false;}, false);
        } else if (cliphelps[i].attachEvent) {
            cliphelps[i].attachEvent('onclick', function(event){showHelp(event);return false;});
        }
    }
}

/* Attaches onchange events to filter on page 'alle clips' */
function initFilter() {
    if (!document.getElementById('filterform')) return;
    var filterf = document.getElementById('filterform');
    var selects = filterf.getElementsByTagName('select');
    for (var i = 0; i < selects.length; i++) {
        submit = function(event) { filterf.submit(); }
        selects[i].onchange = submit;
    }
}

/* Attaches onclick event to input field on page 'clip' */
function initCopyLink() {
    if (!getElementsByClassName('copyvalue', 'input')) return;
    var inputs = getElementsByClassName('copyvalue', 'input');
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        copylink = function(event) { selectInput(event); }
        inputs[i].onclick = copylink;
    }
}

/* Temporary function to open Flash for Kiko */
function openKiko() {
    var links = [];
    links = getElementsByClassName('openKiko', 'a');
    for (var i = 0; i < links.length; i++) {
        var windowAttributes = 'width=749,height=543,left=120,top=120,scrollbars=no,location=no';
        popup = function() { window.open(this.href,'Kiko',windowAttributes); return false; };
        links[i].onclick= popup;
        links[i].onkeypress = popup;
    }
}

function openPopup() {
    var links = [];
    links = getElementsByClassName('bbpopup', 'a');
    for (var i = 0; i < links.length; i++) {
        var windowAttributes = 'width=740,height=520,left=120,top=120,scrollbars=no,location=no';
        popup = function() { 
            openWindow = window.open(this.href,'MiniPlayer',windowAttributes); 
            openWindow.focus(); 
            return false;
        };
        links[i].onclick= popup;
        links[i].onkeypress = popup;
    }
    dblinks = getElementsByClassName('bbdigibord', 'a');
    for (var i = 0; i < dblinks.length; i++) {
        var windowAttributes = 'width=820,height=614,left=0,top=0,scrollbars=yes,location=no';
        popup = function() { 
            openWindow = window.open(this.href,'DigibordClip',windowAttributes); 
            openWindow.focus(); 
            return false;
        };
        dblinks[i].onclick= popup;
        dblinks[i].onkeypress = popup;
    }
}

/* Onload function loads some scripts */
window.onload = function() {
    initMouseovers();
    initBoom();
    initFAQ();
    initPreviews();
    initFilter();
    initHelp();
    initCopyLink();
    openKiko();
    openPopup();
}

/* 
 * Displays or hides the 'dd' based on a click event on its upper 'dt'. 
 * The classname of the 'dt' corresponds with the id of the 'dd' to open.
 * @param ev onclick event on the 'dt' with a certain class
 */
function toggleFAQ(ev) {
    var dtEl = findElement(ev);
    var classname = dtEl.className;
    var vrg = classname.substring(classname.indexOf('vrg'), classname.indexOf(" "));
    if (!vrg) classname.substring(classname.indexOf('vrg'), classname.length);
    var dlEl = document.getElementById(vrg);    // the dl element to open or close

    if (classname) {
        if (dlEl.className.indexOf('closed') > -1) {
            classname = classname.replace('closed', 'open');
            dtEl.className = classname;
            dlEl.className = "open";
        } else {
            classname = classname.replace('open', 'closed');
            dtEl.className = classname;
            dlEl.className = "closed";
        }
    }
    return false;
}

/*
 * Changes the image to another. 
 * @param ev    event
 */
function changeImage(ev) {
    var el = findElement(ev);
    var img = el.src;
    var part1 = img.substring(0, img.lastIndexOf('.'));
    var part2  = img.substring(img.lastIndexOf('.'), img.length);
    el.src = part1 + "_mo" + part2;
}

/*
 * Resets the image to its previous state 
 * @param ev    event
 */
function resetImage(ev) {
    var el = findElement(ev);
    var img = el.src;
    var part1 = img.substr(0, img.lastIndexOf('.') - 3);
    var part2  = img.substring(img.lastIndexOf('.'), img.length);
    el.src = part1 + part2;
}

/* Shows a div (more or less) at the current cursor position like a tooltip.
 * Used on clippage for helpbuttons.
 * @param event Window event, f.e. mouseover, onclick etc.
 */
function showHelp(event) {
    if (!document.getElementById) return;
    
    // get the id of the clippreview
    var el = findElement(event);
    var clipClass = el.className;   // last className (after whitespace) is same as id of div to show
    var helpId = clipClass.substring(clipClass.indexOf(" ") + 1, clipClass.length) // should make f.e. 'help01'

    var elpos = elPosition(el);
    var myx = 0;
    var myy = 0;
        
    // not exactly at cursor position
    myx = elpos.x + 24;
    myy = elpos.y + 4;
    
    var parentObj = document.body;
    var parentDoc = parentObj.ownerDocument || parentObj.document;
    var showId = "show_" + helpId;
    if (document.getElementById(showId)) {
        toggle(showId);
    } else {
        // NOTE: two steps to avoid "flashing" in gecko
        var emptyDiv = parentDoc.createElement("div");
        var help = parentObj.appendChild(emptyDiv);
        // attach events to new div
        if (help.addEventListener) {
            help.addEventListener('click', function(event){hidePreview(event);return false;},false);
        } else if (help.attachEvent) {
            help.attachEvent('onclick', function(event){hidePreview(event);return false;});
        }
        
        help.innerHTML = document.getElementById(helpId).innerHTML;
        help.style.position = "absolute";
        help.style.left = myx + "px";
        help.style.top = myy + "px";
        help.style.display = "";
        help.style.visibility = "visible";
        help.id = showId;
        help.className = "help";
    }
    return false;
}

/* Shows a div (more or less) at the current cursor position like a tooltip 
 * and gives it the classname 'prevshown' to be specified in css
 * @param event Window event, f.e. mouseover, onclick etc.
 */
function showBox(event) {
    if (!document.getElementById) return;
    
    // get the id of the clippreview
    var linkEl = findElement(event);
    var clipClass = linkEl.className;   // we're looking for something like 's15908'
    var previewId = clipClass.substring(clipClass.indexOf("s") + 1, clipClass.length) // should make '15908'
    previewId = "preview" + previewId;   // f.e. 'prev6787' (= prev + nodenr. clip)

    var elpos = elPosition(linkEl);
    var myx = 0;
    var myy = 0;
        
    // not exactly at cursor position
    myx = elpos.x + 200;
    myy = elpos.y;
    
    var parentObj = document.body;
    var parentDoc = parentObj.ownerDocument || parentObj.document;
    var showId = "show_" + previewId;
    if (document.getElementById(showId)) {
        toggle(showId);
    } else {
        // NOTE: two steps to avoid "flashing" in gecko
        var emptyDiv = parentDoc.createElement("div");
        var preview = parentObj.appendChild(emptyDiv);
        
        showPrev = function(event) { showPreview(event); return false; }
        preview.onmouseover = showPrev;
        hidePrev = function(event) { hidePreview(event); return false; }
        preview.onmouseout = hidePrev;
        
        preview.innerHTML = document.getElementById(previewId).innerHTML;
        preview.style.position = "absolute";
        preview.style.left = myx + "px";
        preview.style.top = myy + "px";
        preview.style.display = "";
        preview.style.visibility = "visible";
        preview.id = showId;
        preview.className = "previewshown";

    }
}

function showPreview(event) {
    var el = findElement(event);
    while (el.tagName.toLowerCase().indexOf('div') < 0) {
        el = el.parentNode;
    }
    var div = el;
    div.style.display = "";
}


function hidePreview(event) {
    var el = findElement(event);
    while (el.tagName.toLowerCase().indexOf('div') < 0) {
        el = el.parentNode;
    }
    var div = el;
    div.style.display = "none";
}

/* The cursor position based on an event */
function cursorPosition(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    } else {    // MSIE
        var de = document.documentElement;
        var b = document.body;
        cursor.x = e.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
        cursor.y = e.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }
    return cursor;
}

/* The absolute position of an element */
function elPosition(obj) {
    var elpos = {x:0, y:0};
    if (obj.offsetParent) {
        elpos.x = obj.offsetLeft;
        elpos.y = obj.offsetTop;
        while (obj = obj.offsetParent) {
            elpos.x += obj.offsetLeft;
            elpos.y += obj.offsetTop;
        }
    }
    return elpos;
}

/*
 * Toggles the visibility of an html element 
 * @param targetId  The id of an html element
 */
function toggle(targetId){
  if (document.getElementById) {
        target = document.getElementById(targetId);
        if (target.style.display == "none"){
            target.style.display = "";
        } else {
            target.style.display = "none";
        }
    }
}

/*
 * More or less like getElementsById but for classes
 * @param classN    name of class to look for
 * @param el        element in which classes appear
*/
function getElementsByClassName(classN, el) {
    var childs, elements = [];
    var childs = el ? document.getElementsByTagName(el) : document.getElementsByTagName('*');
    var pattern = new RegExp("(^|\\s)" + classN + "(\\s|$)");
    for (var i = 0; i < childs.length; i++) {
        if (pattern.test(childs[i].className)) elements.push(childs[i]);
    }
    return elements;
}

/* Finds the crossbrowser HTMLElement that recieves an event */
function findElement(ev) {
    return ev.srcElement || ev.target;
}

/* 
 * Displays or hides an 'ul' based on a click event on its parent 'li'. 
 * The classname of the parent 'a' corresponds with the id of the 'ul' to open.
 * @param ev onclick event on a parent 'a' with a certain class
 */
function toggleBoom(ev) {
    var el = findElement(ev);
    var parentEl = el.parentNode;
    var className = el.className;
    var pos = parentEl.className.indexOf('open');
    
    if (pos > -1) {
        parentEl.className = parentEl.className.substring(0, pos);
    } else if (parentEl.getElementsByTagName('li').length > 0) {    // should have children
        parentEl.className += ' open';
    }
    
    if (className) {
        var ulEl = document.getElementById(className);  // the ul to open or close
        if (ulEl.className.indexOf('closed') > -1) {
            ulEl.className = "open";
        } else {
            ulEl.className = "closed";
        }
    }
}


/* Script to add page to bookmarks/favorites */
function bookmarkPage(title, url) {
    var ua = navigator.userAgent.toLowerCase();
    var isKonq = (ua.indexOf('konqueror')!=-1);
    var isSafari = (ua.indexOf('webkit')!=-1);
    var isMac = (ua.indexOf('mac')!=-1);
    var buttonStr = isMac ? 'Command/Cmd' : 'CTRL';

    if (window.sidebar) {   // Firefox
        window.sidebar.addPanel(title, url, "");
    } else if (window.opera && window.print) {    // Opera
        var elem = document.createElement('a');
        elem.setAttribute('href',url);
        elem.setAttribute('title',title);
        elem.setAttribute('rel','sidebar');
        elem.click();
    } else if (document.all) {    // MSIE
        window.external.AddFavorite(url, title);
    } else if (isKonq) { 
        alert('Kies CTRL + B om een bookmark te maken van deze pagina .');
    } else if (isSafari && !isMac) { // Safari Windows
        alert('Kies ' + buttonStr + ' + D om een bookmark te maken van deze pagina.');
    } else if (!window.print || isMac) { // IE5/Mac and Safari 1.0
        alert('Kies Command/Cmd + D om een bookmark te maken van deze pagina.');    
    } else {
        alert('Sorry, je kunt alleen met de hand een bookmark van deze pagina maken.');
    }
}

function selectInput(ev) {
    var input = findElement(ev);
    input.focus();
    input.select();
}