From 489f12ea1e13d5f0d6a9c73a4f253d3d5fdc4fb0 Mon Sep 17 00:00:00 2001
From: hamza zia <ziahamza2007@gmail.com>
Date: Mon, 28 Jan 2013 19:18:21 +0500
Subject: [PATCH] new uri modal in angular, with overall refactoring and fixes
 in the codebase

---
 angular.html                   |   89 ++-
 css/modals.css                 |    3 +
 js/ctrls/download.js           |    7 +-
 js/ctrls/modal.js              |   26 +-
 js/ctrls/nav.js                |    4 +-
 js/directives/chunkbar.js      |   14 +-
 js/directives/dgraph.js        |   17 +-
 js/init.js                     |    7 +-
 js/libs/angularui-bootstrap.js | 1210 ++++++++++++++++++++++++++++++++
 js/old/script.js               |    9 +-
 js/services/rpc/rpc.js         |   19 +-
 11 files changed, 1365 insertions(+), 40 deletions(-)
 create mode 100644 css/modals.css
 create mode 100755 js/libs/angularui-bootstrap.js

diff --git a/angular.html b/angular.html
index e056c4c..6d96377 100644
--- a/angular.html
+++ b/angular.html
@@ -16,16 +16,19 @@
 
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="css/download.css">
+  <link rel="stylesheet" href="css/modals.css">
 
 
   <!-- external javascript dependencies -->
   <script src="js/libs/jquery-1.8.3.js"></script>
   <script src="js/libs/underscore.js"></script>
 
-  <script src="js/libs/bootstrap.js"></script>
-
   <script src="js/libs/angular.js"></script>
 
+  <script src="js/libs/bootstrap.js"></script>
+  <script src="js/libs/angularui-bootstrap.js"></script>
+
+
   <script src="js/libs/jquery.flot.js"></script>
   <!-- We do manual resize currently
   <script src="js/libs/jquery.flot.resize.js"></script>
@@ -66,8 +69,7 @@
   <div class="container">
     <!--  using a span for collapse rather than a to fix the angular majic on anchors -->
     <span class="btn btn-navbar"
-      data-toggle="collapse"
-      data-target=".nav-collapse">
+      ng-click="collapsed = !collapsed">
 
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
@@ -76,27 +78,29 @@
 
     <a class="brand">{{ name }}</a>
 
-    <div class="nav-collapse">
+    <div class="nav-collapse" collapse="collapsed">
     <ul class="nav">
       <li class="dropdown">
-        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+        <a class="dropdown-toggle" href="#">
           Add <b class="caret"></b>
         </a>
         <ul class="dropdown-menu">
           <li>
-            <a href="#"><i class="icon-download"></i> Add Download URL</a>
+            <a href="#" data-toggle="modal" data-target=".modal-adduris">
+              <i class="icon-download"></i> By URIs
+            </a>
           </li>
           <li>
-            <a href="#"><i class="icon-file"></i> Add Metalink</a>
+            <a href="#"><i class="icon-file"></i> By Metalinks</a>
           </li>
           <li>
-            <a href="#"><i class="icon-file"></i> Add Torrent</a>
+            <a href="#"><i class="icon-file"></i> By Torrents</a>
           </li>
         </ul>
       </li>
 
       <li class="dropdown" id="stop_downloads">
-      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+      <a class="dropdown-toggle" href="#">
         Manage <b class="caret"></b>
       </a>
       <ul class="dropdown-menu">
@@ -111,7 +115,7 @@
 
     <ul class="nav">
       <li class="dropdown">
-        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+        <a href="#" class="dropdown-toggle" >
           Settings <b class="caret"></b>
         </a>
         <ul class="dropdown-menu">
@@ -126,7 +130,7 @@
 
     <ul class="nav pull-right">
       <li class="dropdown">
-        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+        <a href="#" class="dropdown-toggle" >
           About <b class="caret"></b>
         </a>
         <ul class="dropdown-menu">
@@ -150,7 +154,7 @@
   <table ng-repeat="download in getDownloads()" class="download" data-gid="{{download.gid}}">
     <tbody>
     <tr>
-      <td data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse" class="download-overview">
+      <td ng-click="download.collapsed = !download.collapsed" class="download-overview">
         <b class="download-name">{{getName(download)}}</b>
       </td>
       <td class="download-controls" rowspan="2">
@@ -164,7 +168,7 @@
 
           <button class="btn download_settings hidden-phone"><i class="icon-cog"></i></button>
 
-          <button class="btn dropdown-toggle" data-toggle="dropdown">
+          <button class="btn dropdown-toggle">
             <i class="caret"></i>
           </button>
           <ul class="dropdown-menu">
@@ -173,7 +177,7 @@
 
             <li ng-show="download.bittorrent"><a href="#" class="torrent_info"><i class="icon-list-alt"></i> Peers</a></li>
 
-            <li><a href="#" data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse"><i class="icon-info-sign"></i> More Info</a></li>
+            <li><a href="#" ng-click="download.collapsed = !download.collapsed"><i class="icon-info-sign"></i> More Info</a></li>
 
             <li class="visible-phone"><a href="#" ng-click="remove(download)"><i class="icon-remove"></i> Remove</a></li>
           </ul>
@@ -181,7 +185,7 @@
       </td>
     </tr>
     <tr>
-      <td data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse" class="download-overview">
+      <td ng-click="download.collapsed = !download.collapsed" class="download-overview">
         <ul class="stats pull-left">
 
           <li ng-show="hasStatus(download, 'active')" class="label label-success hidden-phone hidden-tablet">Status: <span class="download-status">{{download.status}}</span></li>
@@ -216,7 +220,7 @@
       </td>
     </tr>
     <tr>
-      <td class="download-progress" colspan="2" data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse">
+      <td class="download-progress" colspan="2" ng-click="download.collapsed = !download.collapsed">
 
         <div ng-show="hasStatus(download, 'active')" class="progress progress-striped" style="width: 100%; margin: 0; padding: 0;">
           <div class="bar" style="width: {{getProgress(download)}}%;"></div>
@@ -240,10 +244,10 @@
 
       </td>
     </tr>
-    <tr data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse" class="download-detail">
+    <tr ng-click="download.collapsed = !download.collapsed" class="download-detail">
       <td colspan="2">
-        <div class="collapse more_info">
-          <canvas bitfield="download.bitfield" pieces="download.numPieces" class="progress chunk-canvas" width="1400" style="width: 100%; margin: 5px;" chunkbar></canvas>
+        <div class="more_info" collapse="download.collapsed">
+          <canvas bitfield="download.bitfield" draw="!download.collapsed" pieces="download.numPieces" class="progress chunk-canvas" width="1400" style="width: 100%; margin: 5px;" chunkbar></canvas>
           <ul class="stats">
             <li class="label">Status: <span class="download-status">{{download.status}}</span></li>
             <li class="label">GID: <span class="download-gid">{{download.gid}}</span></li>
@@ -267,7 +271,7 @@
           </ul>
 
           <div ng-show="hasStatus(download, 'active')">
-            <div class="download-graph" dspeed="download.downloadSpeed" uspeed="download.uploadSpeed" dgraph></div>
+            <div class="download-graph" dspeed="download.downloadSpeed" uspeed="download.uploadSpeed" dgraph draw="!download.collapsed"></div>
           </div>
         </div>
       </td>
