/// <reference path="jquery-1.3.2.min.js"/>
if (gl == null) { var gl = {}; }

$(document).ready(function() {
    gl.$divContingut = $("#divContingut");
    gl.$divTrajectoria = $("#divTrajectoria", gl.$divContingut);
    gl.$etapaSeleccionada = $("#divSelectedPeriod", gl.$divTrajectoria);
    gl.$divObrasYear = $("#divObrasYear", gl.$divContingut);
    gl.$divContingutTrajectoria = $("#divContingutTrajectoria", gl.$divContingut);
    gl.$divCarregant = $("#divLoading", gl.$divContingut);
    gl.timerLoadingTrajectoria = -1;
    // Centramos el tema
    var $etapes = $("div[class^=etapa]", gl.$divTrajectoria);
    var widthTrajectoria = gl.$divTrajectoria.width();
    var width = 0;

    $.each($etapes, function(i, val) {
        width += $(val).width();
    });

    var paddingLeft = ((widthTrajectoria - width) / 2) + 35;
    gl.$divTrajectoria.css("padding-left", paddingLeft + "px");

    //alert(widthTrajectoria + " " + width + " " + paddingLeft);

    // Bindamos eventos
    $(".etapa", gl.$divTrajectoria).mouseover(etapa_mouseover);
    $(".etapa", gl.$divTrajectoria).mouseout(etapa_mouseout);

    $("li", gl.$divTrajectoria).mouseover(li_mouseover);
    $("li", gl.$divTrajectoria).mouseout(li_mouseout);

    $("li", gl.$divTrajectoria).click(li_click);

    // Bindamos el evento click a cada obra
    bindarObrasAnyo();

});

