Move image to its own submodule.

app/components/image/image.html

@@ -0,0 +1,107 @@
+<div ng-include="template" ng-controller="StartContainerController"></div>
+
+<div class="alert alert-error" id="error-message" style="display:none">
+    {{ error }}
+</div>
+
+<div class="detail">
+ 
+    <h4>Image: {{ tag }}</h4>
+
+    <div class="btn-group detail">
+      <button class="btn btn-success" data-toggle="modal" data-target="#create-modal">Create</button>
+    </div>
+
+    <div>
+       <h4>Containers created:</h4>
+       <canvas id="containers-started-chart" width="750">
+                Get a better broswer... Your holding everyone back.
+       </canvas>
+    </div>
+
+    <table class="table table-striped">
+         <tbody>
+            <tr>
+                <td>Created:</td>
+                <td>{{ image.created }}</td>
+            </tr>
+            <tr>
+                <td>Parent:</td>
+                <td><a href="#/images/{{ image.parent }}/">{{ image.parent }}</a></td>
+            </tr>
+            <tr>
+                <td>Size:</td>
+                <td>{{ image.Size|humansize }}</td>
+            </tr>
+
+            <tr>
+                <td>Hostname:</td>
+                <td>{{ image.container_config.Hostname }}</td>
+            </tr>
+            <tr>
+                <td>User:</td>
+                <td>{{ image.container_config.User }}</td>
+            </tr>
+            <tr>
+                <td>Cmd:</td>
+                <td>{{ image.container_config.Cmd }}</td>
+            </tr>
+            <tr>
+                <td>Volumes:</td>
+                <td>{{ image.container_config.Volumes }}</td>
+            </tr>
+            <tr>
+                <td>Volumes from:</td>
+                <td>{{ image.container_config.VolumesFrom }}</td>
+            </tr>
+            <tr>
+                <td>Comment:</td>
+                <td>{{ image.comment }}</td>
+            </tr>
+
+        </tbody>
+    </table>
+
+    <div class="row-fluid">
+        <div class="span1">
+            History:
+        </div>
+        <div class="span5">
+            <i class="icon-refresh" style="width:32px;height:32px;" ng-click="getHistory()"></i>
+        </div>
+    </div> 
+
+    <div class="well well-large">
+        <ul>
+            <li ng-repeat="change in history">
+                <strong>{{ change.Id }}</strong>: Created: {{ change.Created|getdate }} Created by: {{ change.CreatedBy }}
+            </li>
+        </ul>
+    </div>
+
+    <hr />
+
+    <div class="row-fluid">
+        <form class="form-inline" role="form">
+            <fieldset>
+                <legend>Tag image</legend>
+                <div class="form-group">
+                    <label>Tag:</label>
+                    <input type="text" placeholder="repo..." ng-model="tag.repo" class="form-control">
+                </div>
+                <div class="form-group">
+                    <label class="checkbox">
+                        <input type="checkbox" ng-model="tag.force" class="form-control"/> Force?
+                    </label>
+                </div>
+                 <input type="button" ng-click="updateTag()" value="Tag" class="btn btn-primary"/>
+            </fieldset>
+        </form>
+    </div>
+
+    <hr />
+
+    <div class="btn-remove">
+        <button class="btn btn-large btn-block btn-primary btn-danger" ng-click="remove()">Remove Image</button>
+    </div>
+</div>

app/components/image/imageController.js

@@ -0,0 +1,55 @@
+angular.module('image', [])
+.controller('ImageController', ['$scope', '$q', '$routeParams', '$location', 'Image', 'Container', 'Messages',
+function($scope, $q, $routeParams, $location, Image, Container, Messages) {
+    $scope.history = [];
+    $scope.tag = {repo: '', force: false};
+
+    $scope.remove = function() {
+        Image.remove({id: $routeParams.id}, function(d) {
+            Messages.send("Image Removed", $routeParams.id);
+        }, function(e) {
+            $scope.error = e.data;
+            $('#error-message').show();
+        });
+    };
+
+    $scope.getHistory = function() {
+        Image.history({id: $routeParams.id}, function(d) {
+            $scope.history = d;
+        });
+    };
+
+    $scope.updateTag = function() {
+        var tag = $scope.tag;
+        Image.tag({id: $routeParams.id, repo: tag.repo, force: tag.force ? 1 : 0}, function(d) {
+            Messages.send("Tag Added", $routeParams.id);
+        }, function(e) {
+            $scope.error = e.data;
+            $('#error-message').show();
+        });
+    };
+
+    Image.get({id: $routeParams.id}, function(d) {
+        $scope.image = d;
+        $scope.tag = d.id;
+        var t = $routeParams.tag;
+        if (t && t !== ":") {
+            $scope.tag = t;
+            var promise = getContainersFromImage($q, Container, t);
+
+            promise.then(function(containers) {
+                newLineChart('#containers-started-chart', containers, function(c) { return new Date(c.Created * 1000).toLocaleDateString(); });
+            });
+        }
+    }, function(e) {
+        if (e.status === 404) {
+            $('.detail').hide();
+            $scope.error = "Image not found.<br />" + $routeParams.id;
+        } else {
+            $scope.error = e.data;
+        }
+        $('#error-message').show();
+    });
+
+    $scope.getHistory();
+}]);