window.xcanvas = function() {

	var sCvs = document.getElementById('src');
	var dCvs = document.getElementById('dst');
	var sCtx = sCvs.getContext('2d');
	var dCtx = dCvs.getContext('2d');
	var div = document.getElementById('dummy');

	var url = document.getElementById('url');
	url.focus();
	var scale = document.getElementById('scale');
	var border = document.getElementById('border');
	
	var img;
	var gW = 200;
	var gH = 150;
	var x = 0;
	var y = 0;

	var draw = function() {

		var w = img.width;
		var h =img.height;
		sCvs.width = w;
		sCvs.height = h;
		div.style.width = w + 'px';
		div.style.height = h + 'px';
		
		sCtx.drawImage(img, 0, 0);

		dCvs.width = gW;
		dCvs.height =gH;
		
		var s = parseInt(scale.value);
		var sw = gW / s;
		var sh = gH / s;
		
		var sx = x - sw / 2;
		var sy = y - sh / 2;
		if (sx < 0) sx = 0;
		if (sx > w - sw) sx = w - sw;
		if (sy < 0) sy = 0;
		if (sy > h - sh) sy = h - sh;
		
		dCtx.drawImage(img, sx, sy, sw, sh, 0, 0, gW, gH);
		
		var divX = x - gW / 2;
		var divY = y - gH / 2;
		if (divX < 0) divX = 0;
		if (divX > w - gW) divX = w - gW;
		if (divY < 0) divY = 0;
		if (divY > h - gH) divY = h - gH;
				
		dCvs.style.left = divX + 'px';
		dCvs.style.top = divY + 'px';
		dCvs.style.border = border.value;

	};

	uu(div).mousemove(function(e) {
		x = e.ox;
		y = e.oy;
		draw();
	});

	var init = function() {
		img = new Image();
		img.onload = draw;
	};
	
	uu('form').submit(function(e) {
		init();
		img.src = url.value + '?' + new Date().getTime();
		uu.ev.stop(e);
	});
	
	uu.ev.fire(uu('form').nth(), 'submit');

	uu('#file').change(function(e) {
		init();
		var datauri = e.target.files[0].getAsDataURL();
		img.src = datauri;
	});
	
	uu.id('file').addEventListener('dragover', function(e) {
    	e.preventDefault(); 
		e.target.className = 'over';
	}, true);

	uu.id('file').addEventListener('dragleave', function(e) {
		e.target.className = '';
	}, true);
	
	uu.id('file').addEventListener('drop', function(e) {
	    e.stopPropagation();
		e.target.className = '';

		var dt = e.dataTransfer;

		var reader = new FileReader();
		reader.onloadend = function() {
			init();
			img.src = reader.result;
		};
		reader.readAsDataURL(dt.files[0]);
	}, true);
	
};