var $j = jQuery.noConflict();


function carousel(){

        //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
        if($j('#carousel_ul li').length > 1)
        {
            $j('#carousel_ul li:first').before($j('#carousel_ul li:last'));
            $j('.carousel_sat_nav').show();
        }
        else{
            $j('#carousel_ul').css('left', '0');
            $j('.carousel_nav').hide();
        }

        //when user clicks the image for sliding right
        $j('#right_scroll img').click(function(){

            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
            var item_width = $j('#carousel_ul li').outerWidth() + 10;

            //calculae the new left indent of the unordered list
            var left_indent = parseInt($j('#carousel_ul').css('left')) - item_width;

            //make the sliding effect using jquery's anumate function '
            $j('#carousel_ul:not(:animated)').animate({'left' : left_indent},800, 'easeOutExpo',function(){

                //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                $j('#carousel_ul li:last').after($j('#carousel_ul li:first'));

                //and get the left indent to the default -210px
                $j('#carousel_ul').css({'left' : '-750px'});
            });
        });

        //when user clicks the image for sliding left
        $j('#left_scroll img').click(function(){

            var item_width = $j('#carousel_ul li').outerWidth() + 10;

            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
            var left_indent = parseInt($j('#carousel_ul').css('left')) + item_width;

            $j('#carousel_ul:not(:animated)').animate({'left' : left_indent},800, 'easeOutExpo',function(){

            /* when sliding to left we are moving the last item before the first list item */
            $j('#carousel_ul li:first').before($j('#carousel_ul li:last'));

            /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
            $j('#carousel_ul').css({'left' : '-750px'});
            });


        });

}
function carousel_sat(){

        //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
        if($j('#carousel_sat_ul li').length > 1){
            $j('#carousel_sat_ul li:first').before($j('#carousel_sat_ul li:last'));
            $j('.carousel_sat_nav').show();


        }
        else{
            $j('#carousel_sat_ul').css('left', '0');
            $j('.carousel_sat_nav').hide();
        }

        //when user clicks the image for sliding right
        $j('#right_scroll img').click(function(){

            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
            var item_width_s = $j('#carousel_sat_ul li').outerWidth() + 10;

            //calculae the new left indent of the unordered list
            var left_indent_s = parseInt($j('#carousel_sat_ul').css('left')) - item_width_s;

            //make the sliding effect using jquery's anumate function '
            $j('#carousel_sat_ul:not(:animated)').animate({'left' : left_indent_s},800, 'easeOutExpo',function(){

                //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                $j('#carousel_sat_ul li:last').after($j('#carousel_sat_ul li:first'));

                //and get the left indent to the default -210px
                $j('#carousel_sat_ul').css({'left' : '-670px'});
            });
        });

        //when user clicks the image for sliding left
        $j('#left_scroll img').click(function(){

            var item_width_s = $j('#carousel_sat_ul li').outerWidth() + 10;

            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
            var left_indent_s = parseInt($j('#carousel_sat_ul').css('left')) + item_width_s;

            $j('#carousel_sat_ul:not(:animated)').animate({'left' : left_indent_s},800, 'easeOutExpo',function(){

                /* when sliding to left we are moving the last item before the first list item */
                $j('#carousel_sat_ul li:first').before($j('#carousel_sat_ul li:last'));

                /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
                $j('#carousel_sat_ul').css({'left' : '-670px'});
            });


        });

}




        window.setInterval(scroll_, 5000);
        function scroll_() {
            if($j('#carousel_sat_ul li').length > 1 || $j('#carousel_ul li').length > 1){
                $j("#left_scroll img").click();
            }
        }




jQuery.noConflict()(document).ready(function(){

    carousel();
    carousel_sat();

  });