Add help section to the panel #62 (#109)

* add template for help section with some guidelines.
Still needs:
	1) models description
	2) models screenshots
	3) fix img paths

* wip path img

* add pattern descriptions and images

* remove typo
trim css -> make buttons same width

* add deleting segments guide

src/partials/tab_analytics.html

@@ -131,12 +131,59 @@
     </div>
   </div>
 
-  <div class="gf-form-button-row" ng-if="!ctrl.analyticsController.creatingAnalyticUnit">
+  <div class="gf-form-button-row width-11" ng-if="!ctrl.analyticsController.creatingAnalyticUnit">
     <button class="btn btn-inverse" ng-click="ctrl.createNew()">
       <i class="fa fa-plus"></i>
       Add Analytic Unit
     </button>
-    
   </div>
+  <div class="gf-form-button-row">
+    <button class="gf-form-label  width-10 pointer" ng-click="ctrl.showHelp = !ctrl.showHelp">
+      Show Help
+      <i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
+      <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
+    </button>
+  </div>
+
+<div class="gf-form" ng-show="ctrl.showHelp" >
+  <pre class="gf-form-pre alert alert-info">
+    <b>Adding Analytic Units:</b>
+        1) Click on 'Add Analytic Unit' button to add an analytic unit.
+        2) Type in desired analytic unit name into provided 'Name' field.
+        3) Choose pattern type from the 'Type' dropdown menu. Pattern types explained below.
+        4) Click 'create' button.
+
+    <b>Labeling segments:</b>
+        1) Click on the chart symbol <img ng-src="{{ctrl.panelPath}}/img/chartSymbol.png"> to enter labeling mode.
+        2) Hold down 'Ctrl' button on your keyboard and hold down left mouse button while dragging to label segments manually. Release LMB to finish labeling the segment.
+        3) After all of the needed segments are labeled click on the chart symbol again to exit labeling mode.
+
+        <b>Hastic will now start learning, and after a short while you will see the results on your graph.</b>
+
+    <b>Deleting segments:</b>
+        1) Click on the chart symbol to enter labeling mode. (skip this step if you are already in labeling mode)
+        2) Press 'D' key twice to switch from <img ng-src="{{ctrl.panelPath}}/img/labeling.jpg"> to <img ng-src="{{ctrl.panelPath}}/img/deleting.jpg">.
+        3) Hold down 'Ctrl' button on your keyboard and hold down left mouse button while dragging to mark segments for deletion.
+        4) After all of the needed segments are deleted click on the chart symbol again to exit labeling mode.
+
+        <b>Hastic will now start learning again, based on updated segments list.</b>
+
+    <b>Available labeling patterns:</b>
+      1) General: patterns in your data that don't fall under any of provided built-in patterns.
+
+      2) Peaks: a sharp increase to a certain single value, followed by a return to the original value.
+      <img ng-src="{{ctrl.panelPath}}/img/peaks.jpg">
+
+      3) Troughs: a sharp decrease to a certain single value, followed by a return to the original value.
+      <img ng-src="{{ctrl.panelPath}}/img/troughs.jpg">
+
+      4) Jumps: increase to a certain value without returning to the original state.
+      <img ng-src="{{ctrl.panelPath}}/img/jumps.jpg">
+    
+      5) Drops: decrease to a certain value without returning to the original state.
+      <img ng-src="{{ctrl.panelPath}}/img/drops.jpg">
+
+      6) Custom: any custom model created and imported by you.
+      </pre>
 </div>