From 6d499c4a7c06195eb1594fd9cd6a9f6e60090b8b Mon Sep 17 00:00:00 2001
From: James Cryer <james.cryer@huddle.net>
Date: Tue, 26 Feb 2013 14:03:02 +0000
Subject: [PATCH] Added images for compare example

---
 LICENSE                 |   2 +-
 demoassets/People.jpg   | Bin 0 -> 36010 bytes
 demoassets/People2.jpg  | Bin 0 -> 29440 bytes
 demoassets/main.js      |  36 +++++++++++++++++++++
 demoassets/resemble.css |   2 +-
 index.html              |  10 ++++--
 resemble.css            |  67 ----------------------------------------
 7 files changed, 46 insertions(+), 71 deletions(-)
 create mode 100644 demoassets/People.jpg
 create mode 100644 demoassets/People2.jpg
 delete mode 100644 resemble.css

diff --git a/LICENSE b/LICENSE
index 877624b..b265c8a 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,4 +1,4 @@
-The MIT License (MIT) Copyright © 2013 Richard Owen
+The MIT License (MIT) Copyright © 2013 Huddle
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the “Software”), to deal in
diff --git a/demoassets/People.jpg b/demoassets/People.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a891a9e580f070f984c582bcfe7a946ab9fb85aa
GIT binary patch
diff --git a/demoassets/People2.jpg b/demoassets/People2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d55e3038caedd36471745c4a82075b410366a4cb
GIT binary patch
diff --git a/demoassets/main.js b/demoassets/main.js
index 48e0876..dcb7a2f 100644
--- a/demoassets/main.js
+++ b/demoassets/main.js
@@ -81,6 +81,7 @@ $(function(){
 	var file2;
 	var resembleControl;
 	dropZone($('#dropzone1'), function(file){
+		console.log(file);
 		file1 = file;
 		if(file2){
 			resembleControl = resemble(file).compareTo(file2).onComplete(onComplete);
@@ -115,4 +116,39 @@ $(function(){
 		}
 	});
 
+
+	(function(){
+		var xhr = new XMLHttpRequest();
+		var xhr2 = new XMLHttpRequest();
+		var done = $.Deferred();
+		var dtwo = $.Deferred();
+
+		xhr.open('GET', 'demoassets/people.jpg', true);
+		xhr.responseType = 'blob';
+		xhr.onload = function(e) {
+			done.resolve(this.response);
+		};
+		xhr.send();
+
+		xhr2.open('GET', 'demoassets/people2.jpg', true);
+		xhr2.responseType = 'blob';
+		xhr2.onload = function(e) {
+			dtwo.resolve(this.response);
+		};
+		xhr2.send();
+
+		$('#example-images').click(function(){
+
+			$('#dropzone1').html('<img src="demoassets/people.jpg"/>');
+			$('#dropzone2').html('<img src="demoassets/people2.jpg"/>');
+
+			$.when(done, dtwo).done(function(file, file1){
+				resembleControl = resemble(file).compareTo(file1).onComplete(onComplete);
+			});
+
+			return false;
+		});
+
+	}());
+
 });
\ No newline at end of file
diff --git a/demoassets/resemble.css b/demoassets/resemble.css
index dbe9cf6..dc7ed23 100644
--- a/demoassets/resemble.css
+++ b/demoassets/resemble.css
@@ -59,6 +59,6 @@ footer {
     }
     #image-diff {
         margin-left: 0px;
-        margin-top: 90px;
+        margin-top: 50px;
         border-style: solid;
     }
diff --git a/index.html b/index.html
index c1033e1..39563c3 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
 		<meta name="description" content="">
 		<meta name="viewport" content="width=device-width">
 		<link rel="stylesheet" href="libs/twitter-bootstrap/bootstrap.min.css">
-		<link rel="stylesheet" href="demoassets/resemble.css">		
+		<link rel="stylesheet" href="demoassets/resemble.css?v1">		
 	</head>
 	<body>
 		<div class="container">
@@ -77,6 +77,9 @@ <h2>Compare two images?</h2>
 								<p>
 									Drop two images on the boxes to the left.  The box below will show a generated 'diff' image, pink areas show mismatch.  This example best works with two very similar but slightly different images.  Try for yourself!
 								</p>
+								<p>
+								Don't have any images to compare? <button class="btn" id="example-images">Use example images</button>
+								</p>
 								<div id="image-diff" class="small-drop-zone">
 									Diff will appear here.
 								</div>
@@ -154,7 +157,10 @@ <h2>How can I use it?</h2>
 	  
 			<footer class="footer">
 				<p>	
-				Created by <a href="https://github.com/jamescryer" target="_blank">James Cryer</a> and the Huddle development team.
+					Created by <a href="https://github.com/jamescryer" target="_blank">James Cryer</a> and the Huddle development team.
+				</p>
+				<p>
+					The image used in the comparison example was created by <a href="https://twitter.com/Shadowise" target="_blank">Daniel Rajendran</a>
 				</p>
 			</footer>
 		</div>
diff --git a/resemble.css b/resemble.css
deleted file mode 100644
index d24250a..0000000
--- a/resemble.css
+++ /dev/null
@@ -1,67 +0,0 @@
-
-
-h1 {
-	text-align: center;
-}
-
-body {
-	padding-top: 60px;  
-}
-	
-footer {
-	margin-top: 45px;
-	padding: 35px 0 36px;
-	border-top: 1px solid #e5e5e5;
-}
-
-.drop-zone{
-	border: 10px dashed #ccc;
-	color: #ccc;
-	font-size: 32px;
-	height: 400px;
-	line-height: 400px;
-	text-align: center;
-	width: 400px;
-	overflow: hidden;
-	position: relative;
-}
-	.drop-zone.drag-over{
-		border: 10px dashed #0088CC;		
-	}
-	.drop-zone img {
-		width: 400px;
-		position: absolute;
-		top: 0;
-		left: 0;
-	}
-
-.small-drop-zone{
-	margin-top: 20px;
-	margin-left: 90px;
-	border: 10px dashed #ccc;
-	color: #ccc;
-	font-size: 32px;
-	height: 330px;
-	line-height: 330px;
-	text-align: center;
-	width: 330px;
-	overflow: hidden;
-	position: relative;
-}
-	.small-drop-zone.drag-over{
-		border: 10px dashed #0088CC;        
-	}
-	.small-drop-zone img {
-		width: 330px;
-		position: absolute;
-		top: 0;
-		left: 0;
-	}
-	#image-diff {
-		margin-left: 0px;
-		margin-top: 90px;
-		border-style: solid;
-	}
-	#image-diff img {
-		cursor: pointer !important;
-	}
