Magic Eye Widget 4 Project Grid Editor

gistfile1.html

<div oc-lazy-load="[
    'https://cdn.rawgit.com/peeinears/MagicEye.js/master/magiceye.min.js',
    'https://cdn.rawgit.com/peeinears/MagicEye.js/master/depthmappers/CanvasDepthMapper.js',
    'https://cdn.rawgit.com/jwarby/jquery-awesome-cursor/master/src/jquery.awesome-cursor.js'
]">
    <magiceye id="magic-eye">
        <div class="Absolute-Center polaroid">
             <div class="magic-eye-wrapper">
                <canvas style="display:hidden;" id="magic-eye-canvas" width="540" height="400">Sorry, your browser doesn't support HTML5 Canvas!</canvas>
             </div>
        </div>
    </magiceye>
</div>

gistfile2.css

div.polaroid { 
  float: left; 
  border: 25px solid #e3e4d3;
  box-shadow: 0 0 200px 200px rgba(29,25,4,1) inset, 0 0 3px 6px rgba(0,0,0,0.07);
  width: 550px; height: 400px;
  /* fill image */
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background:url(http://i.imgur.com/2Ho3c.gif);
  background-repeat: no-repeat;
}
.magic-eye-wrapper {
    position: absolute;
    top: 0;
    left: 0;
}
/* end css */

gistfile3.js

// magic eye 0.1o

// create loader & directive
jQuery('#magic-eye-widget').hide();
    
MainModule.lazyDirective('magiceye', function ($timeout){
     return {
      restrict: 'EA',
      scope: true,
      link : function (scope, element) {
        $timeout(function(){
            // init magic wand functionality
            scope.magiccheck = true;
            angular.element('.widget').awesomeCursor('magic', {
              'color': '#43445',
              'size': 32
            });
            angular.element('.widget').on('click', function(evt){
                jQuery('#magic-eye-widget').show();
                WidgetSrvc.screenshot(angular.element(evt.target).closest('.widget'), 540, 400).then(function(canvas){
                    scope.magiceye = scope.magiceye = canvas;
                    jQuery('.eye-symbol').fadeOut('slow').hide();
                    jQuery('.polaroid-label').hide();
                    var context = document.getElementById('magic-eye-canvas').getContext('2d');
                    var img = new Image();
                    img.src = canvas;
                    context.drawImage(img, 0, 0, 540, 400);
                    // magic eye renderer
                    MagicEye.render({
                        el: document.getElementById('magic-eye-canvas'),
                        width: 540,
                        height: 400,
                        colors: ['0f0', '00f', 'f00', 'ff0', 'f0f', '0ff'],
                        depthMapper: new MagicEye.CanvasDepthMapper(document.getElementById('magic-eye-canvas'))
                    });
                });
                angular.element('.widget').css('cursor', 'default');
                angular.element('.widget').unbind('click');
            });
        },0);      
      } // END LINK
     } // END RETURN
});
// end js