$(document).ready(function () {
    //grab the width and calculate left value
    var pos = 0;
    var item_width = $('#splashContentContainer li').outerWidth();
    var marker_width = $('#splashMarkerContainer li').outerWidth();

    var left_value = (item_width * (-1));
    var marker_value = (marker_width * (-1));

    //move the last item before first item, just in case user click prev button
    $('#splashContentContainer li:first').before($('#splashContentContainer li:last'));

    //set the default item to the correct position 
    $('#splashContentContainer ul').css({ 'marginLeft': left_value });


    $("#rarrow").click(function () {

        pos++;
        if (pos > 3)
            pos = 0;
        //get the right position
        var left_indent = (parseInt($('#splashContentContainer ul').css('marginLeft')) - item_width);

        closeAll();

        // $('#splashMarkerContainer div:first').before($('#splashMarkerContainer div:last'));
        clickedValue = $('#splashContentContainer li:last').attr('id');
        switch (clickedValue.toLocaleString()) {
            case "liFruit":
                clearCircles();
                $('#cirFreshWave').addClass("current");
                break;
            case "liTeeth":
                clearCircles();
                $("#cirFruit").addClass("current");
                break;
            case "liProd":
                clearCircles();
                $('#cirTeeth').addClass("current");
                break;
            case "liFreshWave":
                clearCircles();
                $('#cirProd').addClass("current");
                break;
        };

        //slide the item
        $('#splashContentContainer ul').animate({ 'marginLeft': left_indent }, 500, function () {

            //move the first item and put it as last item
            $('#splashContentContainer li:last').after($('#splashContentContainer li:first'));


            //set the default item to correct position
            $('#splashContentContainer ul').css({ 'marginLeft': left_value });

        });

        return false;
    });

    $("#larrow").click(function () {

        pos--;
        if (pos < 0)
            pos = 3;

        closeAll();

        // $('#splashMarkerContainer div:last').after($('#splashMarkerContainer div:first'));
        clickedValue = $('#splashContentContainer li:first').attr('id');
        switch (clickedValue.toLocaleString()) {
            case "liFruit":
                clearCircles();
                $("#cirFruit").addClass("current");
                break;
            case "liTeeth":
                clearCircles();
                $('#cirTeeth').addClass("current");
                break;
            case "liProd":
                clearCircles();
                $('#cirProd').addClass("current");
                break;
            case "liFreshWave":
                clearCircles();
                $('#cirFreshWave').addClass("current");
                break;
        };

        //get the right position            
        var left_indent = (parseInt($('#splashContentContainer ul').css('marginLeft')) + item_width);

        //slide the item            
        $('#splashContentContainer ul').animate({ 'marginLeft': left_indent }, 500, function () {


            //move the last item and put it as first item            	
            $('#splashContentContainer li:first').before($('#splashContentContainer li:last'));

            //set the default item to correct position
            $('#splashContentContainer ul').css({ 'marginLeft': left_value });

        });

        return false;
    });

    $("#splashContentImageContainer1 img").click(function () {
        document.getElementById("printThisContainer").focus();
    });



    $("#cirFruit").click(function () {
        clearCircles();
        $("#cirFruit").addClass("current");
        clickedValue = $('#splashContentContainer li:last').attr('id');
        switch (clickedValue.toLocaleString()) {
            case "liFruit":
                //get the right position            
                var left_indent = (parseInt($('#splashContentContainer ul').css('marginLeft')) - item_width);
                left_indent = left_indent - item_width;
                //slide the item
                $('#splashContentContainer ul').animate({ 'marginLeft': left_indent }, 1000, function () {
                    //move the first item and put it as last item
                    $('#splashContentContainer li:last').after($('#splashContentContainer li:first'));

                    //set the default item to correct position
                    $('#splashContentContainer ul').css({ 'marginLeft': left_value });

                    //move the first item and put it as last item
                    $('#splashContentContainer li:last').after($('#splashContentContainer li:first'));

                    //set the default item to correct position
                    $('#splashContentContainer ul').css({ 'marginLeft': left_value });

                });

                break;
            case "liFreshWave":
                //get the right position            
                var left_indent = (parseInt($('#splashContentContainer ul').css('marginLeft')) + item_width);
                //slide the item            
                $('#splashContentContainer ul').animate({ 'marginLeft': left_indent }, 500, function () {
                    //move the last item and put it as first item            	
                    $('#splashContentContainer li:first').before($('#splashContentContainer li:last'));

                    //set the default item to correct position
                    $('#splashContentContainer ul').css({ 'marginLeft': left_value });

                });
                break;
            case "liTeeth":
                //get the right position            
                var left_indent = (parseInt($('#splashContentContainer ul').css('marginLeft')) - item_width);
                //slide the item
                $('#splashContentContainer ul').animate({ 'marginLeft': left_indent }, 500, function () {

                    //move the first item and put it as last item
                    $('#splashContentContainer li:last').after($('#splashContentContainer li:first'));


                    //set the default item to correct position
                    $('#splashContentContainer ul').css({ 'marginLeft': left_value });

                });
                break;
        };

        return false;
    });

    $("#cirTeeth").click(function () {
        clearCircles();
        $('#cirTeeth').addClass("current");
        clickedValue = $('#splashContentContainer li:last').attr('id');
        switch (clickedValue.toLocaleString()) {
            case "liFruit":
                //get the right position            
                var left_indent = (parseInt($('#splashContentContainer ul').css('marginLeft')) + item_width);
                //slide the item            
                $('#splashContentContainer ul').animate({ 'marginLeft': left_indent }, 500, function () {
                    //move the last item and put it as first item            	
                    $('#splashContentContainer li:first').before($('#splashContentContainer li:last'));

                    //set the default item to correct position
                    $('#splashContentContainer ul').css({ 'marginLeft': left_value });

                });
                break;
            case "liTeeth":
                //get the right position            
                var left_indent = (parseInt($('#splashContentContainer ul').css('marginLeft')) - item_width);
                left_indent = left_indent - item_width;
                //slide the item
                $('#splashContentContainer ul').animate({ 'marginLeft': left_indent }, 500, function () {
                    //move the first item and put it as last item
                    $('#splashContentContainer li:last').after($('#splashContentContainer li:first'));

                    //set the default item to correct position
                    $('#splashContentContainer ul').css({ 'marginLeft': left_value });

                    //move the first item and put it as last item
                    $('#splashContentContainer li:last').after($('#splashContentContainer li:first'));

                    //set the default item to correct position
                    $('#splashContentContainer ul').css({ 'marginLeft': left_value });

                });
                break;

            case "liProd":
                //get the right position            
                var left_indent = (parseInt($('#splashContentContainer ul').css('marginLeft')) - item_width);
                //slide the item            
                $('#splashContentContainer ul').animate({ 'marginLeft': left_indent }, 500, function () {
                    //move the first item and put it as last item
                    $('#splashContentContainer li:last').after($('#splashContentContainer li:first'));


                    //set the default item to correct position
                    $('#splashContentContainer ul').css({ 'marginLeft': left_value });

                });
                break;
        };

        return false;
    });

    $("#cirProd").click(function () {
        clearCircles();
        $('#cirProd').addClass("current");
        clickedValue = $('#splashContentContainer li:last').attr('id');
        switch (clickedValue.toLocaleString()) {
            case "liTeeth":
                //get the right position            
                var left_indent = (parseInt($('#splashContentContainer ul').css('marginLeft')) + item_width);
                //slide the item            
                $('#splashContentContainer ul').animate({ 'marginLeft': left_indent }, 500, function () {
                    //move the last item and put it as first item            	
                    $('#splashContentContainer li:first').before($('#splashContentContainer li:last'));

                    //set the default item to correct position
                    $('#splashContentContainer ul').css({ 'marginLeft': left_value });

                });
                break;
            case "liProd":
                //get the right position            
                var left_indent = (parseInt($('#splashContentContainer ul').css('marginLeft')) - item_width);
                left_indent = left_indent - item_width;
                //slide the item
                $('#splashContentContainer ul').animate({ 'marginLeft': left_indent }, 500, function () {
                    //move the first item and put it as last item
                    $('#splashContentContainer li:last').after($('#splashContentContainer li:first'));


                    //set the default item to correct position
                    $('#splashContentContainer ul').css({ 'marginLeft': left_value });

                    $('#splashContentContainer li:last').after($('#splashContentContainer li:first'));


                    //set the default item to correct position
                    $('#splashContentContainer ul').css({ 'marginLeft': left_value });

                });
                break;

            case "liFreshWave":
                //get the right position            
                var left_indent = (parseInt($('#splashContentContainer ul').css('marginLeft')) - item_width);
                //slide the item            
                $('#splashContentContainer ul').animate({ 'marginLeft': left_indent }, 500, function () {
                    //move the first item and put it as last item
                    $('#splashContentContainer li:last').after($('#splashContentContainer li:first'));

                    //set the default item to correct position
                    $('#splashContentContainer ul').css({ 'marginLeft': left_value });

                });
                break;

        };
        return false;
    });

    $("#cirFreshWave").click(function () {
        clearCircles();
        $('#cirFreshWave').addClass("current");
        clickedValue = $('#splashContentContainer li:last').attr('id');
        switch (clickedValue.toLocaleString()) {
            case "liFruit":
                //get the right position            
                var left_indent = (parseInt($('#splashContentContainer ul').css('marginLeft')) - item_width);
                //slide the item            
                $('#splashContentContainer ul').animate({ 'marginLeft': left_indent }, 500, function () {
                    //move the last item and put it as first item            	
                    $('#splashContentContainer li:last').after($('#splashContentContainer li:first'));


                    //set the default item to correct position
                    $('#splashContentContainer ul').css({ 'marginLeft': left_value });

                });
                break;
            case "liProd":
                //get the right position            
                var left_indent = (parseInt($('#splashContentContainer ul').css('marginLeft')) + item_width);
                //slide the item
                $('#splashContentContainer ul').animate({ 'marginLeft': left_indent }, 500, function () {
                    //move the last item and put it as first item
                    $('#splashContentContainer li:first').before($('#splashContentContainer li:last'));

                    //set the default item to correct position
                    $('#splashContentContainer ul').css({ 'marginLeft': left_value });

                });
                break;

            case "liFreshWave":
                //get the right position            
                var left_indent = (parseInt($('#splashContentContainer ul').css('marginLeft')) - item_width);
                left_indent = left_indent - item_width;
                //slide the item            
                $('#splashContentContainer ul').animate({ 'marginLeft': left_indent }, 500, function () {
                    //move the first item and put it as last item
                    $('#splashContentContainer li:last').after($('#splashContentContainer li:first'));

                    //set the default item to correct position
                    $('#splashContentContainer ul').css({ 'marginLeft': left_value });

                    //move the first item and put it as last item
                    $('#splashContentContainer li:last').after($('#splashContentContainer li:first'));

                    //set the default item to correct position
                    $('#splashContentContainer ul').css({ 'marginLeft': left_value });

                });
                break;

        };
        return false;
    });

});



