diff --git a/chardin.js b/chardin.js
deleted file mode 100755
index 25bf12c..0000000
--- a/chardin.js
+++ /dev/null
@@ -1,11 +0,0 @@
-(function($) {
-  Drupal.behaviors.chardin = {
-    attach: function(context) {
-      $('body').chardinJs();
-			$('a[data-toggle="chardinjs"]').on('click', function(e) {
-				e.preventDefault();
-				return ($('body').data('chardinJs')).toggle();
-			});
-    }
-  }
-})(jQuery);
diff --git a/chardin.module b/chardin.module
index bdce1d6..3560032 100644
--- a/chardin.module
+++ b/chardin.module
@@ -11,9 +11,34 @@
  * Implements hook_init().
  */
 function chardin_init() {
-  libraries_load('chardin');
-	drupal_add_js(drupal_get_path('module', 'chardin') . '/chardin.js',
-    array('type' => 'file', 'scope' => 'footer', 'weight' => JS_DEFAULT)
+	if(module_exists('context')){
+		$plugin = context_get_plugin('reaction', 'chardin_add');
+  	if($plugin) $plugin->execute();
+	} else {
+		libraries_load('chardin');
+		drupal_add_js(drupal_get_path('module', 'chardin') . '/js/chardin.drupal.js',
+			array('type' => 'file', 'scope' => 'footer', 'weight' => JS_DEFAULT)
+		);
+	}
+}
+
+/**
+ * Implements hook_theme().
+ * Register a module (or theme's) theme implementations.
+ *
+ * @see http://api.drupalize.me/api/drupal/function/hook_theme/7
+ */
+function chardin_theme($existing, $type, $theme, $path) {
+  return array(
+    'chardin_demo' => array(
+      'variables' => array(),
+      'template' => 'templates/chardin-demo',
+    ),
+		'chardin_link' => array(
+      'variables' => array('link_title' => NULL, 'options' => array()),
+      'template' => 'templates/chardin-link',
+      'file' => 'chardin.theme.inc',
+    ),
   );
 }
 
@@ -59,4 +84,374 @@ function chardin_libraries_info() {
   );
 
   return $libraries;
+}
+
+/**
+ * Implements hook_context_plugins().
+ * Let context know about plugin implementations.
+ *
+ * @see http://api.drupalize.me/api/drupal/function/hook_context_plugins/7
+ */
+function chardin_context_plugins() {
+  $plugins = array();
+
+  $plugins['chardin_context_reaction_add'] = array(
+    'handler' => array(
+      'path' => drupal_get_path('module', 'chardin') . '/plugins/context',
+      'file' => 'chardin_context_reaction_add.inc',
+      'class' => 'chardin_context_reaction_add',
+      'parent' => 'context_reaction',
+    ),
+  );
+
+  return $plugins;
+}
+
+/**
+ * Implements hook_context_registry().
+ * Registry hook for conditions & reactions.
+ *
+ * @see http://api.drupalize.me/api/drupal/function/hook_context_registry/7
+ */
+function chardin_context_registry() {
+  return array(
+    'reactions' => array(
+      'chardin_add' => array(
+        'title' => t('Chardin.js'),
+        'description' => t('Add Chardin code to the page.'),
+        'plugin' => 'chardin_context_reaction_add',
+      ),
+    ),
+  );
+}
+
+/**
+ * Implements hook_ctools_plugin_api().
+ * Tell CTools about our module.
+ *
+ */
+function chardin_ctools_plugin_api($module, $api) {
+  if($module !== 'context') return FALSE;
+
+  switch($api) {
+    case 'context':
+      return array('version' => 3);
+    case 'plugins':
+      return array('version' => 3, 'path' => drupal_get_path('module', 'chardin') . '/plugins/context');
+    default:
+      return FALSE;
+  }
+}
+
+/**
+ * Implements hook_context_default_contexts().
+ * Provide default module's contexts.
+ *
+ * @return array
+ */
+function chardin_context_default_contexts() {
+  $export = array();
+
+  $context = new stdClass();
+  $context->disabled = FALSE; /* Edit this to true to make a default context disabled initially */
+  $context->api_version = 3;
+  $context->name = 'chardin_demo_default';
+  $context->description = '';
+  $context->tag = 'chardin';
+  $context->conditions = array(
+    'path' => array(
+      'values' => array(
+        'admin/config/user-interface/chardin' => 'admin/config/user-interface/chardin',
+        'admin/config/user-interface/chardin/default' => 'admin/config/user-interface/chardin/default',
+      ),
+    ),
+  );
+  $context->reactions = array(
+    'chardin_add' => array(
+			'auto_start' => 0,
+			'elements' => array(
+				array(
+					'toggle' => 1,
+					'element' => '#chardin-toggle',
+					'position' => 'none',
+					'intro' => '',
+				),
+				array(
+					'toggle' => 1,
+					'element' => '#opentour',
+					'position' => 'none',
+					'intro' => '',
+				),
+				array(
+					'toggle' => 0,
+					'element' => '.jumbotron h1',
+					'position' => 'right',
+					'intro' => 'Project title',
+				),
+				array(
+					'toggle' => 0,
+					'element' => 'img.chardin',
+					'position' => 'right',
+					'intro' => 'An awesome 18th-century painter, who found beauty in everyday, common things.',
+				),
+				array(
+					'toggle' => 0,
+					'element' => '.jumbotron a.primary',
+					'position' => 'left',
+					'intro' => 'This button toggles the overlay, you can click it, even when the overlay is visible',
+				),
+				array(
+					'toggle' => 0,
+					'element' => '.jumbotron .credits',
+					'position' => 'right',
+					'intro' => 'Author of this plugin, aka Pablo Fernandez',
+				),
+				array(
+					'toggle' => 0,
+					'element' => '.jumbotron .links',
+					'position' => 'bottom',
+					'intro' => 'Links to Github, Twitter, etc.',
+				),
+			),
+		),
+  );
+  $context->condition_mode = 0;
+
+	// Translatables
+	// Included for use with string extractors like potx.
+  t('chardin');
+
+  $export[$context->name] = $context;
+	return $export;
+}
+
+/**
+ * Implements hook_context_page_reaction().
+ */
+function chardin_context_page_reaction(){
+  if ($plugin = context_get_plugin('reaction', 'chardin_add')) {
+    $plugin->execute();
+  }
+}
+
+/**
+ * Implements hook_enable().
+ * Perform necessary actions after module is enabled.
+ *
+ * @see http://api.drupalize.me/api/drupal/function/hook_enable/7
+ */
+function chardin_enable() {
+  // We need this to make context detect new reaction handler
+  drupal_flush_all_caches();
+}
+
+/**
+ * Implements hook_menu().
+ *
+ * @see
+ */
+function chardin_menu() {
+  $items = array();
+
+  $items['admin/config/user-interface/chardin'] = array(
+    'title' => 'Chardin Demo',
+    'page callback' => 'theme',
+    'page arguments' => array('chardin_demo'),
+    'access arguments' => array('access administration pages'),
+    'type' => MENU_NORMAL_ITEM,
+  );
+
+  $items['admin/config/user-interface/chardin/default'] = array(
+    'title' => 'Chardin Demo (Start chardin automatically)',
+    'page callback' => 'theme',
+    'page arguments' => array('chardin_demo'),
+    'access arguments' => array('access administration pages'),
+    'type' => MENU_DEFAULT_LOCAL_TASK,
+    'weight' => -10,
+  );
+
+  return $items;
+}
+
+/**
+ * Implements hook_form_FORM_ID_alter().
+ * Perform necessary actions after module is enabled.
+ *
+ * @see http://api.drupalize.me/api/drupal/function/hook_form_FORM_ID_alter/7
+ */
+function chardin_form_ctools_export_ui_edit_item_form_alter(&$form, &$form_state, $form_id) {
+	//Just to make sure we are on the ctools right form
+	if($form_id == 'ctools_export_ui_edit_item_form'){
+		//grab elements from form_state
+		$values = $form_state['item']->reactions['chardin_add'];
+		
+		$form['reactions']['plugins']['chardin_add']['#tree'] = TRUE;
+		$form['reactions']['plugins']['chardin_add']['elements'] = array(
+			'#type' => 'fieldset',
+			'#title' => t('Elements'),
+			'#collapsible' => FALSE, 
+			'#collapsed' => FALSE,
+			'#prefix' => '<div id="elements-wrapper">',
+			'#suffix' => '</div>',
+			'#weight'=> 1,
+		);
+		
+		$form['reactions']['plugins']['chardin_add']['auto_start'] = array(
+			'#type' => 'checkbox',
+			'#title' => t('Toggle Element'),
+			'#default_value' => $values['auto_start'],
+		);
+		
+		// Build the fieldset with the proper number of names. We'll use
+		// $form_state['num_elements'] to determine the number of elements to build.
+		if (empty($form_state['num_elements'])) {
+			if(empty($values['elements'])){
+				$form_state['num_elements'] = 1;
+				$values['elements'][0] = array('element' => '','position' => '','intro' => '',);
+			} else {
+				//we don't need these to set values;
+				unset($values['elements']['add_element']);
+				unset($values['elements']['remove_element']);
+				
+				//count elements;
+				$form_state['num_elements'] = count($values['elements']);
+			}
+		}
+		
+		for ($i = 0; $i < $form_state['num_elements']; $i++) {
+			$form['reactions']['plugins']['chardin_add']['elements'][$i] = array(
+				'#type' => 'fieldset',
+				'#collapsible' => FALSE, 
+				'#collapsed' => FALSE,
+				'#prefix' => '<div id="element-'.$i.'-wrapper">',
+				'#suffix' => '</div>',
+				'#weight'=> $i,
+			);
+			
+			$form['reactions']['plugins']['chardin_add']['elements'][$i]['toggle'] = array(
+				'#type' => 'checkbox',
+				'#title' => t('Toggler'),
+				'#default_value' => $values['elements'][$i]['toggle'],
+				'#description' => 'This element toggles Chardin.js',
+			);
+			
+			$form['reactions']['plugins']['chardin_add']['elements'][$i]['element'] = array(
+				'#type' => 'textfield',
+				'#title' => t('Element'),
+				'#default_value' => $values['elements'][$i]['element'],
+			);
+			
+			$form['reactions']['plugins']['chardin_add']['elements'][$i]['position'] = array(
+				'#type' => 'select',
+				'#title' => t('Position'),
+				'#default_value' => $values['elements'][$i]['position'],
+				'#options' => array(
+					'none' => '<none>',
+					'top' => 'Top',
+					'right' => 'Right',
+					'bottom' => 'Bottom',
+					'left' => 'Left',
+				),
+			);
+			
+			$form['reactions']['plugins']['chardin_add']['elements'][$i]['intro'] = array(
+				'#type' => 'textarea',
+				'#title' => t('Intro'),
+				'#default_value' => $values['elements'][$i]['intro'],
+			);
+		}
+		// this needs work, it would be ideal to remove specific elements instead of the last one.
+		if ($form_state['num_elements'] > 1) {
+			$form['reactions']['plugins']['chardin_add']['elements']['remove_element'] = array(
+				'#type' => 'submit',
+				'#value' => t('Remove last one'),
+				'#weight' => 99,
+				'#submit' => array('chardin_context_reaction_element_remove'),
+				'#ajax' => array(
+					'callback' => 'chardin_context_reaction_element_callback',
+					'wrapper' => 'elements-wrapper',
+				),
+			);
+		}
+		
+		$form['reactions']['plugins']['chardin_add']['elements']['add_element'] = array(
+			'#type' => 'submit',
+			'#value' => t('Add one more'),
+			'#submit' => array('chardin_context_reaction_element_add'),
+			'#weight' => 100,
+			'#ajax' => array(
+				'callback' => 'chardin_context_reaction_element_callback',
+				'wrapper' => 'elements-wrapper',
+			),
+		);
+		
+		return $form;
+	}
+}
+
+/**
+ * Implements callback for chardin context reaction form.
+ *
+ * @see
+ */
+function chardin_context_reaction_element_callback($form, $form_state) {
+  return $form['reactions']['plugins']['chardin_add']['elements'];
+}
+
+/**
+ * Implements #submit for chardin context reaction form to add element.
+ *
+ * @see
+ */
+function chardin_context_reaction_element_add($form, &$form_state) {
+  $form_state['num_elements']++;
+  $form_state['rebuild'] = TRUE;
+}
+
+/**
+ * Implements #submit for chardin context reaction form to remove element.
+ *
+ * @see
+ */
+function chardin_context_reaction_element_remove($form, &$form_state) {
+  if ($form_state['num_elements'] > 1) {
+    $form_state['num_elements']--;
+  }
+  $form_state['rebuild'] = TRUE;
+}
+
+/**
+ * Implements hook_block_info().
+ * Define all blocks provided by the module.
+ *
+ * @see http://api.drupalize.me/api/drupal/function/hook_block_info/7
+ */
+function chardin_block_info() {
+  $blocks['chardin_link'] = array(
+    'info' => t('Chardin Toggle Link'),
+    'cache' => DRUPAL_NO_CACHE
+  );
+
+  return $blocks;
+}
+
+/**
+ * Implements hook_block_view().
+ * Return a rendered or renderable view of a block.
+ *
+ * @see http://api.drupalize.me/api/drupal/function/hook_block_view/7
+ */
+function chardin_block_view($delta = '') {
+  $block = array();
+
+  switch ($delta) {
+    case 'chardin_link':
+      $block['subject'] = '<none>';
+      $block['content'] = array(
+        '#theme' => 'chardin_link',
+      );
+
+      break;
+  }
+  return $block;
 }
