$(document).ready(function() {

    var fadeSpeed = 150;


    $('#CycleDivs').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        speed: 150,
        timeout: 20000,
        cleartype: 1,
        before: function() {
            switch (this.id) {
                case "web-design":
                    //do what you want to do with the element
                    $("#webDesignArrow").css('visibility', 'visible');
                    $("#CustomArrow").css('visibility', 'hidden');
                    $("#ECommArrow").css('visibility', 'hidden');
                    $("#SEOArrow").css('visibility', 'hidden');
                    $("#HostingArrow").css('visibility', 'hidden');
                    $("#webDesign").addClass("homepage-selected");
                    $("#customWebApp").removeClass("homepage-selected");
                    $("#eCommerce").removeClass("homepage-selected");
                    $("#spanSEO").removeClass("homepage-selected");
                    $("#spanHosting").removeClass("homepage-selected");
                    break;
                case "web-app":
                    //do what you want to do with the element
                    $("#webDesignArrow").css('visibility', 'hidden');
                    $("#CustomArrow").css('visibility', 'visible');
                    $("#ECommArrow").css('visibility', 'hidden');
                    $("#SEOArrow").css('visibility', 'hidden');
                    $("#HostingArrow").css('visibility', 'hidden');
                    $("#customWebApp").addClass("homepage-selected");
                    $("#webDesign").removeClass("homepage-selected");
                    $("#eCommerce").removeClass("homepage-selected");
                    $("#spanSEO").removeClass("homepage-selected");
                    $("#spanHosting").removeClass("homepage-selected");
                    break;
                case "e-comm":
                    //do what you want to do with the element
                    $("#webDesignArrow").css('visibility', 'hidden');
                    $("#CustomArrow").css('visibility', 'hidden');
                    $("#ECommArrow").css('visibility', 'visible');
                    $("#SEOArrow").css('visibility', 'hidden');
                    $("#HostingArrow").css('visibility', 'hidden');
                    $("#eCommerce").addClass("homepage-selected");
                    $("#customWebApp").removeClass("homepage-selected");
                    $("#webDesign").removeClass("homepage-selected");
                    $("#spanSEO").removeClass("homepage-selected");
                    $("#spanHosting").removeClass("homepage-selected");
                    break;
                case "seo-service":
                    //do what you want to do with the element
                    $("#webDesignArrow").css('visibility', 'hidden');
                    $("#CustomArrow").css('visibility', 'hidden');
                    $("#ECommArrow").css('visibility', 'hidden');
                    $("#SEOArrow").css('visibility', 'visible');
                    $("#HostingArrow").css('visibility', 'hidden');
                    $("#spanSEO").addClass("homepage-selected");
                    $("#customWebApp").removeClass("homepage-selected");
                    $("#eCommerce").removeClass("homepage-selected");
                    $("#webDesign").removeClass("homepage-selected");
                    $("#spanHosting").removeClass("homepage-selected");
                    break;
                case "web-hosting":
                    //do what you want to do with the element
                    $("#webDesignArrow").css('visibility', 'hidden');
                    $("#CustomArrow").css('visibility', 'hidden');
                    $("#ECommArrow").css('visibility', 'hidden');
                    $("#SEOArrow").css('visibility', 'hidden');
                    $("#HostingArrow").css('visibility', 'visible');
                    $("#spanHosting").addClass("homepage-selected");
                    $("#customWebApp").removeClass("homepage-selected");
                    $("#eCommerce").removeClass("homepage-selected");
                    $("#spanSEO").removeClass("homepage-selected");
                    $("#webDesign").removeClass("homepage-selected");
                    break;
            }
        }
    });

    $("#webDesign").hover(function() {
        $('#CycleDivs').cycle(0);
        return false;
    });

    $("#customWebApp").hover(function() {
        $('#CycleDivs').cycle(1);
        return false;
    });

    $("#eCommerce").hover(function() {
        $('#CycleDivs').cycle(2);

        return false;
    });

    $("#spanSEO").hover(function() {
        $('#CycleDivs').cycle(3);

        return false;
    });

    $("#spanHosting").hover(function() {
        $('#CycleDivs').cycle(4);

        return false;
    });

});