jQuery(window).load(function () {
	initApp();
});

var count = 0;

function initApp() {
	
	var cubes = [];
	var cubesToLoad = [];
	
	var world = jQuery("#cubes")[0]
	
	init();
	
	function init() {
		for (var i=0;i<60;i++) {
			cubesToLoad.push(new Cube(i, world, cubeLoaded));
		}
		loadNext();
		aniLoop();
	}
	
	function cubeLoaded(cube) {
		count++;
		window.status = "Loaded "+count+" colorful cubes for Flickr"
		cubes.push(cube);
		loadNext();
	}
	
	function loadNext() {
		var cube = cubesToLoad.pop();
		if (cube) cube.load();
	}

	function aniLoop() {
		
		jQuery.each(cubes,function(i,cube) {
			cube.update();
		});
		
		setTimeout(aniLoop, 10);
	}
	
}

function Cube(offset, world, loadNext) {
	
	var that = this;
	var imgs = [];
	var numLoaded = 0;
	var px = Math.random()*1000;
	var py = Math.random()*1000;
	var pz = Math.random()*1000;
	var rx = Math.random()*1000;
	var ry = Math.random()*1000;
	var rz = Math.random()*1000;

	this.el = init();
	
	function init() {
		var cube = jQuery('<div class="cube">');
		var sides = jQuery('<div class="sides">');
		jQuery(cube).append(sides);
		var img;
		
		for (var i=0; i<6;i++) {
			img = jQuery('<img class="side'+(i+1)+'"></img>');
			jQuery(sides).append(img);
			imgs.push(img);

			img.load(function ()
					{
						numLoaded++;
						if (numLoaded >= 6) {
							imagesLoadedHandler();
						}
					});
			
		}
		
		jQuery(world).append(cube);
		cube[0].display.x = -10000
		cube[0].display.update();
		return cube[0];
	}

	this.load = function() {
		flickr(flickrLoaderHandler, offset)
	}
	
	function flickr(callback, page) {
		
	    var url = "http://api.flickr.com/services/rest/?method=flickr.photos.search&text=colorful&api_key=60746a125b4a901f2dbb6fc902d9a716&per_page=6&extras=url_o,url_m,url_s&page=" + page + "&format=json&jsoncallback=?";

		jQuery.getJSON(url, function(data)  {
	        var images = jQuery.map(data.photos.photo, function(item) {
	            return {
	            	thumb: item.url_s,
	            	zoom: 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg',
	            	link: 'http://www.flickr.com/photos/' + item.owner + '/' + item.id
	            };
	        });

	        callback(images);
	    });
	}
	var timeout;
	
	function flickrLoaderHandler(images) {
		window.status = "Loading images from Flickr";
		for (var i=0; i<images.length;i++) {
			imgs[i].attr("src", images[i].thumb);
		}
		timeout = setTimeout(imagesLoadedHandler, 10000)
	}
	
	function imagesLoadedHandler() {
		clearTimeout(timeout);
		that.completeHandler();
	}
	
	this.completeHandler = function() {
		loadNext(this);	
	}

	this.update = function() {
		var sin = Math.sin;
		var speed = .1;
		var cube = this.el.display;

		cube.x = sin(px += 0.04*speed)*2600 + 2600;
		cube.y = sin(py += 0.03*speed)*1000 + 500;
		cube.z = sin(pz += 0.05*speed)*3000 + -3000;
		cube.rotationX = 50 + sin(rx += 0.055*speed)*360
		cube.rotationY = sin(ry += 0.06*speed)*360
		cube.rotationZ = sin(rz += 0.05*speed)*360
		cube.update();
	}	
}