\ No newline at end of file
diff --git a/chardin.theme.inc b/chardin.theme.inc
new file mode 100644
index 0000000..2afdcd4
--- /dev/null
+++ b/chardin.theme.inc
@@ -0,0 +1,15 @@
+<?php
+
+function chardin_preprocess_chardin_link(&$vars) {
+  if(empty($vars['options'])) $vars['options'] = array();
+
+  if(!isset($vars['options']['attributes']['class'])) $vars['options']['attributes']['class'] = array();
+  $vars['options']['attributes']['class'][] = 'chardin-link';
+
+  if(!isset($vars['options']['attributes']['data-toggle'])) $vars['options']['attributes']['data-toggle'] = array();
+	$vars['options']['attributes']['data-toggle'] = 'chardinjs';
+
+  $vars['options']['external'] = TRUE;
+
+  if(empty($vars['link_title'])) $vars['link_title'] = t('Start the tour!');
+}
\ No newline at end of file
diff --git a/css/chardin.demo.css b/css/chardin.demo.css
new file mode 100644
index 0000000..b22e1cf
--- /dev/null
+++ b/css/chardin.demo.css
@@ -0,0 +1,150 @@
+.chardin-demo-page {
+  background-color: #fff;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), color-stop(25%, #fff), to(#fff));
+  background-image: -webkit-linear-gradient(#eee, #fff 25%, #fff);
+  background-image: -moz-linear-gradient(top, #eee, #fff 25%, #fff);
+  background-image: -ms-linear-gradient(#eee, #fff 25%, #fff);
+  background-image: -o-linear-gradient(#eee, #fff 25%, #fff);
+  background-image: linear-gradient(#eee, #fff 25%, #fff);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+
+.primary.btn {
+  color: #fff;
+  text-decoration: none;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
+  background-color: #3072b3; /* Old browsers */
+  background-repeat: repeat-x; /* Repeat the gradient */
+  background-image: -moz-linear-gradient(top, #599bdc 0%, #3072b3 100%); /* FF3.6+ */
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#599bdc), color-stop(100%,#3072b3)); /* Chrome,Safari4+ */
+  background-image: -webkit-linear-gradient(top, #599bdc 0%,#3072b3 100%); /* Chrome 10+,Safari 5.1+ */
+  background-image: -ms-linear-gradient(top, #599bdc 0%,#3072b3 100%); /* IE10+ */
+  background-image: -o-linear-gradient(top, #599bdc 0%,#3072b3 100%); /* Opera 11.10+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#599bdc', endColorstr='#3072b3',GradientType=0 ); /* IE6-9 */
+  background-image: linear-gradient(top, #599bdc 0%,#3072b3 100%); /* W3C */
+  border: 1px solid #2967a4;
+  -webkit-transition: none;
+     -moz-transition: none;
+          transition: none;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2);
+     -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2);
+          box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2);
+}
+.primary.btn:hover {
+  background-position: 0 -15px;
+}
+.primary.btn:active {
+  background-image: none;
+  background-color: #3072b3; /* Old browsers */
+  -webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
+     -moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
+          box-shadow: inset 0 5px 10px rgba(0,0,0,.125), 0 1px 2px rgba(0,0,0,.2);
+}
+
+.jumbotron {
+  margin: 50px 0;
+  margin-bottom: 0px;
+  text-align: center;
+}
+.jumbotron h1 {
+  font-size: 100px;
+  font-family: Montserrat, sans-serif;
+  line-height: 1;
+  display: inline-block;
+  color: #444444;
+}
+
+.jumbotron h1.chardinjs-show-element, .chardinjs-show-element {
+  color: #cccccc;
+}
+
+.chardinjs-show-element a {
+  color: rgba(77, 186, 240, 1);
+}
+
+.jumbotron .lead {
+  font-size: 24px;
+  line-height: 1.25;
+}
+
+.jumbotron img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-height: 300px;
+}
+
+.jumbotron .btn {
+  font-size: 21px;
+  padding: 14px 24px;
+  margin: 20px;
+  margin-bottom: 10px;
+}
+
+.links {
+ 
+  text-align: center;
+	width: 340px;
+	margin: 0 auto;
+}
+
+#links, #credits { display: inline-block; }
+
+.links a.hacker-news {
+  background-color: #f8f8f8;
+  background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#dedede));
+  background-image: -moz-linear-gradient(top,#fff,#dedede);
+  background-image: -o-linear-gradient(top,#fff,#dedede);
+  background-image: -ms-linear-gradient(top,#fff,#dedede);
+  background-image: linear-gradient(top,#fff,#dedede);
+  border: #ccc solid 1px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  color: #333;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  font: normal normal normal 11px/18px 'Helvetica Neue',Arial,sans-serif;
+  font-weight: bold;
+  padding: 3px 3px 2px 5px;
+  position: relative;
+  top: -5px;
+}
+
+.links a.hacker-news i.logo {
+  color: #ff6600;
+  font-size: 1.2em;
+  width: 16px;
+  height: 13px;
+  font-style: normal;
+}
+
+.links a.hacker-news:hover {
+  text-decoration: none;
+}
+
+.credits {
+	text-align: center;
+  margin: 10px auto;
+	width: 200px;
+}
+
+.license {
+  text-align: center;
+  margin: 10px auto;
+	width: 320px;
+	padding-top: 80px;
+}
+
+.chardinjs-helper-layer[data-id="links"] .chardinjs-tooltip:before {
+  left: 90%;
+}
diff --git a/images/chardin.png b/images/chardin.png
new file mode 100644
index 0000000..79bba93
Binary files /dev/null and b/images/chardin.png differ
diff --git a/js/chardin.context.js b/js/chardin.context.js
new file mode 100755
index 0000000..d1ecb41
--- /dev/null
+++ b/js/chardin.context.js
@@ -0,0 +1,36 @@
+(function ($) {
+  Drupal.behaviors.chardinContext = {
+    attach:function (context, settings) {
+      if(!Drupal.settings.chardinContext) return false;
+			var auto_start = Drupal.settings.chardinContext.auto_start;
+      if(auto_start == 0) {
+				$('body').chardinJs();
+			} else {
+				$('body').chardinJs('start');
+			}
+			
+			var elements = Drupal.settings.chardinContext.elements;
+			
+			$.each(elements, function (key, chardin) {
+				// add chardin attributes to elements set in the context
+				if(chardin.position != 'none'){
+					$(chardin.element).attr({
+						'data-intro': chardin.intro,
+						'data-position': chardin.position,
+					});
+				}
+				
+				if(chardin.toggle == 1){
+					$(chardin.element).attr({
+						'data-toggle': 'chardinjs',
+					});
+				}
+			});
+			
+			$('a[data-toggle="chardinjs"]').on('click', function(e) {
+				e.preventDefault();
+				return ($('body').data('chardinJs')).toggle();
+			});
+    }
+  };
+}(jQuery));
\ No newline at end of file
diff --git a/js/chardin.demo.js b/js/chardin.demo.js
new file mode 100755
index 0000000..efc5cc2
--- /dev/null
+++ b/js/chardin.demo.js
@@ -0,0 +1,16 @@
+(function ($) {
+	Drupal.behaviors.chardinDemo = {
+    attach: function(context) {
+			$('#chardin-toggle').on('click', function(e) {
+				e.preventDefault();		
+				if (!$('.jumbotron img').is(':visible')) {
+					return $('.jumbotron img').animate({
+						height: 250
+					}, 600, function() {
+						return '';
+					});
+				}
+			});
+		}
+	}
+}(jQuery));
diff --git a/js/chardin.drupal..js b/js/chardin.drupal..js
new file mode 100755
index 0000000..25bf12c
--- /dev/null
+++ b/js/chardin.drupal..js
@@ -0,0 +1,11 @@
+(function($) {
+  Drupal.behaviors.chardin = {
+    attach: function(context) {
+      $('body').chardinJs();
+			$('a[data-toggle="chardinjs"]').on('click', function(e) {
+				e.preventDefault();
+				return ($('body').data('chardinJs')).toggle();
+			});
+    }
+  }
+})(jQuery);
diff --git a/plugins/context/chardin_context_reaction_add.inc b/plugins/context/chardin_context_reaction_add.inc
new file mode 100644
index 0000000..2d464e1
--- /dev/null
+++ b/plugins/context/chardin_context_reaction_add.inc
@@ -0,0 +1,51 @@
+<?php
+
+class chardin_context_reaction_add extends context_reaction {
+  function options_form($context) {		
+		return array();
+  }
+
+  function options_form_submit($values) {
+    return $values;
+  }
+
+  function execute(&$vars = NULL) {
+    $contexts = $this->get_contexts();
+
+    foreach ($contexts as $context) {
+      if (!empty($context->reactions[$this->plugin])) {
+        $library = libraries_load('chardin');
+        $library_loaded = $library && !empty($library['loaded']);
+
+        $js_name = 'chardinjs.min.js';
+        $base_path = 'sites/all/libraries/chardin';
+
+        if (!$library_loaded) {
+          drupal_set_message(t('Can\'t load Chardin.js library. Please download !url jQuery plugin and extract it to @path, so @js can be found at @full_path. Also please purge version info from chardin file names (both .js and .css)', array(
+            '!url' => l(t('Chardin.js'), 'https://github.com/heelhook/chardin.js'),
+            '@path' => $base_path,
+            '@js' => $js_name,
+            '@full_path' => $base_path . '/' . $js_name,
+          )), 'error');
+          return FALSE;
+        }
+
+        drupal_add_js(drupal_get_path('module', 'chardin') . '/js/chardin.context.js', array('type' => 'file', 'scope' => 'footer', 'weight' => JS_DEFAULT));
+	
+        $chardin_context = $context->reactions[$this->plugin];
+				
+				//we don't need these to set values;
+				unset($chardin_context['elements']['add_element']);
+				unset($chardin_context['elements']['remove_element']);
+				
+        if(empty($chardin_context['elements'])) return FALSE;
+	
+        $js_settings = array(
+          'chardinContext' => $chardin_context,
+        );
+				
+        drupal_add_js($js_settings, 'setting');
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/templates/chardin-demo.tpl.php b/templates/chardin-demo.tpl.php
new file mode 100644
index 0000000..4c378eb
--- /dev/null
+++ b/templates/chardin-demo.tpl.php
@@ -0,0 +1,32 @@
+<?php drupal_add_css(drupal_get_path('module', 'chardin') . '/css/chardin.demo.css'); ?>
+
+<div class="chardin-demo-page">
+  <div class="jumbotron">
+    <h1 data-intro="Project title" data-position="right">Chardin.js</h1>
+    <p class="lead"> Simple overlay instructions for your apps. </p>
+    <img class="chardin" src="/<?php print drupal_get_path('module', 'chardin') . '/images/chardin.png'; ?>"> <a href="#" id="chardin-toggle" class="btn btn-large primary">See it in action</a>
+    <div class="credits">
+      <p> Baked with <b>&lt;3</b> by <a href="https://github.com/heelhook">@heelhook</a>. </p>
+    </div>
+    <div class="links"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://drupal.org/project/chardin" data-text="Check out Chardin.js module, simple overlay instructions for Drupal!" data-via="heelhookrc" data-count="none">Tweet</a> 
+      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
+      <a href="https://twitter.com/heelhookrc" class="twitter-follow-button" data-show-count="false">Follow @heelhookrc</a> 
+      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
+      <a class="hacker-news" href="https://news.ycombinator.com/item?id=5480073" style="margin-right: 2px;"> <i class="logo">Y</i> Hacker News </a> 
+      <!--<div id="___plusone_0" style="text-indent: 0px; margin: 0px; padding: 0px; background-color: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 32px; height: 20px; background-position: initial initial; background-repeat: initial initial;"> 
+        <!-- Place this tag where you want the +1 button to render. -->
+      <div class="g-plusone" data-size="medium" data-annotation="none" data-href="http://heelhook.github.io/chardin.js/"></div>
+      
+      <!-- Place this tag after the last +1 button tag. --> 
+      <script type="text/javascript">
+          (function() {
+            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
+            po.src = 'https://apis.google.com/js/plusone.js';
+            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
+          })();
+        </script> 
+      <!--</div> --> 
+    </div>
+    <div class="license"> Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>. </div>
+  </div>
+</div>
diff --git a/templates/chardin-link.tpl.php b/templates/chardin-link.tpl.php
new file mode 100644
index 0000000..04d5213
--- /dev/null
+++ b/templates/chardin-link.tpl.php
@@ -0,0 +1,3 @@
+<div class="chardin_link">
+  <?php print l($link_title, '#', $options); ?>
+</div>
\ No newline at end of file
