spot the diff

a small spot the differences game

HTML

<script src="http://odyniec.net/projects/imgareaselect/jquery.imgareaselect.pack.js"></script>
<link rel="stylesheet" href="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css">
<div id="wrapper"></div>

CSS

.main_container{
    
}
.image_container{
    float : left;
    position : relative;
    margin : 5px;
    -moz-box-shadow: 0 0 5px 5px #888;
    -webkit-box-shadow: 0 0 5px 5px #888;
    -ms-box-shadow: 0 0 5px 5px #888;
    -o-box-shadow: 0 0 5px 5px #888;
    box-shadow: 0 0 5px 5px #888;
}

.image_container img{
    max-width : 400px;
    max-height : 400px;
    height : auto;
}

.area{
    display : none;
    position : absolute;
    -webkit-border-radius : 50% 50%;
    -moz-border-radius : 50% 50%;
    -o-border-radius : 50% 50%;
    -ms-border-radius : 50% 50%;
    border-radius : 50% 50%;
    
    background : #e02f00;
    border : 4px solid #fff;
    margin-left : -4px;
    margin-top : -4px;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity : .5;
}
.area.active{
   display : block;
}
.area.active:hover{
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    opacity : .75;
}
.area .close{
    display : none;
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    /* the X icon */
    background-image:...

JavaScript

(function($,global,undefined){
    
    var app = function(el,options){
        this.el = el;
        this.options = options;
        this.init();
    };
    
    app.prototype.initHtml = function(){
        var that = this;
        
        this.container = $('<div class="main_container"></div>').appendTo(this.el);
        
        $.each(this.options.images,function(i,im){
            $('<div class="image_container">')
                .append('<img alt="" src="'+ im +'"/>')
                .appendTo(that.container);
        });
        this.container.append('<button class="save_area" disabled>Save Area</button>');
        this.container.append('<button class="get_areas" disabled>Get Areas</button>');
        
        return this;
    };
    
    app.prototype.initVars = function(){
    //    this.container = $('.main_container',el);
        this.photos =  $('img',this.container);
        this.photo1 = $('img:first',this.container);
        this.photo2 = $('img:last',this.container);
        this.saveAreaBtn = $('.save_area',this.container);
        this.getAreasBtn = $('.get_areas',this.container);
        this.areas = [];
        this.lastSelection = {};
         
        return this;
    };
    
    app.prototype.bindEvents = function(){  
        var that = this;
        this.photos.imgAreaSelect({
            handles : true,
            onSelectEnd : function(img, selection){
               that.lastSelection = selection;    
               that.saveAreaBtn.prop('disabled',false);
               var api = that.photos.not(img).data('imgAreaSelect');
               if(api)
                   api.cancelSelection();              
            }
        });
        
        this.saveAreaBtn.on('click',function(e){
            that.generateArea(that .lastSelection);
            that.photos.each(function(){
                var api = $(this).data('imgAreaSelect');
                if(api)
                    api.cancelSelection();
            });
           ...