var f = null;

window.addEvent('domready', function() {
	init();
});

window.addEvent('unload', function() {
	f = null;
});

function init()
{
	f = new Engine();
	f.construct();
}

var Engine = new Class({
	
	construct: function( )
	{
		this.toload = 0;
		this.el = $('intro');
		
		// create image map
		var size = this.el.getSize();
		var blank = new Element('img', {'id': 'js-blank', 'src': 'assets/images/blank.gif', 'usemap': '#pie', 'width': size.x, 'height': size.y } ).inject( this.el, 'top' )
		var map = new Element('map', {'name': 'pie'} ).inject( this.el, 'top' );
		var areas = this.el.getElements('.area');
		for (var i=0; i<areas.length; i++)
		{
			areas[i].importOptions();
			var coords = areas[i].options.coords;
			var maparea = new Element('area', {'shape': 'polygon', 'coords': coords, 'href': areas[i].get('href') } ).inject( map );
			maparea.addEvent('mouseenter', function(el) {
				var points = el.options.coords.split(',');
				//console.log(points);
				el.getParent('li').addClass('over');
				//el.getParent('li').setStyles( {'margin-left': -20, 'margin-top': -20} );
			}.pass(areas[i]) );
			maparea.addEvent('mouseleave', function(el) {
				el.getParent('li').removeClass('over');
			}.pass(areas[i]) );
			
			var li = areas[i].getParent();
			this.toload++;
			var tmp = new Element('img').addEvent('load', function() {
				this.toload--;
				
				if (this.toload == 0)
				{
					this.play();
				}
			}.bind(this) );
			tmp.set('src', li.getStyle('background-image').replace('"', '').replace('"', '').replace("'", '').replace('url(', '').replace(')', '') );
		}
	},
	
	play: function()
	{
		var mains = $('intro-main').getElements('li');
		for (var i=0; i<mains.length; i++ )
		{
			var mx = parseInt( mains[i].getStyle('margin-left') );
			var my = parseInt( mains[i].getStyle('margin-top') );
			mains[i].fx = new Fx.Morph( mains[i] ).set( {/*'margin-left': -20, 'margin-top': -20,*/ 'opacity': 0} );
			(function(mx, my) { this.fx.start( {/*'margin-left': mx, 'margin-top': my,*/ 'opacity': 1} ); } ).delay( i * 100, mains[i], [mx, my] );
			
			mains[i].img = mains[i].getElement('img').inject( $$('body')[0], 'top');
			mains[i].img.fx = new Fx.Morph( mains[i].img, {'link': 'cancel'} );
			
			// rollover
			mains[i].addEvent('mouseenter', this.popup.pass(i, this) );
			//mains[i].addEvent('mouseenter', this.open.pass(i, this));
		}
		this._mains = mains;
		
		// create popup
		this._popup = new Element('div', {'class': 'popup'}).inject( $$('body')[0], 'top' );
		this._popup.hotspot = new Element('div', {'class': 'popup-hotspot'}).inject( $$('body')[0], 'top' );
		this._popup.txt = new Element('div', {'class': 'popup-content'} ).inject( this._popup );
		//this._popup.next = new Element('div', {'class': 'popup-next', 'html': 'next'} ).addEvent('click', this.popupStep.pass(1, this) ).inject( this._popup, 'top' );
		//this._popup.prev = new Element('div', {'class': 'popup-prev', 'html': 'prev'} ).addEvent('click', this.popupStep.pass(-1, this) ).inject( this._popup, 'top' );
		this._popup.fx = new Fx.Morph( this._popup, {'link': 'cancel'} ).set( {'opacity': 0} );
		
		this._popup.hotspot.addEvent('mouseleave', this.popupLeave.bind(this) );
		
		
		var subs = $('intro-subs').getElements('li');
		for (var i=0; i<subs.length; i++ )
		{
			subs[i].fx = new Fx.Morph( subs[i] ).set( {'opacity': 0} );
			(function() { this.fx.start( {'opacity': 1} ); } ).delay( 1000 + i * 200, subs[i] );
		}
		this.el.removeClass('js-intro');
	},
	
	open: function( i )
	{
		var el = this._mains[i];
		el.fx.start( { 'margin-left': -100, 'margin-top': -100, 'width': 300, 'height': 300 } );
	},
	
	popup: function( i )
	{
		var el = this._mains[i];
		//var pos = el.getPosition();
		var coord = this.el.getCoordinates();
		var pos = { 'x': coord.left + (coord.width / 2), 'y': coord.top + (coord.height / 2) }
		
		switch (i)
		{
			case 0: var dx = -1; var dy = -1; break;
			case 1: var dx = 0; var dy = -1; break;
			case 2: var dx = -1; var dy = 0; break;
			case 3: var dx = 0; var dy = 0; break;
		}
		
		this._popup.set('id', 'popup_' + i);
		//this._popup.fx.start( { 'left': pos.x+(dx*100), 'top': pos.y+(dy*100), 'opacity': 1 } );
		(function(pos, dx, dy) { this._popup.fx.set( { 'left': pos.x+(dx*300), 'top': pos.y+(dy*300) } ).start( { 'opacity': 1 } ); } ).delay( 500, this, [pos, dx, dy] );
		(function(el) { this._popup.txt.set('html', '<h3>' + el.getElement('span').get('html').replace("-<br>", "").replace("-<br />", "") + '</h3>' + this.list(el.getElement('em').get('html')) ); } ).delay( 500, this, el );
		
		this._popup.hotspot.setStyles( {'display': 'block', 'left': pos.x+(dx*300), 'top': pos.y+(dy*300)} );
		el.img.fx.set( {'left': pos.x, 'top': pos.y, 'width': 0, 'height': 0} ).start( {'left': pos.x+(dx*300), 'top': pos.y+(dy*300), 'opacity': 1, 'width': 300, 'height': 300} );
		
		this._index = i;
	},
	
	list: function( html )
	{
		var items = html.split(';');
		var html = '<ul>';
		for (var i=0; i<items.length; i++)
		{
			html += '<li>' + items[i] + '</li>';
		}
		html += '</ul>';
		return html;
	},
	
	popupLeave: function()
	{
		this._popup.fx.start( { 'opacity': 0 } );
		this._popup.hotspot.setStyles( {'display': 'none' } );
		for (var i=0; i<this._mains.length; i++)
		{
			var el = this._mains[ i ];
			el.img.fx.start( {'opacity': 0} );
		}
	},
	
	popupClose: function()
	{
		this._popup.fx.start( { 'opacity': 0 } );
		var el = this._mains[ this._index ];
		el.img.fx.start( {'opacity': 0} );
	},
	
	popupStep: function( step )
	{
		var next = this._index + step;
		if (next < 0)
			next = this._mains.length-1;
		if (next >= this._mains.length)
			next = 0;
		
		this.popup( next );
	}

});


/**** NATIVE IMPLEMENTATIONs ***/
Element.implement( {
	importOptions: function()
	{
		this.saveOptions( this, this );
	},
	
	copyOptions: function( obj )
	{
		this.saveOptions( obj, this );
	},
	
	saveOptions: function( source, target )
	{
		var trigger = "logics@";
		if (!target.options)
			target.options = {}
		if (source.className.indexOf(trigger) !== -1)
		{
			// import rel settings
			var logics = source.className.substring( source.className.indexOf(trigger) + trigger.length );
			var parts = logics.split('|');
			for (var j=0; j<parts.length; j++)
			{
				kv = parts[j].split(':');
				if (kv.length == 2)
				{
					eval("target.options."+kv[0]+" = '"+kv[1]+"'");
				}
			}
		}
	}
} );