(function(){
		
var Box = function(){
	var 
		uniq = function(){ return new Date()*1 + Math.floor(Math.random() * 1000); },
		rnd = function(max){ return Math.floor(Math.random()*max); },
		obj = this,
		uId = obj.uId = "div_" + uniq();
	
	//create new element with effects and set the click function
	$("body").addElement('div', {
		style: {
			width: 30,
			height: 30,
			top: 50 + rnd(300),
			left: 50 + rnd(300),
			position: "absolute",
			cursor: "move",
			suffix: "px",
			backgroundColor: "pink"
		},
		id: uId
	}).children("#" + uId).animate({
		width: "100px",
		height: "100px"
	}, 1000, "easeOutElastic").animate({
		backgroundColor: "orange"
	}, {
		duration: 2000,
		queue: false
	}).click(function(){
		if (obj.locked) return false;
		
		obj.w = obj.w ? obj.w : 100;
		obj.h = obj.h ? obj.h : 100;
		obj.locked = true;
		
		var flip = function(n){ return n * (rnd(2)?-1:1); };
		var modNum = flip(20);
		if (obj.w < 50) modNum = Math.abs(modNum);
		
		$(this).animate({
			width: (obj.w+=modNum) + "px",
			height: (obj.h+=modNum) + "px"
		}, 1000, "easeOutElastic", function(){
			obj.locked = false;
		});
	});
	
	//add draggability
	obj.el = $("#" + uId);
	obj.el.mousedown(function(){ this.style.backgroundColor = "salmon";	});
	obj.el.mouseup(function(){ this.style.backgroundColor = "orange"; });
	obj.el.draggable({containment: [0, 0, 600, 600]});
	
	//misc methods
	obj.destroy = function(){
		obj.locked = true;
		obj.el.fadeOut("fast", function(){ obj.el.remove(); });
	}
};

//create dropbox
$("#recycler").droppable({
	hoverClass: "drop",
	drop: function(e, ui) {
		var itemId = $(ui.draggable)[0].id;
		boxes[itemId].destroy();
		delete(boxes[itemId]);
	}
});

//add onclick for button, add box
window.boxes = {};
$("#add_box_btn").click(function(){
	var box = new Box();
	boxes[box.uId] = box;
	this.blur();
	return false;
}).click();

})();