Point = Base.extend({
	initialize: function(x, y) {
		this.x = x;
		this.y = y;
	},
	getDistance: function(point) {
		var px = point.x - this.x;
		var py = point.y - this.y;
		return Math.sqrt(px * px + py * py);
	}
});
$window.addEvent('domready', function() {

	/* preloading */
	var srcs = ['236-277.jpg', '922-390.jpg', '237-329.jpg', '247-223.jpg', '263-386.jpg', '272-281.jpg', '276-208.jpg', '276-278.jpg', '300-340.jpg', '305-398.jpg', '314-360.jpg', '314-480.jpg', '323-230.jpg', '329-270.jpg', '337-161.jpg', '338-413.jpg', '354-510.jpg', '368-368.jpg', '372-216.jpg', '380-300.jpg', '382-385.jpg', '383-202.jpg', '391-333.jpg', '393-333.jpg', '405-363.jpg', '408-375.jpg', '419-103.jpg', '420-259.jpg', '421-348.jpg', '421-476.jpg', '423-068.jpg', '424-310.jpg', '432-253.jpg', '435-402.jpg', '435-588.jpg', '436-403.jpg', '442-307.jpg', '444-308.jpg', '445-260.jpg', '449-336.jpg', '451-252.jpg', '452-120.jpg', '453-207.jpg', '455-425.jpg', '457-500.jpg', '460-132.jpg', '462-330.jpg', '467-211.jpg', '467-395.jpg', '468-385.jpg', '469-382.jpg', '471-366.jpg', '474-141.jpg', '480-405.jpg', '482-151.jpg', '482-221.jpg', '484-434.jpg', '488-323.jpg', '489-172.jpg', '489-461.jpg', '490-313.jpg', '490-340.jpg', '491-234.jpg', '491-289.jpg', '491-466.jpg', '492-462.jpg', '499-295.jpg', '502-163.jpg', '502-490.jpg', '507-519.jpg', '508-069.jpg', '509-280.jpg', '510-280.jpg', '511-372.jpg', '511-409.jpg', '512-356.jpg', '512-514.jpg', '514-353.jpg', '515-310.jpg', '515-338.jpg', '517-360.jpg', '520-402.jpg', '521-236.jpg', '524-153.jpg', '526-302.jpg', '528-292.jpg', '533-377.jpg', '535-248.jpg', '538-284.jpg', '540-375.jpg', '542-302.jpg', '544-351.jpg', '544-376.jpg', '548-280.jpg', '550-240.jpg', '557-234.jpg', '561-230.jpg', '563-262.jpg', '565-303.jpg', '570-278.jpg', '570-335.jpg', '573-283.jpg', '576-330.jpg', '580-324.jpg', '580-330.jpg', '588-519.jpg', '590-458.jpg', '592-317.jpg', '592-345.jpg', '594-180.jpg', '603-157.jpg', '603-216.jpg', '605-260.jpg', '612-313.jpg', '617-566.jpg', '620-301.jpg', '630-273.jpg', '631-234.jpg', '635-393.jpg', '637-309.jpg', '652-491.jpg', '654-111.jpg', '657-268.jpg', '662-300.jpg', '663-330.jpg', '666-248.jpg', '681-289.jpg', '683-444.jpg', '687-162.jpg', '690-312.jpg', '690-444.jpg', '693-218.jpg', '704-273.jpg', '712-368.jpg', '716-260.jpg', '718-278.jpg', '723-278.jpg', '724-332.jpg', '740-300.jpg', '740-504.jpg', '741-242.jpg', '748-230.jpg', '766-346.jpg', '789-345.jpg', '800-200.jpg', '831-465.jpg', '842-237.jpg', '890-220.jpg'];
	var images = [];
	srcs.each(function(src){
		var matches = src.match(/[0-9]+/g);
		images.push({
			src : src,
			point : new Point(matches[0].toInt(), matches[1].toInt())
		});
	});
	var count = 0;
	var loader = new Asset.images(srcs, {
		onComplete: function() {
			var image = new DomElement('img', { src: srcs[0], width:1024, height:768});
			image.addEvent("mousemove", function(event) {
				var mousePoint = new Point(event.client.x - this.getLeft(), event.client.y - this.getTop());
				var smallestDis;
				var nearestImage;
				images.each(function(img){
					var dis = mousePoint.getDistance(img.point);
					if(!smallestDis) {
						smallestDis = dis;
						nearestImage = img;
					} else {
						if(dis < smallestDis) {
							index = i;
							smallestDis = dis;
							nearestImage = img;
						}
					}
				});
				//console.log(smallestDis)
				this.$.src = nearestImage.src;
			});
			$('images-holder').setHtml('');
			image.insertBottom($('images-holder'));
			image.$.src = srcs[1]
		},
		
		onProgress: function() {
			count++;
			$('images-holder').setHtml('Loading ' + count + ' of ' + srcs.length);
		}
	});
});