Merge branch 'milestone5' of https://github.com/WSO2Mobile/mobilestore …

…into milestone5

assets/mobileapp/themes/store/assets/tooltip/jquery.tooltip.css

@@ -0,0 +1,59 @@
+div.jquery-gdakram-tooltip { 
+  width: 100%;
+  color: #000000;
+  font-size: 12px;
+	position: absolute;
+	z-index: 10000;
+	top: 0px;
+	left: 0px;
+	display: none;
+}
+
+div.jquery-gdakram-tooltip div.content { 
+  background-color: #ffffff;
+  width: 280px;
+  min-height: 200px;
+  float: left;
+  padding: 10px;
+
+  border-color: #EEEEEE #DDDDDD #BBBBBB;
+	border-image: none;
+	border-radius: 5px 5px 5px 5px;
+	border-style: solid;
+	border-width: 1px;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);	
+}
+
+div.jquery-gdakram-tooltip div.content h1 {
+  font-size: 16px;
+  border-bottom: 1px solid #C4C4C4;
+  padding-bottom: 5px;
+}
+
+div.jquery-gdakram-tooltip div.up_arrow {
+  background : url('images/up_arrow.png') 60px 0px no-repeat;
+  width: 100%;
+  height: 20px;
+}
+
+div.jquery-gdakram-tooltip div.down_arrow {
+  background : url('images/down_arrow.png') 60px 0px no-repeat;
+  width: 100%;
+  height: 20px;
+}
+
+div.jquery-gdakram-tooltip div.left_arrow {
+  height: 100%;
+}
+
+div.jquery-gdakram-tooltip div.left_arrow {
+  float:left;
+  background : url('images/left_arrow.png') 0px 0px no-repeat;
+  width: 20px;
+  height: 20px;
+  position: relative;
+  top: 40px;
+  left: 0px;
+}
+
+

assets/mobileapp/themes/store/assets/tooltip/jquery.tooltip.js

