DAN ZEN EXPO - CODE EXHIBIT - ZIM CREATE
function create() {
	
	zog("____ ZIM Create Examples ____"); 
	
	var titleText = "ZIM Create Module";
	var title = makeTitle(titleText);
	
	var circle = zimCircle();
	stage.addChild(circle);
	circle.x = 260; circle.y = 230;
	
	// DRAGGING
	// assuming that we have a createjs stage
	// and two createjs shapes (or bitmaps, etc) called circle and square
	// these could be nested inside various containers (or not)
	// the code behind the zim.drag() function is quite complicated
	
	// to set up dragging and dropping the circle we simply use:
	
	// zim.drag(circle);
	
	
	
	// the circle now can be picked up and dropped repeatedly
	// it will have a pointer cursor on rollover and a move cursor when moving
	// you can specify a bounds rectangle as the second parameter
	// this is relative to the stage.  Assuming we have stageW and stageH
	
	// var bounds = new createjs.Rectangle(0,0,stageW,stageH);	
	// this will keep the registration point of the circle inside the stage
	// or keep the whole circle in bounds:
	
	 var bounds = new createjs.Rectangle(
	 	circle.radius,
		circle.radius,
		stageW-circle.radius*2,
		stageH-circle.radius*2);	
	zim.drag(circle, bounds);
	
		
	// you can make a slider behavior like so:
	
	var circle2 = zimCircle();
	stage.addChildAt(circle2,0);
	zim.scale(circle2,.5);	
	
	var slideBounds = new createjs.Rectangle(100,500,600,0); // no y movement
	zim.drag(circle2, slideBounds, "pointer", "ew-resize", null, true);
	// the tween later needs to capture mousedowns so set that to true above
	// if swiping we usually want that to be false ;-) so it is false by default
	
	// note, here we specify the cursors too
	// to turn off the ability to drag we use:	
	
	// zim.noDrag(circle);
	
	
	// HIT TESTS
	// there are five hit tests available in ZIM
	
	// 1. zim.hitTestPoint(a, x, y)
	// tests to see if a shape (a) is hitting a point (x, y)
	// this is similar to the native hitTest() in createjs
	// but it tests to see if a point on the global stage
	// is hitting the shape even if the shape is
	// nested, rotated, moved or has had a registration change
	// makes use of globalToLocal - always tricky...
	
	var target = makeTarget();
	target.x = stageW/2;
	target.y = stageH/2;
	stage.addChildAt(target,0);	// just to visualize center stage
	

	var hitCheck1 = false;
	circle.on("pressmove", function() {
		if ( zim.hitTestPoint(circle, stageW/2, stageH/2) ) {
			if (!hitCheck1) { // if it was not hitting, now it is...
				hitCheck1 = true;
				zog("hitting stage center");
				title.text = titleText + " :: circle hitting stage center";
				stage.update();
			}				
		} else {
			if (hitCheck1) {// if it was hitting, now it is not...	
				title.text = titleText;				
				hitCheck1 = false;
				stage.update();		
			}
		}
	});
	
	// 2. zim.hitTestReg(a, b)
	// checks to see if a shape (a) is hitting the registration point of an object (b)
	// good for shapes hitting small objects.  Works even if objects are
	// nested, rotated, moved or have had registration changes
	// also handy for snapping (set registration point to middle)
	// makes use of localToLocal - always tricky
	
	// put a square in a container
	var container = new createjs.Container();
	var backing = new createjs.Shape();	
	var w = 200; var h = 100;
	container.setBounds(0,0,w,h);
	backing.graphics.f("#ccc").dr(0,0,w,h);
	container.addChild(backing);
	
	var square = new createjs.Shape();
	var size = 300;
	square.setBounds(0,0,size,size);
	square.graphics.f("#666").dr(0,0,size,size);
	container.addChild(square);
	container.x = 600; container.y = 450;
	stage.addChildAt(container,0);
	
	// FIT
	// fit an object into bounds - actually scales and moves
	// obj, left, top, width, height, inside
	var padding = 20;
	zim.fit(square, padding, padding, w-padding*2, h-padding*2);
	
	
	// OUTLINE
	// outline is extremely handy to visualize objects
	// especially with unusual bounds and registration points set	
	// the rectangle shows the bounds, the circle the registration point
	// and the cross shows the origin inside the object (0,0)
	// in this case it is nothing unusual - these all align	
	zim.outline(square);	
	
		
	// check to see if smaller circle hitting reg of nested square
	var hitCheck2 = false;
	circle2.on("pressmove", function() {
		if ( zim.hitTestReg(circle2, square) ) {
			if (!hitCheck2) { // if it was not hitting, now it is...
				hitCheck2 = true;
				zog("hitting registration point of square");
				title.text = titleText + " :: hitting registration point of square";
				stage.update();
			}				
		} else {
			if (hitCheck2) {// if it was hitting, now it is not...	
				title.text = titleText;				
				hitCheck2 = false;
				stage.update();		
			}
		}
	});	
	

	// 3. zim.hitTestRect(a, b, num)
	// checks to see if a shape (a) is hitting a number of points on a rectangle
	// the second parameter (b) is an object with a getBounds() available 
	// this bounds is used as the rectangle
	// the third parameter (num) is how many points along each side of the rectangle
	// get tested - default is 0 which tests only the corners of the rectangle
	// num = 2 would test the corners and two extra points distributed on each side
	// so this would be 4 + 2*4 = 12 points total
	// this technique gives a good way to test a shape and rectangle
	// but watch out for performance at larger numbers - usually 2 or 3 is fine
	// makes use of localToLocal - always tricky
	
	
	// would normally only have one pressmove ;-)
	var hitCheck3 = false;
	circle.on("pressmove", function() {
		if ( zim.hitTestRect(circle, container, 2) ) {
			if (!hitCheck3) { // if it was not hitting, now it is...
				hitCheck3 = true;
				zog("hitting points on rectangle");
				title.text = titleText + " :: hitting points on rectangle";
				stage.update();
			}				
		} else {
			if (hitCheck3) {// if it was hitting, now it is not...	
				title.text = titleText;				
				hitCheck3 = false;
				stage.update();		
			}
		}
	});	
	
	
	
	// 4. zim.hitTestCircle(a, b, num)
	// checks to see if a shape (a) is hitting a number of points on a circle
	// the second parameter (b) is an object with a getBounds() available 
	// this bounds is used to determine the circle
	// the circle diameter is set to the average of the width and height of the bounds
	// the third parameter (num) is how many points around the circle
	// get tested - default is 8 which tests from 0 every 45 degrees
	// this technique gives a good way to test a shape and circle
	// watch out for performance at larger numbers - usually 12 or so should be fine
	// makes use of localToLocal - always tricky
	// imagine we have a second circle, circle2:
	
	
	var circle3 = zimCircle();
	circle3.x = 714; circle3.y = 230; 		
	stage.addChild(circle3);
	zim.scale(circle3, .5);	
	var bounds3 = new createjs.Rectangle(
		circle3.radius/2,
		circle3.radius/2,
		stageW-circle3.radius,
		stageH-circle3.radius);
	zim.drag(circle3, bounds3);
	
		
	var hitCheck4 = false;
	circle3.on("pressmove", function() {
		if ( zim.hitTestCircle(circle3, circle, 12) ) {
			if (!hitCheck4) { // if it was not hitting, now it is...
				hitCheck4 = true;
				zog("hitting points on circle");
				title.text = titleText + " :: hitting points on circle";
				stage.update();
			}				
		} else {
			if (hitCheck4) {// if it was hitting, now it is not...	
				title.text = titleText;				
				hitCheck4 = false;
				stage.update();		
			}
		}
	});		
	
	

	// 5. zim.hitTestBounds(a, b, demo)
	// checks if the bounds of two objects (a,b) are hitting
	// so the objects must have bounds set (setBounds)
	// works even if the shapes are nested, etc.
	// the last parameter (demo) shows the bounds of the objects (optional)
	// (demo should be an empty shape object on the stage)
	// if an object is rotated, the bounds expand 
	// to encompass the original bounding rectangle
	// so the bounding rectangles that are tested are never rotated
	// this is the like the hitTestObject method in Flash
		
	var hitCheck5 = false;
	circle3.on("pressmove", function() {
		if ( zim.hitTestBounds(circle3, container) ) {
			if (!hitCheck5) { // if it was not hitting, now it is...
				hitCheck5 = true;
				zog("bounds hitting");
				title.text = titleText + " :: bounds hitting";
				stage.update();
			}				
		} else {
			if (hitCheck5) {// if it was hitting, now it is not...	
				title.text = titleText;				
				hitCheck5 = false;
				stage.update();		
			}
		}
	});	
	
	// zim.boundsToGlobal is just a function that returns the bounds
	// of an object as a rectangle on the global stage
	// it is used in some of the hit tests
	
	var globalRect = zim.boundsToGlobal(circle);
	
	
	// SCALE
	// a most annoying thing is always having to set both x and y scales
	// 99% of the time these will both be the same
	// so zim.scale() takes care of setting both scaleX and scaleY
	// and the function throws in a stage.update() too!
	
	// zim.scale(circle, 2);
	
	// or use 
	// zim.scaleTo(circle, stage, null, 30); // 30% of stage height
	
	
	// MOVE 
	// use the zim.move(obj, x, y, milliseconds, ease); function to move an object
	// just a little wrapper function for the createjs.Tween
	// ease is optional and defaults to "quad" - use "elastic", "back", "bounce", etc.
	// handles removing the Ticker when the tween is done
	// use for the occasional movement as it makes a Ticker each time
	
	circle2.on("mousedown", function(){
		createjs.Tween.removeTweens(circle2);
	});
	
	circle2.on("pressup", function(){
		zim.move(circle2, 200, 500, 1500, "elasticOut");
	});
	

	// ANIMATE 
	// a wrapper for the createjs Tween class that makes and removes a Ticker
	// target, obj, t, ease, callBack, params, wait
	circle3.alpha = 0;
	zim.animate(circle3, {alpha:1}, 1000, null, null, null,500);
	
	
	
	// some helper functions ;-)

	function zimCircle() {
		var colors = ["#f58e25","#acd241", "#e472c4", "#50c4b7 ", "#d1a170", "#222222"];	
		var c = new createjs.Shape();
		var g = c.graphics;
		c.radius = 100;
		for (var i=0; i<colors.length; i++) {
			g.f(colors[i]).dc(0,0,(c.radius/colors.length)*(colors.length-i));
		}	
		c.setBounds(-c.radius, -c.radius, c.radius*2, c.radius*2);
		c.on("mousedown",function(e){stage.addChild(e.target);}); // bring to top
		return c;
	}	
	
	function makeTitle(t) {			
		var logo = new createjs.Bitmap(preload.getResult("logo"));		
		logo.x = 20; logo.y = 20;		
		logo.alpha = .8;
		logo.cursor = "pointer";
		logo.on("mouseover", function(){logo.alpha = 1; stage.update();});
		logo.on("mouseout", function(){logo.alpha = .8; stage.update();});
		logo.on("click", function(){zgo("../examples.html?create");});
		stage.addChild(logo);	
		zim.scale(logo,.5);
	
		var title = new createjs.Text(t, "26px Verdana", "#933");		
		title.textBaseline = "alphabetic";
		title.alpha = .9;
		title.x = 148; 
		title.y = 68;	
		stage.addChild(title);
		stage.update();
		return title;	
	}	
	
	function makeTarget() {
		var target = new createjs.Shape();
		target.graphics.s("black").ss(2).mt(-10,0).lt(10,0).mt(0,-10).lt(0,10);		
		return target;
	}
	
	stage.update();	
}