function transparenciaSeccion(seccion_id, box_id)
{
    this.seccion = new Array();
    this.titulo = new Array();
    this.link = new Array();
    this.interval = null;
    this.trans_in = 0;
    this.click = 0;
    var _this = this;

    this.anyadirEvento = function(elemento,evento,funcion){
	if(elemento.addEventListener)return elemento.addEventListener(evento,funcion,false);
        if(elemento.attachEvent)return elemento.attachEvent("on"+evento,funcion);
    }
    this.eliminarEvento = function(evento){
        if(window.event){
            window.event.cancelBubble=true;
            window.event.returnValue=false;
            return
        }
        if(evento.preventDefault&&evento.stopPropagation){
            evento.preventDefault();
            evento.stopPropagation();
        }
    }
    this.fadeOut = function(indice){
        for(var i = 0; i < _this.seccion.length; i++){
            if(i != indice){
                _this.seccion[i].style.display = 'none';
                _this.titulo[i].style.display = 'none';
                _this.link[i].style.color = '#595858';
            }
        }
    }
    this.fadeIn = function(indice){
        clearInterval(_this.interval);
        _this.seccion[indice].style.display = 'block';
        _this.titulo[indice].style.display = 'block';
        _this.interval = setInterval(function(){
            _this.setTransparencia(indice, 10);
        },30)
    }
    this.setTransparencia = function(indice, valor){
        if(_this.trans_in == 100){
            clearInterval(_this.interval);
            _this.trans_in = 0;
            return;
        }
        _this.trans_in += valor;
        _this.setOpacidad(_this.seccion[indice], _this.trans_in);
	_this.setOpacidad(_this.titulo[indice], _this.trans_in);
    }
    this.setOpacidad = function(obj,valor){
        obj.style.zoom= 1;
        obj.style.opacity= valor/100;
        obj.style.MozOpacity= valor/100;
        obj.style.KhtmlOpacity= valor/100;
        obj.style.filter='alpha(opacity='+valor+')';
    }
    this.init = function(){_this.anyadirEvento(window,"load",_this.load)}
    this.load = function(){
        _this.eliminarEvento(this);
        _this.titulo = document.getElementById(seccion_id).getElementsByTagName('h2');
        _this.link = document.getElementById(seccion_id).getElementsByTagName('ul')[0].getElementsByTagName('a');
        var aux_seccion = document.getElementById(box_id).childNodes;
        for(var i = 0; i < aux_seccion.length; i++){
            if(aux_seccion[i].nodeType == 1){
                _this.seccion.push(aux_seccion[i]);
            }
        }
        // Añadimos la opacidad  a los objetos
        for(i = 0; i < _this.seccion.length; i++){
            if(i != 0){
                _this.setOpacidad(_this.seccion[i], 0);
                _this.setOpacidad(_this.titulo[i], 0);
            }
            else{
                _this.seccion[0].style.display = 'block';
            }
        }
        for(i = 0; i < _this.link.length; i++){
            _this.link[i].indice = i;
            _this.anyadirEvento(_this.link[i], "click", _this.eliminarEvento);
            _this.link[i].onclick = function(){
                _this.eliminarEvento(this);
                this.style.color = 'red';
                _this.click = this.indice;
                _this.fadeOut(this.indice);
                _this.fadeIn(this.indice);
            }
            _this.link[i].onmouseover = function(){
                this.style.color = 'red';
            }
            _this.link[i].onmouseout = function(){
                if(_this.click == this.indice){
                    return;
                }
                this.style.color = '#595858';
            }
        }
    }
}
var trans_seccion = new transparenciaSeccion('cont_trabajos', 'box_alphaTrabajos');
trans_seccion.init();
trans_seccion = null;
trans_seccion = new transparenciaSeccion('cont_obras', 'box_alphaObras');
trans_seccion.init();
trans_seccion = null;