"use strict";
      var topic_set = {
        "topics":[ // 有5个元素的数组,实际中会有有几十个
         {
          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu purus mattis metus suscipit imperdiet. Ut gravida, dolor ultrices cursus malesuada, justo nisl maximus elit, in ornare lacus nunc fringilla dolor. Sed nisl sapien, malesuada in libero sit amet, congue scelerisque sapien. Vestibulum blandit magna eget nulla placerat fringilla. Aenean urna nulla, iaculis in gravida quis, facilisis placerat nibh. Nullam ullamcorper viverra purus, eu ornare nulla tincidunt in. In scelerisque urna eget orci venenatis maximus. Proin facilisis fermentum mi, et tincidunt sem porta venenatis. In mattis efficitur tristique. Sed maximus ante ex, in tempor felis sodales sed. Aenean et felis est. Sed eget ornare tortor. Nam aliquet est eget lacus ullamcorper accumsan. Etiam euismod lectus sapien, et ultricies nibh mollis et.Mauris cursus mollis elit, vitae dictum justo pellentesque vel. Suspendisse semper varius erat non dignissim. Morbi tincidunt nulla vel libero feugiat mattis rhoncus vitae ipsum. Proin lacinia elit eget maximus lacinia. Donec pharetra posuere mauris, quis scelerisque libero placerat et. Curabitur cursus, sem et semper hendrerit, est turpis faucibus neque, sit amet ultricies lacus erat at magna. Quisque feugiat pretium est et sodales. Nulla maximus volutpat metus, in pulvinar libero tincidunt sed. Nulla id interdum lorem. Maecenas pretium quam eget suscipit pulvinar. Cras sed fringilla lacus. Nulla a nunc turpis. Nam imperdiet sapien turpis, sagittis eleifend odio vulputate gravida.Etiam vitae aliquet enim. ",
            "img":{
              "src":"http://cdnimg.in/wp-content/uploads/2015/06/WOW-Amazing-FI-BB-n-Puppies.jpg?cfaea8"
            }
        },
        {
          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque diam velit, malesuada id faucibus tincidunt, mollis sit amet arcu. Suspendisse a hendrerit tortor. Nullam dolor diam, dapibus faucibus aliquam convallis, sagittis quis enim. Suspendisse at porttitor ligula. Aliquam laoreet lacinia porttitor. Nam a nibh consectetur, sagittis quam semper, ornare arcu. Nunc sit amet pharetra turpis. In vitae venenatis sapien.      Maecenas sed suscipit metus. Cras elementum faucibus fermentum. Maecenas aliquet ut mauris sit amet lacinia. Praesent condimentum eu tortor vitae condimentum. Aliquam quis neque hendrerit, convallis enim eget, viverra diam. Vestibulum ut lectus diam. Phasellus dapibus mi nec quam ultrices, vitae rhoncus leo mollis. Suspendisse fringilla ex ac ullamcorper facilisis. Cras non bibendum arcu.      Suspendisse turpis enim, tristique eu dignissim sit amet, sodales non nulla. Aliquam a eros vitae quam cursus egestas ac ac tellus. Fusce molestie turpis sed nibh pulvinar, sit amet volutpat sem ornare. Curabitur gravida suscipit efficitur. Sed at mauris efficitur, bibendum odio id, placerat diam. Phasellus vel tortor ex. Nulla eu augue sem.      Vivamus non justo blandit arcu sollicitudin elementum id eget nisi. Aliquam erat volutpat. Maecenas sit amet interdum lacus. Integer lacinia in odio et finibus. Cras interdum urna id est pretium efficitur. Mauris porta eu tellus vel viverra. Proin dui orci, porttitor vel elementum et, malesuada et tellus. Nunc ligula quam, facilisis sit amet eleifend ac, convallis eget metus. Morbi quis ipsum scelerisque, aliquam arcu et, varius risus. Duis ultrices aliquet leo, in consequat nulla pretium venenatis. Integer venenatis ex a ex ornare egestas. In hac habitasse platea dictumst.",
            "img":{
              "src":"https://www.telegraph.co.uk/content/dam/Travel/galleries/travel/picturegalleries/The-Big-Picture-photography-competition-round-240/arpita_patra_2465947a-large.jpg"
            }
        },
        {
          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque diam velit, malesuada id faucibus tincidunt, mollis sit amet arcu. Suspendisse a hendrerit tortor. Nullam dolor diam, dapibus faucibus aliquam convallis, sagittis quis enim. Suspendisse at porttitor ligula. Aliquam laoreet lacinia porttitor. Nam a nibh consectetur, sagittis quam semper, ornare arcu. Nunc sit amet pharetra turpis. In vitae venenatis sapien.      Maecenas sed suscipit metus. Cras elementum faucibus fermentum. Maecenas aliquet ut mauris sit amet lacinia. Praesent condimentum eu tortor vitae condimentum. Aliquam quis neque hendrerit, convallis enim eget, viverra diam. Vestibulum ut lectus diam. Phasellus dapibus mi nec quam ultrices, vitae rhoncus leo mollis. Suspendisse fringilla ex ac ullamcorper facilisis. Cras non bibendum arcu.      Suspendisse turpis enim, tristique eu dignissim sit amet, sodales non nulla. Aliquam a eros vitae quam cursus egestas ac ac tellus. Fusce molestie turpis sed nibh pulvinar, sit amet volutpat sem ornare. Curabitur gravida suscipit efficitur. Sed at mauris efficitur, bibendum odio id, placerat diam. Phasellus vel tortor ex. Nulla eu augue sem.      Vivamus non justo blandit arcu sollicitudin elementum id eget nisi. Aliquam erat volutpat. Maecenas sit amet interdum lacus. Integer lacinia in odio et finibus. Cras interdum urna id est pretium efficitur. Mauris porta eu tellus vel viverra. Proin dui orci, porttitor vel elementum et, malesuada et tellus. Nunc ligula quam, facilisis sit amet eleifend ac, convallis eget metus. Morbi quis ipsum scelerisque, aliquam arcu et, varius risus. Duis ultrices aliquet leo, in consequat nulla pretium venenatis. Integer venenatis ex a ex ornare egestas. In hac habitasse platea dictumst.      Pellentesque non justo tristique eros facilisis semper. Integer non sollicitudin mi. Vivamus lobortis lectus non velit varius volutpat. Maecenas imperdiet nunc velit, in dapibus orci condimentum sit amet. Vestibulum molestie magna mi, vitae euismod libero euismod id. Donec orci dui, lobortis a eleifend eu, ultricies ac velit. Aenean fringilla quis lacus sit amet sodales. Mauris a posuere lacus. Ut sed lectus ac eros pretium tristique sit amet a tortor. Pellentesque dictum quis nunc in viverra. Fusce dapibus mattis congue. Proin elit velit, venenatis eu elementum sodales, sodales vel sapien.",
            "img":{
              "src":"http://www.petsworld.in/blog/wp-content/uploads/2014/07/kitten-with-puppy.jpg"
            }
        },
        {
          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque diam velit, malesuada id faucibus tincidunt, mollis sit amet arcu. Suspendisse a hendrerit tortor. Nullam dolor diam, dapibus faucibus aliquam convallis, sagittis quis enim. Suspendisse at porttitor ligula. Aliquam laoreet lacinia porttitor. Nam a nibh consectetur, sagittis quam semper, ornare arcu. Nunc sit amet pharetra turpis. In vitae venenatis sapien.",
            "img":{
              "src":"http://www.petsworld.in/blog/wp-content/uploads/2014/07/dog-sleeping-with-kitten.jpg"
            }
        },
        {
          "text": "Donec orci dui, lobortis a eleifend eu, ultricies ac velit. Aenean fringilla quis lacus sit amet sodales. Mauris a posuere lacus. Ut sed lectus ac eros pretium tristique sit amet a tortor. Pellentesque dictum quis nunc in viverra. Fusce dapibus mattis congue. Proin elit velit, venenatis eu elementum sodales, sodales vel sapien.consectetur adipiscing elit. Quisque diam velit, malesuada id faucibus tincidunt, mollis sit amet arcu. Suspendisse a hendrerit tortor. Nullam dolor diam, dapibus faucibus aliquam convallis, sagittis quis enim. Suspendisse at porttitor ligula. Aliquam laoreet lacinia porttitor. Nam a nibh consectetur, sagittis quam semper, ornare arcu. Nunc sit amet pharetra turpis. In vitae venenatis sapien."
        }
      ]};


        var app = angular.module('topicApp', ['ionic']);

     app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider, $interpolateProvider, $httpProvider) {
            $stateProvider.state('slideBox', {
                url : '/slideBox',
                cache: false,
                templateUrl : 'slides.html',
                controller: 'slidesCtrl'
            });

            $urlRouterProvider.otherwise("slideBox");
            $ionicConfigProvider.backButton.text('');
            //$ionicConfigProvider.scrolling.jsScrolling(false);
            $interpolateProvider.startSymbol('{{');
            $interpolateProvider.endSymbol('}}');
            $ionicConfigProvider.navBar.alignTitle('center');

    });

        app.controller('slidesCtrl', [
          '$http', '$scope', '$rootScope', '$compile', '$stateParams', '$state', '$ionicHistory', '$ionicLoading', '$ionicModal', '$ionicScrollDelegate', '$timeout',
          function($http, $scope, $rootScope, $compile, $stateParams, $state, $ionicHistory, $ionicLoading, $ionicModal, $ionicScrollDelegate, $timeout) {
            var topics = topic_set.topics; 
            $scope.topics = topics; //$scope.topics中目前有5个元素，可以有几十个元素
            $scope.bound = 2; //记录当前swiper三个页面中对应topics中索引最大的数据元素
            $scope.index = [0, 1, 2]; //这个数组记录3个索引，对应swiper中的3个页面
            $scope.slidesScope = []; //用来记录3个slide在$compile包含ng-include的tempalte对应的scope

            $scope.options = { //swiper的选项设置
              initialSlide: 0,
              loop: false,
              paginationHide: false,
              paginationClickable: true,
              direction: 'horizontal',
              spaceBetween: 40,
              speed: 600,
              onInit: function(swiper) {
                var newIndex = 0;
                for (var i in $scope.index) { 
                  var container = angular.element('<div>');
                  container.html('<ng-include src="\'text' + i + '.html\'"></ng-include>');
                  newIndex = i % 3;
                  $scope.slidesScope[newIndex] = $scope.$new();
                  var newSlide = $compile(container)($scope.slidesScope[newIndex]);
                  swiper.slides[newIndex].appendChild(newSlide[0]);
                }
              }
            };

            $scope.data = {};
            $scope.data.slider;

            $scope.$watch('data.slider', function(newVal, oldVal) {
              if (newVal != null) {
                var slider = $scope.data.slider;
                slider.on('slideNextEnd', function() { //向左滑动
                  if (slider.previousIndex > 0 && $scope.bound < $scope.topics.length - 1) {
                    slider.removeSlide(0); //删除第1页
                    slider.appendSlide( //追加一页
                      '<div class="swiper-slide"></div>'
                    );
                    slider.update();
                    $scope.bound += 1; //页面的上限增加1
                    var i = $scope.bound;
                    var newIndex = i % 3; //新增的页面索引除以3的余数保存为newIndex, 为template的索引和slidesScope数组中的索引
                    $scope.slidesScope[newIndex].$destroy(); //把slideScope中的3个元素的newIndex对应的scope进行$destroy
                    $scope.index[newIndex] = undefined;
                    var container = angular.element('<div>')
                    container.html('<ng-include src="\'text' + (newIndex) + '.html\'"></ng-include>');
                    $scope.slidesScope[newIndex] = $scope.$new(); //把slideScope中的3个元素的newIndex对应的scope进行新建,为新增页面的scope
                    var newSlide = $compile(container)($scope.slidesScope[newIndex]); //在新建的scope上compile新增加的页面
                    slider.slides[2].appendChild(newSlide[0]); //把新增的页面追加到slider的数组中
                    $timeout(function() {
                      $scope.index[newIndex] = i;
                    });
                  }
                });

                slider.on('slidePrevEnd', function() {
                  if (slider.previousIndex < 2 && $scope.bound > 2) {
                    slider.removeSlide(2); 
                    slider.prependSlide(
                      '<div class="swiper-slide"></div>'
                    );
                    slider.update();
                    $scope.bound -= 1;
                    var i = $scope.bound - 2;
                    var newIndex = i % 3;
                    $scope.slidesScope[newIndex].$destroy();
                    $scope.index[newIndex] = undefined;
                    var container = angular.element('<div>')
                    container.html('<ng-include src="\'text' + (newIndex) + '.html\'"></ng-include>');
                    $scope.slidesScope[newIndex] = $scope.$new();
                    var newSlide = $compile(container)($scope.slidesScope[newIndex]);
                    slider.slides[0].appendChild(newSlide[0]);
                    $timeout(function() {
                      $scope.index[newIndex] = i;
                    });
                  }
                });

              } //if(newVal != null)
            });

          }
        ]);