window.addEvent('domready', features );

var normal = {
	'width': 330,
	'height': 38,
	'background-color':'#21329e',
	//'border':'0px',
	'border-width':'0px',
	'border-style':'dotted',
	'border-color':'#fe1008'
};

var over = {
	'width': 330,
	'height': 38,
	'background-color':'#c1bddb',
	'border-width':'0px',
	'border-style':'dotted',
	'border-color':'#fe1008'
};

var clicked = {
	'width': 400,
	'height': 130,
	//'background-color':'#fe1008'
	'background-color':'#fff',
	'border-width':'1px',
	'border-style':'dotted',
	'border-color':'#fe1008'
};

var h2_normal = {
	'margin-top': 0,
	'color':'#fff'
}

var h2_active = {
	'margin-top': 35,
	'color':'#fe1008'
}

var f;
var b;

function features()	{
		
		var c = $('features');
		f = $$('.feature');
		
		b = $$('.back');
		
		var d = f[0].store('state', 'on');


		f.each( function(el,i) {
			el.store( "index", i );
			el.set( 'morph', {
					duration: 400,
					transition: Fx.Transitions.Sine.easeOut
			});
			el.getElement('a').set( 'morph', {
					duration: 400,
					transition: Fx.Transitions.Sine.easeOut
			});
		});
		
		c.addEvent('click', MouseClick );
		
		c.addEvent('mouseover', function(e){
				var t = $(e.target);
				
				if ( t.get('tag') == 'a' || t.get('tag') == 'canvas' || t.get('tag') == 'cufon' || t.get('tag') == 'span' ) {
					var p = t.getParent('h2');
					if ( p ) { // naglowek
						var d = t.getParent('div');
						var s = d.retrieve('state');
						if ( s != 'on' ) {
							d.morph( over );
						}
					}
				}
		});

		c.addEvent('mouseout', function(e) {
				var t = $(e.target);
				if ( t.get('tag') == 'a' || t.get('tag') == 'span' ) {
					var p = t.getParent('h2');
					if ( p ) { // naglowek
						var d = t.getParent('div');
						var s = d.retrieve('state');
						if ( s != 'on' )
							d.morph( normal );
					}
				}
		});
		
}

function MouseClick(e) {

	var t = $(e.target);
//	if ( t.get('tag') == 'a' || t.get('tag') == 'canvas' || t.get('tag') == 'cufon' || t.get('tag') == 'span' ) {
		var p = t.getParent('h2');
		if ( p ) {
			if ( e.target )
				e.stop();
			var d = t.getParent('div');
			var s = d.retrieve('state');
			if ( s != 'on' ) {
				f.each( function(el,i) {
					hide(el, i, b[i]);
				});
				var indx = d.retrieve('index');
				show( d, indx, b[indx] );
			}
		}
//	}
}

function show( el, index, b ) {
	var p = el.getElement('p');
	var a = el.getElement('a');

	el.setStyle('color','#fe1008');

	el.store('state', 'on');
	b.fade('in');
	p.fade('in');
	el.morph( clicked );
	a.morph( h2_active );
	
	if ( Browser.Engine.trident ) {
		(function() { Cufon.refresh('h2') }).delay(400);
	} else {
		(function() { Cufon.refresh('h2') }).delay(100);
		(function() { Cufon.refresh('h2') }).delay(200);
		(function() { Cufon.refresh('h2') }).delay(300);
		(function() { Cufon.refresh('h2') }).delay(400);
	}
}

function hide( el, i, b ) {
	var p = el.getElement('p');
	var a = el.getElement('a');
	
	if ( el.retrieve('state') == 'on' ) {
		b.fade('out');
		p.fade('hide');
		if ( el != undefined  )
			el.setStyle('color','#ffffff');
		el.morph( normal );
	} else {
		p.setStyle('display','block');
		p.fade('hide');
		el.setStyles( normal );
		b.setStyle('display','block');
		b.fade('hide');
	}
	el.store('state', 'off');
	a.morph( h2_normal );
	if ( Browser.Engine.trident ) {
		(function() { Cufon.refresh('h2') }).delay(400);
	} else {
		(function() { Cufon.refresh('h2') }).delay(100);
		(function() { Cufon.refresh('h2') }).delay(200);
		(function() { Cufon.refresh('h2') }).delay(300);
		(function() { Cufon.refresh('h2') }).delay(400);
	}
}