$(function () {
    $('#homeimage').animate({ opacity: 0 }, 0).css('visibility', 'visible');
    $('#offersimage').animate({ opacity: 0 }, 0).css('visibility', 'visible');
    $('#menuitemimage1').animate({ opacity: 0 }, 0).css('visibility', 'visible');
    $('#menuitemimage2').animate({ opacity: 0 }, 0).css('visibility', 'visible');
    $('#menuitemimage3').animate({ opacity: 0 }, 0).css('visibility', 'visible');
    $('#menuitemimage4').animate({ opacity: 0 }, 0).css('visibility', 'visible');
    hover('#home', '#homeimage');
    hover('#offers', '#offersimage');
    hover('#menuitem1', '#menuitemimage1');
    hover('#menuitem2', '#menuitemimage2');
    hover('#menuitem3', '#menuitemimage3');
    hover('#menuitem4', '#menuitemimage4');
});

function hover(panel, image) {
    $(panel).hover(function () {
        intro(image);
    }, function () {
        outro(image);
    });
};

function intro(selector) {
    $(selector).stop(true, false).animate({ opacity: 1 }, 200);
};

function outro(selector) {
    $(selector).stop(true, false).animate({ opacity: 0 }, 200);
};

function toggle(selector, onshow, onhide) {
    var expandpanel = $(selector);
    if ($(expandpanel).is(':hidden')) {
        $(expandpanel).show(200);
        if (onshow != null) {
            onshow();
        }
    }
    else {
        $(expandpanel).hide(200);
        if (onhide != null) {
            onhide();
        }
    }
};