var array_imagenes = $(".image_rotator");
var numero_imagenes = array_imagenes.length;
var imagen_actual = 0;
var width_descripcion = 0;

/* Esta funciƥn se encarga de hacer rotar las imƓgenes de fondo*/
function update_image() {
	$(array_imagenes[imagen_actual]).fadeOut("slow");
	imagen_actual ++;
	if(imagen_actual >= numero_imagenes) imagen_actual = 0;
	$(array_imagenes[imagen_actual]).fadeIn("slow");
}

function show_descripcion() { 
    $("#descripcion p").show(500); $("#descripcion").animate({ width: width_descripcion + "px" }, 500); $("#descripcion h2").show(500); }
function hide_descripcion() { 
    $("#descripcion h2").hide(500); $("#descripcion p").hide(500); $("#descripcion").animate({ width: "10px" }, 500); }
function clean_image_class() {
    $("#bar_description").removeClass("triangle_left");
    $("#bar_description").removeClass("triangle_right");
}
function desplegar_descripcion() {
    $("#bar_description").addClass("triangle_right"); 
    hide_descripcion();
}
function plegar_descripcion() {
    $("#bar_description").addClass("triangle_left");
    show_descripcion(); 
}


$(document).ready(function () {

    // Inicializo las variables gobales
    array_imagenes = $(".image_rotator");
    numero_imagenes = array_imagenes.length;
    imagen_actual = 0;

    // Llamo a la funcion a intervalos
    setInterval(update_image, 5000);

    // Desde aqui se llama para plegar / desplegar el menu secundario
    var desplegado = true;

    // Programo el evento click
    $("#bar_description").click(function () {

        clean_image_class();

        if (desplegado) {  width_descripcion = $("#descripcion").width(); desplegar_descripcion(); }
        else { plegar_descripcion(); }

        desplegado = !desplegado;
    });
});