$(document).ready(function() {

    $('img[id^="expand_"]').click(expand);
    $('img[id^="contract_"]').click(contract);

    $('div#categories a:not(a.selected)').hover(mouseIn, mouseOut);
    $('div#categories img[id]').hover(mouseIna, mouseOuta);

    $('div#categories a img[id]').mousedown(mouseDown);
});

function expand(event) {
    event.preventDefault();

    var id = $(this).attr('id').replace('expand_', '');

    $('#subcategories_' + id).slideDown('slow', 'swing');

    $(this).attr('id', 'contract_' + id);
    $(this).attr('src', '/graphics/contract_regular.png');

    $(this).unbind('click');

    $(this).click(contract);
}

function contract(event) {
    event.preventDefault();

    var id = $(this).attr('id').replace('contract_', '');

    $('#subcategories_' + id).slideUp('slow', 'swing');    

    $(this).attr('id', 'expand_' + id);
    $(this).attr('src', '/graphics/expand_regular.png');

    $(this).unbind('click');

    $(this).click(expand);
}

function mouseIn(event) {
    var img = $(this).children('img[id]');

    var type = $(img).attr('id').substring(0 , $(img).attr('id').indexOf('_'));

    $(img).attr('src', '/graphics/' + type + '_regular.png');
}

function mouseOut(event) {
    var img = $(this).children('img[id]');

    var type = $(img).attr('id').substring(0 , $(img).attr('id').indexOf('_'));

    $(img).attr('src', '/graphics/' + type + '_orange.png');
}

function mouseIna(event) {
    var type = $(this).attr('id').substring(0 , $(this).attr('id').indexOf('_'));

    $(this).attr('src', '/graphics/' + type + '_hover.png');
}

function mouseOuta(event) {
    var type = $(this).attr('id').substring(0 , $(this).attr('id').indexOf('_'));

    $(this).attr('src', '/graphics/' + type + '_regular.png');
}

function mouseDown(event) {
    var type = $(this).attr('id').substring(0 , $(this).attr('id').indexOf('_'));

    $(this).attr('src', '/graphics/' + type + '_active.png');
}

function mouseUp(event) {
    var type = $(this).attr('id').substring(0 , $(this).attr('id').indexOf('_'));

    $(this).attr('src', '/graphics/' + type + '_hover.png');
}