function hiliteBlock(name, skinColor, textColor){
    window.addEvent('domready', function() {
        var trigger = $(name);
        var title = trigger.getElement('.navAlineaTitel');
        var linkKleurTrans = trigger.getElements('.navLinks a');
        var alinea = trigger.getElement('.navAlinea');
        var info = trigger.getElement('.navInfo');
        
        
        var titleWidth = title.getSize().x; 
        //window.alert('1: '+titleWidth);
        titleWidth += (title.innerHTML.length)*6;
        //window.alert('2: '+title.innerHTML.length);

        var all = new Fx.Elements(title, alinea, info);
        
        var slideAlinea = new Fx.Slide(alinea, {duration:300, wait:false});
        var slideInfo = new Fx.Slide(info, {duration:300, wait:false});
        var fx = new Fx.Morph(title, {duration:600, wait:false});
        
        var fx_linkjes = new Fx.Elements(linkKleurTrans, {duration:800, wait:false});
        
        slideInfo.hide();
        
        var o = {};
        linkKleurTrans.each(function(skin, i){
            o[i] = {'color': skinColor};
        });
        
        title.addEvent('mouseenter', function(e){
            e = new Event(e);
            slideAlinea.slideOut();
            slideInfo.slideIn();
            fx.start({
                /*'letter-spacing': '10px',*/
                /*'margin-left': '-'+titleWidth+'px',*/
                'color': textColor
                
            });
            
            fx_linkjes.start(o);
            
            e.stop();
        });
        
        var b = {};
        linkKleurTrans.each(function(skin, i){
            b[i] = {'color': textColor};
        });
        
        trigger.addEvent('mouseleave', function(e){
            e = new Event(e);
            slideAlinea.slideIn();
            slideInfo.slideOut();
            fx.start({
                /*'margin-left': '0px',*/
                /*'letter-spacing': '0px',*/
                'color': skinColor
            });
            
            fx_linkjes.start(b);
            e.stop();
        });
        
    });
}


function hiliteBlock2(name){
    window.addEvent('domready', function() {
        var trigger = $(name);
        var title = trigger.getElement('.navAlineaTitel');
    
        var alinea = trigger.getElement('.navAlinea');
        var info = trigger.getElement('.navInfo');
        
        var titleWidth = (title.getSize()).x; 
        //window.alert('1: '+titleWidth);
        titleWidth += (title.innerHTML.length)*6;
        //window.alert('2: '+title.innerHTML.length);
        
        var all = new Fx.Elements(title, alinea, info);
        
        var slideAlinea = new Fx.Slide(alinea, {duration:300, wait:false});
        var slideInfo = new Fx.Slide(info, {duration:300, wait:false});
        var fx = new Fx.Morph(title, {duration:600, wait:false});
        
        slideInfo.hide();
        
        $(title).addEvent('mouseenter', function(e){
            e = new Event(e);
            slideAlinea.slideOut();
            slideInfo.slideIn();
            
            fx.start({
                /*'letter-spacing': '6px',*/
                /*'margin-left': '-'+titleWidth+'px',*/
            });
            
            
            
            e.stop();
        });
        
        $(trigger).addEvent('mouseleave', function(e){
            e = new Event(e);
            slideAlinea.slideIn();
            slideInfo.slideOut();
            fx.start({
                /*'margin-left': '0px',
                'letter-spacing': '0px',*/
            });
            e.stop();
        });
        
    });
}

