/*
Create box with defaults.
*/
function createBox(){
	var currentBoxes  = $(BoxProperties.selector);
	if(currentBoxes.length>BoxProperties.amount){
		alert(Errors.error123);
		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;
	if(property.amount)
		BoxProperties['amount']=property.amount;
	BoxProperties['selector']=selector;
}
Errors={};
function errors(selector,property){
	if(property.error123)
		Errors['error123']=property.error123;
}
CSS.addPseudoClassListener('boxcreator',createBoxStyle);
CSS.addPseudoClassListener('error',errors);

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