function switchStyle(link){
    setMode(link.href.substring(link.href.indexOf('#')+1,link.href.length));
}

function setMode(m){
    var mode = ((m=='grey')||(m=='color')) ? m : 'blend';
    //order: *'blend','grey','color'
    var nextmode = (mode=='grey')?'color':((mode=='blend')?'grey':'blend');
    var nextlabel = (mode=='grey')?'Colorido':((mode=='blend')?'Cinza':'Suave');
    document.body.className = 'vevent '+mode;
    var link = document.getElementById('style-switcher-link');
    link.innerHTML = nextlabel;
    link.parentNode.style.display = 'block';
    //do not update the link href immediatelly because the location.hash hasnt updated yet
    setTimeout(function(mode){
        document.getElementById('style-switcher-link').setAttribute('href', '#'+nextmode);
    },0,mode);
    var nav_links = document.getElementById('navigation').getElementsByTagName('a');
    for (var i=0; i<nav_links.length; i++){
        if (nav_links[i].href.indexOf('#') != -1){
            nav_links[i].href = nav_links[i].href.substring(0,nav_links[i].href.indexOf('#')) + '#' + mode;
        } else {
            nav_links[i].href += '#' + mode;
        }
    }
    return false;
}
function syncColor(){
    if (location.hash.toLowerCase().indexOf('grey') != -1){
        if (document.body.className != 'vevent grey') setMode('grey');
    } else if (location.hash.toLowerCase().indexOf('color') != -1){
        if (document.body.className != 'vevent color') setMode('color');
    } else {
        if (document.body.className != 'vevent blend') setMode('blend');
    }
}
var items = document.getElementsByTagName('li');
for(var i = 0; i < items.length; i++){
    items[i].addEventListener('click', function(){
        var items = document.getElementsByTagName('li');
        if (this.className == 'expanded'){
            this.className = '';
            return;
        }
        for (var j = 0; j < items.length; j++){
            items[j].className = '';
        }
        this.className = 'expanded';
    }, false);
}

syncColor();