Remaking PIIQ Hover effect

..and trying out som OOP.

by laustdeleuran

HTML

<script src="http://dev.ljd.dk/tmp/raphael-min.js"></script>
<a class="box" href="#nowhere" data-basecolor="" data-highlightcolor="" data-icon="star" data-notch>
    <img src="http://lorempixel.com/300/300/abstract/" alt="" />
    <strong>Cool hover effect <span>&rarr;</span></strong>
</a>
<p>Stolen from and inspired by <a href="http://discover.store.sony.com/piiq/index.html">PIIQ</a>.</p>

CSS

body {
  margin:20px;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:62.5%;
}
p { 
  clear:both;
  margin:1em 0;
  font-size:1.4em;
}
.box, 
.box img,
.box strong,
.box strong span {
  display:block;
}
.box {
  position:relative;
  color:#fff;
  text-decoration:none;
  float:left;
  margin:0 0 1em;
}
.box strong {
  position:absolute;
  overflow:hidden;
  bottom:1.5em;
  left:1.5em;
  padding:0 3em 0 1em;
  line-height:2em;
  background:#333;
  background:rgba(0,0,0,0.7);
  border-radius:1em;
  font-weight:bold;
  font-size:1.4em;
  -moz-transition:all 0.2s ease-out;
  -webkit-transition:all 0.2s ease-out;
  transition:all 0.2s ease-out;
  text-shadow:0 1px 1px rgba(0,0,0,0.5);
  box-shadow:0 0 5px rgba(0,0,0,0);
}
.box.selected strong,
.box:hover strong {
  background:#00b7e5;
  padding-right:4em;
  box-shadow:0 0 5px rgba(0,0,0,0.33);
}
.box.hoverBox.selected strong,
.box.hoverBox:hover strong {
  padding-right:3em;
}
.box strong span {
  font-size:1.25em;
  width:2em;
  position:absolute;
  right:1em;
  top:0;
  text-align:right;
}
.box .icon,
.box .stroke-container,
.box .notch-container {
  position:absolute;
  top:0;
  right:0;
}
.box .stroke-container {
  width:100%;
  height:100%;
  left:0;
}
.box .icon {
  width:35px;
  height:35px; 
  background:url(http://dev.ljd.dk/resources/ribbon.png) center center no-repeat;
}
.box .icon.star {
  background-image:url(http://dev.ljd.dk/resources/star.png);
}

JavaScript

var hoverBox = function(el) {
  // Set up handle
  var t = this, r, nHeight, nWidth;
  
  // Extend object with handy variables
  t.$el = $(el);
  t.ew = t.$el.width();
  t.eh = t.$el.height();
  t.bc = t.$el.attr('data-basecolor');
  t.hc = t.$el.attr('data-highlightcolor');
  t.icon = t.$el.attr('data-icon');
  t.notch = t.$el.attr('data-notch');
  $.extend(t,{
    dur:150, 
    sw:Math.round(t.ew / 20),
    nw:Math.round(t.ew / 5),
    nh:Math.round(t.eh / 5),
    hasNotch:typeof t.notch !== "undefined"
  });
    
  // Mark your territory
  t.$el.addClass('hoverBox');
    
  // Make sure data is valid
  t.bc = typeof t.bc !== 'undefined' ? /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t.bc) ? t.bc : '#ffffff' : '#ffffff' ;
  t.hc = typeof t.hc !== 'undefined' ? /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t.hc) ? t.hc : '#00b7e5' : '#00b7e5' ;
  t.icon = typeof t.icon !== 'undefined' ? /(star|ribbon)/i.test(t.icon) ? t.icon : 'star' : false ;
    
  // Set up notch
  t.nContainer = $('<div>', {'class':'notch-container','width':t.nw,'height':t.nh}).appendTo(t.$el);
  r = Raphael(t.nContainer.get(0));
  t.notch = r.path('M0 0L'+t.nw+' 0L'+t.nw+' '+t.nh+'L0 0').attr({
    'fill' : t.bc,
    'fill-opacity' : t.hasNotch ? 1 : 0 ,
    'stroke' : 0
  });
  t.notchStroke = r.path('M0 0L'+nWidth+' '+nHeight).attr({
    'stroke' : t.bc,
    'stroke-opacity' : 1,
  });
    
  // Set up stroke
  t.sContainer = $('<div>', {'class':'stroke-container'}).appendTo(t.$el);
  r = Raphael(t.sContainer.get(0),t.ew,t.eh);
  t.stroke = r.path('M0 0L'+t.ew+' 0L'+t.ew+' '+t.ew+'L0 '+t.ew+'L0 0').attr({
    'stroke':t.hc,
    'stroke-width':0,
    'stroke-opacity':0
  });
    
  // Set up icon
  if (t.icon) {
    t.iContainer = $('<div>', {'class': 'icon '+t.icon}).appendTo(t.$el);
  }
    
  // Set up events
  t.$el.bind({
    mouseenter : function(){t.onOver()},
    mouseleave : function(){t.onOut()}
  });
    
  // Support selected class
  if (t.$el.hasClass('selected')) t.showStroke();
 ...