Event.observe(window, 'load', function () {
	
	if($('whatSauce')) {
	    //you're on the homepage. nice work
	    likeadasauce();
    }


    else {
        //you're in a drill page
	    dothis();

	    if($$('.more-kids')) {
            toggleKids();
        }
        
	}

});


function likeadasauce() {
var what = $$('a.alpha'),
    why = $$('a.bravo'),
    how = $$('a.charlie'),
    whatSauce = $('whatSauce'),
    whySauce = $('whySauce'),
    howSauce = $('howSauce');
    
    what[0].onclick = function () {
        if(this.hasClassName('on')) {
            this.removeClassName('on');
            whatSauce.setStyle({zIndex: '1'});
            whySauce.setStyle({zIndex: '1'});
            howSauce.setStyle({zIndex: '1'});
        }
        else {
            this.addClassName('on');
            why[0].removeClassName('on');
            how[0].removeClassName('on');
            whatSauce.setStyle({zIndex: '4'});
            whySauce.setStyle({zIndex: '1'});
            howSauce.setStyle({zIndex: '1'});
        }
    }
    why[0].onclick = function () {
        if(this.hasClassName('on')) {
            this.removeClassName('on');
            whatSauce.setStyle({zIndex: '1'});
            whySauce.setStyle({zIndex: '1'});
            howSauce.setStyle({zIndex: '1'});
        }
        else {
            this.addClassName('on');
            what[0].removeClassName('on');
            how[0].removeClassName('on');
            whatSauce.setStyle({zIndex: '1'});
            whySauce.setStyle({zIndex: '4'});
            howSauce.setStyle({zIndex: '1'});
        }
    }
    how[0].onclick = function () {
        if(this.hasClassName('on')) {
            this.removeClassName('on');
            whatSauce.setStyle({zIndex: '1'});
            whySauce.setStyle({zIndex: '1'});
            howSauce.setStyle({zIndex: '1'});
        }
        else {
            this.addClassName('on');
            what[0].removeClassName('on');
            why[0].removeClassName('on');
            whatSauce.setStyle({zIndex: '1'});
            whySauce.setStyle({zIndex: '1'});
            howSauce.setStyle({zIndex: '4'});
        }
    }
}

function dothis() {
    var tabsToggle = $$('a.tabs');
    var listing = $$('div.listing');

    for (var i=0; i<tabsToggle.length; i++) {

        tabsToggle[i].onclick = function () {
            var contentTabFound = false;        
            var tabName = this.className.split(" ")[0];
            
            for (var i=0; i<tabsToggle.length; i++) {
                tabsToggle[i].removeClassName('on');
            }
            for (var i=0; i<listing.length; i++) {
                listing[i].removeClassName('on');
            }
            
            this.addClassName('on');
                        
            for (var i=0; i<listing.length && !contentTabFound; i++) {

                if (listing[i].hasClassName(tabName)) {
                    listing[i].addClassName('on');
                    contentTabFound = true;
                }
            }
        }
    }
}

function toggleKids(){
    var profileToggle = $$('.profile-name'), thoseKids = $$('.more-kids'), utilityBox = $$('.utility');
    
    if (thoseKids[0] != null) {
        thoseKids[0].hide();
    }
    
    if (profileToggle[0] != null) {
        profileToggle[0].onmouseover = function(){
            if (thoseKids[0] != null) {
                thoseKids[0].show();
            }
        }
    }

    if (utilityBox[0] != null) {
        utilityBox[0].onmouseout = function () {
            if (thoseKids[0] != null) {
                thoseKids[0].hide();
            }
        }
    }
    
}