function li_click() {
    var $li = $(this);
    
    // Si es un li con obras
    if ($(".obres img", $li).attr("src") != "imatges/sense.gif") {
        // Ocultamos el antiguo añoseleccionado y lo desmarcamos
        var $liAntiguoAnySeleccionado = $("ul #liAnyoSeleccionado", gl.$etapaSeleccionada);
        $liAntiguoAnySeleccionado.removeClass("hoveer");
        $liAntiguoAnySeleccionado.removeAttr("id");
        
        // Obtenemos la nueva etapa seleccionada
        var $nuevaEtapaSeleccionada = $li.parent().parent();
        
        // Marcamos y mostramos el año nuevo seleccionado
        $li.attr("id", "liAnyoSeleccionado");
        $li.attr("class", "hoveer");
        
        // Deseleccionamos la etapa seleccionada antigua en caso que el click sea en otra etapa
        if ($nuevaEtapaSeleccionada.attr("class") != "etapa seleccionada") gl.$etapaSeleccionada.attr("class", "etapa");

        // Quitamos el id de etapa seleccionada de la etapa seleccionada antigua
        $("#divSelectedPeriod", gl.$divTrajectoria).removeAttr("id");
        
        // Marcamos la nueva etapa con el id de etapa seleccionada
        $nuevaEtapaSeleccionada.attr("id", "divSelectedPeriod");
        
        // Refrescamos la etapa seleccionada
        gl.$etapaSeleccionada = $nuevaEtapaSeleccionada;
        
        // Rebindamos eventos
        $(".etapa", gl.$divTrajectoria).unbind("mouseover");
        $(".etapa", gl.$divTrajectoria).bind("mouseover", etapa_mouseover);
        
        $(".etapa", gl.$divTrajectoria).unbind("mouseout");
        $(".etapa", gl.$divTrajectoria).bind("mouseout", etapa_mouseout);
        
        var anyo = $(".any", $li).text();
        
        cargarDatos(anyo);
    }
}
function li_mouseover(event) {
    // Deseleccionamos el año
    $("ul .hoveer", gl.$divTrajectoria).removeClass("hoveer");

    // Seleccionamos el año
    var $liAnyo = $(this);
    
    if ($liAnyo.attr("id") != "liAnyoSeleccionado") {
        $("ul #liAnyoSeleccionado", gl.$etapaSeleccionada).removeClass("hoveer");
    }
    
    $(this).addClass("hoveer");
    
    //event.stopPropagation();
}
function li_mouseout(event) {
    /*var $liAnyo = $(this);
    
    if ($liAnyo.attr("id") != "liAnyoSeleccionado") {
        $liAnyo.removeClass("hoveer");
    }*/
    
    //$("ul #liAnyoSeleccionado", gl.$etapaSeleccionada).addClass("hoveer");
    //event.stopPropagation();
}
function etapa_mouseover() {
    var $etapa = $(this);
    var clase = $etapa.attr("class");
    var id = $etapa.attr("id");

    if (id != "divSelectedPeriod") {
        // Ocultamos el año seleccionado
        $("ul #liAnyoSeleccionado", gl.$etapaSeleccionada).removeClass("hoveer");
    
        // Deseleccionamos la etapa seleccionada
        gl.$etapaSeleccionada.attr("class", "etapa");
        
        // Cambiamos imagenes etapa seleccionada
        var $imagesEtapaSeleccionada = $("ul li .obres img", gl.$etapaSeleccionada);
            
        $.each($imagesEtapaSeleccionada, function(i, val) {
            var imgSrc = $(val).attr("src");

            if (imgSrc.lastIndexOf("b_e_") != -1) $(val).attr("src", imgSrc.replace(/b_e_/, "b_"));
        });

        // Si la etapa no está seleccionada
        if (clase == "etapa") {
            // Seleccionamos la etapa
            $etapa.attr("class", "etapa seleccionada");
            
            // Cambiamos imagenes etapa actual
            var $imagesEtapa = $("ul li .obres img", $etapa);
            
            $.each($imagesEtapa, function(i, val) {
                var imgSrc = $(val).attr("src");

                if (imgSrc.lastIndexOf("b_e_") == -1) $(val).attr("src", imgSrc.replace(/b_/, "b_e_"));
            });
        }
    }
}
function etapa_mouseout(event) {
    var $etapa = $(this);
    var clase = $etapa.attr("class");
    var id = $etapa.attr("id");

    if (id != "divSelectedPeriod" && $(event.relatedTarget).parents(".etapa.seleccionada").length == 0) {
        // Mostramos el año seleccionado
        //$("ul #liAnyoSeleccionado", gl.$etapaSeleccionada).addClass("hoveer");
        
        // Seleccionamos la etapa seleccionada
        gl.$etapaSeleccionada.attr("class", "etapa seleccionada");
        
        // Cambiamos imagenes etapa seleccionada
        var $imagesEtapaSeleccionada = $("ul li .obres img", gl.$etapaSeleccionada);
            
        $.each($imagesEtapaSeleccionada, function(i, val) {
            var imgSrc = $(val).attr("src");

            if (imgSrc.lastIndexOf("b_e_") == -1) $(val).attr("src", imgSrc.replace(/b_/, "b_e_"));
        });
        
        // Si la etapa está seleccionada
        if (clase == "etapa seleccionada") {
            // Deseleccionamos la etapa
            $etapa.attr("class", "etapa");
            
            // Cambiamos imagenes etapa actual
            var $imagesEtapa = $("ul li .obres img", $etapa);
            
            $.each($imagesEtapa, function(i, val) {
                var imgSrc = $(val).attr("src");

                if (imgSrc.lastIndexOf("b_e_") != -1) $(val).attr("src", imgSrc.replace(/b_e_/, "b_"));
            });
        }
    }

    // Deseleccionamos el año
    $("ul .hoveer", gl.$divTrajectoria).removeClass("hoveer");
    
    // Seleccionamos el año seleccionado
    $("ul #liAnyoSeleccionado", gl.$etapaSeleccionada).addClass("hoveer");
}
function showLoadingTrajectoria() {
    gl.$divCarregant.show();
}
function hideLoadingTrajectoriaNow() {
    gl.$divCarregant.hide();
    gl.timerLoadingTrajectoria = -1;
}
function hideLoadingTrajectoria() {
    if (gl.timerLoadingTrajectoria != -1) {
        clearTimeout(gl.timerLoadingTrajectoria);
    }
    gl.timerLoadingTrajectoria = setTimeout("hideLoadingTrajectoriaNow()", 500);
}

