jQuery(document).ready(function($) {
    //initLogo1();
    //initHeader1();
    //initHeader2();
    initFotoFondoCompeticion();
/*
    $('#imagenesEmpresa').jqFancyTransitions({
        width: 484,
        height: 364,
        delay: 2000
    });
*/
    /*
    $('#htop').css({
        'background': 'url("images/s2/fotos/ff1.jpg") no-repeat scroll left center transparent'
    });
*/

    //mostrarImagenesRND1();
    //mostrarImagenesRND2();
    //new MostrarImagenesRND2();
    initNVSeries();
    initNVGamasModelo(".nvModelosEquipacion");
    initNVGamasModelo(".prendasXtiempo");
    initNVEscaparateModelos(".nvModelosEquipacion");
    initNVEscaparateModelos(".prendasXtiempo");

    initBotonesTiempo();
    maquetaGoogleMaps();
});
function initLogo1( )
{
    $('.logo').prepend( $('<img id="logosantoyo" src="images/sty/logos/SantoyoMetal_1_A.PNG"/>') );
}

function addBarra(inTipo, inLen, inLeft, inTop )
{
    var valWidth = '5px';
    var valHeight = '5px';

    if( inTipo == 'H') {
        valWidth = inLen+'px';
    } else {
        valHeight = inLen+'px';
    }

    var o = $('<div class="barra"></div>').prependTo('#header');
    $(o).css( {
        'width': valWidth,
        'height': valHeight,
        'position': 'absolute',
        'top': inTop+'px',
        'left': inLeft+'px',
        'opacity': '0',
        'background-color': 'white'

    });
    $(o).animate({
        opacity: 0.70
    }, 1000, function() {});
}
function addBarraHor(inLen, inLeft, inTop )
{
    addBarra('H', inLen, inLeft, inTop );
}
function addBarraVer(inLen, inLeft, inTop )
{
    addBarra('V', inLen, inLeft, inTop );
}

function addItemMenuBox( inW, inH, inX, inY, inText, inRef )
{
    var o = $('<div class="itemMenuBox"></div>').prependTo('#header');
    var a = $('<a href="'+ inRef + '"></span>').prependTo(o);
    $('<span>'+inText+'</span>').prependTo(a);
    $(o).css( {
        'width': inW+'px',
        'height': inH+'px',
        'position': 'absolute',
        'top': inY+'px',
        'left': inX+'px',
        'font': 'arial 800 1.2em',
        'opacity': '0.8',
        'padding': '10px',
        'border-left': '5px solid navy',
        'background-color': 'white',
        'color': 'red'
    });

    $(o).animate({
        left: 0,
        top: 0
    }, 0, function() {}).animate({
        left: inX,
        top: inY
    }, 2000, function() {});

    $(o).click( function() {
        window.location = inRef;
    });

    $(o).hover(
        function() {
            var w = parseInt($(o).css('width'));
            var h = parseInt($(o).css('height'));
            $(o).css( {
                'opacity': '1',
                'width': w+20+'px',
                'height': h+20+'px',
                'font-size': '1.3em'
            } );
        },
        function() {
            var w = parseInt($(o).css('width'));
            var h = parseInt($(o).css('height'));
            $(o).css( {
                'opacity': '0.7',
                'width': w-20+'px',
                'height': h-20+'px',
                'font-size': '1.2em'
            } );
        }

        );

}

