﻿(function ($jQuery) {
  $jQuery.fn.extend({
    infiniteImageCarousel: function (options) {
      var defaults =
			{
			  transitionSpeed: 250,
			  displayTime: 6000
			};
      options = $jQuery.extend(defaults, options);

      return this.each(function () {
        var o = options;
        var obj = $jQuery(this);
        var curr = 1;

        var numImages = $jQuery('img', obj).length;
        var imgHeight = $jQuery('img:first', obj).height();
        var imgWidth = $jQuery('img:first', obj).width();
        var pagingPos = imgHeight - 50;
        var clearInt;

        $jQuery('p', obj).hide();
        $jQuery(obj).width(imgWidth).height(imgHeight);

        // Move last image and stick it on the front
        $jQuery('li:last', obj).prependTo($jQuery('ul', obj));
        $jQuery('ul', obj).css('left', -imgWidth + 'px');

        // Appending the carousel navigation
        var html = '<div class="Paging" style="top:' + pagingPos + 'px;margin-left:22px;"><div class="Back"><a id="regions_1_contentblock_1_ctl00_sectioncontentleft_job_0_3_ImageGallerySpotRepeater_3_NavigationLinkPrevious" title="Tilbage" href="Components/Spots/Presentation/#">Tilbage</a></div><div class="Forward"><a id="regions_1_contentblock_1_ctl00_sectioncontentleft_job_0_3_ImageGallerySpotRepeater_3_NavigationLinkNext" title="Frem" href="Components/Spots/Presentation/#">Frem</a></div></div>';
        $jQuery(obj).append(html);

        // Left and right arrow image button actions

        $jQuery(this).find('.Back').css('opacity', '.99').click(function () {
          anim('prev');
          clearTimeout(clearInt);
        });
        $jQuery(this).find('.Forward').css('opacity', '.99').click(function () {
          anim('next');
          clearTimeout(clearInt);
        });

        function anim(direction, dist) {
          //This preventing the seletable of the text inside the forward and back buttons
          $jQuery('.Carousel .Paging .Forward, .Carousel .Paging .Back').mousedown(function () {
            return false;
          });
          if (direction == "next") {
            if (curr == numImages) curr = 0;
            if (dist > 1) {
              $jQuery('li:lt(2)', obj).clone().insertAfter($jQuery('li:last', obj));
              $jQuery('ul', obj).animate({ left: -imgWidth * (dist + 1) }, o.transitionSpeed, function () {
                $jQuery('li:lt(2)', obj).remove();
                for (var j = 1; j <= dist - 2; j++) {
                  $jQuery('li:first', obj).clone().insertAfter($jQuery('li:last', obj));
                  $jQuery('li:first', obj).remove();
                }
                $jQuery(this).css({ 'left': -imgWidth });
                curr = curr + dist;
              });
            }
            else {
              // Copy leftmost (first) li and insert it after the last li
              $jQuery('li:first', obj).clone().insertAfter($jQuery('li:last', obj));
              // Update width and left position of ul and animate ul to the left
              $jQuery('ul', obj)
								.animate({ left: -imgWidth * 2 }, o.transitionSpeed, function () {
								  $jQuery('li:first', obj).remove();
								  $jQuery('ul', obj).css('left', -imgWidth + 'px');
								  curr = curr + 1;
								});
            }
          }
          if (direction == "prev") {
            if (dist > 1) {
              $jQuery('li:gt(' + (numImages - (dist + 1)) + ')', obj).clone().insertBefore($jQuery('li:first', obj));
              $jQuery('ul', obj).css({ 'left': (-imgWidth * (dist + 1)) }).animate({ left: -imgWidth }, o.transitionSpeed, function () {
                $jQuery('li:gt(' + (numImages - 1) + ')', obj).remove();
                curr = curr - dist;
              });
            }
            else {
              // Copy rightmost (last) li and insert it after the first li
              $jQuery('li:last', obj).clone().insertBefore($jQuery('li:first', obj));
              // Update width and left position of ul and animate ul to the right
              $jQuery('ul', obj)
								.css('left', -imgWidth * 2 + 'px')
								.animate({ left: -imgWidth }, o.transitionSpeed, function () {
								  $jQuery('li:last', obj).remove();
								  curr = curr - 1;
								  if (curr == 0) curr = numImages;
								});
              //$jQuery('ul .TeaserText', obj).css('left', imgWidth + 'px');
            }
          }
        }
      });
    }
  });
})($jQuery);
