Responsive HTML5 scratch card, which sholuld work on IOS, Android and Windows

Description:

Responsive scratch card that works on all popular web platforms.
Only coding of Scratch card is needed. No need for the lottery draw function.

Scratch card principle:
Top layer image is scratched away. Bottom image is reveiled.

Layout:
Must work responsive, always with a width of 100%. Not absolute positioned. Scratch card
can be portrait, landscape or square. We don’t want to set any fixed ratios or fixed sizes in
the code, so the scratch card layout must be calculated on the ratio of the top layer image
or bottom layer image.

On Scratch complete:
We also need a “scratch card complete” function that is called when scratch card is
scratched more than a certain percentage. The percentage must be a 0-100 variable in
the script so that it can be easily adjusted by us. The check for completion is done on
every touchend/mouseend.

If the percentage is reached on touchend/mouseend the top layer is hidden and we
would appreciate a: console.log(’Scratch is complete’) or similiar. Scratch card can be
scratched until the percentage is reached. If the percentage is not reached on
touchend/mouseend the top layer image remains and we would appreciate a:
console.log(’Scratch is NOT complete’) or similiar.

Technology:
Javascript / JQUERY / HTML5 canvas.
The scratch card will be implemented into our own custom solutions.
It has to be documented code that we can implement easy.
Javascripts/jquery/css must be references to seperate files.
Not minimized or encryptet in any way.
No url parameters.
Have to work without conflicting with Jquery mobile classes, variable names etc.
Platforms:
Touch: IOS, Android, Windows Phone 8
Desktop (mouse): IE, CHROME, MOZ
Example:
http://mobione.dk/cocacola_/scratch.php?smsid=a5ymdr&msisdn=45000000
NB! The example does not handle well on Android & Windows phone