function initNVSeries()
{
    $('.nvSerie').each(function(inIndex) {
        var nombreSerie = $(this).attr('nombre');

        var wserie = $('<div class="wserie"></div>');
        var col1 = $('<div class="col1"></div>');
        $(wserie).append(col1);
        var col2 = $('<div class="col2"></div>');
        $(wserie).append(col2);


        var descripcionModelo = $('<div class="descripcionModelo"></div>');
        var marcoPrestaciones = $('<div class="marcoPrestaciones"></div>');

        // --- COL1 ---

        var cabSerie = $('<div class="cabSerie"></div>');
        $(col1).append(cabSerie);
        var titSerie = $('<div class="titSerie"></div>');
        $(cabSerie).append(titSerie);
        $(titSerie).append($(this).attr('nombre'));
        $(cabSerie).append('<hr>');
        var desSerie = $('<div class="desSerie"></div>');
        $(cabSerie).append(desSerie);
        $(desSerie).append($(this).find('> .datos > .descripcion:eq(0)').html());

        var areaModelos = $('<div class="areaModelos"></div>');
        $(col1).append(areaModelos);
        $(this).find('> .datos:eq(0) > .modelo').each(function(inIndex1) {
            var modelo = this;
            var nombreModelo = $(this).attr('nombre');
            $(this).find('> .combinacion:eq(0) > .smallImage').each(function(inIndex2) {
                var bigImage = $(this).parents('.combinacion').find('> .bigImage').html();
                var tallasModelo = $(this).parents('.modelo').find('> .tallas').html();
                var marcoModelo = $('<div class="marcoModelo"></div>');
                $(areaModelos).append(marcoModelo);
                $(marcoModelo).click( function() {
                    var imagenModelo = $('<img src="'+bigImage+'"/>');
                    $(marcoModelo).parents('.wserie').find('.cabModelo .titModelo').empty().append("Modelo: " + nombreModelo);
                    $(marcoModelo).parents('.wserie').find('.cabModelo .tallasModelo').empty().append(tallasModelo);
                    $(marcoModelo).parents('.wserie').find('.espositorModelo').empty().append(imagenModelo);
                    $(marcoModelo).parents('.wserie').find('.marcoPrestaciones').empty();
                    $(marcoModelo).parents('.wserie').find('.marcoCombinaciones').empty();
                    $(marcoModelo).parents('.wserie').find('.descripcionModelo').empty().append($(modelo).find('> .descripcion').html());
                    $(modelo).find('> .prestaciones img').each( function() {
                        $(marcoModelo).parents('.wserie').find('.marcoPrestaciones').append($(this).clone().css('display', 'block'));
                    });
                    $(modelo).find('> .combinacion .smallImage').each( function() {
                        var smallImage = this;
                        var imagenCombinacion = $('<img src="'+$(this).html()+'"/>');
                        $(marcoModelo).parents('.wserie').find('.marcoCombinaciones').append(imagenCombinacion);
                        $(imagenCombinacion).click(function() {
                            var imagenCombinacion = $('<img src="'+$(smallImage).parents('.combinacion').find('> .bigImage').html()+'"/>');
                            $(marcoModelo).parents('.wserie').find('.espositorModelo').empty().append(imagenCombinacion);
                        });
                    });
                });
                var imagenModelo = $('<img src="'+$(this).html()+'"/>');
                $(marcoModelo).append(imagenModelo);
                var titModelo = $('<div class="titModelo">'+nombreModelo+'</div>');
                $(marcoModelo).append(titModelo);
            });
        });

        $(col1).append(descripcionModelo);
        $(col1).append(marcoPrestaciones);

        // --- COL2 ---

        var cabModelo = $('<div class="cabModelo"></div>');
        $(col2).append(cabModelo);
        var titModelo = $('<div class="titModelo"></div>');
        $(cabModelo).append(titModelo);
        $(cabModelo).append('<hr>');
        var tallasModelo = $('<div class="tallasModelo"></div>');
        $(cabModelo).append(tallasModelo);

        var cabCombimaciones = $('<div class="cabCombimaciones"></div>');
        $(col2).append(cabCombimaciones);
        var titCombinaciones = $('<div class="titCombinaciones">Combinaciones</div>');
        $(cabCombimaciones).append(titCombinaciones);
        $(cabCombimaciones).append('<hr>');
        var marcoCombinaciones = $('<div class="marcoCombinaciones"></div>');
        $(cabCombimaciones).append(marcoCombinaciones);

        var espositorModelo = $('<div class="espositorModelo"></div>');
        $(col2).append(espositorModelo);

        //$(col2).append(descripcionModelo);

        $(this).append(wserie);

        $(this).find('.marcoModelo:eq(0)').click();
    });

}
function initNVGamasModelo(inClassBase)
{
    var base = $(inClassBase);

    $(base).find(' > .nvGamasModelo').each(function(inIndex) {

        var head = $('<div class="head"></div>');
        $(this).append(head);
        var titModelo = $('<div class="titModelo">'+$(this).attr('titulo')+'</div>');
        $(head).append(titModelo);
        var tallas = $('<div class="tallas">'+$(this).find('> .datos > .tallas').html()+'</div>');
        $(head).append(tallas);
        var opciones = $('<div class="opciones">'+$(this).find('> .datos > .opciones').html()+'</div>');
        $(head).append(opciones);

        var content = $('<div class="content"></div>');

        $(this).append(content);


        // ##### COL 1 #####

        var col1 = $('<div class="col1"></div>');
        $(content).append(col1);

        //$(col1).append(head);

        var areaGamas = $('<div class="areaGamas"></div>');
        $(col1).append(areaGamas);

        $(this).find('> .datos > .combinacion').each(function() {
            var combinacion = this;

            var marcoGama = $('<div class="marcoGama"></div>');
            $(areaGamas).append(marcoGama);

            $(marcoGama).click(function() {
                $(this).parents('.content').find('> .col2 .areaImg .imageGama').attr('src', $(combinacion).find('> .bigImage').html() );
            });

            //var imageGama = $('<img class="imageGama" src="'+$(combinacion).html()+'"/>');
            var imageGama = $('<img class="imageGama" src="'+$(combinacion).find('> .smallImage').html()+'"/>');
            $(marcoGama).append(imageGama);
            var titGama = $('<div class="titGama">'+$(combinacion).attr('nombre')+'</div>');
            $(marcoGama).append(titGama);
        });

        var areaPrestaciones = $('<div class="areaPrestaciones"></div>');
        $(col1).append(areaPrestaciones);

        $(this).find('> .datos > .prestaciones img').each(function() {
            $(areaPrestaciones).append($(this).clone());
        });

        // ##### COL 1 #####

        // ##### COL 2 #####
        var col2 = $('<div class="col2"></div>');
        $(content).append(col2);

        var areaDescripcion = $('<div class="areaDescripcion">lolailo</div>');
        //$(col2).append(areaDescripcion);
        $(head).append(areaDescripcion);

        var areaImg = $('<div class="areaImg"></div>');
        $(col2).append(areaImg);
        var imageGama = $('<img class="imageGama" src=""/>');
        $(areaImg).append(imageGama);
    });

}

