improve webinterface design

public/javascripts/wipho.js

 $(document).ready(function() {
 
   $('body').height($(window).height());
+  centerImage();
 
   getLatest();
   setInterval(function() {
     getLatest();
-	}, 3000);
+  }, 1000);
+
+  $(window).resize(function () {
+    centerImage();
+  });
+
+  $('#latest').one('load', function(){
+    $(this).one('load', function(){
+      $(this).addClass('imgBorder');
+    });
+  });
+
+  $('#latest').on('load', function(){
+    centerImage();
+    $(this).animate({opacity: 1}, 400);
+  });
   
 });
 
 function getLatest() {
   $.getJSON('/latest', function(data) {
     if('/previews/'+data.name != $('#latest').attr('src')) {
-			$('#latest').attr('src', '/previews/'+data.name);
+      $('#latest').animate({opacity: 0}, 400, function() {
+        $(this).attr('src', '/previews/'+data.name);
+      });
     }
   });
 }
+
+function centerImage() {
+  $('#latest').css({
+    position: 'absolute',
+    left: ($(window).width() - $('#latest').outerWidth()) / 2,
+    top: ($(window).height() - $('#latest').outerHeight()) / 2,
+  });
+}
\ No newline at end of file

public/stylesheets/wipho.css

 body {
+  overflow:hidden;
   margin: 0px;
   padding: 0px;
+  background-color: #000000;
+  background-image: url("../images/bg.png");
 }
 
 a {
@@ -8,6 +11,14 @@ a {
 }
 
 #latest {
-	max-width: 100%;
-	max-height: 100%;
+  margin-top: -0.5%;
+	max-width: 93%;
+	max-height: 93%;
+}
+
+.imgBorder {
+  border: solid 5px #222;
+  -moz-box-shadow: 5px 5px 15px #000;
+  -webkit-box-shadow: 5px 5px 15px #000;
+  box-shadow: 5px 5px 15px #000;
 }
\ No newline at end of file

views/index.jade

@@ -3,4 +3,4 @@ extends layout
 block content
   //h1= title
   //p Welcome to #{title}
-  img(id='latest' src='')
+  img(id='latest' src='images/no_photo.png')
\ No newline at end of file