function hiliteBlock3(name, skinColor, textColor){
    window.addEvent('domready', function() {
        var trigger = $(name);
        var title = trigger.getElement('.navAlineaTitel');
        var links_cont = trigger.getElement('.navLinks');
        var links = trigger.getElements('.navLinks a');
        var alinea = trigger.getElement('.navAlinea');
        var info = trigger.getElement('.navInfo');
    
        var infoHeight = info.getSize().y; 
        var alineaHeight = alinea.getSize().y;
        
        var fx1 = new Fx.Elements(new Array(title, alinea, info, links_cont),{duration:300, wait:false});
        var fx2 = new Fx.Elements(links,{duration:800, wait:false});       
        
        var focus_in = {};
            focus_in[0] = {'color': textColor};
            focus_in[1] = {'height': 0};
            focus_in[2] = {'height': infoHeight};
            focus_in[3] = {'color': skinColor};
        
        var focus_out = {};
            focus_out[0] = {'color': skinColor};
            focus_out[1] = {'height': alineaHeight};
            focus_out[2] = {'height': 0};
            focus_out[3] = {'color': textColor};
            
        var links_in = {};
        links.each(function(skin, i){
            links_in[i] = {'color': skinColor};
        });
        
        var links_out = {};
        links.each(function(skin, i){
            links_out[i] = {'color': textColor};
        });
            
        info.setStyle('height', 0);
        info.setStyle('overflow', 'hidden');
        alinea.setStyle('overflow', 'hidden');
        
        $(title).addEvent('mouseenter', function(e){
            e = new Event(e);       
            //fx1.start(focus_in).chain(fx2.start(links_in));
            fx1.start(focus_in);
            e.stop();
        });
        
        
        $(trigger).addEvent('mouseleave', function(e){
            e = new Event(e);       
            //fx1.start(focus_out).chain(fx2.start(links_out));
            fx1.start(focus_out)
            e.stop();
        });
        
    });
}

function hiliteBlock4(name, skinColor, textColor){
    window.addEvent('domready', function() {
        var trigger = $(name);
        var title = trigger.getElement('.navAlineaTitel');
        var alinea = trigger.getElement('.navAlinea');
        var info = trigger.getElement('.navInfo');
        
        var infoHeight = info.getSize().y; 
        var alineaHeight = alinea.getSize().y;
        
        var fx1 = new Fx.Elements(new Array(title, alinea, info, links_cont),{duration:300, wait:false});
        //var fx2 = new Fx.Elements(links,{duration:800, wait:false});       
        
        var focus_in = {};
            focus_in[0] = {'color': textColor};
            focus_in[1] = {'height': 0};
            focus_in[2] = {'height': infoHeight};
            focus_in[3] = {'color': skinColor};
        
        var focus_out = {};
            focus_out[0] = {'color': skinColor};
            focus_out[1] = {'height': alineaHeight};
            focus_out[2] = {'height': 0};
            focus_out[3] = {'color': textColor};
        /*
        var links_in = {};
        links.each(function(skin, i){
            links_in[i] = {'color': skinColor};
        });
        
        var links_out = {};
        links.each(function(skin, i){
            links_out[i] = {'color': textColor};
        });
        */
            
        info.setStyle('height', 0);
        info.setStyle('overflow', 'hidden');
        alinea.setStyle('overflow', 'hidden');
        
        $(title).addEvent('mouseenter', function(e){
            e = new Event(e);       
            //fx1.start(focus_in).chain(fx2.start(links_in));
            fx1.start(focus_in);
            e.stop();
        });
        
        
        $(trigger).addEvent('mouseleave', function(e){
            e = new Event(e);       
            //fx1.start(focus_out).chain(fx2.start(links_out));
            fx1.start(focus_out);
            e.stop();
        });
        
    });
}