function initNVEscaparateModelos(inClassBase)
{
    var base = $(inClassBase);

    $(base).find(' > .nvEscaparateModelos').each( function() {

        var head = $('<div class="head"></div>');
        $(this).append(head);
        var minim = $('<div class="minim"></div>');
        $(this).append(minim);
        var titEquipacion = $('<div class="titEquipacion">'+ $(this).attr('nombre') + ' ' + $(this).find('> .datos > .descripcion' ).html() +'</div>');
        $(minim).append(titEquipacion);

        $(minim).click( function() {
            $(minim).css('display', 'none');
            $(content).css('display', 'block');
            $(head).css('display', 'block');
            $('.nvGamasModelo').css('display', 'none');
        });

        titEquipacion = $('<div class="titEquipacion">'+ $(this).attr('nombre') +'</div>');
        $(head).append(titEquipacion);
        $(head).append('<hr>');
        var desEquipacion = $('<div class="desEquipacion">'+ $(this).find('> .datos > .descripcion' ).html() +'</div>');
        $(head).append(desEquipacion);

        var content = $('<div class="content"></div>');
        $(this).append(content);

        $(this).find('> .datos > .modelo').each(function() {
            var modelo = this;
            var marcoModelo = $('<div class="marcoModelo"></div>');
            $(content).append(marcoModelo);
            $(marcoModelo).click(function() {
                $(minim).css('display', 'block');
                $(head).css('display', 'none');
                $(content).css('display', 'none');
                $(base).find('.nvGamasModelo').css('display', 'none');
                var gm = $(base).find('.nvGamasModelo[nombre='+ $(modelo).attr('nombre')+']:eq(0)');
                $(gm).find('.areaGamas > .marcoGama:eq(0)').click();
                $(gm).find('.areaDescripcion:eq(0)').html($(gm).find('.datos > .descripcion').html());
                $(gm).css('display', 'block');
            });

            var imageModelo = $('<img class="imageModelo" src="'+$(this).html()+'"/>');
            $(marcoModelo).append(imageModelo);
            var titModelo = $('<div class="titModelo">'+$(this).attr('nombre')+'</div>');
            $(marcoModelo).append(titModelo);
        });
    });
}