@@ -0,0 +1,166 @@
+/**
+ * JQuery Tooltip Plugin
+ *
+ * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ *
+ * Written by Shahrier Akram <[email protected]>
+ *
+ * Tooltip is a jQuery plugin implementing unobtrusive javascript interaction that appears
+ * near DOM elements, wherever they may be, that require extra information. 
+ *
+ * Visit http://gdakram.github.com/JQuery-Tooltip-Plugin for demo.
+**/
+
+(function($) {
+
+   $.fn.tooltip = function(settings) {
+     // Configuration setup
+     config = { 
+       'dialog_content_selector' : 'div.tooltip_description',
+       'animation_distance' : 50,
+       'opacity' : 0.95,
+       'arrow_left_offset' : 70,
+       'arrow_top_offset' : 50,
+       'arrow_height' : 20,
+       'arrow_width' : 20,
+       'animation_duration_ms' : 300,
+       'event_in':'mouseover',
+       'event_out':'mouseout',
+       'hover_delay' : 0
+     }; 
+     if (settings) $.extend(config, settings);
+
+     /**
+      * Apply interaction to all the matching elements
+      **/
+     this.each(function() {
+       var hoverTimer;
+       $(this).bind(config.event_in,function(){
+         var ele = this;
+         hoverTimer = setTimeout(function() { _show(ele); }, config.hover_delay)
+       })
+       .bind(config.event_out,function(){
+         clearTimeout(hoverTimer);
+         _hide(this);
+       })
+     });
+
+     /**
+      * Positions the dialog box based on the target
+      * element's location
+      **/
+     function _show(target_elm) {
+       var dialog_content = $(target_elm).find(config.dialog_content_selector);
+       var dialog_box = _create(dialog_content);
+
+       var is_top_right = $(target_elm).hasClass("tooltiptopright");
+       var is_bottom_right = $(target_elm).hasClass("tooltipbottomright");
+       var is_top = $(target_elm).hasClass("tooltiptop");
+       var is_bottom = $(target_elm).hasClass("tooltipbottom");
+       var has_position = is_top_right || is_bottom_right || is_top || is_bottom;
+       var position;
+
+       var target_elm_position = $(target_elm).offset();
+
+       // coming from the top right
+       if (is_top_right || !has_position && (target_elm_position.top < $(dialog_box).outerHeight() && target_elm_position.top >= config.arrow_top_offset)) {
+         position = { 
+           start : { 
+             left : target_elm_position.left + $(target_elm).outerWidth() + config.animation_distance,
+             top  : target_elm_position.top + ($(target_elm).outerHeight() / 2) - config.arrow_top_offset
+           },
+           end : {
+             left : target_elm_position.left + $(target_elm).outerWidth(),
+             top  : target_elm_position.top + ($(target_elm).outerHeight() / 2) - config.arrow_top_offset
+           },
+           arrow_class : "div.left_arrow"
+         }
+       }
+       // coming from the bottom right
+       else if (is_bottom_right || !has_position && (target_elm_position.left < config.arrow_left_offset + $(target_elm).outerWidth() && target_elm_position.top > $(dialog_box).outerHeight())) {
+         position = { 
+           start : { 
+             left : target_elm_position.left + $(target_elm).outerWidth() + config.animation_distance,
+             top  : target_elm_position.top + ($(target_elm).outerHeight() / 2) + config.arrow_top_offset - $(dialog_box).outerHeight() + config.arrow_height
+           },
+           end : {
+             left : target_elm_position.left + $(target_elm).outerWidth(),
+             top  : target_elm_position.top + ($(target_elm).outerHeight() / 2) + config.arrow_top_offset - $(dialog_box).outerHeight() + config.arrow_height
+           },
+           arrow_class : "div.left_arrow"
+         }
+         $(dialog_box).find("div.left_arrow").css({ top: $(dialog_box).outerHeight() - (config.arrow_top_offset * 2) + "px" });
+       }
+       // coming from the top
+       else if (is_top || !has_position &&(target_elm_position.top + config.animation_distance > $(dialog_box).outerHeight() && target_elm_position.left >= config.arrow_left_offset)) {
+         position = { 
+           start : { 
+             left : target_elm_position.left + ($(target_elm).outerWidth() / 2) - config.arrow_left_offset,
+             top  : target_elm_position.top - config.animation_distance - $(dialog_box).outerHeight()
+           },
+           end : {
+             left : target_elm_position.left + ($(target_elm).outerWidth() / 2) - config.arrow_left_offset,
+             top  : target_elm_position.top - $(dialog_box).outerHeight() + config.arrow_height
+           },
+           arrow_class : "div.down_arrow"
+         }
+       }       
+       // coming from the bottom
+       else if (is_bottom || !has_position &&(target_elm_position.top + config.animation_distance < $(dialog_box).outerHeight())) {
+         position = { 
+           start : { 
+             left : target_elm_position.left + ($(target_elm).outerWidth() / 2) - config.arrow_left_offset,
+             top  : target_elm_position.top + $(target_elm).outerHeight() + config.animation_distance
+           },
+           end : {
+             left : target_elm_position.left + ($(target_elm).outerWidth() / 2) - config.arrow_left_offset,
+             top  : target_elm_position.top + $(target_elm).outerHeight()
+           },
+           arrow_class : "div.up_arrow"
+         }
+       }
+
+       // position and show the box
+       $(dialog_box).css({ 
+         top : position.start.top + "px", 
+         left : position.start.left + "px", 
+         opacity : config.opacity
+       });       
+       $(dialog_box).find("div.arrow").hide();
+       $(dialog_box).find(position.arrow_class).show();
+
+       // begin animation
+       $(dialog_box).animate({
+         top : position.end.top,
+         left: position.end.left,
+         opacity : "toggle"
+       }, config.animation_duration_ms);       
+
+     }; // -- end _show function
+
+     /**
+      * Stop the animation (if any) and remove from dialog box from the DOM
+      */
+     function _hide(target_elm) {
+       $("body").find("div.jquery-gdakram-tooltip").stop().remove();
+     };
+
+     /**
+      * Creates the dialog box element
+      * and appends it to the body
+      **/
+     function _create(content_elm) {
+       var header = ($(content_elm).attr("title")) ? "<h1>" + $(content_elm).attr("title") + "</h1>" : '';
+       return $("<div class='jquery-gdakram-tooltip'>\
+         <div class='up_arrow arrow'></div>\
+         <div class='left_arrow arrow'></div>\
+         <div class='content'>" + header + $(content_elm).html() + "</div>\
+         <div style='clear:both'></div>\
+         <div class='down_arrow arrow'></div>\
+       </div>").appendTo('body');
+     };
+
+     return this; 
+   };
+
+ })(jQuery);

assets/mobileapp/themes/store/pages/2-column-right.hbs

@@ -19,6 +19,9 @@
     <link rel="stylesheet" href="{{url "/themes/store/css/jslider.round.plastic.css"}}" type="text/css">
 
     <link href="{{url "/themes/store/css/styles.css"}}" rel="stylesheet">
