corn_js 0.0.1

data/README.md

@@ -0,0 +1,9 @@
+# Popcorn
+
+Popcorm is a pop up library that will handle list and menu associated 
+with an HTML control
+
+# npm
+use 
+	npm install popcorn
+to get popcorn from npm repository

data/Rakefile

@@ -0,0 +1,29 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'CornJs'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../spec/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+

data/app/assets/javascripts/corn.js

@@ -0,0 +1 @@
+//= require corn_js/corn.js

data/app/assets/javascripts/corn_js/corn.js

@@ -0,0 +1,326 @@
+var Popcorn = function($element, defaults) {
+  this.$element = $element;
+  this.defaults =  defaults;
+};
+
+Popcorn.prototype.decorateContainerWithHtml = function() {
+  if (this.positionType) {
+    throw "inferPositionType must be called after decorateContainerWithHtml";
+  }
+  this.containerOf().hide().addClass('popcorn');
+  this.containerOf().contents().wrap("<div class='popcorn-body'/>");
+  this.containerOf().append("<div class='popcorn-tail'></div>");
+};
+
+Popcorn.prototype.inferPositionType = function() {
+  var self = this;
+
+  function _createPositionType(defaults) {
+    if (self.collideLeft()) { return new LeftPosition(self); } 
+    else if (self.collideRight()) { return new RightPosition(self); }
+    return new CenterPosition(self);
+  }
+            
+  self.positionType = _createPositionType(self.defaults);
+};
+    
+Popcorn.prototype.decorateContainerWithArrow = function() {
+  if (this.positionType == undefined) { throw "inferPositionType must be called in order to set up the arrows"; }
+
+  this.containerOf().find('.popcorn-tail').css('left', this.positionType.leftOffset());
+};
+
+var LeftPosition = function(popcorn) {
+  // TODO centrare la freccia sull'elemento puntato da fatpopcorn
+  // this.leftOffset = function() {return popcorn.$element.offset().left + (popcorn.$element.width() - popcorn.defaults.arrowWidth) / 2; }
+  this.leftOffset = function() {	return popcorn.defaults.marginArrow; }
+  this.left = function() { return popcorn.defaults.marginBorder; }
+  this.top = function() { return popcorn.$element.offset().top + popcorn.defaults.verticalOffsetFromElement };
+};
+
+var RightPosition = function(popcorn) {
+  this.leftOffset = function() { return popcorn.containerOf().width() - (popcorn.defaults.arrowWidth + popcorn.defaults.marginArrow);	}
+  this.left = function() { return $('html').width() - popcorn.defaults.marginBorder - popcorn.containerOf().width(); }
+  this.top = function() { return popcorn.$element.offset().top + popcorn.defaults.verticalOffsetFromElement };
+};
+
+var CenterPosition = function(popcorn) {
+  this.leftOffset = function() { return popcorn.containerOf().width() / 2 - Math.floor(popcorn.defaults.arrowWidth / 2); }
+  this.left = function() {                                                                  
+    var middleOfElement = Popcorn.calculateMiddle(popcorn.$element.offset().left, popcorn.$element.width());
+    return Popcorn.calculateLeftOffset(middleOfElement, popcorn.containerOf().width());
+  }
+  this.top = function() { return popcorn.$element.offset().top + popcorn.defaults.verticalOffsetFromElement };
+};
+
+Popcorn.containerOf = function($element) {
+  return $element.next();
+}
+
+Popcorn.prototype.containerOf = function() {
+  return Popcorn.containerOf(this.$element);
+}
+
+Popcorn.prototype.setContainerPosition = function() {
+  this.containerOf().css('top', this.positionType.top());
+  this.containerOf().css('left', this.positionType.left());
+}
+
+Popcorn.prototype.collideRight = function() {
+  var middleOfElement = Popcorn.calculateMiddle(this.$element.offset().left, this.$element.width());
+  var rightOffset = middleOfElement + this.containerOf().width() / 2;
+  return ($('html').width() - (rightOffset + this.defaults.marginBorder)) < 0;
+}
+
+Popcorn.prototype.collideLeft = function() {
+  return (Popcorn.calculateLeftOffset(this.middleOf(), this.containerOf().width()) - this.defaults.marginBorder) < 0;
+}
+
+Popcorn.prototype.middleOf = function() {
+  return Popcorn.calculateMiddle(this.$element.offset().left, this.$element.width());
+}
+
+Popcorn.calculateMiddle = function(left, width) {
+  return left + width / 2;
+}
+
+Popcorn.calculateRightOffset = function(middlePoint, width) {
+  return middlePoint + width / 2;
+}
+Popcorn.calculateLeftOffset = function(middlePoint, width) {
+  return middlePoint - width / 2;
+}
+Popcorn.containerOf = function(element) {
+  return $(element).next();
+}
+Popcorn.hideAllContainers = function($elements) {
+  $elements.each(function() {
+    Popcorn.containerOf(this).hide();
+  });
+}
+Popcorn.hideAllContainersExcept = function($elements, element) {
+  $elements.not(element).each(function() {
+    Popcorn.containerOf(this).hide()
+  });
+};
+
+var FatPopcorn = function($element, defaults) {		
+  function _checkOptions(options) {
+    return typeof options.modelName === undefined || 
+    options.modelId === undefined || 
+    options.token === undefined || 
+    options.current_user === undefined;
+  };
+  var self = this;
+
+  self.$element = $element;
+  self.defaults = defaults;
+  self.attributes = defaults;
+  this.get = function(option) {
+    return self.defaults[option];
+  }
+	
+  if (_checkOptions(self.defaults)){
+    throw("parameters [modelName], [modelId], [token], [current_user] are required");
+  }
+};
+FatPopcorn.prototype = new Popcorn();
+
+// // all'inizializzazione dello stream fa una richiesta e mostra la rotella di caricamento
+// // all'arrivo della risposta toglie la rotella di caricamento e mostra lo stream arrivato
+// FatPopcorn.prototype.initStream = function() {
+// 	this.requestStream(onArrivedStream);
+// 	this.showSpinner();
+// };
+// FatPopcorn.prototype.onArrivedStream = function() {
+// 	this.hideSpinner();
+// 	this.showStream();
+// };
+// FatPopcorn.prototype.initEdit = function() {
+// 	
+// };
+// FatPopcorn.prototype.initHistory = function() {
+// 	
+// };
+	
+FatPopcorn.prototype.initEdit = function() {
+  this.setupFormAction();
+  this.setupFormToken();
+	
+};	
+FatPopcorn.prototype.actionUrl = function() {
+  return '/active_metadata/' + this.get('modelName') + '/' + this.get('modelId') + '/' + this.currentLabel() + '/notes';
+};
+FatPopcorn.prototype.setupFormAction = function() {
+  $('.fatpopcorn #notes_form').attr('action', this.actionUrl());
+};
+FatPopcorn.prototype.setupFormToken = function() {
+  $('.fatpopcorn #notes_form input[name="authenticity_token"]').val(this.get('token'));
+};
+FatPopcorn.prototype.currentLabel = function() {
+  return this.$element.attr('data-label');
+};
+FatPopcorn.hideContainer = function() {
+  $(window).off('resize');
+  return FatPopcorn.container().hide();
+}
+FatPopcorn.container = function() {
+  return $('.fatpopcorn').first();
+}
+FatPopcorn.prototype.containerOf = function() {
+  return $('.fatpopcorn').first();
+}
+
+FatPopcorn.decorateContainerWithHtml = function() {
+  var self = this;
+  function _html() {
+    return '<div class="fatpopcorn"><div class="popcorn-body"><div class="header"><ul><li class="stream-tab active"><div>stream</div></li>' +
+    '<li class="edit-tab"><div>edit</div></li><li class="history-tab"><div>history</div></li></ul></div>' +
+    '<div class="stream"><div class="content"></div></div><div class="history"><div class="content"></div></div>' +
+    '<div class="edit"><div class="watchlist"><h1>Watchlist</h1><div class="on-off _23states"><input type="radio" ' +
+    'name="on" value="on" id="on"><label for="on" class="true"><span class="true">On</span></label><input type="radio" name="off" value="off" id="off"><label for="off" class="false">' +
+    '<span class="false">Off</span></label></div></div><hr/><div class="note"><h1>Nota</h1><form form action="" method="post" id="notes_form"><div style="margin:0;padding:0;display:inline"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="' + self['token'] + '" name="authenticity_token"></div>' +
+    '<textarea name="note" rows="4"></textarea><a id="send_note" href="#">Inserisci</a></form></div><hr/>' +
+    '<div class="attachment"><h1>Allegati</h1><a href="#">Inserisci</a></div><div class="info"><h1>Info</h1><p>Lorem ipsum...</p></div></div></div><div class="popcorn-tail"></div><span class="loader"></span></div>';
+  };
+	
+  if (FatPopcorn.container().size() == 0) {
+    $('body').append(_html());
+  }
+  FatPopcorn.container().hide();
+}
+FatPopcorn.prototype.addGripToElement = function($element) {
+  return $element.wrap('<span class="fatpopcorn_grip"/>');
+};
+FatPopcorn.prototype.gripOf = function($element) {
+  return $element.parent();
+};
+
+FatPopcorn.activateTheClickedTab = function() {
+  function _tabBodyName(tabName) {	return '.' + tabName.split('-')[0].trim(); }
+  $('.fatpopcorn .header > ul > li').click(function(e){
+    e.stopPropagation();
+    e.preventDefault();
+    $('.fatpopcorn .active').removeClass('active');
+    $('.fatpopcorn .popcorn-body > div:not(.header)').hide();
+    $(_tabBodyName($(this).attr('class'))).show();
+    $(this).addClass('active');
+  });				
+};
+
+FatPopcorn.containerVisible = function () {
+  return FatPopcorn.container().is(':visible');
+};
+
+FatPopcorn.bindRemoteEvents = function() {
+  $('.fatpopcorn').on('click', function(e) {
+    e.stopPropagation();
+    e.preventDefault();
+  });			
+  $('#send_note').on('click',function() {
+    $.post($('form#notes_form').attr('action'), $('form#notes_form').serialize())
+    .success(FatPopcorn.newNoteSuccess);
+  });
+  $('.loader').ajaxSend(function(e) {
+    $(this).show();		
+  });
+  $('.loader').ajaxComplete(function() {
+    $(this).hide();
+  });
+};
+
+FatPopcorn.prototype.newNoteSuccess = function() { $('.stream-tab').click(); };
+
+(function($) {
+  $.fn.fatpopcorn = function(options) {
+
+    // plugin default options
+    var self = this, defaults = {
+      marginBorder: 4,
+      arrowWidth: 24,
+      marginArrow: 11,
+      verticalOffsetFromElement: 26
+    };
+
+    // extends defaults with options provided
+    if (options) {
+      $.extend(defaults, options);
+    }
+		
+    $(window).click(function() { FatPopcorn.hideContainer(); });
+		
+    FatPopcorn.decorateContainerWithHtml();
+    FatPopcorn.activateTheClickedTab();
+    FatPopcorn.bindRemoteEvents();
+		
+    function _setUpElement() {
+      var $element = $(this), fatpopcorn = new FatPopcorn($element, defaults);
+      fatpopcorn.addGripToElement($element);
+        	
+      fatpopcorn.gripOf($element).click(function(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        fatpopcorn.initEdit();
+				
+        if (FatPopcorn.containerVisible()) {
+          FatPopcorn.hideContainer();
+          return;					
+        }
+
+        fatpopcorn.inferPositionType();
+        fatpopcorn.setContainerPosition();
+        fatpopcorn.decorateContainerWithArrow();
+        fatpopcorn.containerOf().show();
+				
+				
+        $(window).on('resize',function() {
+          if (FatPopcorn.containerVisible()) fatpopcorn.setContainerPosition();
+        });
+      });
+        
+      return this;
+    }
+    return self.each(_setUpElement);
+  }
+	
+  $.fn.popcorn = function(options) {
+
+    // plugin default options
+    var elements = this, defaults = {
+      marginBorder: 4,
+      arrowWidth: 19,
+      marginArrow: 10,
+      verticalOffsetFromElement: 20
+    };
+
+    // extends defaults with options provided
+    if (options) {
+      $.extend(delfaults, options);
+    }
+
+    $(window).click(function() { Popcorn.hideAllContainers(elements); });
+
+    function _setUpElement(){
+      var $element = $(this), popcorn = new Popcorn($element, defaults);
+
+      popcorn.decorateContainerWithHtml();            
+      popcorn.inferPositionType();
+      popcorn.decorateContainerWithArrow();
+      popcorn.setContainerPosition();
+
+      $element.click(function(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        Popcorn.hideAllContainersExcept(elements, this);
+        Popcorn.containerOf($element).show();
+      });
+
+      $(window).resize(function() {
+        popcorn.setContainerPosition();
+      });
+    }
+
+    return this.each(_setUpElement);
+
+  };
+})(jQuery);

