text: /*! mccBackStretchCarousel - an AngularJS directive
   * Uses jQuery backstretch with an image selector, swipe effects and
   * ajax reader for the images 
   *
   * Copyright (c) 2014 Antti Stenvall; Licensed MIT
   *
   * Example use
   *  - in template
   *    <div ng-controller='temp' mcc-back-stretch-carousel></div>
   *
   *  - in controller
   *  app.controller('temp', ['$scope', '$http', function($scope, $http) {
   *     $scope.images = [];
   *     $http({
   *       method: 'get',
   *       url: 'rest/gimmeMyImageData'
   *     }).success(function(data) {
   *       $scope.images = data.images;
   *     });
   *   }]);
   *
   * */
  
  angular.module('mcc').directive('mccBackStretchCarousel', ['$swipe', function ($swipe) {
      var directive = {}; // init directive
      directive.restrict = 'A'; // one just uses ng-back-stretch-carousel attribute to utilize this
      directive.compile = function (element, attributes) {
        var linkFunction = function ($scope, element, attributes) {
          // change the height of the element to the parent's height
          var height = element.parent()[0].clientHeight;
          $(element).css('height', height);
          // follow changes in $scope.images and when it changes, init backstretch
          // this allows initiation with $http ajax request that asks for the files
          $scope.$watch('images', function (images) {          
            if (images.length === 0) { // do nothing is images is empty array
              return;
            }
            // remove old if it exists
            if ($(element).children() !== null) {
              $($(element).children()).remove();
            }
            // add backstretch
            try {
              var viewFrame = $('.app-content')[0];
              var height = $(viewFrame).height();
              var width = $(viewFrame).width();
              $(element).css('height', height).css('width', width);
            } catch (ex) {
  
            }
  
            $(element).backstretch(images, {duration: 3000, fade: 700});
  
            var index = 0; // set which one is running
            // bind swipes left and right
            (function () {
              // introduce swipe local variables
              var endAction, startX, deltaX;
              $swipe.bind(element, {
                start: function (coords) {
                  endAction = null;
                  startX = coords.x;
                },
                cancel: function (e) {
                  endAction = null;
                  e.stopPropagation();
                },
                end: function (coords, e) {
                  if (endAction === 'prev') {
                    index = index === 0 ? $scope.images.length - 1 : index - 1;
                  } else if (endAction === 'next') {
                    index = index === ($scope.images.length - 1) ? 0 : index + 1;
                  }
                  if (endAction !== null) {
                    $(element).backstretch('show', index);
                  }
                  e.stopPropagation();
                },
                move: function (coords) {
                  deltaX = coords.x - startX;
                  var deltaXRatio = deltaX / element[0].clientWidth;
                  // swipe thresholds are determined here
                  if (deltaXRatio > 0.2) {
                    endAction = 'next';
                  } else if (deltaXRatio < -0.2) {
                    endAction = 'prev';
                  } else {
                    endAction = null;
                  }
                }
              });
            })();
            // Add carousel action list here
            var div = document.createElement('div');
            // bind event to backstretch.before (could be as well after, but this gives faster response to click)
            $(window).on('backstretch.before', function (e, instance, i) {
              var elements = $(div).children();
              $(elements).removeClass('active');
              $(elements[i]).addClass('active');
              index = i;
            });
            $(div).addClass('mcc-back-stretch-carousel-list')
                    .appendTo(element);
            var clicker = function (el, ind) {
              $(el).bind('click touch', function () {
                $(element).backstretch('show', ind);
              });
            }
            for (var i = 0; i < images.length; i++) {
              var a = document.createElement('a');
              if (i === 0) {
                $(a).addClass('active');
              }
              $(a).appendTo(div);
              (function (element, ind) {
                clicker(element, ind);
              })(a, i);
            }
          });
        }
        return linkFunction;
      }
      return directive;
    }]);