@@ -281,6 +285,49 @@
 
 <!-- {{{ modals -->
 <div ng-controller="ModalCtrl">
+
+<!--{{{ add new Download template -->
+<div class="modal hide modal-adduris">
+	<div class="modal-header">
+		<button class="close" data-dismiss="modal">x</button>
+		<h3>Add Downloads By URIs</h3>
+	</div>
+	<form class="modal-body">
+    <fieldset>
+      <legend>Download URIs</legend>
+      <textarea rows="6" ng-model="uris"></textarea>
+      <p class="help-block">
+        {{ uris }} <br>
+        You can add multiple downloads (files)
+        at the same time by putting uris for each
+        file on a separate line.
+        <br>
+        You can also add multiple uris (mirrors) for the
+        *same* file. To do this separate the uris
+        by a space.
+        <br>
+        Aria2 will use multiple uris (or mirrors) to boost
+        the download speed for that file (download).
+        <br>
+        E.g. To add 2 files (downloads) f1.jpg
+        and f2.mp4 with 2 uris (mirrors) each,
+        add uris as following:
+        <br>
+        <!-- pre tags print tabs, so do not indent them! -->
+<pre>
+http://ex1.com/f1.jpg http://ex2.com/f1.jpg
+http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
+</pre>
+        A URI can be HTTP(S)/FTP/BitTorrent Magnet URI.
+      </p>
+    </fieldset>
+	</form>
+	<div class="modal-footer">
+		<button class="btn" ng-click="addUris()">Add Downloads</button>
+	</div>
+</div>
+<!-- add new Download template end }}}-->
+
 </div>
 <!-- }}} -->
 
diff --git a/css/modals.css b/css/modals.css
new file mode 100644
index 0000000..a788833
--- /dev/null
+++ b/css/modals.css
@@ -0,0 +1,3 @@
+.modal-adduris textarea {
+  width: 100%;
+}
diff --git a/js/ctrls/download.js b/js/ctrls/download.js
index d719974..594c0fe 100644
--- a/js/ctrls/download.js
+++ b/js/ctrls/download.js
@@ -83,9 +83,14 @@ function(scope, rpc, utils) {
       'status', 'gid', 'bitfield', 'numPieces', 'connections',
       'bittorrent'
     ], function(e) {
-      ctx[e] = d[e];
+      if (ctx[e] != d[e])
+        ctx[e] = d[e];
     });
 
+    // collapse the download details initially
+    if (ctx.collapsed === undefined)
+      ctx.collapsed = true;
+
     return ctx;
   };
 
