Added dynamic positioning for the popup trend.

Signed-off-by: chanhoonseng <chanhoonseng3101@gmail.com>

static/style.css

@@ -142,6 +142,5 @@ div .popup {
 
 div:hover .popup {
     visibility: visible;
-    top:0; left:250px;
     z-index: 1;
 }

status.html

@@ -531,11 +531,29 @@ data-type="{{
 
 jQuery(window).load(function () {
 
+var win_width = $(document).width();
+var win_height = $(document).height();
 $(".databox").hover(function(){
     var trend_time = Math.floor(Date.now() / 1000);
     var key = $(this).attr('id');
     if ($("#" + key).attr('data-trend') == "true") {
-        $('#'+ key).append('<span class="popup"><img src="/static/'+ $("#page_title_cache").text().toLowerCase() +'/images/'+key+'.png?time='+trend_time+'" width="600px" height="400px"/></span>');
+        $('#'+ key).append('<span class="popup" style="top:0; left:250px;"><img src="/static/'+ $("#page_title_cache").text().toLowerCase() +'/images/'+key+'.png?time='+trend_time+'" width="600px" height="400px"/></span>');
+        var key_left = parseInt($("#" + key).css("left"));
+	var pos_left = key_left + 850;
+        var key_top = parseInt($("#" + key).css("top"));
+        var pos_top = key_top + 400;
+        if(pos_left > win_width) {
+            $("#" + key + " .popup").css({
+	        'right':'250px',
+	        'left': ''
+	    });
+        }
+        if(pos_top > win_height) {
+            $("#" + key + " .popup").css({
+                'bottom':'0px',
+                'top': ''
+            });
+        }
     }
 });