Ext.onReady(function() {
    //Ext.apply(dd1);
	//Ext.apply(dd2);
	/*
	var myGeneratedDiv = Ext.DomHelper.append(document.body, {
		tag: "div",
		id: "generatedDiv",
		cls: "background",
		style: "min-width:700px;min-height:300px;left:700px;top:400px;",
		resizable: true
	});
	*/

	var viewport = new Ext.Viewport({layout:"fit"});
	
	var horse = new Ext.dd.DD(Ext.get('horse'), 'myFirstDDGroup', {isTarget: false});
	
	new Ext.dd.DD(Ext.get('background'), 'myFirstDDGroup', {isTarget: false});
	new Ext.Resizable('background', {
		dynamic: true,
		minWidth: 50,
		minHeight: 50,
		//handles: "all",
		transparent: true
	});
	
	var backgroundElement = Ext.get('background');
	var horseElement = Ext.get('horse');
	
	backgroundElement.center();
	var horsePosX = backgroundElement.getRight() - horseElement.getWidth() * 1.3;
	var horsePosY = backgroundElement.getBottom() - horseElement.getHeight() * 0.7;
	horseElement.setXY([horsePosX, horsePosY]);
	
});