+
+       <link href="{{url "/assets/mobileapp/themes/store/assets/tooltip/jquery.tooltip.css"}}" rel="stylesheet">
+
     {{css}}
     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
@@ -76,6 +79,7 @@
 <script src="{{url "/assets/mobileapp/themes/store/assets/noty/layouts/center.js"}}"></script>
 
 
+
 <script src="{{url "/themes/store/js/jquery.event.mousestop.js"}}"></script>
     {{js}}
     {{code}}

assets/mobileapp/themes/store/partials/devices.hbs

@@ -23,7 +23,7 @@
 	}
 </style>
 
-<!-- Modal Features -->
+<!-- Modal Devices -->
 <div id="devicesList" class="modal hide" tabindex="-1" role="dialog" aria-hidden="true" style="width:700px">
 
 	<div class="modal-header">

dashboard.jag

@@ -55,7 +55,8 @@ var caramel;
 		},
 		'userAssets' : count > 0 ? subscriptions : null,
 		'recentAssets' : recentAssets,
-		'tags' : tags
+		'tags' : tags,
+		'devices': devices
 
 	});
 }());

themes/store/pages/2-column-right-bak.hbs

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>{{include title}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le styles -->
+    <link href="{{url "/themes/store/css/bootstrap.css"}}" rel="stylesheet">
+
+    <link href="{{url "/themes/store/css/bootstrap-responsive.css"}}" rel="stylesheet">
+    <link href="{{url "/themes/store/css/font-awesome.min.css"}}" rel="stylesheet">
+    <link href="{{url "/themes/store/css/font-awesome-ie7.min.css"}}" rel="stylesheet">
+
+    <link rel="stylesheet" href="{{url "/themes/store/css/jslider.css"}}" type="text/css">
+    <link rel="stylesheet" href="{{url "/themes/store/css/jslider.round.plastic.css"}}" type="text/css">
+
+    <link href="{{url "/themes/store/css/styles.css"}}" rel="stylesheet">
+    {{css}}
+    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <script src="{{url "/themes/store/js/respond.min.js"}}"></script>
+     <script src="{{url "/themes/store/js/selectivizr-min.js"}}"></script>
+      <link rel="stylesheet" href="{{url "/themes/store/css/ie.css"}}" type="text/css">
+    <![endif]-->
+
+    <!-- Fav and touch icons -->
+    <link rel="shortcut icon" href="{{url "/themes/store/favicon.ico"}}">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144"
+          href="{{url "/themes/store/img/apple-touch-icon-144-precomposed.png"}}">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114"
+          href="{{url "/themes/store/img/apple-touch-icon-114-precomposed.png"}}">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72"
+          href="{{url "/themes/store/img/apple-touch-icon-72-precomposed.png"}}">
+    <link rel="apple-touch-icon-precomposed" href="{{url "/themes/store/img/apple-touch-icon-57-precomposed.png"}}">
+</head>
+
+<body>
+    {{include navigation}}
+<div id="container-assets" class="container">
+
+    <div class="row">
+        <div class="span9 store-left">
+            {{include header}}
+            {{include body}}
+        </div>
+        <div class="span3 store-right">
+            {{include right}}
+        </div>
+
+    </div>
+    {{>footer}}
+</div>
+<!-- /container -->
+
+<!-- Le javascript
+================================================== -->
+<!-- Placed at the end of the document so the pages load faster -->
+<script src="{{url "/themes/store/js/jquery-1.8.3.min.js"}}"></script>
+<script src="{{url "/themes/store/js/bootstrap.min.js"}}"></script>
+<script src="{{url "/themes/store/js/bootstrap-tooltip.js"}}"></script>
+<script src="{{url "/themes/store/js/bootstrap-popover.js"}}"></script>
+<script src="{{url "/themes/store/js/async.min.js"}}"></script>
+<script src="{{url "/themes/store/js/handlebars.js"}}"></script>
+<script src="{{url "/themes/store/js/theme.js"}}"></script>
+<script src="{{url "/themes/store/js/jquery.history.js"}}"></script>
+<script src="{{url "/themes/store/js/history-fix.js"}}"></script>
+<script src="{{url "/themes/store/js/jquery.event.mousestop.js"}}"></script>
+    {{js}}
+    {{code}}
+<script src="{{url "/themes/store/js/caramel.handlebars.client.js"}}"></script>
+<script src="{{url "/themes/store/js/caramel-client.js"}}"></script>
+</body>
+</html>