/*
Index page loader/animator

1. load loading anim; display
2. load image assets
3. bring the elements onto the stage:
		a. frame
		b. image
		c. logo
		d. menu

Frames: photoframe, menuframe, logoframe, footer

the object is initialized with an object containing the two photo images:

*/
var indexAnim = new Class({
	Implements:[Options,Events,Chain],
	options: {
		photo: {
			'photoframe':'photobg1.gif',
			'menuframe':'menubg1.gif'
		},
		UIimages: {
			'bgframe':'index-ground.png',
			'logo-a':'index_logo_1.png',
			'logo-b':'index_logo_2.png',
			'logo-c':'index_logo_3.png'
		},
		imagePath: 'images/artifact/',
		frames: ['photoframe','menuframe','bgframe','logo-a','logo-b','logo-c','footer']
	}, 
//
	initialize: function(options) {
		this.setOptions(options);
		//this.enableLog();
		this.mainframe = $('bgframe');
		var allImages=['images/artifact/'+this.options.photo.photoframe,'images/artifact/'+this.options.photo.menuframe,'images/artifact/index-ground.png','images/artifact/index_logo_1.png','images/artifact/index_logo_2.png','images/artifact/index_logo_3.png'];
		// construct and fire the chain
		this.chain(
					  function() {this.setSpinner(this.mainframe);this.callChain();},
					  function() {this.addImages(allImages,this.options.frames);this.callChain();},
					  function() {this.setEffects();/*this.callChain.delay(500,this);*/},//  the rest of this gets called by the load event
					  function() {this.mainframe.unspin(true);this.callChain.delay(500,this);},
					  function() {this.showFrames();}
					  );
		
		this.callChain();
	},
	setSpinner: function(target) {
		target.set('spinner');
		target.spin();
	},
	//
	loadImages: function(imagearray) {
		var Images = new Asset.images(imagearray, {
			'class':'bgimage',
			onComplete: function() {
				this.setEffects();
				this.mainframe.destroy();
				this.showFrames();
			}.bind(this)
		});
	},
	show: function(el) {
		el.setStyle('visibility','visible');
	},
	showFrames: function() {
		// fire the effects
		(function() {this.bgframe.morph(this.bgframe.retrieve('fxparams'));}).delay(0,this);
		//
		(function() {this.logoA.morph(this.logoA.retrieve('fxparams'));}).delay(200,this);
		(function() {this.logoB.morph(this.logoB.retrieve('fxparams'));}).delay(300,this);
		(function() {this.logoC.morph(this.logoC.retrieve('fxparams'));}).delay(0,this);
		//
		(function() {this.photoframe.morph(this.photoframe.retrieve('fxparams'));}).delay(300,this);
		//
		(function() {this.menuframe.morph(this.menuframe.retrieve('fxparams'));}).delay(1300,this);
	},
	addImages: function(Images,Frames) {
		Images.each( function(I) {
									 var img = new Asset.image(I,{ 'class':'bgimage'}).inject($(Frames.shift()),'top');
									 });
									 
	},
	setEffects: function() {
		// set up the effect parameters for each frame
		var timing = 2000;
		this.bgframe = $('bgframe');
		this.bgframe.set('morph',{duration: timing*0.5, transition: 'expo:out'});
		var coords = this.bgframe.getCoordinates();
		//this.log( "bgframe left: "+ coords.left );
		this.bgframe.store('fxparams',{ opacity:1});
		this.bgframe.setStyles({ opacity:0});
		this.show(this.bgframe);
		//
		this.logoA = $('logo-a');
		coords = this.logoA.getCoordinates($('frame'));
		this.logoA.set('morph',{duration: timing, transition: 'back:out'});
		this.logoA.store('fxparams',{ left: coords.left-10});
		this.logoA.setStyles({ left: coords.left-(coords.width*2)});
		this.show(this.logoA);
		//
		this.logoB = $('logo-b');
		this.logoB.set('morph',{duration: timing, transition: 'back:out'});
		coords = this.logoB.getCoordinates($('logoframe'));
		this.logoB.store('fxparams',{ left: coords.left-10});
		this.logoB.setStyles({ left: coords.left+(coords.width*2)});
		this.show(this.logoB);
		//
		this.logoC = $('logo-c');
		this.logoC.set('morph',{duration: timing, transition: 'back:out'});
		coords = this.logoC.getCoordinates($('logoframe'));
		this.logoC.store('fxparams',{ left: coords.left-10});
		this.logoC.setStyles({ left: coords.left-(coords.width*2)});
		this.show(this.logoC);
		//
		this.photoframe = $('photoframe');
		this.photoframe.set('morph',{duration: timing, transition: 'expo:in'});
		coords = this.photoframe.getCoordinates($('frame'));
		this.photoframe.store('fxparams',{opacity:1});
		this.photoframe.setStyles({opacity:0});
		this.show(this.photoframe);
		//
		this.menuframe = $('menuframe');
		this.menuframe.set('morph',{duration: timing*0.7, transition: 'bounce:in'});
		coords = this.menuframe.getCoordinates(this.photoframe);
		this.menuframe.store('fxparams',{ bottom: 0, opacity:1});
		this.menuframe.setStyles({ bottom: 1200,opacity:0});
		this.show(this.menuframe);
		//
		this.show($('footer'));
	}
		
});