$(document).ready(function () {
    $('#slidercontrol').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });

    $(".dot").hover(function () {

        var id = $(this).attr('id');

        $(this).css('background', 'none');

        // Find the corresponding button
        // and add the selected class
        var button = '#' + id + '-button';
        $(button).addClass('selected');

        // Find the corresponding overlay
        // and add the selected class
        var overlay = "#" + id + '-overlay';
        $(overlay).css('background', 'url(./images/dot-hover.png)');

    }, function () {

        var id = $(this).attr('id');

        $(this).css('background', 'url(./images/dot.png)');

        // Find the correspondng button
        // and remove the selected class
        var button = '#' + id + '-button';
        $(button).removeClass('selected');

        // Find the corresponding overlay
        // and remove the selected class
        var overlay = "#" + id + '-overlay';
        $(overlay).css('background', 'none');

    });

    $(".linkBox ul li").hover(function () {
        var id = $(this).attr('id');
        id = id.replace('-button', '');
        id = '#' + id;

        $(id).css('background', 'none');

        var overlay = id + '-overlay';
        $(overlay).css('background', 'url(./images/dot-hover.png)');
    }, function () {
        var id = $(this).attr('id');
        id = id.replace('-button', '');
        id = '#' + id;

        $(id).css('background', 'url(./images/dot.png)');

        var overlay = id + '-overlay';
        $(overlay).css('background', 'none');
    });
});