function initBotonesTiempo()
{

    $('.prendasXtiempo').each(function(){
        $(this).css({
            "display": "none"
        });
    });

    $('.botonesTiempo .boton').each(function(){
        
        $(this).find('> img:eq(0)').css({
            "border": "1px solid gray",
            "padding" : "5px",
            "background-color" : "white",
            "margin-bottom" : "3px",
            "width" : "40px",
            "height": "40px",
            "cursor": "pointer"
        });
        $(this).find('> img:eq(1)').css({
            "padding" : "5px",
            "margin-bottom" : "3px",
            "width" : "45px",
            "text-align" : "center",
            "margin:": "0 auto"
        });

        $(this).find('> img:eq(1)').css('display', 'none');

        $(this).attr('activo', '0');
        $(this).find('> img:eq(0)').hover(
            function() {
                var act = $(this).parents('.boton').attr('activo');
                if( act == "1") return;

                var position = $(this).position();
                var left = eval( position.left - 5 );
                var top = eval( position.top - 5);
                var width = eval( $(this).width() + 10 );
                var height = eval( $(this).height() + 10);
                $(this).css({
                    "border": "4px solid gray",
                    "position": "absolute",
                    "left" : left + "px",
                    "top": top + "px",
                    "width" : width + "px",
                    "height": height + "px"
                });
            },
            function() {
                var act = $(this).parents('.boton').attr('activo');
                if( act == "1") return;

                var position = $(this).position();
                var left = eval( position.left + 5 );
                var top = eval( position.top + 5);
                var width = eval( $(this).width() - 10 );
                var height = eval( $(this).height() - 10);
                $(this).css({
                    "border": "1px solid gray",
                    "position": "inherit",
                    "left" : left + "px",
                    "top": top + "px",
                    "width" : width + "px",
                    "height": height + "px"
                });
            });

        $(this).find('> img:eq(0)').click( function() {
            $(this).blur();
            var act = $(this).parents('.boton').attr('activo');

            if( act == "0") {

                var position = $(this).position();
                var left = eval( position.left + 5 );
                var top = eval( position.top + 5);
                var width = eval( $(this).width() - 10 );
                var height = eval( $(this).height() - 10);

                $(this).parents('.botonesTiempo').find('.boton').each(function(){
                    $(this).attr('activo', '0');
                    $(this).find('> img:eq(0)').css({
                        "border": "1px solid gray"
                    });
                    $(this).find('> img:eq(1)').css('display', 'none');
                });

                $(this).css({
                    "border": "1px solid #ae0000",
                    "position": "inherit",
                    "left" : left + "px",
                    "top": top + "px",
                    "width" : width + "px",
                    "height": height + "px"
                });

                $(this).parents('.boton').attr('activo', '1');
                $(this).parents('.boton').find('> img:eq(0)').css('display', 'block');
                $(this).parents('.boton').find('> img:eq(1)').css('display', 'block');
                var target = $(this).attr('tipo');
                $('.prendasXtiempo').each(function(){
                    $(this).css({
                        "display": "none"
                    });
                    $(this).find('.minim').click();
                });
                $('.prendasXtiempo[tipo='+target+']').each(function(){
                    $(this).css({
                        "display": "block"
                    });
                });


            }
        });

    });
}

