// "A stage is the root level Container for a display list."
// http://easeljs.com/docs/Stage.html
var stage;

// the DOM-element used to instantiate stage;
// holds e.g. width/height information
var canvas;

// reference to our demo; global to remain active
var demo;

// called from body.onLoad; inits demo
function init()
{
	canvas = document.createElement('canvas');

	// check if browsers supports canvas:
	if( !!( canvas.getContext && canvas.getContext('2d')) )
	{
		// build stuff:
		var header = document.getElementById( "top-section" ).firstChild;
		canvas.width = header.offsetWidth;
		canvas.height = header.offsetHeight;
		header.style.height = canvas.height + 'px';
		header.style.padding = 0;
		header.innerHTML = '';
		header.appendChild( canvas );

		// lift-off:
		stage = new Stage( canvas );
		demo = new A(); // maybe choose from several demos later...
	}
}


// ----------------------------------------------------------------------------


// demo with an interactive ball:
function A()
{
	var CIRCLE_RADIUS = 10;
	var _g = new Graphics();
	var _s = new Shape( _g );
	
	// on clicking the ball:
	this._onClick = function( event )
	{
		_g.clear();
		_g.beginFill( Graphics.getRGB( parseInt(Math.random()*255), parseInt(Math.random()*255), parseInt(Math.random()*255) ) );
		_g.drawCircle( 0, 0, CIRCLE_RADIUS );
		_g.endFill(); 
	}

	// = onEnterFrame:
	this.tick = function()
	{
		// tween to mouse-position:
		if( stage.mouseInBounds )
		{
			_s.x += ( stage.mouseX - _s.x ) * 0.4;
			_s.y += ( stage.mouseY - _s.y ) * 0.3;
		}
		
		// no mouse? fall down then:
		else if( _s.y < canvas.height + CIRCLE_RADIUS + 1 )
		{
			_s.y += _s.y * 0.2;
		}

		// redraw stage:
		stage.update();
	}

	// init ball's color:
	this._onClick( null );

	// init ball's position:
	_s.x = canvas.width / 2;
	_s.y = canvas.height + CIRCLE_RADIUS + 1;
	_s.onClick = this._onClick;
	stage.addChild( _s );

	// set redraw intervall:
	Ticker.setFPS( 60 );
	Ticker.addListener( this );
}