function initSkinbar(){
    var szNormal = 16, szSmall = 12, szFull = 44, hNormal = 16, hFull = 30;
 
    var skins = $$("#skinbar .skin");
    var fx = new Fx.Elements(skins, {wait: false, duration: 200, transition: Fx.Transitions.Cubic.easeOut});
    skins.each(function(skin, i) {
        skin.addEvent("mouseenter", function(event) {
            var o = {};
            //o[i] = {width: [skin.getStyle("width").toInt(), szFull], height: [skin.getStyle("height").toInt(), hFull]}
            o[i] = {width: [skin.getStyle("width").toInt(), szFull]}
            skins.each(function(other, j) {
                if(i != j) {
                    var w = other.getStyle("width").toInt();
                    //var h = other.getStyle("height").toInt();
                    //if(w != szSmall || h != hFull) o[j] = {width: [w, szSmall], height: [h, hFull]};
                    if(w != szSmall) o[j] = {width: [w, szSmall]};
                }
            });
            fx.start(o);
        });
        skin.addEvent("click", function(){
            //window.alert(skin.id);
            var ref = location.href;
            var id = ref.indexOf('?skin');
            if(id > -1) ref = ref.substr(0, id);
            location.href = ref+'?skin='+skin.id ;
        });
    });
     
    $("skinbar").addEvent("mouseleave", function(event) {
        var o = {};
        skins.each(function(skin, i) {
            //o[i] = {width: [skin.getStyle("width").toInt(), szNormal], height: [skin.getStyle("height").toInt(),hNormal]}
            o[i] = {width: [skin.getStyle("width").toInt(), szNormal]}
        });
        fx.start(o);
    })
}


function initSchemeGrid(){
    window.addEvent('domready', function() {
        /* maak een lijst met alle items die tot de groep gridBLock of gridTab behoren (via classenamen).*/
         var schemeBlocks = $$('.schemeBlock');
         var textPaneList = $$('.animated');
         var closeAllPanesList = $$('.scheme_textPane');
         var textPaneBackground = $('scheme_background4TextPane');
         
        var slide = new Fx.Elements(textPaneList, {wait: false, duration: 500});
        var backgroundSlide = new Fx.Tween('scheme_background4TextPane',{property:'left', wait: false, duration: 500});
        var slowSlide = new Fx.Elements(closeAllPanesList, {wait: false, duration: 1600});
        
        
        /* add mouse event voor iedere block (eerste loop), en vervolgens vanuit iedere block een opdracht voor opnieuw iedere block (hence de tweede loop)*/ 
        schemeBlocks.each(function(currentSchemeBlock, i) {
            currentSchemeBlock.addEvent("mouseenter", function(event){
                schemeBlocks.each(function(currentSchemeBlockState, j){
                    if(i == j){
                        currentSchemeBlockState.addClass("active");
                        fixPNG(currentSchemeBlockState);
                        
                    }else{
                        currentSchemeBlockState.removeClass("active");
                    }
                        
                });
                
            
                
                //add textPane animatie
                animateTextPane(textPaneList, currentSchemeBlock, slide, slowSlide);
                
                //add background animatie
                //window.alert(textPaneBackground.getStyle("left").toInt());
                if(textPaneBackground.getStyle("left").toInt() < 0){
                    backgroundSlide.start(textPaneBackground.getStyle("left").toInt(), 0);    
                }
            });
        });
        
        
        
        /* add mouseleave actie, waarbij alle items terug actief/gesloten worden weergegeven*/
        var schemeContainer = $('schemeWrapper');
        
        schemeContainer.addEvent("mouseleave", function(event){
            //close all blocks
            schemeBlocks.each(function(deActivateAll, j){
                deActivateAll.removeClass("active");
            });
            
            
            //close textpane
            var p = {};
            closeAllPanesList.each(function(closeAllPanes, l){
                if(closeAllPanes.getStyle("left").toInt() > -500){
                    p[l] = {left: [closeAllPanes.getStyle("left").toInt(), -500]};
                }
            });
            slide.cancel();
            slowSlide.start(p);
        });
        
        
    });
}