function cargarDatos(p_anyo) {
    showLoadingTrajectoria();

    var oParametros;
    oParametros = {};
    oParametros.Anyo = p_anyo;

    gl.$divObrasYear.html("");
    $.ajax({
        type: "post",
        url: "ObresAny.asmx/getObrasAnyo",
        cache: false,
        async: false,
        contentType: "application/json; charset=utf-8",
        data: $.toJSON(oParametros),
        dataType: "text",
        success: callback_getObrasAnyo,
        //error: function(msg) {alert(msg);}
        error: function(xhr, ajaxOptions, thrownError) {
            alert(xhr.responseText); //xhr.statusText);
            hideLoadingTrajectoria();
        }
    });
    
    // Obtenemos el id de la primera obra
    var $primeraObra = $("ul li:first-child", gl.$divObrasYear);
    
    mostrarObra($primeraObra);
    
}
function callback_getObrasAnyo(data) {
    if (data != "") {
        // Mostramos las obras
        ////var $data = $(data.replace("<?xml version=\"1.0\" encoding=\"utf-8\">"));
        //var $data = $(data.replace("<?xml version=\"1.0\" encoding=\"utf-8\"?><sortida><![CDATA[", "").replace("]]></sortida>", ""));
        var ini = "<?xml version=\"1.0\" encoding=\"utf-8\"?><sortida><![CDATA[";
        if (data.indexOf(ini) < 0) {
            ini = "<?xml version=\"1.0\" encoding=\"utf-8\"?><sortida xmlns = \"\"><![CDATA[";
        }
        var fi = "]]></sortida>";
        var $data = $(data.substr(ini.length, data.length - (ini.length + fi.length)));

        gl.$divObrasYear.html($data.children().html());
        
        // Bindamos el evento click a cada obra
        bindarObrasAnyo();
    }
    hideLoadingTrajectoria();
}
function mostrarObra($liObra) {
    showLoadingTrajectoria();
    
    var  oParametros = {};
    oParametros.id = $liObra.attr("id");  //parseInt($liObra.attr("id"));
    $.ajax({
        type: "post",
        url: "ObresAny.asmx/getObra",
        cache: false,
        async: false,
        contentType: "application/json; charset=utf-8",
        data: $.toJSON(oParametros),
        //dataType: "json",
        dataType: "text",
        success: callback_getObra,
        //error: function(msg) {alert(msg);}
        error: function(xhr, ajaxOptions, thrownError) {
            alert(xhr.responseText); //xhr.statusText);
            hideLoadingTrajectoria();
        }
    });
    
    // Deseleccionamos la obra
    //var $liSeleccionado = $("ul li[class*=seleccionada]", gl.$divObresAny$);
    var $liSeleccionado = $("ul li[class*=seleccionada]", gl.$divObrasYear);

    var estiloLiSeleccionado = $liSeleccionado.attr("class");
    if (estiloLiSeleccionado != null) {
        var nuevoEstiloLiSeleccionado = estiloLiSeleccionado.replace(" seleccionada", "").replace("seleccionada", "");

        if (nuevoEstiloLiSeleccionado != "") {
            $liSeleccionado.attr("class", nuevoEstiloLiSeleccionado);
        } else {
            $liSeleccionado.removeAttr("class");
        }

        // Seleccionamos la nueva obra
        var estiloLi = $liObra.attr("class");
        var nuevoEstiloLi;

        if (estiloLi == "") {
            nuevoEstiloLi = "seleccionada";
        } else if (estiloLi == "destacada") {
            nuevoEstiloLi = "destacada seleccionada";
        }

        $liObra.attr("class", nuevoEstiloLi);
    }
}
function callback_getObra(data) {
    if (data != "") {
        gl.$divContingutTrajectoria.fadeOut(250, function() {
            ////var $data = $(data.replace("<?xml version=\"1.0\" encoding=\"utf-8\">"));
            //var $data = $(data.replace("<?xml version=\"1.0\" encoding=\"utf-8\"?><sortida><![CDATA[", "").replace("]]></sortida>", ""));
            var ini = "<?xml version=\"1.0\" encoding=\"utf-8\"?><sortida><![CDATA[";
            if (data.indexOf(ini) < 0) {
                ini = "<?xml version=\"1.0\" encoding=\"utf-8\"?><sortida xmlns = \"\"><![CDATA[";
            }
            var fi = "]]></sortida>";
            var $data = $(data.substr(ini.length, data.length - (ini.length + fi.length)));
            gl.$divContingutTrajectoria.html($data.children().html());
            gl.$divContingutTrajectoria.fadeIn(250);
        });
    }
    hideLoadingTrajectoria();
}
function bindarObrasAnyo() {
    // Bindamos el evento click a cada obra
    $("ul li", gl.$divObrasYear).unbind("click");
    $("ul li", gl.$divObrasYear).bind("click", function() {
        // No bindamos el que está seleccionado
        if (!($(this).hasClass("seleccionada"))) {
            mostrarObra($(this));
        }
    });
}








