/**
* We use the initCallback callback
* to assign functionality to the controls
*/
function mycarousel_initCallback(carousel) {
    jQuery('.mycarousel .jcarousel-control a').bind('click', function () {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        return false;
    });

    jQuery('.mycarousel-next').bind('click', function () {
        carousel.next();
        return false;
    });

    jQuery('.mycarousel-prev').bind('click', function () {
        carousel.prev();
        return false;
    });

    carousel.buttonNext.bind('click', function () {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function () {
        carousel.stopAuto();
    }, function () {
        carousel.startAuto();
    });


    //Injecting pause button
    $('.homepage .jcarousel-prev-horizontal').after('<div class="jcarousel-pause-button" style="display:block;"><a href="#">pause</a></div>');
    $('.theStadium .jcarousel-prev-horizontal').after('<div class="jcarousel-pause-button" style="display:block;"><a href="#">pause</a></div>');

    $(".jcarousel-pause-button").toggle(
      function () {
          carousel.stopAuto();
          $(this).addClass('jcarousel-pause-button-paused');
      },

      function () {
          //alert("carousel start pressed")
          carousel.startAuto();
          $(this).removeClass('jcarousel-pause-button-paused');
      }
    );


  };


// it will append class="selected" into <a>
// <a href="#">1</a> to <a href="#" class="selected">1</a>
function highlight(carousel, obejctli, liindex, listate) {
    jQuery('.jcarousel-control a:nth-child(' + liindex + ')').attr("class", "selected");
};
// it will remove last selected slide from <a>
// <a href="#" class="selected">1</a> to <a href="#">1</a>
function removehighlight(carousel, obejctli, liindex, listate) {
    jQuery('.jcarousel-control a:nth-child(' + liindex + ')').removeAttr("class", "selected");
};

// Ride the carousel...
jQuery(document).ready(function () {


    // depreciated $.browser fix ch 12-03-2015
    $.browser = { msie: (navigator.appName == 'Microsoft Internet Explorer') ? true : false };
    $.browser = { safari: (navigator.appName == 'Safari') ? true : false };


    jQuery(".mycarousel").jcarousel({
        scroll: 1,                 // autoscrolling enabled
        auto: 8,                   //8 seconds
        wrap: 'last',
        initCallback: mycarousel_initCallback,
        // This tells jCarousel NOT to autobuild prev/next buttons
        itemVisibleInCallback: highlight,
        itemVisibleOutCallback: removehighlight,
        buttonNextHTML: '<div></div>',
        buttonPrevHTML: '<div></div>'
    });
});