data/app/assets/stylesheets/corn_js/23states.css

@@ -0,0 +1,76 @@
+/*
+ * Widget for 2 3 states display
+ */
+._23states input[type="radio"]{
+  -webkit-appearance:none;
+  display:none;
+}
+
+._23states input[type="radio"]+label{ 
+  background-color:#dae2e8;
+  float: left;
+  display: block;
+  padding:0;
+  width : 25px;
+  height: 23px;
+  text-align: center;
+  font-weight: bold;
+  border: 1px solid #c3ccd1;
+} 
+
+._23states input[type="radio"]+label span{
+  display: block;
+  line-height:22px;
+}          
+._23states input[type="radio"] {
+  color: #666;
+  cursor: pointer;  
+  text-transform: capitalize;
+  text-decoration: none;
+}
+._23states input[type="radio"]+label.true {
+  border-right: none;
+  -moz-border-radius: 3px 0 0 3px;
+  -webkit-border-radius: 3px 0 0 3px;
+  border-radius: 3px 0 0 3px;
+}
+._23states input[type="radio"]+label.false {
+  border-left: none;
+  -moz-border-radius: 0 3px 3px 0;
+  -webkit-border-radius: 0 3px 3px 0;
+  border-radius: 0 3px 3px 0;
+}
+._23states input[type="radio"]+label.nil {
+  border-left: none;
+  border-right: none;
+}
+._23states input[type="radio"]:checked+label.true {
+  color: #333;
+  border: 1px solid #9eba61;
+  -moz-border-radius: 3px 0 0 3px;
+  -webkit-border-radius: 3px 0 0 3px;
+  border-radius: 3px 0 0 3px;
+  background-image: linear-gradient(-90deg, rgb(162, 204, 89), rgb(201, 225, 132));
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, from(rgb(162, 204, 89)), to(rgb(201, 225, 132)));
+  background-image: -moz-linear-gradient(-90deg, rgb(162, 204, 89), rgb(201, 225, 132));
+  text-shadow: 0 1px 0 white;
+}
+._23states input[type="radio"]:checked+label.false{
+  color: #333;
+  border: 1px solid #ce6632;
+  -moz-border-radius: 0 3px 3px 0;
+  -webkit-border-radius: 0 3px 3px 0;
+  border-radius: 0 3px 3px 0;
+  background-image: linear-gradient(-90deg, #d67747, #da855a);
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, from(#d67747), to(#da855a));
+  background-image: -moz-linear-gradient(-90deg, #d67747, #da855a);
+  text-shadow: 0 1px 0 white;
+}
+._23states input[type="radio"]:checked+label.nil {
+  color: #333;
+  border: 1px solid #c3ccd1;
+  background-image: linear-gradient(-90deg, #e8e8e8, white);
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, from(#e8e8e8), to(white));
+  background-image: -moz-linear-gradient(-90deg, #e8e8e8, white);
+  text-shadow: 0 1px 0 white;
+}

data/app/assets/stylesheets/corn_js/corn.css

@@ -0,0 +1,276 @@
+a {
+  color: #0066ff;
+  text-decoration: none;
+  font-style: italic;
+}
+a:hover {
+  color: #f56a00;
+}
+.popcorn, .fatpopcorn {
+  background: none repeat scroll 0 0 #FFFFFF;
+  border: medium none;
+  border-radius: 4px 4px 4px 4px;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 0, 0, 0.5);
+  color: #444444;
+  font-size: 11px;
+  width: 160px;
+  min-height:20px;
+  overflow: visible;
+  position: fixed;
+  z-index: 9000;
+  margin-top: 4px;
+}
+.popcorn .popcorn-body {
+  padding: 5px;
+}
+.popcorn .popcorn-tail {
+  background: url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAYAAABWiWWfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJlJREFUeNpi/P//PwM+wMjIqAKkQPgOUO0dfGqZCBikm5iYGPTmzZsZQUFBPkC+Nl6bQS7DhoEAZFDZjx8/PgL5/79+/foWaGABUFwbpx5iDIIBkIG+vr55uAzEalBMTEwJukHEGEiSQYQMJNkgLAZqoRgGBDqkGAQDX758eY1sINygb9++vf9PBkA2kAFoEBO5BqEZyAQQYAAiweCss5BeRQAAAABJRU5ErkJggg==") no-repeat scroll 0 100% transparent;
+  position: absolute; 
+  width: 19px; 
+  height: 10px; 
+  top: -10px; 
+}
+
+/* ----------------*/
+/* -- fatpopcorn --*/
+/* ----------------*/
+/* grip */
+.fatpopcorn_grip {
+  padding-right: 20px;
+  position: relative;
+  z-index: 100px;
+}
+.fatpopcorn_grip:hover {
+  background: transparent url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcpJREFUeNqUU02rgVEQft73ykJJkixkI99+gYWFJCt+gGQnNvyGu7KwJMrCRpbWJFlIWStfiY0sKF/ZSp1rprhX93V1nzrNnM48z5yZM0cSQkAJ5/NZTKdT9j0eD3Q6naQUp3pFzmazOJ1OvNfr9SgUCkJJRFYSqNVqTPb5fLzIr9frijf9JbBarUSn04Esy0gkEojH4+y3221sNhuhWEKv1+N6F4sFlsslH4TDYZjNZvYDgQC63S5SqRRsNptwOp3cF7/fL30YDAZB1yPi8XhkgsPhQDqdhkaj4b3dbsdoNOJSKIYSDQYD7Pf7TykSiQiVSoVkMsmBtwz4C5RoPp+jWq3ier1CDoVC7IzHY1itVrwDxVC5xCGuHIvFoNVq0e/3UalU3gpQDMUSh7jyrQdSLpfjw1arhUaj8ZI8HA7pJWA0GkEc4oImkVaz2RTUj3K5LP6B7znY7XZsSf0/eAhst1u2JpOJ7eFw4HppkU+g2qPRKPL5PG2lp7+gVqvZXi4XlEolHhzqNIGmMBgMwuVyPcWyyv033sZXFIvFp+vdJu2R+ScymQw9ofQkcBeZTCZwu908qhaLhYPW6zWP+mw2g9frfZAJXwIMABU5CfhlmG8GAAAAAElFTkSuQmCC") no-repeat scroll right;
+}
+
+/* generic classes */
+.fatpopcorn {
+  width: 360px;
+  min-height: 345px;
+  border: 1px solid #566476;
+  border-radius: 6px 6px 6px 6px;
+  position: absolute;
+}
+.fatpopcorn h1 {
+  margin: 12px 0 4px 0;
+  padding-left: 15px;
+  font-size: 12px;
+  color: #303030;
+}
+.fatpopcorn .attachment h1 {
+  background: transparent url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0Q3JlYXRpb24gVGltZQAxMS0wMS0yMDEytcl2IgAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAADESURBVCiRfdAhcgJBEAXQtywCVHIEZGQcOLhByA1WEscRkMjIyI1DIpEcYeMikUjiggJBDzW1lc2vmprpqf/7/+5CN5aY4QE/OGDV6yDXuGCPIu66S1CjwWt0nWEUZ1q2yO844glbbOJ/gm8Mcocq8o6yCMnxhBU+i4w8beXN483dltCUGfkLA6yDvIx6jkUIpRnOGOMtcxxjGHPsUu4+HvESW/kv3h2HECU8B6lqE/NIDX7jvY764y9B6rgN+73bkJ24AvtdK0qIEWRDAAAAAElFTkSuQmCC") no-repeat scroll 0 2px;
+}
+.fatpopcorn .note h1 {
+  background: transparent url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0Q3JlYXRpb24gVGltZQAxMS0wMS0yMDEytcl2IgAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABtSURBVCiR5dGxDQJBDAXRAdEHlIA0LoDSKIVOOPIt4krYDj7RngQcOnImcvAsWfIuCVUV4MFnJ6ADl9ZaByAJalYw6lXt6qyek7Bfg2914AhMAIcNfBsQuG+eNBrm15Ne+suF5Q/q9A1V1TI/ATA3KJXtB0VMAAAAAElFTkSuQmCC") no-repeat scroll 0 2px;
+}
+.fatpopcorn .save h1 {
+  background: transparent url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAATRJREFUeNp8krFKxEAQhjfZJOZAOFNYqo11wCAW9gc+gZU+h9WJtQ8giC9i50PYXSXYWIgoKAm5bOL3r3vxbBz4M39m5p/Z2SSqqurJGLMHHPg0P2aHYdiMokj8Az6Ff+EvorIsB4KPYAp2g8BQcE3BDHoAv4Ofg9wWRXFF8LLv+/eu647wxjn3pmIwIXZC/pD4FvHjhIAKNgimFIwDiJk4jj3EsVflE71AdNjC/Jr4LblZKJbl2slPQLBtrZ0TvAnJGOyDe/Cizjq/EslyuZSfgEWWZYtwM7IHPbRT0zQS2FFAkdNo8bZtzUqkzjTxIuAXXO3glFSnMHG0NE1Nnue+6bgDaqdCfwtJ8keg7nVdS+h0Y0koPCOXrZ3frH1A72l8Kh6h0q+xw0ts/jGa9rjnbwEGAIjSw/IrQ5npAAAAAElFTkSuQmCC") no-repeat scroll 0 2px;
+}
+.fatpopcorn p {
+  color: #525252;
+  text-decoration: none;
+  font-style: italic;
+  font-size: 10px;
+  margin: 0 0 4px 0;
+}
+
+/* tail classes */
+.fatpopcorn .popcorn-tail {
+  background: url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAALCAYAAABlNU3NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXNJREFUeNpi/P//PwNNASkWGHvESAKxOSnmM4IsYGRkJKjQNTI7+eu377O0NVQ/P3ryrPDN2/eLzu5Y8peQPiZiXBGWWdWhrqLUPbW7kSkhMpifi5NzioKcdB/FPgAGB4+oiNAcORmpoMykaFZRYSGw+M9fvxh6Js/5/eTZ8yXPXrzKBPrkJ8kWAA3nkpeV3gMMEsv0hEgM+U+fvzAsWrme4c7dB0fuP3oSBLTkNdEWAA3XkpGSXGVuoq8dHujNwM7GhjMIVm/YxrD74NE7L1+9sQZa8oqgBUDDDRXlZbcG+bhL2lmZEgzjv3//MWzZuY/hyInTj2/dfeAPtOQ8Tgs8Y/Mj2FhZZ8dHBvGYGemTlNxPnLnAsHrjtg/AoMvcvnjiChQLTDxj2QT4+TKBKaU+OtRPEBj2ZOWpuw8eMfRPm/f9+48fOTuXTp4Ht8A7rnCRsJBgZF56HIukuBhFGffJsxcMS1Zt+P30+cuZwPxSBhBgAAqSqvJHz8DzAAAAAElFTkSuQmCC") no-repeat scroll 0 100% transparent;
+  position: absolute;
+  left: 0;
+  width: 24px; 
+  height: 11px; 
+  top: -11px;
+}
+/* header classes */
+.fatpopcorn .header {
+  width: 100%;
+  height: 34px;
+  background-color: #E4EDF5;
+  border-bottom: 1px #566476 solid;
+  border-radius: 6px 6px 0px 0px;
+}
+.fatpopcorn .header ul {
+  list-style: none;
+  padding:0;
+  margin:0;	
+  text-align: center;
+}
+.fatpopcorn .header ul li {
+  display: inline;
+}
+.fatpopcorn .header li {
+  width: 119px;
+  height: 34px;
+  float: left;
+  border-left: 1px solid #dbe2e7;
+}
+.fatpopcorn .header li.active {
+  -moz-box-shadow:    inset 0 0 20px #717f8f;
+  -webkit-box-shadow: inset 0 0 20px #717f8f;
+  box-shadow:         inset 0 0 20px #717f8f;
+  background-color: #b3c4d9;
+  border-left: none;
+  background-position: left bottom;
+  cursor: pointer;
+  width: 120px;
+}
+.fatpopcorn .header li:hover {
+  background-position: left bottom;
+  cursor: pointer;
+}
+.fatpopcorn .header li > div {
+  width: 16px;
+  height: 16px;
+  color: transparent;
+  margin: 8px auto;
+}
+.fatpopcorn .header li.active > div {
+  background-position: left bottom;
+  cursor: pointer;
+}
+.fatpopcorn .stream-tab > div {
+  background: url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALhJREFUeNpiLOuc85+BAsACpQuB+AKJeg2AuB9mwIWu8pQDpOgGuhxMMzFQCFjQTH0ApOQJ6PkAdK0gVgOAEgqkuoDqXigAUgKENAFd2oDVACD4D8XkuQBo8sQBDwNiovEj0KUCgy8aDWBpm8TMBDegn1wXMP4HgsFRHjAyMpJUHsAcTnEsMKGZ+uA/YfAeZ0oEemOAywOg84gqD4AupVF5ADSZ/uUBOdH4YXBGowEZmdKAKtkZIMAA98+JJhv1OP0AAAAASUVORK5CYII=") no-repeat scroll transparent;
+}
+.fatpopcorn .edit-tab > div {
+  background: url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUJJREFUeNqUk8FtwzAMRalMkBHcDbJBRqgzQWWgA/iUXNVje3LuBewRMkI6gbNBPUIzgUKh34AqSCpJ4DuWqP9MMZI5vn9uiWhiPbO+WPbj9LqQMDasC8whvoOZoTsNYI/3ic0dm0M1M/9aKeCWmF+QGyWQADhkzCSFmPDAnufKuo4/MpUqIE6GbXQVQLESEw+waNRUYtIVWojJrdBANrkskrme3FlvLPeniULIHefFocq2CshABh73eA+QvtiDQk9cZL7h3DwZUgTK7qP7c1YBIlADUEve+y3r4n/jympYJBXBtMaIxE4DSM0TxlYKmDNmL4VQtOfULIJQtOda2P8AhEVqSDqhhuTKUkFKzRFDan9RDvLDcqxFAkghwTxgPgBaCSCGuGTuKgWshgWy0blpSHPzUHZ8+QYtYFWDfiwPAQYAQE+qb2tD6HUAAAAASUVORK5CYII=") no-repeat scroll transparent;
+}
+.fatpopcorn .history-tab > div {
+  background: url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJ1JREFUeNpiLOuc85+BAsACpQuB+AKJeg2AuB9mwIWu8pQDpOgGuhxMM2GR+A/EDljEHbB5l4mBQjDwBrDgEE/AEg4KpBgQT6kLHNGjFeqi/cMwFig2gBGaPCnOTP1ku+A/EAyO8oCRkZGk8gDmcCYsEiDggEXcAZt3h3N5gCUcaFMe4PKCIyMaAIkN0+xMeXkATZ5kZyaKszNAgAEA3vlG66fKjJQAAAAASUVORK5CYII=") no-repeat scroll transparent;
+}
+
+/* stream classes */
+.fatpopcorn .stream {
+  padding: 10px 0px 10px 10px;
+}
+.fatpopcorn .stream .content {
+  max-height: 400px;
+  overflow: auto;
+  padding: 0 10px 0 0;
+}
+.fatpopcorn .stream .content > * {
+  clear: both;
+}
+.fatpopcorn .stream .line {
+  display: table-cell;
+  width: 100%;
+  border-bottom: 1px solid #566476;    
+}
+.fatpopcorn .stream .time {
+  font-size: 13px;
+  display: table-cell;
+  font-style: italic;
+  color: #303030;
+  padding-left: 3px;
+  vertical-align: bottom;
+  white-space: nowrap;
+}
+
+/* history classes*/
+.fatpopcorn .history {
+  padding-bottom: 10px;
+  display: none;
+}
+.fatpopcorn .history .content {
+  max-height: 400px;
+  overflow: auto;
+  border-radius: 0 0 6px 6px;
+}
+.fatpopcorn .history div:nth-child(even) { 
+  background-color: #fff 
+}
+.fatpopcorn .history div:nth-child(odd) {
+  background-color: #f3f3f3
+}
+.fatpopcorn .history .content > div {
+  padding: 10px 10px 10px 10px;
+}
+.fatpopcorn .history .content > div > h1 {
+  margin: 0;
+}
+
+/* edit classes*/
+.fatpopcorn .edit {
+  display: none;
+}
+.fatpopcorn .edit h1 {
+  font-size: 13px;
+  font-style: italic;
+  color: #303030;
+  white-space: nowrap;
+  margin 0;
+  font-weight: normal;
+}
+.fatpopcorn .edit .watchlist { 
+  margin: 10px 10px 16px 10px;
+}
+
+.fatpopcorn .edit .note {
+  margin: 10px 10px 26px 10px;
+}
+.fatpopcorn .edit .attachment {
+  margin: 10px 10px 26px 10px;
+}
+.fatpopcorn .edit .watchlist h1 {
+  display: inline;
+}
+.fatpopcorn .edit .watchlist .on-off {
+  display: inline;
+  float: right;
+}
+.fatpopcorn .edit .info {
+  background-color: #f3f3f3;
+  display: table;
+  border-radius: 0px 0px 6px 6px;
+  padding: 10px;
+  height: 63px;
+  width: 340px;
+}
+.fatpopcorn .edit .info h1 {
+  background: url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAoxJREFUeNrMmL1SAjEQx7kbS3kAjwe40oaSRis7Km2gwkYqreyw4QW0OhupoNHqrKywofNegAcAHwB63OD/nFzcJBc+jtuZTGbysflls0k28VarVaWM4gkwz/OcOk0mk3PK6pRC5JwklKYibzQaYxf9a6a8YARTpayNdOxogCWloUgEudgZGEF1NwRiAQku2gqMgALKHrFkuxSxxHcEOHcGIygBM7BYKUESA8xQVqMUwPfqFut1CG6aG8wClfpLLM+Y+qwhqCxRLN40uAELx4JB2ZtG0YhSJDswJvFE6QRF35Ru5cGwcYSftjRwl/IkdWCvjE+Jzj1122PAD2YSov2FugNxzPSZ9lNqeyWD+czuCzXm5s6ipsayouxcLYSODnTKEmLsP/GZc0qVHuegkKrBuQOuELp6TFUbDFkwjYOOLKf2l6FO2w86R4yV2zowdQmNByF2YMxUxQYrpxIxS5oFg1Oq1sp1fVCbByxNjGPkGmW2fgu0z1gNLJUjFHAHYWy5puQ+Yqu/y3XyeWYQMcaNUib0jlMwdScmuutCkhdL/WkOq81pElNl/FD2sTpz1VRy+Ei8g3vzk7FY9hxTlsY222d5+bYQdiwd2KzAYHXmAnZw0YHVCmSouYAFBYIFJrCE2xkFyRl3IvhSqJsBQ1y2V8EYIRN2ay2WhjT7lqYmXP8Fw22/NIUhe7AWF2Yt02hGdv4hE4Z092itLhc4cLtyyFitld72G1rE9JJvaR45WTBNGCKkjweHqlxc4vemSx5tuBdYn2mfCbN85f6LmB0qzD1gLFe3PIT//WtAx0DzGImMnyquzzeHZd3u+ebw4LVGuDt98Jb6i6DUnyql/oYq/cfdwb46yyg/AgwAFCWENHW/4L0AAAAASUVORK5CYII=") no-repeat;
+  color: transparent;
+  display: table-cell;
+  width: 38px;
+  height: 38px;
+}
+.fatpopcorn .edit .info p {
+  color: #626262;
+  display: table-cell;
+  padding-left: 10px;
+  /*    overflow: hidden; TODO Controllare cosa succede quando il testo va in overflow
+  text-overflow: ellipsis;*/
+}
+.fatpopcorn .edit textarea {
+  width: 98%;
+  margin-left: 2px;
+  resize: none;
+  border-width: 1px;
+  border-color: #7e9ab4;
+  border-style: solid;
+}
+.fatpopcorn .edit hr {
+  border-width: 0;
+  color: #566476;   
+  height: 1px;
+  width: 340px;
+  background-color: #566476;   
+  margin: 0 10px 0 10px;
+  clear: both;
+}
+.fatpopcorn .edit a {
+  font-size: 12px;
+  text-align: right;
+  float: right;
+}
+.fatpopcorn .loader {
+  display: none;
+  background: white url("data:image/gif;charset=utf-8;base64,R0lGODlhEAALAPQAAP///3F/j+rs7uTn6fL09XSCkXF/j4qWo7nAx6avuNjc4IOQnZqkr73Ey6ixutre4oaSn3OBkJymsfDy8+jr7fj5+ZCbp+vt7/f4+Nba3snP1OHk5/X29wAAAAAAAAAAACH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAALAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQACwABACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQACwACACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQACwADACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAALAAQALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkEAAsABQAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAALAAYALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkEAAsABwAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA") no-repeat 50% 50%;
+  opacity: 0.7;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+}

data/config/routes.rb

@@ -0,0 +1,2 @@
+Rails.application.routes.draw do
+end

data/lib/corn_js/engine.rb

@@ -0,0 +1,4 @@
+module CornJs
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/corn_js/version.rb

@@ -0,0 +1,3 @@
+module CornJs
+  VERSION = "0.0.1"
+end

data/lib/corn_js.rb

@@ -0,0 +1,4 @@
+require "corn_js/engine"
+
+module CornJs
+end

data/lib/tasks/corn_js_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :corn_js do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,85 @@
+--- !ruby/object:Gem::Specification
+name: corn_js
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Gian Carlo Pace
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-02-07 00:00:00.000000000Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: &2165801040 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 3.2.1
+  type: :runtime
+  prerelease: false
+  version_requirements: *2165801040
+- !ruby/object:Gem::Dependency
+  name: jquery-rails
+  requirement: &2165800420 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: *2165800420
+description: It's possible to use the generic popcorn and the app specific fat popcorn
+  plugin
+email:
+- giancarlo.pace@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- app/assets/javascripts/corn.js
+- app/assets/javascripts/corn_js/corn.js
+- app/assets/stylesheets/corn_js/23states.css
+- app/assets/stylesheets/corn_js/corn.css
+- config/routes.rb
+- lib/corn_js/engine.rb
+- lib/corn_js/version.rb
+- lib/corn_js.rb
+- lib/tasks/corn_js_tasks.rake
+- Rakefile
+- README.md
+homepage: http://www.fractalgarden.com
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+      segments:
+      - 0
+      hash: 2277742273154172901
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+      segments:
+      - 0
+      hash: 2277742273154172901
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.10
+signing_key: 
+specification_version: 3
+summary: A javascript popup menu plugin
+test_files: []