function initServiceGrid(){
    window.addEvent('domready', function() {
        /* maak een lijst met alle items die tot de groep gridBLock of gridTab behoren (via classenamen).*/
         var gridBlocks = $$('.gridBlock');
         var gridTabs = $$('.gridTab');
         var textPaneList = $$('.animated');
         var closeAllPanesList = $$('.textPane');
         var textPaneBackground = $('background4TextPane');
         
         //window.alert(textPaneList.length);
         /*var listeningBlocks = new Array();
         var listeningTabs = new Array();*/
         
        /*gridTabs.each(function(allTabs, k){
            listeningBlocks[allTabs.getProperty("id")] = $$('.'+allTabs.getProperty("id"));
        });
        gridBlocks.each(function(allBlocks, k){
            listeningTabs[allBlocks.getProperty("id")] = $$('.'+allBlocks.getProperty("id"));
        });*/
        
        /*var textPaneTrans = new Fx.Style(textPaneList, 'width', {duration:200});*/
        var slide = new Fx.Elements(textPaneList, {wait: false, duration: 500});
        var backgroundSlide = new Fx.Tween('background4TextPane', {property: 'left',wait: false, duration: 500});
        var slowSlide = new Fx.Elements(closeAllPanesList, {wait: false, duration: 1600});
        
        
        /* add mouse event voor iedere block (eerste loop), en vervolgens vanuit iedere block een opdracht voor opnieuw iedere block (hence de tweede loop)*/ 
        gridBlocks.each(function(currentGridBlock, i) {
            currentGridBlock.addEvent("mouseenter", function(event){
                gridBlocks.each(function(currentGridBlockState, j){
                    if(i == j){
                        currentGridBlockState.addClass("active");
                        fixPNG(currentGridBlockState);
                        
                    }else{
                        currentGridBlockState.removeClass("active");
                    }
                        
                });
                
                gridTabs.each(function(currentTab, l){
                    if(currentTab.hasClass(currentGridBlock.getProperty('id'))){
                        currentTab.addClass("active");
                        fixPNG(currentTab);
                    } else {
                        currentTab.removeClass("active");
                    }
                });
                
                //add textPane animatie
                animateTextPane(textPaneList, currentGridBlock, slide, slowSlide);
                
                //add background animatie
                //window.alert(textPaneBackground.getStyle("left").toInt());
                if(textPaneBackground.getStyle("left").toInt() < 0){
                    backgroundSlide.start(textPaneBackground.getStyle("left").toInt(), 0);    
                }
            });
        });
        
        
        /* add mouse event voor alle labels*/ 
        gridTabs.each(function(currentGridTab, i) {
            currentGridTab.addEvent("mouseenter", function(event){
                gridTabs.each(function(currentGridTabState, j){
                    if(i == j){
                        currentGridTabState.addClass("active");
                        fixPNG(currentGridTabState);
                    }else{
                        currentGridTabState.removeClass("active");
                    }
                        
                });
                gridBlocks.each(function(currentBlock, l){
                    if(currentBlock.hasClass(currentGridTab.getProperty('id'))){
                        currentBlock.addClass("active");
                        fixPNG(currentBlock);
                    } else {
                        currentBlock.removeClass("active");
                    }
                });
                
                //text pane animatie
                animateTextPane(textPaneList, currentGridTab, slide, slowSlide);
                
                //add background animatie
                //window.alert(textPaneBackground.getStyle("left").toInt());
                if(textPaneBackground.getStyle("left").toInt() < 0){
                    backgroundSlide.start(textPaneBackground.getStyle("left").toInt(), 0);    
                }
            });
        });
        
        
        
        
        /* add mouseleave actie, waarbij alle items terug actief/gesloten worden weergegeven*/
        var gridContainer = $('gridWrapper');
        
        gridContainer.addEvent("mouseleave", function(event){
            //activate all blocks
            gridBlocks.each(function(activateAll, j){
                activateAll.addClass("active");
            });
            
            //close all tabs
            gridTabs.each(function(deActivateAllTabs, k){
                deActivateAllTabs.removeClass("active");  
            });
            
            
            //close textpane
            var p = {};
            closeAllPanesList.each(function(closeAllPanes, l){
                if(closeAllPanes.getStyle("left").toInt() > -500){
                    p[l] = {left: [closeAllPanes.getStyle("left").toInt(), -500]};
                }
            });
            slide.cancel();
            slowSlide.start(p);
        });
        
        
    });
}


