var set_hp_tabs;

window.addEvent('domready', function() {
	set_hp_tabs();
});	
var swap_fade = function(elem1,elem2,parent){
	var elem_1 = $ES(elem1,parent)[0];
	var elem_2 = $ES(elem2,parent)[0];			
	
	elem_1.setStyle('opacity',1);
	
	new Fx.Style(elem_1,'opacity',{duration:250}).start(0).addEvent('onComplete',function(){
		elem_1.setStyle('display','none');							
		elem_2.setStyle('display','block');
		new Fx.Style(elem_2,'opacity',{duration:250}).start(1);
	});
}

set_hp_tabs = function(){
	$$('p.detail').setStyle('opacity',0);        
    var szNormal = 98, szSmall  = 32, szFull  = 226;
    var tabs = $$("#tabs .tab");
    
    var fx = new Fx.Elements(tabs, {wait: false, duration:300, transition: Fx.Transitions.Cubic});
	
    tabs.each(function(tab, i) {
        
    	tab.addEvent("mouseenter", function(event) {
    		swap_fade("p.intro","p.detail",tab);
    		var o = {};
    		o[i] = {height: [tab.getStyle("height").toInt(), szFull]}
    		tabs.each(function(other, j) {
    			if(i != j) {
    				var h = other.getStyle("height").toInt();
    				if(h != szSmall) o[j] = {height: [h, szSmall]};
    			}
    		});
    		fx.start(o);
    	});
    	
    	tab.addEvent("mouseleave", function(event) {
    		swap_fade("p.detail","p.intro",tab);
	    	var o = {};
	    	tabs.each(function(tab, i) {
	    		o[i] = {height: [tab.getStyle("height").toInt(), szNormal]}
	    	});
	    	fx.start(o);
	    })
    });

};