/*
Create box with defaults.
*/
function createBox(){
	var currentBoxes  = $(BoxProperties.selector);
	if(currentBoxes.length>10){
		alert('OMG To Many Boxes!');
		return;
	}
	var newbox = $(BoxProperties.selector+':first').clone();
	newbox.css('width','0px');
	newbox.css('height','0px');
	
	newbox.css('background-color','green');
	if(BoxProperties['color'])
		newbox.css('background-color',BoxProperties['color']);
	
	currentBoxes.parent().append(newbox);
	
	var height = '50px';
	var width = '50px';
	
	if(BoxProperties['height'])
		height=BoxProperties['height'];

	if(BoxProperties['width'])
		width=BoxProperties['width'];
		
	newbox.animate({height:height,width:width}, 'fast');

}
BoxProperties = {};
function createBoxStyle(selector,property){
	if(property.width)
		BoxProperties['width']=property.width;
	if(property.height)
		BoxProperties['height']=property.height;
	if(property.color)
		BoxProperties['color']=property.color;
	BoxProperties['selector']=selector;
}

CSS.addPseudoClassListener('boxcreator',createBoxStyle);

$('#CreateBoxButton').click(function(){createBox();});