function openPop(Popup) {
    $(document).find(Popup).css({ 'display': 'block' });
    switch (Popup) {
        case "#winePopup":
            $("#strawberryPopup").css({ 'display': 'none' });
            $("#tomatoPopup").css({ 'display': 'none' });
            $("#ojPopup").css({ 'display': 'none' });
            $("#applePopup").css({ 'display': 'none' });
            $("#grapesPopup").css({ 'display': 'none' });
            break;
        case "#strawberryPopup":
            $("#winePopup").css({ 'display': 'none' });
            $("#tomatoPopup").css({ 'display': 'none' });
            $("#ojPopup").css({ 'display': 'none' });
            $("#applePopup").css({ 'display': 'none' });
            $("#grapesPopup").css({ 'display': 'none' });
            break;
        case "#tomatoPopup":
            $("#winePopup").css({ 'display': 'none' });
            $("#strawberryPopup").css({ 'display': 'none' });
            $("#ojPopup").css({ 'display': 'none' });
            $("#applePopup").css({ 'display': 'none' });
            $("#grapesPopup").css({ 'display': 'none' });
            break;
        case "#ojPopup":
            $("#winePopup").css({ 'display': 'none' });
            $("#strawberryPopup").css({ 'display': 'none' });
            $("#tomatoPopup").css({ 'display': 'none' });
            $("#applePopup").css({ 'display': 'none' });
            $("#grapesPopup").css({ 'display': 'none' });
            break;
        case "#applePopup":
            $("#winePopup").css({ 'display': 'none' });
            $("#strawberryPopup").css({ 'display': 'none' });
            $("#tomatoPopup").css({ 'display': 'none' });
            $("#ojPopup").css({ 'display': 'none' });
            $("#grapesPopup").css({ 'display': 'none' });
            break;
        case "#grapesPopup":
            $("#winePopup").css({ 'display': 'none' });
            $("#strawberryPopup").css({ 'display': 'none' });
            $("#tomatoPopup").css({ 'display': 'none' });
            $("#ojPopup").css({ 'display': 'none' });
            $("#applePopup").css({ 'display': 'none' });
            break;
    }
     
}

function close(Popup) {
    $(document).find(Popup).css({ 'display': 'none' });
}

function clearCircles() {
    $("#cirFruit").removeClass("current");
    $('#cirTeeth').removeClass("current");
    $('#cirProd').removeClass("current");
    $('#cirFreshWave').removeClass("current");
}

function closeAll() {
    $("#winePopup").css({ 'display': 'none' });
    $("#strawberryPopup").css({ 'display': 'none' });
    $("#tomatoPopup").css({ 'display': 'none' });
    $("#ojPopup").css({ 'display': 'none' });
    $("#applePopup").css({ 'display': 'none' });
    $("#grapesPopup").css({ 'display': 'none' });
}