document.write('<script type="text/javascript" src="js/my-mousefollower.js"><\/script>');
document.write('<script type="text/javascript" src="js/swfobject.js"><\/script>');

Joe = Class.create();


Joe.prototype =
{
	initialize: function( id ) 
	{
		this.thickness = 5;
		this.wasIdle = false;
		this.startThickness = 5;
		this.direction = null;
		this.actImg = null;
		this.followerElementId = id;
		this.hasMoved = false;
		this._start();
		
		$( document.body ).insert( { bottom: '<div id="joe_info" style="position: absolute; top: 0; left: 0; width: 400px; height: 110px; display: none;" ><a href="http://www.joescorner.ch"><img src="img/banner_en.gif" style="border: none"></img></a></div>' } );
	},
	
	_start: function ()
	{
		this.mouseFollower = new My.MouseFollower( this.followerElementId, { code : '',
										     durationFixedForPixels: 200,
										     stillPosTop: -70, 
										     stillPosLeft: -100,
										     minDistanceToMove: 100
										    } );
		this.followerElement = $(this.followerElementId);
		Position.center( this.followerElement );
		this._insertFlashMovie();
		this.followerElement.observe( 'MouseFollower:newmove', this.handleNewMove.bindAsEventListener( this ) );
		this.followerElement.observe( 'MouseFollower:idle', this.handleIdle.bindAsEventListener( this ) );
		this.periodicalExecuter = new PeriodicalExecuter( this.changeContent.bind( this ), 0.25);
	},
	
	_insertFlashMovie: function ()
	{
		var so = new SWFObject( 'flash/joe.swf', 'joe', '96', '128', '7', '#000000' ); 
		so.addParam( 'quality', 'high' ); 
		so.addParam( 'scale', 'noscale' ); 
		so.addParam( 'align', 'middle' ); 
		so.addParam( 'wmode', 'transparent' ); 
		so.addParam( 'swLiveConnect', 'true' ); 
		so.write( this.followerElementId );		
	},

	handleNewMove: function  ( event )
	{
		this.direction = event.memo.direction;
		if ( this.wasIdle || ! this.hasMoved )
		{
			this.hasMoved = true;
			this.startThickness = this.thickness;
			this.wasIdle = false;
		}
		this.changeContent();
	},

	handleIdle: function  ( event )
	{
		this.startThickness = this.thickness;
		this.wasIdle = true;
		this.changeContent();
	},

	changeContent: function  ()
	{
		var dir;
		if ( this.mouseFollower.isIdle() )
		{
			var thick = this.startThickness + (this.mouseFollower.getIdleTime() / 250).round();
			if ( !this.hasMoved )
			{
				thick = 18;
			}
			if ( thick > 18 ) 
			{
				thick = 18;
			}
			this.thickness = thick;

			dir = 'still';
		}
		else
		{
			var thick = this.startThickness - (this.mouseFollower.getMovingTime() / 250).round();
			if ( thick < 1 ) 
			{
				thick = 1;
			}
			this.thickness = thick;

			if ( this.direction == My.MouseFollower.DIRECTION_UP_RIGHT )
			{
				dir = 'o_r';
			}
			else if ( this.direction == My.MouseFollower.DIRECTION_DOWN_RIGHT )
			{
				dir = 'u_r';
			}
			else if ( this.direction == My.MouseFollower.DIRECTION_UP_LEFT )
			{
				dir = 'o_l';
			}
			else if ( this.direction == My.MouseFollower.DIRECTION_DOWN_LEFT )
			{
				dir = 'u_l';
			}
		}

		var newImg = 'img/joe_' + dir + '_' + this.thickness + '.gif';
		if ( this.actImg == null || newImg != this.actImg )
		{
			// this.followerElement.update( '<img src="' + newImg + '" />' );
			this.actImg = newImg;
			//$('debug').update( this.actImg );
		}
		
		//dir = 'o_l';
		
		$('joe').SetVariable( 'newJoe', dir + '_' + this.thickness );
		$('joe').SetVariable( 'newThickness', this.thickness );
	},
	
	showInfo: function ()
	{
		this.mouseFollower.stop();
		this.periodicalExecuter.stop();
		var pos = this.followerElement.cumulativeOffset();
		$('joe_info').setStyle( { top: (pos.top + 10).toString() + 'px', left: (pos.left + 80).toString() + 'px' } );
		new Effect.Appear( $('joe_info') );
		//$('joe_info').show();
		
	},

	close: function ()
	{
		this.mouseFollower.stop();
		this.periodicalExecuter.stop();
		$('joe_info').hide();
		$('joe_follower').hide();
	}
	
}

var joeObj = null;

function initJoe ()
{
	joeObj = new Joe( 'joe_follower' );
	
}

Position.center = function(element) 
{
        var dimEle = element.getDimensions();
        var dimView = document.viewport.getDimensions();
        var scrollOffset = document.viewport.getScrollOffsets();
        
        element.setStyle( { top: ( ( dimView.height / 2 ) + scrollOffset.top - ( dimEle.height / 2 ) ).round().toString() + 'px', left: ( ( dimView.width / 2 ) + scrollOffset.left - ( dimEle.width / 2 ) ).round().toString() + 'px' } );
}

Event.observe( window, 'load', initJoe );