/*TABS = new Array();
TABS[0]="Descripcio";
TABS[1]="Dades";
TABS[2]="Genesis";
TABS[3]="Bio";
TABS[4]="Mediateca";
function canviTab(sNomTab){
    for (var i=0;i<TABS.length;i++){
        var oTab = document.getElementById("li" + TABS[i]);
        var oDiv = document.getElementById("div" + TABS[i]);
        
        if (oTab != undefined && oDiv != undefined){
            if (TABS[i] == sNomTab){
                oTab.className = "seleccionat";
                oDiv.style.display = "block";
            }
            else{
                oTab.className = "";
                oDiv.style.display = "none";
            }
        }
    }
    if (sNomTab == "Descripcio") {
        $("#mesinfo").hide();
    }
    else {
        $("#mesinfo").show();
    }
}

function displayTab(sNomTab, sDisplay){
    var oTab = document.getElementById("li" + sNomTab);
    if (oTab != undefined){
        oTab.style.display = sDisplay;
    }
}

function getObra(sId) {
    //Obtenim el Identificador del hidden a on hem de guardar l'identificador de l'obra
    var oIdH = document.getElementById("HidHIdObra");
    if (oIdH != null){
        //En oIdH tenim el id del hidden a on de guardar l'obra
        var oIdObra = document.getElementById(oIdH.value);
        if (oIdObra != null){
        //Posem el valor de l'identificador de l'obra en el hidden
            oIdObra.value = sId;
            //Fem click en el botó per demanar aquesta obra via AJAX
            var oIdButton = document.getElementById("HidButGetObra");
            if (oIdButton != null){
                var oButton = document.getElementById(oIdButton.value);
                ////oButton.click();
                var sLoc = '' + document.location
                var aLoc = sLoc.split("/");
                var sAspx = aLoc[aLoc.length - 1];
                var aAspx = sAspx.split(".aspx");
                var sNameFile = aAspx[0]

                var ieVersion = getIEVersionNumber();
                if (sNameFile == "cronologia") {
                    if (!(document.all && ieVersion < 7)) {
                        document.location = '#contingut';
                    }
                }
                else {
                    if (!document.all || (document.all && ieVersion == 7)) {
                        document.location = '#flash';
                    }
                }
                __doPostBack(oButton.name, '');
                
                oUp = document.getElementById(oIdH.value.replace('_hIdObra', '_upObra'));
                if (oUp != null) {
                    oChilds = oUp.childNodes;
                    if (oChilds != null && oChilds.length > 2) {
                        var oL = oChilds.length;
                        var bMenu = false;
                        var bContingut = false;
                        for (var i = 0; i < oL; i++) {
                            var oChild = oUp.childNodes[i];
                            if (oChild.className == "fondo-menu") {
                                oChild.style.visibility = "hidden";
                                bMenu = true;
                            }
                            if (oChild.className == "continguts") {
                                oChild.style.visibility = "hidden";
                                bContingut = true;

                            }
                            if (bMenu == true && bContingut == true) {
                                break;
                            }
                        } //for
                    }
                }
            }
            
        }
    }
}*/