$(document).ready(function () {
    var imageSum = $("#slideH .slideIcon").size();
    var imageWidth = $("#slideH .slideIcon").width() + 60;
    var imageReelWidth = imageWidth * imageSum;

    $("#slideH").css({ 'width': imageReelWidth });
    //$(".slideIcon").not(".slideIcon.active").stop().fadeTo(300,.3);
    $("#slideH").css({ left: -48 });

    $("#slNext").click(function () {
        if ($("#slNext").hasClass("inactive")) {
            //do nothing
        } else {
            $("#slNext").addClass("inactive");
            $("#slPrev").addClass("inactive");
            $(".slideIcon.active").removeClass("active").next(".slideIcon").addClass("active");
            //$(".slideIcon.active").stop().fadeTo(300,1);
            //$(".slideIcon").not(".slideIcon.active").stop().fadeTo(300,.5);

            $("#slideH").stop().animate({ left: -376 }, function () {
                $(".slideIcon:first").clone().appendTo($("#slideH"));
                $(".slideIcon:first").remove();
                $("#slideH").css({ left: -48 });
                $("#slPrev").removeClass("inactive");
                $("#slNext").removeClass("inactive");
            });
        }
    });

    $("#iconNext").click(function () {
        if ($("#slNext").hasClass("inactive")) {
            //do nothing
        } else {
            $("#slNext").addClass("inactive");
            $("#slPrev").addClass("inactive");
            $(".slideIcon.active").removeClass("active").next(".slideIcon").addClass("active");
            //$(".slideIcon.active").stop().fadeTo(300,1);
            //$(".slideIcon").not(".slideIcon.active").stop().fadeTo(300,.5);

            $("#slideH").stop().animate({ left: -376 }, function () {
                $(".slideIcon:first").clone().appendTo($("#slideH"));
                $(".slideIcon:first").remove();
                $("#slideH").css({ left: -48 });
                $("#slPrev").removeClass("inactive");
                $("#slNext").removeClass("inactive");
            });
        }
    });

    $("#slPrev").click(function () {
        if ($("#slPrev").hasClass("inactive")) {
            //do nothing
        } else {
            $("#slPrev").addClass("inactive");
            $("#slNext").addClass("inactive");
            $(".slideIcon.active").removeClass("active").prev(".slideIcon").addClass("active");
            $(".slideIcon:last").clone().prependTo($("#slideH"));
            $("#slideH").css({ left: -376 });
            $(".slideIcon:last").remove();
            //$(".slideIcon.active").stop().fadeTo(300,1);
            //$(".slideIcon").not(".slideIcon.active").stop().fadeTo(300,.5);	

            $("#slideH").stop().animate({ left: -48 }, function () {
                $("#slPrev").removeClass("inactive");
                $("#slNext").removeClass("inactive");
            });
        }
    });

    $("#iconPrev").click(function () {
        if ($("#slPrev").hasClass("inactive")) {
            //do nothing
        } else {
            $("#slPrev").addClass("inactive");
            $("#slNext").addClass("inactive");
            $(".slideIcon.active").removeClass("active").prev(".slideIcon").addClass("active");
            $(".slideIcon:last").clone().prependTo($("#slideH"));
            $("#slideH").css({ left: -376 });
            $(".slideIcon:last").remove();
            //$(".slideIcon.active").stop().fadeTo(300,1);
            //$(".slideIcon").not(".slideIcon.active").stop().fadeTo(300,.5);	

            $("#slideH").stop().animate({ left: -48 }, function () {
                $("#slPrev").removeClass("inactive");
                $("#slNext").removeClass("inactive");
            });
        }
    });

    $("#iconNext").hover(function () {
        //$(".slideIcon.active").next().stop().fadeTo(300,1);
    }, function () {
        //$(".slideIcon.active").next().stop().fadeTo(300,.5);
    });

    $("#iconPrev").hover(function () {
        //$(".slideIcon.active").prev().stop().fadeTo(300,1);
    }, function () {
        //$(".slideIcon.active").prev().stop().fadeTo(300,.5);
    });



    rotateSwitch = function () {
        play = setInterval(function () { //Set timer - this will repeat itself every 3 seconds
            $("#slNext").addClass("inactive");
            $("#slPrev").addClass("inactive");
            $(".slideIcon.active").removeClass("active").next(".slideIcon").addClass("active");
            //$(".slideIcon.active").stop().fadeTo(300,1);
            //$(".slideIcon").not(".slideIcon.active").stop().fadeTo(300,.5);

            $("#slideH").stop().animate({ left: -376 }, function () {
                $(".slideIcon:first").clone().appendTo($("#slideH"));
                $(".slideIcon:first").remove();
                $("#slideH").css({ left: -48 });
                $("#slPrev").removeClass("inactive");
                $("#slNext").removeClass("inactive");
            });
        }, 6000); //Timer speed in milliseconds (3 seconds)
    };

    $("#sliderInnerWrap").hover(function () {
        clearInterval(play); //Stop the rotation
    }, function () {
        rotateSwitch(); //Resume rotation
    });
    rotateSwitch();
    

});