var mostarImagenesRNDNN1 = 0;
function mostrarImagenesRND1()
{
    $('.logo > ul > li').fadeOut(4000, function(){});
    $('.logo > ul > li:eq('+eval(mostarImagenesRNDNN1%5)+')').fadeIn(4000, function(){});
    mostarImagenesRNDNN1=eval(mostarImagenesRNDNN1+1);
    setTimeout(mostrarImagenesRND1, 9000);
}

MostrarImagenesRND2 = function() {
    //this.ff = this;
    this.ff = this;
    this.ind = 0;
    this.act = -1;
    this.activar = function()
    {
        var ff = this;
        if( this.act >= 0 ) {
            $('.cabeceraPortada > ul > li:eq('+ff.act+')').fadeOut(2000, function(){

                $('.cabeceraPortada > ul > li:eq('+eval(ff.ind%5)+')').fadeIn(4000, function(){});
                ff.act = ff.ind;
                ff.ind=eval(ff.ind+1);
                setTimeout(function() {
                    ff.activar()
                }, 9000);

            });
        } else {
            $('.cabeceraPortada > ul > li:eq('+eval(this.ind%5)+')').fadeIn(4000, function(){});
            this.act = this.ind;
            this.ind=eval(this.ind+1);
            setTimeout(function() {
                ff.activar()
            }, 9000);
        }
    }
    this.activar();
}

function initHeader1()
{

    var cab = $('.cabeceraPortada');
    if( cab ){
        $('#header').prepend( cab );
        cab.css('display', 'block');
    }
}
function initHeader2()
{

    var cab = $('.cabeceraPortada');
    if( cab.length == 0 ) {
        var cont = $('<ul>'
            +'     <li><img id="logosantoyo" src="images/sty/galeria1/top1.png"/></li>'
            +'     <li><img id="logosantoyo" src="images/sty/galeria1/top2.png"/></li>'
            +'     <li><img id="logosantoyo" src="images/sty/galeria1/top3.png"/></li>'
            +'     <li><img id="logosantoyo" src="images/sty/galeria1/top4.png"/></li>'
            +'     <li><img id="logosantoyo" src="images/sty/galeria1/top5.png"/></li>'
            +' </ul>');

        $('.logo').prepend( cont );
    }
}
function maquetaGoogleMaps()
{
    $('#googlemaps').each(function(){
        if (GBrowserIsCompatible()) {
            var map2 = new GMap2(document.getElementById("googlemaps"));
            map2.addControl(new GLargeMapControl());
            map2.addControl(new GMapTypeControl());
            map2.openInfoWindow(map2.getCenter(),
                document.createTextNode("Hello, world"));
            map2.setCenter(new GLatLng(40.3956879, -3.637006), 17);
            var latlng = new GLatLng(40.3956879, -3.637006);
            var gm = new GMarker(latlng );
            gm.openInfoWindowHtml("SantoyoSport S.L. <br> Riaza (Segovia) <br> España");
            map2.addOverlay(gm);
            GEvent.addListener(gm, "click", function() {
                gm.openInfoWindowHtml("SantoyoSport S.L. <br> Riaza (Segovia) <br> España");

            });
        }
    });
}

function initFotoFondoCompeticion()
{
    if( $('.fotoFondoCompeticion').length > 0 ) {
        var st = {
            'position': 'absolute',
            'display': 'block',
            'z-index': '0',
            'left': '0px',
            'top': '155px'
        };
        var wfoto = $('<img src="images/sty/galeria2/jaimebargasctoespagna.png" />')
        wfoto.css(st);
        //$('#header').css('position', 'relative');
        //$('#header').append(wfoto);
        $('#content').css({
            "height": "670px",
            "background": "url('images/sty/galeria2/jaimebargasctoespagna.png') no-repeat"
        });
 
    };
}