/* # vim: ai ts=4 sts=4 et sw=4 
 */
$(document).ready(function() {
    /* La barra de las fotos de arriba,
     *  basicamente en el HTML sale una unica barra, el JS añade las otras 3
     *  entonces se dedica a hacer un fade entre estas, la gracia esta en que
     *  un navegador sin JS mostrara solo la barra del HTML.
     * Eso si, el navegador ha de tener CSS para que no haya problemas con las barras
     */ 
    $("div#photobar").css({'background': '#9c1f2e'});
    $("div#photocontainer").html(
		'<img src="/media/img/topbar/bar1.png" />' +
		'<img src="/media/img/topbar/bar2.png" />' +
		'<img src="/media/img/topbar/bar3.png" />' 
        );
    $("div#photocontainer").innerfade({
        timeout: 9000,
        type: 'random',
        speed: 1100,
        containerheight: '75px'
        });
    $("div#photocontainer").css({'visibility': 'visible'});
    $("div#photocontainer").fadeIn("slow");

    /* El menu superior (justo debajo de la barra de imagen) */
    /*
    $("#sitemenu li").find("ul").css({'top': '15px', 'left': '0px'});
    $("#sitemenu li").find("ul").css({'opacity': 0});
    */
    $("#sitemenu li ul").hide();

    $("#sitemenu li").hover(
            function() { 
                $("ul", this).stop();
                $("ul", this).css("display", "none").css("opacity", "1");
                $("ul", this).fadeIn("normal");},
            function() { 
                $("ul", this).stop();
                $("ul", this).css("display", "block").css("opacity", "1");
                $("ul", this).fadeOut("fast");}
        );

    if (document.all) {
            $("#sitemenu li").hoverClass("sfHover");
        }
    });

$.fn.hoverClass = function(c) {
    return this.each(function(){
            $(this).hover( 
                function() { $(this).addClass(c);  },
                function() { $(this).removeClass(c); }
            );
        });
    };