var containerDiv  = 'main'  //<div id="main" />
var imagePath     = './images/fly1.gif';
var imagePathStop = './images/fly2.gif';
var imageWidth    = 84;
var imageHeight   = 49;
//var imagePath     = './images/fly5.gif';
//var imagePathStop = './images/fly6.gif';
//var imageWidth    = 54; //264;
//var imageHeight   = 37; //180;
//

window.addEvent('domready', function() {
	
	
	// op +140 vh midden
	var size = document.id(containerDiv).getSize(); 
  var setleft = ((size.x /2 ) + 140 );
	if  (isNaN(setleft)) {setleft=710;};	
	
	
  var myFly = new Element('div', {
    'id': 'fly2',
    'styles': {
        'width'  : imageWidth  + 'px',                                     
        'height' : imageHeight + 'px',  //not a proper style, FIX
        'top'    : '245px', //'54px',
        'left'   : setleft + 'px', //'710px',
        'z-Index'    : '999',  //on top
        'position'   : 'absolute',
        'background-image' : 'url(\'' + imagePath + '\')'
    }
  });
  myFly.inject( (document.id(containerDiv)) , 'top');  
  var myMorph = new Fx.Morph(myFly, {duration: 700, transition: 'sine:in:out', fps: 50, unit: 'px', link: 'cancel'} );
  var myDrag = new Drag.Move(myFly , {
		container: (document.id(containerDiv)),
		onStart: function(el) {
			( $clear(moveFlyHandle) );
			myMorph.cancel(); 
			myFly.setStyle( 'background-image' , 'url(\'' + imagePathStop + '\')' );
		},
    onComplete: function(el) {
      myFly.setStyle( 'background-image' , 'url(\'' + imagePath + '\')' );
    	moveFlyHandle = moveFly.periodical(1000, null, myMorph);
    },
    transition: 'elastic:in:out'
  });
  var moveFlyHandle = moveFly.periodical(2000, null, myMorph);
  //( $clear(moveFlyHandle) ); dont start
});


var moveFly = function (myMorph) {
	  var myFly = (document.id('fly2'));
	  var size = (document.id(containerDiv)).getSize();
    var x = ( myFly.getStyle('left').toInt() ) + ($random(-32, 32));
    var y = ( myFly.getStyle('top' ).toInt() ) + ($random(-32, 32));
    if (x<0) {x=0;};
    if (y<0) {y=0;};
    if (x>(size.x - imageWidth) ) {x=(size.x - imageWidth) ;};
    if (y>(size.y - imageHeight)) {y=(size.y - imageHeight);};
    myMorph.start( {'top': y, 'left': x });
};