/*Cross-fade Effect*/

function gm_click_button() {
	var extjs = Ext.get(this);
	var extjs_parent = extjs.up('#buttons_container');
	if (extjs_parent.select('*').getCount() < 3) {
		var new_element;
		
		if (extjs_parent.select('#software_button').getCount() == 0)
			new_element = Ext.DomHelper.append(extjs_parent, {
				tag: 'div',
				id: 'software_button'
			}, true); 
		else 
			if (extjs_parent.select('#standar_button').getCount() == 0) 
				new_element = Ext.DomHelper.append(extjs_parent, {
					tag: 'div',
					id: 'standar_button'
				}, true);
			else 
				if (extjs_parent.select('#mobility_button').getCount() == 0) 
					new_element = Ext.DomHelper.append(extjs_parent, {
						tag: 'div',
						id: 'mobility_button'
					}, true);
		
		new_element.setOpacity(0);
		
		if (extjs.is('.right')) 
			new_element.addClass('right');
			
		if (extjs.is('.Ca')) 
			new_element.addClass('Ca');
			
		if (extjs.is('.Es')) 
			new_element.addClass('Es');
		
		if (extjs.is('.En')) 
			new_element.addClass('En');
			
		//extjs_parent.appendChild(new_element);
		new_element.on('click', gm_click_button);
		new Effect.Fade(extjs.dom, {
			duration: 1.0,
			afterFinish: function(effect){
				Ext.get(effect.element).remove();
			}
		});
		
		new Effect.Fade(new_element.dom, {
			duration: 1.0,
			from: 0.0,
			to: 1.0
		});
		
		var addon_parent = Ext.get('addon_container');
		var addon_element = addon_parent.down('div.current');
		var new_addon_element;
		
		if (extjs.is('#software_button')) {
			new_addon_element = Ext.get('software_container');
			
			/*new_addon_element = Ext.DomHelper.insertBefore(addon_element, {
				tag: 'div',
				id: 'software_container'
			});*/
		}
		else 
			if (extjs.is('#standar_button')) {
				new_addon_element = Ext.get('standar_container');
				
				/*new_addon_element = Ext.DomHelper.insertBefore(addon_element, {
					tag: 'div',
					id: 'standar_container'
				});*/
			}
			else 
				if (extjs.is('#mobility_button')) {
					new_addon_element = Ext.get('mobility_container');
					
					/*new_addon_element = Ext.DomHelper.insertBefore(addon_element, {
						tag: 'div',
						id: 'mobility_container'
					});*/
				}
		
		//addon_parent.appendChild(new_addon_element);
		gm_comodi = addon_element;
		
		new Effect.Fade(addon_element.dom, {
			duration: 2.0,
			from: 1.0,
			to: 0.0
		});
		
		new Effect.Fade(new_addon_element.dom, {
			duration: 2.0,
			from: 0.0,
			to: 1.0,
			beforeStart: function() {
				new_addon_element.setStyle('display', 'block');
			},
			afterFinish: function () {
				addon_element.removeClass('current');
				new_addon_element.addClass('current');
			}
		});
	}
}

function gm_up() {
	var addon_element = Ext.get('addon_container');
	
	new Effect.Parallel(
         [
         new Effect.Fade(addon_element.dom, { sync: true }),
         new Effect.Fold(element, { sync: true })
         ],
         {duration: 2}
    );
}

function gm_appear(div) {
	
	new Effect.Parallel(
         [
         new Effect.SlideDown(div, { sync: true }),
         new Effect.Appear(div, { from:0.0, to: 1.0, sync: true })
         ],
         {duration: 4}
   );
}