function animateTextPane(list, currentItem, fx, stopfx) {
    var o = {};
    list.each(function(textPane, m){
        //window.alert(textPane.getProperty('id') + ' trigger: ' + currentGridBlock.getProperty('id'));
        
        if(textPane.hasClass(currentItem.getProperty('id'))){
            if(textPane.getStyle("left").toInt() < 0){
                //textPane -> animatie van 0 naar 100
                //textPaneSlide[i].toggle();
                o[m] = {left: [textPane.getStyle("left").toInt(), 0]};
                //textPaneTrans.start(textPane.getSize().size.x, 250);
            }
            //else o[m] = {width: [textPane.getStyle("width").toInt(), textPane.getStyle("width").toInt()]};
        }else{
            if(textPane.getStyle("left").toInt() > -500){
                //textPane -> animatie van 100 naar 0
                //textPaneSlide[i].toggle();
                o[m] = {left: [textPane.getStyle("left").toInt(), -500]};
                //textPaneTrans.start(textPane.getSize().size.x, 0);
            }
        }
        
    });
    stopfx.cancel();
    fx.start(o);
}


function var_dump(obj) {
   if(typeof obj == "object") {
      //return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;
      var rs = "Type: "+typeof(obj)+"\n";
      for(o in obj){
        rs += var_dump(obj[o])+"\n";
      }
      return rs;
   } else {
      return "Type: "+typeof(obj)+"\nValue: "+obj;
   }
}//end function var_dump


function place_footer(){
    var windowHeight = window.getHeight();
    var contentHeight = $('wrapper').getSize().y;
    if(contentHeight < windowHeight){
        var footer = $('footerContainer');
        marginY = (windowHeight - contentHeight) - footer.getSize().y;
        footer.setStyle('margin-top',  marginY);
        
    }
}

function initContact(){
    window.addEvent('domready', function() {
        sendBtn = $('contactBtn');
        contactForm = $('contactform');
        obl = $$('.obligated');
        
        currentColor=$('skinColor').get('html');
        //window.alert(currentColor);
        
        sendBtn.addEvent('mouseenter', function(event){
            //sendBtn.setStyles({'color': currentColor, 'background-image': '');
            sendBtn.addClass("active");
            fixPNG(sendBtn); 
        });

        sendBtn.addEvent('mouseleave', function(event){
            sendBtn.removeClass("active");
            fixPNG(sendBtn);
        });        
        
        sendBtn.addEvent('click', function(e){
            e= new Event(e);
            //check fields
            ok = true;
            obl.each(function(field,i){
                if(field.value == '') {
                    ok = false;
                }
            });
            if(ok) {
                contactForm.submit();
            }
            else {
                errorReport($('obl', '.errors').innerHTML);
            }
            e.stop();
        });
    });
}



function hiliteTeamMember(element, name){
    window.addEvent('domready', function() {
         
        var trigger = $(element+'_van_'+name);
        var title = $$('.avatar_handwriting.'+name)[0];
        var alinea = $$('.avatar_text.'+name)[0];
        var slideAlinea = new Fx.Slide(alinea, {duration:300, wait:false});
        var slideTitle = new Fx.Slide(title, {duration:300, wait:false});
        
        slideAlinea.hide();
        
        $(trigger).addEvent('mouseenter', function(e){
            e = new Event(e);
            slideTitle.slideOut();
            slideAlinea.slideIn();
            e.stop();
        });
        
        
        $(trigger).addEvent('mouseleave', function(e){
            e = new Event(e);
            slideTitle.slideIn();
            slideAlinea.slideOut();
            e.stop();
        });
        
    });
}

