var idf = {
	////////////////////////////
	spring : .95,
	speedX : 30,
	speedY : 30,
	////////////////////////////
	xm   : 0,
	ym   : 0,
	sx   : 1,
	sy   : 1,
	svx  : 0,
	svy  : 0,
	xd   : 1,
	yd   : 1,
	drag : false,

	run : function () {
		if(idf.drag) {
			idf.sx = idf.xm;
			idf.sy = idf.ym;
		} else {
			idf.svx = idf.spring * idf.svx - (idf.sx - idf.xd - idf.nx) / idf.speedX;
			idf.svy = idf.spring * idf.svy - (idf.sy - idf.yd - idf.ny) / idf.speedY;
			idf.sx += idf.svx;
			idf.sy += idf.svy;
		}

		var x0 = Math.max(0, Math.round(idf.sx) - idf.nx);
		var y0 = Math.max(0, Math.round(idf.sy) - idf.ny);
		var x1 = Math.max(0, idf.nw - (Math.round(idf.sx) - idf.nx));
		var y1 = Math.max(0, idf.nh - (Math.round(idf.sy) - idf.ny));
		var x2 = Math.max(0, Math.round((x0 * idf.nw) / idf.xd));
		var y2 = Math.max(0, Math.round((y0 * idf.nh) / idf.yd));
		var x3 = Math.max(0, Math.round((x1 * idf.nw) / (idf.nw - idf.xd)));
		var y3 = Math.max(0, Math.round((y1 * idf.nh) / (idf.nh - idf.yd)));

		idf.d[0].width  = x0 + 'px';
		idf.d[1].width  = x1 + 'px';
		idf.d[2].width  = x0 + 'px';
		idf.d[3].width  = x1 + 'px';
		idf.d[0].height = y0 + 'px';
		idf.d[1].height = y0 + 'px';
		idf.d[2].height = y1 + 'px';
		idf.d[3].height = y1 + 'px';
		idf.i[0].width  = x2 + 'px';
		idf.i[1].width  = x3 + 'px';
		idf.i[2].width  = x2 + 'px';
		idf.i[3].width  = x3 + 'px';
		idf.i[0].height = y2 + 'px';
		idf.i[1].height = y2 + 'px';
		idf.i[2].height = y3 + 'px';
		idf.i[3].height = y3 + 'px';

		/* ==== loop ==== */
		setTimeout(idf.run, 16);
	},

	mouse : function (e) {
		this.xm = e.clientX;
		this.ym = e.clientY;
	},

	resize : function () {
		var o = idf.scr;
		for (idf.nx = 0, idf.ny = 0; o != null; o = o.offsetParent) idf.nx += o.offsetLeft, idf.ny += o.offsetTop;
		idf.nw = idf.scr.offsetWidth;
		idf.nh = idf.scr.offsetHeight;
	},

	init : function () {
		this.scr = document.getElementById('screen');
		var div = this.scr.getElementsByTagName('div');
		this.d = [];
		this.i = [];
		for (var i = 0; i< 4; i++) {
			this.d[i] = div[i].style;
			this.i[i] = div[i].getElementsByTagName('img')[0].style;
		}
		this.resize();
		document.onselectstart = function () { return false; }
		this.scr.ondrag        = function () { return false; }
		this.scr.onmousedown   = function () {
			idf.drag = true;
			idf.xd = idf.xm - idf.nx;
			idf.yd = idf.ym - idf.ny;
			idf.scr.style.cursor = "move";
			return false;
		}
		document.onmouseup = function () {
			idf.drag = false;
			idf.scr.style.cursor = "pointer";
			return false;
		}
		this.i[3].width =  idf.nw;
		this.i[3].height = idf.nh;
		idf.sx = idf.nx;
		idf.sy = idf.ny;
		this.run();
	}

}

onload = function() {
	/* ==== window mousemove event ==== */
	document.onmousemove = function (e) {
		if (window.event) e = window.event;
		idf.mouse(e);
	}
	/* ==== window onresize event ==== */
	onresize = idf.resize;
	/* ==== launch script ==== */
	idf.init();
}