/*
 * Crystal CD Case Effect
 * by Romain Guy (http://www.curious-creature.org/)
 *
 * http://www.curious-creature.org/2005/11/28/cool-effect-with-the-canvas-element/
 */

var cdCase;
var stitch;
var reflections;
var cover;

function loadImages($cdcover)
{
	var loader = new ImagePreloader(["js/cdcase/cd_case.png",
									 "js/cdcase/stitch.png",
									 "js/cdcase/reflections.png",
									 $cdcover],
									 onPreload);
}

function onPreload(images)
{
	cdCase = images[0];
	stitch = images[1];
	reflections = images[2];
	cover = images[3];
	
	drawCD();
}

function drawCD()
{
	var g2 = document.getElementById("cdCover").getContext("2d");
	
	g2.save();
	g2.translate(0, cdCase.height * 2 - 1);
	g2.scale(1, -1);
	
	g2.beginPath();
	g2.moveTo(0, cdCase.height / 2);
	g2.lineTo(cdCase.width, cdCase.height / 2);
	g2.lineTo(cdCase.width, cdCase.height + 1);
	g2.lineTo(0, cdCase.height + 1);
	g2.clip();
	
	g2.drawImage(cover, 19, 3, 240, 227);
	g2.drawImage(reflections, 0, 0);
	g2.drawImage(stitch, 19, 3);
	g2.drawImage(cdCase, 0, 0);
	
	g2.globalCompositeOperation = "destination-out";
	var alphaMask = g2.createLinearGradient(0, cdCase.height / 2, 0, cdCase.height);
	alphaMask.addColorStop(0, "rgba(255, 255, 255, 1.0)");
	alphaMask.addColorStop(1.0, "rgba(255, 255, 255, 0.5)");
	g2.fillStyle = alphaMask;
	g2.fillRect(0, cdCase.height / 2, cdCase.width, cdCase.height / 2);
	
	g2.restore();
	
	g2.drawImage(cover, 19, 3, 240, 227);
	g2.drawImage(reflections, 0, 0);
	g2.drawImage(stitch, 19, 3);
	g2.drawImage(cdCase, 0, 0);
}