function preloadImages(){
    var wachtrij = new Preloader();
    var images = $$('.fixPNG');
    images.each(function(currentImage){
        
        var imgURL = currentImage.getStyle('background-image');
	    if (imgURL.test(/\((.+)\)/)){
                imgURL = imgURL.match(/\((.+)\)/)[1];
		wachtrij.addToQueue(imgURL);
                //window.alert('in de wachtrij: '+imgURL);
                
                //tunen voor de down OF upstate ('_up' van de imagenaam aftrekken of bijtellen, en dan ook die afbeelding laden.)
                imgURLcheck = imgURL.substring(imgURL.length-7, imgURL.length-4);
                if(imgURLcheck == '_up'){
                    imgURL = imgURL.substring(0, imgURL.length-7);
                    imgURL += '.png';
                    wachtrij.addToQueue(imgURL);
                    //window.alert('in de wachtrij gefixt -was eerst _up-: '+imgURL);
                }else{
                    imgURL = imgURL.substring(0, imgURL.length-4);
                    imgURL += '_up.png';
                    wachtrij.addToQueue(imgURL);
                    //window.alert('in de wachtrij gefixt -was eerst _down-: '+imgURL);
                }
            }
        
    });
    
}


function debug(msg){
    if(window.console){
        window.console.log(msg);
    }else{
        window.alert(msg);//$('debug').innerHTML = $('debug').innerHTML + msg +'<br />';
    }
}


function errorReport(err){
    window.alert(err);
}

function initWidget(pos){
    window.addEvent('domready', function(){
        list = $$('.widgetMe');
        frame = [];
        list.each(function(wi, i){
            var w = new Widget({
                'container': $('body'),
                'name':'dialog'+i,
                'frameSize':24,
                'debug': $('debugbox'),
                'backClr': '#fff',
                'backOpacity': 0.9,
                'endSize': {'w': 200+i*250, 'h': 200+i*150},
                'startSize': {'w': wi.getStyle('width').toInt(), 'h': wi.getStyle('height').toInt()},
                'startPos': {'x':wi.getPosition().x, 'y':wi.getPosition().y},
                'scaler': wi
            });
            w.setContent(wi, true);
            frame.push(w);
        });
    });
}


function addFlash(id, url, w, h, vars){
    window.addEvent('domready', function() {
        var so = new SWFObject(url,'mpl',w,h,'7');
        so.addParam('allowfullscreen','true');
        so.addParam('wmode','transparent');
        so.addVariable('backcolor','0x4c4c4c');
        so.addVariable('autostart','true');
        varstring ='';
        for(var i=0; i<vars.length; i++){
            so.addVariable(vars[i].vary, vars[i].value);
    
        }
        so.write(id);
    });
}

function loadRadar(id, root, size, axisColour, plotColours, axisSize, bullAmount){
        //default waarden
        if(axisSize == undefined){
            axisSize=150;
	}	
    	if(bullAmount == undefined){
	    bullAmount=3;
	}
	if(axisColour == undefined){
	    axisColour='0xeeeeee';
	}else{
            axisColour='0x'+axisColour;
        }
        if(plotColours == undefined){
	    var plotColoursImp = '0x59BBAB+0xFF5E00+0xF2FF00+0xB1F543+0xE8980C';
	}else{
           var plotColoursImp = plotColours;
        }
        
        root +='swf/radar.swf';
        
        //verzenden
        addFlash(id, root, size, size, [{'vary': 'axisClrFeed', 'value':axisColour}, {'vary':'axisSizeFeed', 'value':axisSize}, {'vary':'bullAmntFeed', 'value':bullAmount}, {'vary':'plotColoursFeed', 'value':plotColoursImp}]);
}

window.addEvent('domready', function() {
    initSkinbar();
    place_footer();
    $$('.fixPNG').each(function(png) {fixPNG(png);});
    preloadImages();
});