diff --git a/js/ctrls/modal.js b/js/ctrls/modal.js
index 95aedac..2383a4c 100644
--- a/js/ctrls/modal.js
+++ b/js/ctrls/modal.js
@@ -1,3 +1,27 @@
-app.controller('ModalCtrl', ['$scope', function(scope) {
+app.controller('ModalCtrl', ['$_', '$scope', '$rpc', function(_, scope, rpc) {
+  scope.uris = '';
+  scope.addUris = function() {
+    console.log(scope.uris);
+    var cnt = 0;
+    var cb = function() {
+      cnt--;
+      if (!cnt) {
+        // close modal
+        console.log('closing modal');
+      }
+    };
+    _.chain(scope.uris.trim().split(/\n\r?/g))
+     .map(function(d) { return d.trim().split(/\s+/g) })
+     .filter(function(d) { return d.length })
+     .each(function(uris) {
+       cnt++;
+       // passing true to batch all the addUri calls
+       rpc.once('addUri', [uris], cb, true);
+     })
 
+    // now dispatch all addUri syscalls
+    rpc.forceUpdate();
+
+    scope.uris = '';
+  };
 }]);
diff --git a/js/ctrls/nav.js b/js/ctrls/nav.js
index 4ce216d..659f723 100644
--- a/js/ctrls/nav.js
+++ b/js/ctrls/nav.js
@@ -1,4 +1,6 @@
-
 app.controller('NavCtrl', ['$scope', '$name', function(scope, name) {
   scope.name = name;
+
+  // initially collapsed in mobile resolution
+  scope.collapsed = true;
 }]);
diff --git a/js/directives/chunkbar.js b/js/directives/chunkbar.js
index f8d2a99..917e84f 100644
--- a/js/directives/chunkbar.js
+++ b/js/directives/chunkbar.js
@@ -17,11 +17,15 @@ var draw = function(canvas, chunks, fillStyle) {
     x += dx;
   });
 };
+// put chunkbar and bitfield attributes in a canvas element
+// to use the directive, draw is optional and canvas is
+// only drawn when it is true if given
 app.directive('chunkbar', ['$utils', function(utils) {
   return function(scope, elem, attrs) {
-    var bitfield = "", pieces = 0;
+    var bitfield = "", pieces = 0, canDraw = true;
     var update = function() {
-      draw(elem[0], utils.getChunksFromHex(bitfield, pieces), attrs.fillStyle);
+      if (canDraw)
+        draw(elem[0], utils.getChunksFromHex(bitfield, pieces), attrs.fillStyle);
     };
     scope.$watch(attrs.bitfield, function(bf) {
       bitfield = bf;
@@ -32,6 +36,12 @@ app.directive('chunkbar', ['$utils', function(utils) {
       update();
     });
 
+    if (attrs.draw) {
+      scope.$watch(attrs.draw, function(val) {
+        canDraw = val;
+      });
+    }
+
     update();
   };
 }]);
diff --git a/js/directives/dgraph.js b/js/directives/dgraph.js
index f374807..27e9ca1 100644
--- a/js/directives/dgraph.js
+++ b/js/directives/dgraph.js
@@ -1,7 +1,10 @@
-
-app.directive('dgraph', ['$', '$filter', function($, filter) {
+// graph takes dspeed and uspeed, it queries them every second and draws
+// the last 20 secs, it also takes draw as an optional attribute and only
+// draws the graph when it is true, if not given then graph is always drawn
+app.directive('dgraph', ['$', '$filter', '$parse', function($, filter, parse) {
 
   return function(scope, elem, attrs) {
+    var canDraw = true;
 
     var graphSize = 20
       , dspeed = 0, uspeed = 0
@@ -60,9 +63,9 @@ app.directive('dgraph', ['$', '$filter', function($, filter) {
       if (uconf.data.length > graphSize) uconf.data.shift();
 
       // if any parents is collapsable, then confirm if it isnt
-      var collapsable = elem.parents('.collapse');
-      if (!collapsable.length || collapsable.hasClass('in'))
+      if (canDraw)
         draw();
+
     };
 
     scope.$watch(attrs.dspeed, function(val) {
@@ -73,6 +76,12 @@ app.directive('dgraph', ['$', '$filter', function($, filter) {
       uspeed = val;
     });
 
+    if (attrs.draw) {
+      scope.$watch(attrs.draw, function(val) {
+        canDraw = val;
+      });
+    }
+
     var interval = setInterval(update, 1000);
 
     angular.element(window).bind('resize', draw);
diff --git a/js/init.js b/js/init.js
index c65d574..5e48101 100644
--- a/js/init.js
+++ b/js/init.js
@@ -1,5 +1,10 @@
 var app = angular.module('app', []);
 
 $(function() {
-  angular.bootstrap(document, ['app'])
+  angular.bootstrap(document, [
+    // external deps
+    'ui.bootstrap.collapse', 'ui.bootstrap.dropdownToggle',
+
+    'app'
+  ])
 });
diff --git a/js/libs/angularui-bootstrap.js b/js/libs/angularui-bootstrap.js
new file mode 100755
index 0000000..bc08b3b
--- /dev/null
+++ b/js/libs/angularui-bootstrap.js
@@ -0,0 +1,1210 @@
+angular.module("ui.bootstrap", ["ui.bootstrap.tpls", "ui.bootstrap.accordion","ui.bootstrap.alert","ui.bootstrap.carousel","ui.bootstrap.collapse","ui.bootstrap.dialog","ui.bootstrap.dropdownToggle","ui.bootstrap.modal","ui.bootstrap.pagination","ui.bootstrap.tabs","ui.bootstrap.tooltip","ui.bootstrap.transition"]);
+
+angular.module("ui.bootstrap.tpls", ["template/accordion/accordion-group.html","template/accordion/accordion.html","template/alert/alert.html","template/carousel/carousel.html","template/carousel/slide.html","template/dialog/message.html","template/pagination/pagination.html","template/tabs/pane.html","template/tabs/tabs.html","template/tooltip/tooltip-popup.html"]);
+
+angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
+
+.constant('accordionConfig', {
+  closeOthers: true
+})
+
+.controller('AccordionController', ['$scope', '$attrs', 'accordionConfig', function ($scope, $attrs, accordionConfig) {
+  
+  // This array keeps track of the accordion groups
+  this.groups = [];
+
+  // Ensure that all the groups in this accordion are closed, unless close-others explicitly says not to
+  this.closeOthers = function(openGroup) {
+    var closeOthers = angular.isDefined($attrs.closeOthers) ? $scope.$eval($attrs.closeOthers) : accordionConfig.closeOthers;
+    if ( closeOthers ) {
+      angular.forEach(this.groups, function (group) {
+        if ( group !== openGroup ) {
+          group.isOpen = false;
+        }
+      });
+    }
+  };
+  
+  // This is called from the accordion-group directive to add itself to the accordion
+  this.addGroup = function(groupScope) {
+    var that = this;
+    this.groups.push(groupScope);
+
+    groupScope.$on('$destroy', function (event) {
+      that.removeGroup(groupScope);
+    });
+  };
+
+  // This is called from the accordion-group directive when to remove itself
+  this.removeGroup = function(group) {
+    var index = this.groups.indexOf(group);
+    if ( index !== -1 ) {
+      this.groups.splice(this.groups.indexOf(group), 1);
+    }
+  };
+
+}]);
+
+// The accordion directive simply sets up the directive controller
+// and adds an accordion CSS class to itself element.
+angular.module('ui.bootstrap.accordion').directive('accordion', function () {
+  return {
+    restrict:'EA',
+    controller:'AccordionController',
+    transclude: true,
+    replace: false,
+    templateUrl: 'template/accordion/accordion.html'
+  };
+});
+
+// The accordion-group directive indicates a block of html that will expand and collapse in an accordion
+angular.module('ui.bootstrap.accordion').directive('accordionGroup', ['$parse', '$transition', '$timeout', function($parse, $transition, $timeout) {
+  return {
+    require:'^accordion',         // We need this directive to be inside an accordion
+    restrict:'EA',
+    transclude:true,              // It transcludes the contents of the directive into the template
+    replace: true,                // The element containing the directive will be replaced with the template
+    templateUrl:'template/accordion/accordion-group.html',
+    scope:{ heading:'@' },        // Create an isolated scope and interpolate the heading attribute onto this scope
+    link: function(scope, element, attrs, accordionCtrl) {
+      var getIsOpen, setIsOpen;
+
+      accordionCtrl.addGroup(scope);
+
+      scope.isOpen = false;
+      
+      if ( attrs.isOpen ) {
+        getIsOpen = $parse(attrs.isOpen);
+        setIsOpen = getIsOpen.assign;
+
+        scope.$watch(
+          function watchIsOpen() { return getIsOpen(scope.$parent); },
+          function updateOpen(value) { scope.isOpen = value; }
+        );
+        
+        scope.isOpen = getIsOpen ? getIsOpen(scope.$parent) : false;
+      }
+
+      scope.$watch('isOpen', function(value) {
+        if ( value ) {
+          accordionCtrl.closeOthers(scope);
+        }
+        if ( setIsOpen ) {
+          setIsOpen(scope.$parent, value);
+        }
+      });
+
+    }
+  };
+}]);
+
+angular.module("ui.bootstrap.alert", []).directive('alert', function () {
+  return {
+    restrict:'EA',
+    templateUrl:'template/alert/alert.html',
+    transclude:true,
+    scope:{
+      type:'=',
+      close:'&'
+    },
+    link:function (scope, element, attrs) {
+      scope.type = scope.type || 'info';
+      scope.dismiss = function () {
+        scope.close();
+      };
+    }
+  };
+});
+
+
+/*
+*
+*    Angular Bootstrap Carousel
+*
+*      The carousel has all of the function that the original Bootstrap carousel has, except for animations.
+*
+*      For no interval set the interval to non-number, or milliseconds of desired interval
+*      Template: <carousel interval="none"><slide>{{anything}}</slide></carousel>
+*      To change the carousel's active slide set the active attribute to true
+*      Template: <carousel interval="none"><slide active="someModel">{{anything}}</slide></carousel>
+*/
+angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
+.controller('CarouselController', ['$scope', '$timeout', '$transition', '$q', function ($scope, $timeout, $transition, $q) {
+  var self = this,
+    slides = self.slides = [],
+    currentIndex = -1,
+    currentTimeout, isPlaying;
+  self.currentSlide = null;
+
+  /* direction: "prev" or "next" */
+  self.select = function(nextSlide, direction) {
+    var nextIndex = slides.indexOf(nextSlide);
+    //Decide direction if it's not given
+    if (direction === undefined) {
+      direction = nextIndex > currentIndex ? "next" : "prev";
+    }
+    if (nextSlide && nextSlide !== self.currentSlide) {
+      if ($scope.$currentTransition) {
+        $scope.$currentTransition.cancel();
+        //Timeout so ng-class in template has time to fix classes for finished slide
+        $timeout(goNext);
+      } else {
+        goNext();
+      }
+    }
+    function goNext() {
+      //If we have a slide to transition from and we have a transition type and we're allowed, go
+      if (self.currentSlide && angular.isString(direction) && !$scope.noTransition && nextSlide.$element) {
+        //We shouldn't do class manip in here, but it's the same weird thing bootstrap does. need to fix sometime
+        nextSlide.$element.addClass(direction);
+        nextSlide.$element[0].offsetWidth = nextSlide.$element[0].offsetWidth; //force reflow
+
+        //Set all other slides to stop doing their stuff for the new transition
+        angular.forEach(slides, function(slide) {
+          angular.extend(slide, {direction: '', entering: false, leaving: false, active: false});
+        });
+        angular.extend(nextSlide, {direction: direction, active: true, entering: true});
+        angular.extend(self.currentSlide||{}, {direction: direction, leaving: true});
+
+        $scope.$currentTransition = $transition(nextSlide.$element, {});
+        //We have to create new pointers inside a closure since next & current will change
+        (function(next,current) {
+          $scope.$currentTransition.then(
+            function(){ transitionDone(next, current); },
+            function(){ transitionDone(next, current); }
+          );
+        }(nextSlide, self.currentSlide));
+      } else {
+        transitionDone(nextSlide, self.currentSlide);
+      }
+      self.currentSlide = nextSlide;
+      currentIndex = nextIndex;
+      //every time you change slides, reset the timer
+      restartTimer();
+    }
+    function transitionDone(next, current) {
+      angular.extend(next, {direction: '', active: true, leaving: false, entering: false});
+      angular.extend(current||{}, {direction: '', active: false, leaving: false, entering: false});
+      $scope.$currentTransition = null;
+    }
+  };
+
+  /* Allow outside people to call indexOf on slides array */
+  self.indexOfSlide = function(slide) {
+    return slides.indexOf(slide);
+  };
+
+  $scope.next = function() {
+    var newIndex = (currentIndex + 1) % slides.length;
+    return self.select(slides[newIndex], 'next');
+  };
+
+  $scope.prev = function() {
+    var newIndex = currentIndex - 1 < 0 ? slides.length - 1 : currentIndex - 1;
+    return self.select(slides[newIndex], 'prev');
+  };
+
+  $scope.$watch('interval', restartTimer);
+  function restartTimer() {
+    if (currentTimeout) {
+      $timeout.cancel(currentTimeout);
+    }
+    function go() {
+      if (isPlaying) {
+        $scope.next();
+        restartTimer();
+      } else {
+        $scope.pause();
+      }
+    }
+    var interval = +$scope.interval;
+    if (!isNaN(interval) && interval>=0) {
+      currentTimeout = $timeout(go, interval);
+    }
+  }
+  $scope.play = function() {
+    if (!isPlaying) {
+      isPlaying = true;
+      restartTimer();
+    }
+  };
+  $scope.pause = function() {
+    isPlaying = false;
+    if (currentTimeout) {
+      $timeout.cancel(currentTimeout);
+    }
+  };
+
+  self.addSlide = function(slide, element) {
+    slide.$element = element;
+    slides.push(slide);
+    //if this is the first slide or the slide is set to active, select it
+    if(slides.length === 1 || slide.active) {
+      self.select(slides[slides.length-1]);
+      if (slides.length == 1) {
+        $scope.play();
+      }
+    } else {
+      slide.active = false;
+    }
+  };
+
+  self.removeSlide = function(slide) {
+    //get the index of the slide inside the carousel
+    var index = slides.indexOf(slide);
+    slides.splice(index, 1);
+    if (slides.length > 0 && slide.active) {
+      if (index >= slides.length) {
+        self.select(slides[index-1]);
+      } else {
+        self.select(slides[index]);
+      }
+    }
+  };
+}])
+.directive('carousel', [function() {
+  return {
+    restrict: 'EA',
+    transclude: true,
+    replace: true,
+    controller: 'CarouselController',
+    require: 'carousel',
+    templateUrl: 'template/carousel/carousel.html',
+    scope: {
+      interval: '=',
+      noTransition: '='
+    }
+  };
+}])
+.directive('slide', [function() {
+  return {
+    require: '^carousel',
+    restrict: 'EA',
+    transclude: true,
+    replace: true,
+    templateUrl: 'template/carousel/slide.html',
+    scope: {
+      active: '='
+    },
+    link: function (scope, element, attrs, carouselCtrl) {
+      carouselCtrl.addSlide(scope, element);
+      //when the scope is destroyed then remove the slide from the current slides array
+      scope.$on('$destroy', function() {
+        carouselCtrl.removeSlide(scope);
+      });
+
+      scope.$watch('active', function(active) {
+        if (active) {
+          carouselCtrl.select(scope);
+        }
+      });
+    }
+  };
+}]);
+
+angular.module('ui.bootstrap.collapse',['ui.bootstrap.transition'])
+
+// The collapsible directive indicates a block of html that will expand and collapse
+.directive('collapse', ['$transition', function($transition) {
+  // CSS transitions don't work with height: auto, so we have to manually change the height to a
+  // specific value and then once the animation completes, we can reset the height to auto.
+  // Unfortunately if you do this while the CSS transitions are specified (i.e. in the CSS class
+  // "collapse") then you trigger a change to height 0 in between.
+  // The fix is to remove the "collapse" CSS class while changing the height back to auto - phew!
+  var fixUpHeight = function(scope, element, height) {
+    // We remove the collapse CSS class to prevent a transition when we change to height: auto
+    element.removeClass('collapse');
+    element.css({ height: height });
+    // It appears that  reading offsetWidth makes the browser realise that we have changed the
+    // height already :-/
+    var x = element[0].offsetWidth;
+    element.addClass('collapse');
+  };
+
+  return {
+    link: function(scope, element, attrs) {
+
+      var isCollapsed;
+
+      scope.$watch(attrs.collapse, function(value) {
+        if (value) {
+          collapse();
+        } else {
+          expand();
+        }
+      });
+
+
+      var currentTransition;
+      var doTransition = function(change) {
+        if ( currentTransition ) {
+          currentTransition.cancel();
+        }
+        currentTransition = $transition(element,change);
+        currentTransition.then(
+          function() { currentTransition = undefined; },
+          function() { currentTransition = undefined; }
+        );
+        return currentTransition;
+      };
+
+      var expand = function() {
+        doTransition({ height : element[0].scrollHeight + 'px' })
+        .then(function() {
+          // This check ensures that we don't accidentally update the height if the user has closed
+          // the group while the animation was still running
+          if ( !isCollapsed ) {
+            fixUpHeight(scope, element, 'auto');
+          }
+        });
+        isCollapsed = false;
+      };
+
+      var collapse = function() {
+        isCollapsed = true;
+        fixUpHeight(scope, element, element[0].scrollHeight + 'px');
+        doTransition({'height':'0'});
+      };
+    }
+  };
+}]);
+
+// The `$dialogProvider` can be used to configure global defaults for your
+// `$dialog` service.
+var dialogModule = angular.module('ui.bootstrap.dialog', ['ui.bootstrap.transition']);
+
+dialogModule.controller('MessageBoxController', ['$scope', 'dialog', 'model', function($scope, dialog, model){
+  $scope.title = model.title;
+  $scope.message = model.message;
+  $scope.buttons = model.buttons;
+  $scope.close = function(res){
+    dialog.close(res);
+  };
+}]);
+
+dialogModule.provider("$dialog", function(){
+
+  // The default options for all dialogs.
+	var defaults = {
+		backdrop: true,
+		modalClass: 'modal',
+		backdropClass: 'modal-backdrop',
+    transitionClass: 'fade',
+    triggerClass: 'in',
+		resolve:{},
+		backdropFade: false,
+		modalFade:false,
+		keyboard: true, // close with esc key
+		backdropClick: true // only in conjunction with backdrop=true
+    /* other options: template, templateUrl, controller */
+	};
+
+	var globalOptions = {};
+
+  // The `options({})` allows global configuration of all dialogs in the application.
+  //
+  //      var app = angular.module('App', ['ui.bootstrap.dialog'], function($dialogProvider){
+  //        // don't close dialog when backdrop is clicked by default
+  //        $dialogProvider.options({backdropClick: false});
+  //      });
+	this.options = function(value){
+		globalOptions = value;
+	};
+
+  // Returns the actual `$dialog` service that is injected in controllers
+	this.$get = ["$http", "$document", "$compile", "$rootScope", "$controller", "$templateCache", "$q", "$transition",
+  function ($http, $document, $compile, $rootScope, $controller, $templateCache, $q, $transition) {
+
+		var body = $document.find('body');
+
+		function createElement(clazz) {
+			var el = angular.element("<div>");
+			el.addClass(clazz);
+			return el;
+		}
+
+    // The `Dialog` class represents a modal dialog. The dialog class can be invoked by providing an options object
+    // containing at lest template or templateUrl and controller:
+    //
+    //     var d = new Dialog({templateUrl: 'foo.html', controller: 'BarController'});
+    //
+    // Dialogs can also be created using templateUrl and controller as distinct arguments:
+    //
+    //     var d = new Dialog('path/to/dialog.html', MyDialogController);
+		function Dialog(opts) {
+
+      var self = this, options = this.options = angular.extend({}, defaults, globalOptions, opts);
+
+      this.backdropEl = createElement(options.backdropClass);
+      if(options.backdropFade){
+        this.backdropEl.addClass(options.transitionClass);
+        this.backdropEl.removeClass(options.triggerClass);
+      }
+
+      this.modalEl = createElement(options.modalClass);
+      if(options.modalFade){
+        this.modalEl.addClass(options.transitionClass);
+        this.modalEl.removeClass(options.triggerClass);
+      }
+
+      this.handledEscapeKey = function(e) {
+        if (e.which === 27) {
+          self.close();
+          e.preventDefault();
+          self.$scope.$apply();
+        }
+      };
+
+      this.handleBackDropClick = function(e) {
+        self.close();
+        e.preventDefault();
+        self.$scope.$apply();
+      };
+    }
+
+    // The `isOpen()` method returns wether the dialog is currently visible.
+    Dialog.prototype.isOpen = function(){
+      return this._open;
+    };
+
+    // The `open(templateUrl, controller)` method opens the dialog.
+    // Use the `templateUrl` and `controller` arguments if specifying them at dialog creation time is not desired.
+    Dialog.prototype.open = function(templateUrl, controller){
+      var self = this, options = this.options;
+
+      if(templateUrl){
+        options.templateUrl = templateUrl;
+      }
+      if(controller){
+        options.controller = controller;
+      }
+
+      if(!(options.template || options.templateUrl)) {
+        throw new Error('Dialog.open expected template or templateUrl, neither found. Use options or open method to specify them.');
+      }
+
+      this._loadResolves().then(function(locals) {
+        var $scope = locals.$scope = self.$scope = $rootScope.$new();
+
+        self.modalEl.html(locals.$template);
+
+        if (self.options.controller) {
+          var ctrl = $controller(self.options.controller, locals);
+          self.modalEl.contents().data('ngControllerController', ctrl);
+        }
+
+        $compile(self.modalEl.contents())($scope);
+        self._addElementsToDom();
+
+        // trigger tranisitions
+        setTimeout(function(){
+          if(self.options.modalFade){ self.modalEl.addClass(self.options.triggerClass); }
+          if(self.options.backdropFade){ self.backdropEl.addClass(self.options.triggerClass); }
+        });
+
+        self._bindEvents();
+      });
+
+      this.deferred = $q.defer();
+      return this.deferred.promise;
+    };
+
+    // closes the dialog and resolves the promise returned by the `open` method with the specified result.
+    Dialog.prototype.close = function(result){
+      var self = this;
+      var fadingElements = this._getFadingElements();
+
+      if(fadingElements.length > 0){
+        for (var i = fadingElements.length - 1; i >= 0; i--) {
+          $transition(fadingElements[i], removeTriggerClass).then(onCloseComplete);
+        }
+        return;
+      }
+
+      this._onCloseComplete(result);
+
+      function removeTriggerClass(el){
+        el.removeClass(self.options.triggerClass);
+      }
+
+      function onCloseComplete(){
+        if(self._open){
+          self._onCloseComplete(result);
+        }
+      }
+    };
+
+    Dialog.prototype._getFadingElements = function(){
+      var elements = [];
+      if(this.options.modalFade){
+        elements.push(this.modalEl);
+      }
+      if(this.options.backdropFade){
+        elements.push(this.backdropEl);
+      }
+
+      return elements;
+    };
+
+    Dialog.prototype._bindEvents = function() {
+      if(this.options.keyboard){ body.bind('keydown', this.handledEscapeKey); }
+      if(this.options.backdrop && this.options.backdropClick){ this.backdropEl.bind('click', this.handleBackDropClick); }
+    };
+
+    Dialog.prototype._unbindEvents = function() {
+      if(this.options.keyboard){ body.unbind('keydown', this.handledEscapeKey); }
+      if(this.options.backdrop && this.options.backdropClick){ this.backdropEl.unbind('click', this.handleBackDropClick); }
+    };
+
+    Dialog.prototype._onCloseComplete = function(result) {
+      this._removeElementsFromDom();
+      this._unbindEvents();
+
+      this.deferred.resolve(result);
+    };
+
+    Dialog.prototype._addElementsToDom = function(){
+      body.append(this.modalEl);
+      if(this.options.backdrop) { body.append(this.backdropEl); }
+      this._open = true;
+    };
+
+    Dialog.prototype._removeElementsFromDom = function(){
+      this.modalEl.remove();
+      if(this.options.backdrop) { this.backdropEl.remove(); }
+      this._open = false;
+    };
+
+    // Loads all `options.resolve` members to be used as locals for the controller associated with the dialog.
+    Dialog.prototype._loadResolves = function(){
+      var values = [], keys = [], templatePromise, self = this;
+
+      if (this.options.template) {
+        templatePromise = $q.when(this.options.template);
+      } else if (this.options.templateUrl) {
+        templatePromise = $http.get(this.options.templateUrl, {cache:$templateCache})
+        .then(function(response) { return response.data; });
+      }
+
+      angular.forEach(this.options.resolve || [], function(value, key) {
+        keys.push(key);
+        values.push(value);
+      });
+
+      keys.push('$template');
+      values.push(templatePromise);
+
+      return $q.all(values).then(function(values) {
+        var locals = {};
+        angular.forEach(values, function(value, index) {
+          locals[keys[index]] = value;
+        });
+        locals.dialog = self;
+        return locals;
+      });
+    };
+
+    // The actual `$dialog` service that is injected in controllers.
+    return {
+      // Creates a new `Dialog` with the specified options.
+      dialog: function(opts){
+        return new Dialog(opts);
+      },
+      // creates a new `Dialog` tied to the default message box template and controller.
+      //
+      // Arguments `title` and `message` are rendered in the modal header and body sections respectively.
+      // The `buttons` array holds an object with the following members for each button to include in the
+      // modal footer section:
+      //
+      // * `result`: the result to pass to the `close` method of the dialog when the button is clicked
+      // * `label`: the label of the button
+      // * `cssClass`: additional css class(es) to apply to the button for styling
+      messageBox: function(title, message, buttons){
+        return new Dialog({templateUrl: 'template/dialog/message.html', controller: 'MessageBoxController', resolve: {model: {
+          title: title,
+          message: message,
+          buttons: buttons
+        }}});
+      }
+    };
+  }];
+});
+
+/*
+ * dropdownToggle - Provides dropdown menu functionality in place of bootstrap js
+ * @restrict class or attribute
+ * @example:
+   <li class="dropdown">
+     <a class="dropdown-toggle">My Dropdown Menu</a>
+     <ul class="dropdown-menu">
+       <li ng-repeat="choice in dropChoices">
+         <a ng-href="{{choice.href}}">{{choice.text}}</a>
+       </li>
+     </ul>
+   </li>
+ */
+
+angular.module('ui.bootstrap.dropdownToggle', []).directive('dropdownToggle',
+['$document', '$location', '$window', function ($document, $location, $window) {
+  var openElement = null, close;
+  return {
+    restrict: 'CA',
+    link: function(scope, element, attrs) {
+      scope.$watch(function dropdownTogglePathWatch(){return $location.path();}, function dropdownTogglePathWatchAction() {
+        if (close) { close(); }
+      });
+
+      element.parent().bind('click', function(event) {
+        if (close) { close(); }
+      });
+
+      element.bind('click', function(event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        var iWasOpen = false;
+
+        if (openElement) {
+          iWasOpen = openElement === element;
+          close();
+        }
+
+        if (!iWasOpen){
+          element.parent().addClass('open');
+          openElement = element;
+
+          close = function (event) {
+            if (event) {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+            $document.unbind('click', close);
+            element.parent().removeClass('open');
+            close = null;
+            openElement = null;
+          };
+
+          $document.bind('click', close);
+        }
+      });
+    }
+  };
+}]);
+
+angular.module('ui.bootstrap.modal', []).directive('modal', ['$parse',function($parse) {
+  var backdropEl;
+  var body = angular.element(document.getElementsByTagName('body')[0]);
+  var defaultOpts = {
+    backdrop: true,
+    escape: true
+  };
+  return {
+    restrict: 'EA',
+    link: function(scope, elm, attrs) {
+      var opts = angular.extend(defaultOpts, scope.$eval(attrs.uiOptions || attrs.bsOptions || attrs.options));
+      var shownExpr = attrs.modal || attrs.show;
+      var setClosed;
+
+      if (attrs.close) {
+        setClosed = function() {
+          scope.$apply(attrs.close);
+        };
+      } else {
+        setClosed = function() {
+          scope.$apply(function() {
+            $parse(shownExpr).assign(scope, false);
+          });
+        };
+      }
+      elm.addClass('modal');
+
+      if (opts.backdrop && !backdropEl) {
+        backdropEl = angular.element('<div class="modal-backdrop"></div>');
+        backdropEl.css('display','none');
+        body.append(backdropEl);
+      }
+
+      function setShown(shown) {
+        scope.$apply(function() {
+          model.assign(scope, shown);
+        });
+      }
+
+      function escapeClose(evt) {
+        if (evt.which === 27) { setClosed(); }
+      }
+      function clickClose() {
+        setClosed();
+      }
+
+      function close() {
+        if (opts.escape) { body.unbind('keyup', escapeClose); }
+        if (opts.backdrop) {
+          backdropEl.css('display', 'none').removeClass('in');
+          backdropEl.unbind('click', clickClose);
+        }
+        elm.css('display', 'none').removeClass('in');
+        body.removeClass('modal-open');
+      }
+      function open() {
+        if (opts.escape) { body.bind('keyup', escapeClose); }
+        if (opts.backdrop) {
+          backdropEl.css('display', 'block').addClass('in');
+          if(opts.backdrop != "static") {
+            backdropEl.bind('click', clickClose);
+          }
+        }
+        elm.css('display', 'block').addClass('in');
+        body.addClass('modal-open');
+      }
+
+      scope.$watch(shownExpr, function(isShown, oldShown) {
+        if (isShown) {
+          open();
+        } else {
+          close();
+        }
+      });
+    }
+  };
+}]);
+
+angular.module('ui.bootstrap.pagination', [])
+
+.directive('pagination', function() {
+  return {
+    restrict: 'EA',
+    scope: {
+      numPages: '=',
+      currentPage: '=',
+      maxSize: '=',
+      onSelectPage: '&'
+    },
+    templateUrl: 'template/pagination/pagination.html',
+    replace: true,
+    link: function(scope) {
+      scope.$watch('numPages + currentPage + maxSize', function() {
+        scope.pages = [];
+
+        //set the default maxSize to numPages
+        var maxSize = ( scope.maxSize && scope.maxSize < scope.numPages ) ? scope.maxSize : scope.numPages;
+        var startPage = scope.currentPage - Math.floor(maxSize/2);
+
+        //adjust the startPage within boundary
+        if(startPage < 1) {
+            startPage = 1;
+        }
+        if ((startPage + maxSize - 1) > scope.numPages) {
+            startPage = startPage - ((startPage + maxSize - 1) - scope.numPages );
+        }
+
+        for(var i=0; i < maxSize && i < scope.numPages ;i++) {
+          scope.pages.push(startPage + i);
+        }
+        if ( scope.currentPage > scope.numPages ) {
+          scope.selectPage(scope.numPages);
+        }
+      });
+      scope.noPrevious = function() {
+        return scope.currentPage === 1;
+      };
+      scope.noNext = function() {
+        return scope.currentPage === scope.numPages;
+      };
+      scope.isActive = function(page) {
+        return scope.currentPage === page;
+      };
+
+      scope.selectPage = function(page) {
+        if ( ! scope.isActive(page) ) {
+          scope.currentPage = page;
+          scope.onSelectPage({ page: page });
+        }
+      };
+
+      scope.selectPrevious = function() {
+        if ( !scope.noPrevious() ) {
+          scope.selectPage(scope.currentPage-1);
+        }
+      };
+      scope.selectNext = function() {
+        if ( !scope.noNext() ) {
+          scope.selectPage(scope.currentPage+1);
+        }
+      };
+    }
+  };
+});
+angular.module('ui.bootstrap.tabs', [])
+.controller('TabsController', ['$scope', '$element', function($scope, $element) {
+  var panes = $scope.panes = [];
+
+  $scope.select = function selectPane(pane) {
+    angular.forEach(panes, function(pane) {
+      pane.selected = false;
+    });
+    pane.selected = true;
+  };
+
+  this.addPane = function addPane(pane) {
+    if (!panes.length) {
+      $scope.select(pane);
+    }
+    panes.push(pane);
+  };
+
+  this.removePane = function removePane(pane) {
+    var index = panes.indexOf(pane);
+    panes.splice(index, 1);
+    //Select a new pane if removed pane was selected
+    if (pane.selected && panes.length > 0) {
+      $scope.select(panes[index < panes.length ? index : index-1]);
+    }
+  };
+}])
+.directive('tabs', function() {
+  return {
+    restrict: 'EA',
+    transclude: true,
+    scope: {},
+    controller: 'TabsController',
+    templateUrl: 'template/tabs/tabs.html',
+    replace: true
+  };
+})
+.directive('pane', function() {
+  return {
+    require: '^tabs',
+    restrict: 'EA',
+    transclude: true,
+    scope:{
+      heading:'@'
+    },
+    link: function(scope, element, attrs, tabsCtrl) {
+      tabsCtrl.addPane(scope);
+      scope.$on('$destroy', function() {
+        tabsCtrl.removePane(scope);
+      });
+    },
+    templateUrl: 'template/tabs/pane.html',
+    replace: true
+  };
+});
+
+/**
+ * The following features are still outstanding: popup delay, animation as a
+ * function, placement as a function, inside, support for more triggers than
+ * just mouse enter/leave, html tooltips, and selector delegatation.
+ */
+angular.module( 'ui.bootstrap.tooltip', [] )
+.directive( 'tooltipPopup', function () {
+  return {
+    restrict: 'EA',
+    replace: true,
+    scope: { tooltipTitle: '@', placement: '@', animation: '&', isOpen: '&' },
+    templateUrl: 'template/tooltip/tooltip-popup.html'
+  };
+})
+.directive( 'tooltip', [ '$compile', '$timeout', '$parse', function ( $compile, $timeout, $parse ) {
+
+  var template =
+    '<tooltip-popup '+
+      'tooltip-title="{{tt_tooltip}}" '+
+      'placement="{{tt_placement}}" '+
+      'animation="tt_animation()" '+
+      'is-open="tt_isOpen"'+
+      '>'+
+    '</tooltip-popup>';
+
+  return {
+    scope: true,
+    link: function ( scope, element, attr ) {
+      var tooltip = $compile( template )( scope ),
+          transitionTimeout;
+
+      attr.$observe( 'tooltip', function ( val ) {
+        scope.tt_tooltip = val;
+      });
+
+      attr.$observe( 'tooltipPlacement', function ( val ) {
+        // If no placement was provided, default to 'top'.
+        scope.tt_placement = val || 'top';
+      });
+
+      attr.$observe( 'tooltipAnimation', function ( val ) {
+        scope.tt_animation = $parse( val );
+      });
+
+      // By default, the tooltip is not open.
+      scope.tt_isOpen = false;
+
+      // Calculate the current position and size of the directive element.
+      function getPosition() {
+        return {
+          width: element.prop( 'offsetWidth' ),
+          height: element.prop( 'offsetHeight' ),
+          top: element.prop( 'offsetTop' ),
+          left: element.prop( 'offsetLeft' )
+        };
+      }
+
+      // Show the tooltip popup element.
+      function show() {
+        var position,
+            ttWidth,
+            ttHeight,
+            ttPosition;
+
+        // If there is a pending remove transition, we must cancel it, lest the
+        // toolip be mysteriously removed.
+        if ( transitionTimeout ) {
+          $timeout.cancel( transitionTimeout );
+        }
+
+        // Set the initial positioning.
+        tooltip.css({ top: 0, left: 0, display: 'block' });
+
+        // Now we add it to the DOM because need some info about it. But it's not
+        // visible yet anyway.
+        element.after( tooltip );
+
+        // Get the position of the directive element.
+        position = getPosition();
+
+        // Get the height and width of the tooltip so we can center it.
+        ttWidth = tooltip.prop( 'offsetWidth' );
+        ttHeight = tooltip.prop( 'offsetHeight' );
+
+        // Calculate the tooltip's top and left coordinates to center it with
+        // this directive.
+        switch ( scope.tt_placement ) {
+          case 'right':
+            ttPosition = {
+              top: (position.top + position.height / 2 - ttHeight / 2) + 'px',
+              left: (position.left + position.width) + 'px'
+            };
+            break;
+          case 'bottom':
+            ttPosition = {
+              top: (position.top + position.height) + 'px',
+              left: (position.left + position.width / 2 - ttWidth / 2) + 'px'
+            };
+            break;
+          case 'left':
+            ttPosition = {
+              top: (position.top + position.height / 2 - ttHeight / 2) + 'px',
+              left: (position.left - ttWidth) + 'px'
+            };
+            break;
+          default:
+            ttPosition = {
+              top: (position.top - ttHeight) + 'px',
+              left: (position.left + position.width / 2 - ttWidth / 2) + 'px'
+            };
+            break;
+        }
+
+        // Now set the calculated positioning.
+        tooltip.css( ttPosition );
+
+        // And show the tooltip.
+        scope.tt_isOpen = true;
+      }
+
+      // Hide the tooltip popup element.
+      function hide() {
+        // First things first: we don't show it anymore.
+        //tooltip.removeClass( 'in' );
+        scope.tt_isOpen = false;
+
+        // And now we remove it from the DOM. However, if we have animation, we
+        // need to wait for it to expire beforehand.
+        // FIXME: this is a placeholder for a port of the transitions library.
+        if ( angular.isDefined( scope.tt_animation ) && scope.tt_animation() ) {
+          transitionTimeout = $timeout( function () { tooltip.remove(); }, 500 );
+        } else {
+          tooltip.remove();
+        }
+      }
+
+      // Register the event listeners.
+      element.bind( 'mouseenter', function() {
+        scope.$apply( show );
+      });
+      element.bind( 'mouseleave', function() {
+        scope.$apply( hide );
+      });
+    }
+  };
+}]);
+
+
+angular.module('ui.bootstrap.transition', [])
+
+/**
+ * $transition service provides a consistent interface to trigger CSS 3 transitions and to be informed when they complete.
+ * @param  {DOMElement} element  The DOMElement that will be animated.
+ * @param  {string|object|function} trigger  The thing that will cause the transition to start:
+ *   - As a string, it represents the css class to be added to the element.
+ *   - As an object, it represents a hash of style attributes to be applied to the element.
+ *   - As a function, it represents a function to be called that will cause the transition to occur.
+ * @return {Promise}  A promise that is resolved when the transition finishes.
+ */
+.factory('$transition', ['$q', '$timeout', '$rootScope', function($q, $timeout, $rootScope) {
+
+  var $transition = function(element, trigger) {
+
+    var deferred = $q.defer();
+    var transitionEndHandler = function(event) {
+      $rootScope.$apply(function() {
+      element.unbind($transition.transitionEndEventName, transitionEndHandler);
+        deferred.resolve(element);
+      });
+    };
+
+    // Only bind if the browser supports transitions
+    if ( $transition.transitionEndEventName ) {
+      element.bind($transition.transitionEndEventName, transitionEndHandler);
+    }
+
+    // Wrap in a timeout to allow the browser time to update the DOM before the transition is to occur
+    $timeout(function() {
+      if ( angular.isString(trigger) ) {
+        element.addClass(trigger);
+      } else if ( angular.isFunction(trigger) ) {
+        trigger(element);
+      } else if ( angular.isObject(trigger) ) {
+        element.css(trigger);
+      }
+
+      // If the browser doesn't support transitions then we immediately resolve the event
+      if ( !$transition.transitionEndEventName ) {
+        deferred.resolve(element);
+      }
+    });
+
+    // Add out custom cancel function to the promise that is returned
+    // We can call this if we are about to run a new transition, which we know will prevent this transition from ending,
+    // i.e. it will therefore never raise a transitionEnd event for that transition
+    deferred.promise.cancel = function() {
+      if ( $transition.transitionEndEventName ) {
+        element.unbind($transition.transitionEndEventName, transitionEndHandler);
+      }
+      deferred.reject('Transition cancelled');
+    };
+
+    return deferred.promise;
+  };
+
+  // Work out the name of the transitionEnd event
+  var transElement = document.createElement('trans');
+  var transitionEndEventNames = {
+    'WebkitTransition': 'webkitTransitionEnd',
+    'MozTransition': 'transitionend',
+    'OTransition': 'oTransitionEnd',
+    'msTransition': 'MSTransitionEnd',
+    'transition': 'transitionend'
+  };
+  for (var name in transitionEndEventNames){
+    if (transElement.style[name] !== undefined) {
+      $transition.transitionEndEventName = transitionEndEventNames[name];
+    }
+  }
+  return $transition;
+}]);
+angular.module("template/accordion/accordion-group.html", []).run(["$templateCache", function($templateCache){
+  $templateCache.put("template/accordion/accordion-group.html",
+    "<div class=\"accordion-group\">" +
+    "  <div class=\"accordion-heading\" ><a class=\"accordion-toggle\" ng-click=\"isOpen = !isOpen\">{{heading}}</a></div>" +
+    "  <div class=\"accordion-body\" collapse=\"!isOpen\">" +
+    "    <div class=\"accordion-inner\" ng-transclude></div>  </div>" +
+    "</div>");
+}]);
+
+angular.module("template/accordion/accordion.html", []).run(["$templateCache", function($templateCache){
+  $templateCache.put("template/accordion/accordion.html",
+    "<div class=\"accordion\" ng-transclude></div>");
+}]);
+
+angular.module("template/alert/alert.html", []).run(["$templateCache", function($templateCache){
+  $templateCache.put("template/alert/alert.html",
+    "<div class='alert alert-block' ng-class=\"'alert-' + type\">" +
+    "  <button type='button' class='close' ng-click='dismiss()'>&times;</button>" +
+    "  <div ng-transclude></div>" +
+    "</div>");
+}]);
+
+angular.module("template/carousel/carousel.html", []).run(["$templateCache", function($templateCache){
+  $templateCache.put("template/carousel/carousel.html",
+    "<div ng-mouseenter=\"pause()\" ng-mouseleave=\"play()\" class=\"carousel\">" +
+    "    <div class=\"carousel-inner\" ng-transclude></div>" +
+    "    <a ng-click=\"prev()\" class=\"carousel-control left\">&lsaquo;</a>" +
+    "    <a ng-click=\"next()\" class=\"carousel-control right\">&rsaquo;</a>" +
+    "</div>" +
+    "");
+}]);
+
+angular.module("template/carousel/slide.html", []).run(["$templateCache", function($templateCache){
+  $templateCache.put("template/carousel/slide.html",
+    "<div ng-class=\"{" +
+    "    'active': leaving || (active && !entering)," +
+    "    'prev': (next || active) && direction=='prev'," +
+    "    'next': (next || active) && direction=='next'," +
+    "    'right': direction=='prev'," +
+    "    'left': direction=='next'" +
+    "  }\" class=\"item\" ng-transclude></div>" +
+    "");
+}]);
+
+angular.module("template/dialog/message.html", []).run(["$templateCache", function($templateCache){
+  $templateCache.put("template/dialog/message.html",
+    "<div class=\"modal-header\">" +
+    "	<h1>{{ title }}</h1>" +
+    "</div>" +
+    "<div class=\"modal-body\">" +
+    "	<p>{{ message }}</p>" +
+    "</div>" +
+    "<div class=\"modal-footer\">" +
+    "	<button ng-repeat=\"btn in buttons\" ng-click=\"close(btn.result)\" class=btn ng-class=\"btn.cssClass\">{{ btn.label }}</button>" +
+    "</div>" +
+    "");
+}]);
+
+angular.module("template/pagination/pagination.html", []).run(["$templateCache", function($templateCache){
+  $templateCache.put("template/pagination/pagination.html",
+    "<div class=\"pagination\"><ul>" +
+    "  <li ng-class=\"{disabled: noPrevious()}\"><a ng-click=\"selectPrevious()\">Previous</a></li>" +
+    "  <li ng-repeat=\"page in pages\" ng-class=\"{active: isActive(page)}\"><a ng-click=\"selectPage(page)\">{{page}}</a></li>" +
+    "  <li ng-class=\"{disabled: noNext()}\"><a ng-click=\"selectNext()\">Next</a></li>" +
+    "  </ul>" +
+    "</div>" +
+    "");
+}]);
+
+angular.module("template/tabs/pane.html", []).run(["$templateCache", function($templateCache){
+  $templateCache.put("template/tabs/pane.html",
+    "<div class=\"tab-pane\" ng-class=\"{active: selected}\" ng-show=\"selected\" ng-transclude></div>" +
+    "");
+}]);
+
+angular.module("template/tabs/tabs.html", []).run(["$templateCache", function($templateCache){
+  $templateCache.put("template/tabs/tabs.html",
+    "<div class=\"tabbable\">" +
+    "  <ul class=\"nav nav-tabs\">" +
+    "    <li ng-repeat=\"pane in panes\" ng-class=\"{active:pane.selected}\">" +
+    "      <a href=\"\" ng-click=\"select(pane)\">{{pane.heading}}</a>" +
+    "    </li>" +
+    "  </ul>" +
+    "  <div class=\"tab-content\" ng-transclude></div>" +
+    "</div>" +
+    "");
+}]);
+
+angular.module("template/tooltip/tooltip-popup.html", []).run(["$templateCache", function($templateCache){
+  $templateCache.put("template/tooltip/tooltip-popup.html",
+    "<div class=\"tooltip {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">" +
+    "  <div class=\"tooltip-arrow\"></div>" +
+    "  <div class=\"tooltip-inner\" ng-bind=\"tooltipTitle\"></div>" +
+    "</div>" +
+    "");
+}]);
diff --git a/js/old/script.js b/js/old/script.js
index 22545b1..139501d 100755
--- a/js/old/script.js
+++ b/js/old/script.js
@@ -426,9 +426,12 @@ function getTemplateCtx(data) {
 function updateDownloadTemplates(elem, ctx) {
 	elem = $(elem);
 
+	var oldctx = elem.data('ctx')  || {};
+
 	// update spans
 	for(var i in ctx) {
-		elem.find('.download-' + i).text(ctx[i]);
+		if (oldctx[i] != ctx[i])
+			elem.find('.download-' + i).text(ctx[i]);
 	}
 
 	// update files
@@ -439,7 +442,8 @@ function updateDownloadTemplates(elem, ctx) {
 	elem.find('.download-files').html(html);
 
 	// update progress bar
-	elem.find('.progress .bar').css('width', ctx.percentage + '%');
+	if (oldctx.percentage != ctx.percentage)
+		elem.find('.progress .bar').css('width', ctx.percentage + '%');
 
 	// update the chunks bar
 	var chunks = ctx.chunks;
@@ -462,6 +466,7 @@ function updateDownloadTemplates(elem, ctx) {
 			ctx.fillRect(x, 0, dx, height);
 		x += dx;
 	});
+	elem.data('ctx', ctx);
 }
 function deleteDownloadTemplates($top_elem, data) {
 	if(!data) {
diff --git a/js/services/rpc/rpc.js b/js/services/rpc/rpc.js
index 0f9874e..8be8b32 100644
--- a/js/services/rpc/rpc.js
+++ b/js/services/rpc/rpc.js
@@ -66,8 +66,10 @@ app.factory('$rpc', ['$syscall', '$globalTimeout', function(syscall, time) {
       else
         configurations = [conf];
     },
-    // syscall is done only once
-    once: function(name, params, cb) {
+    // syscall is done only once, delay is optional
+    // and pass true to only dispatch it in the global timeout
+    // which can be used to batch up once calls
+    once: function(name, params, cb, delay) {
       cb = cb || angular.noop;
       params = params || [];
 
@@ -78,12 +80,16 @@ app.factory('$rpc', ['$syscall', '$globalTimeout', function(syscall, time) {
         cb: cb
       });
 
-      this.forceUpdate();
+      if (!delay) {
+        this.forceUpdate();
+      }
     },
 
     // callback is called each time with updated syscall data
-    // after the global timeout
-    subscribe: function(name, params, cb) {
+    // after the global timeout, delay is optional and pass it
+    // true to dispatch the first syscall also on global timeout
+    // which can be used to batch the subscribe calls
+    subscribe: function(name, params, cb, delay) {
       cb = cb || angular.noop;
       params = params || [];
 
@@ -95,8 +101,7 @@ app.factory('$rpc', ['$syscall', '$globalTimeout', function(syscall, time) {
       };
       subscriptions.push(handle);
 
-      this.forceUpdate();
-
+      if (!delay) this.forceUpdate();
       return handle;
     },