$(document).ready(function() {
    gran_amarillo();
});

function gran_amarillo ()
{
    // Configuración
    var size_x = 25;
    var size_y = 42;

    var bigsize_x = origsize_x = 1395;
    var bigsize_y = origsize_y = 2363;

    var offset_x = 150;
    var offset_y = 20;

    var limite_y = 750;

    var padd_top = 260;
    var padd_bot = 320;
    var padd_left = 30;
    var padd_right = 100;

    var url = 'http://www.enriquecimiento.com/img/';
    // var imagenes = Asset.images([url+'amarillo.png', url+'amarillo2.png']);

    // Normal
    var codigo = '$(document).ready(function() {<br/>    gran_amarillo();<br/>});<br/>function gran_amarillo ()<br/>{<br/>    var size_x = 25;<br/>    var size_y = 42;<br/>    var bigsize_x = origsize_x = 1395;<br/>    var bigsize_y = origsize_y = 2363;<br/>    var offset_x = 150;<br/>    var offset_y = 20;<br/>    var limite_y = 750;<br/>    var padd_top = 260;<br/>    var padd_bot = 320;<br/>    var padd_left = 30;<br/>    var padd_right = 100;<br/>    var url = \'http://www.enriquecimiento.com/img/\';<br/>    var browser_size = {<br/>        x: $(document).width(),<br/>        y: $(document).height()<br/>    };<br/>    var elem = (document.compatMode === "CSS1Compat") ? document.documentElement : document.body;<br/>    var viewport_size_y = elem.clientHeight;<br/>    var pos_x = Math.floor(Math.random() * (browser_size.x - size_x));<br/>    var pos_y = Math.floor(Math.random() * (browser_size.y - size_y));<br/>    if (viewport_size_y &gt;= limite_y) {<br/>        bigsize_x = (bigsize_x * (browser_size.y - (offset_y * 2)) / bigsize_y);<br/>        bigsize_y = browser_size.y - (offset_y * 2);<br/>    } else {<br/>        bigsize_y = (bigsize_y * (browser_size.x - (offset_x * 2)) / bigsize_x);<br/>        bigsize_x = browser_size.x - (offset_x * 2);<br/>    }<br/>    padd_top = (padd_top * bigsize_y ) / origsize_y;<br/>    padd_bot = (padd_bot * bigsize_y ) / origsize_y;<br/>    padd_left = (padd_left * bigsize_x ) / origsize_x;<br/>    padd_right = (padd_right * bigsize_x ) / origsize_x;<br/>    offset_x = (browser_size.x - bigsize_x ) / 2;<br/>    var contenedor_mancha = $(\'&lt;div&gt;\');<br/>    contenedor_mancha.attr(\'id\', \'contenedor_mancha\');<br/>    contenedor_mancha.css(\'width\', size_x);<br/>    contenedor_mancha.css(\'height\', size_y);<br/>    contenedor_mancha.css(\'position\', \'absolute\');<br/>    contenedor_mancha.css(\'top\', pos_y);<br/>    contenedor_mancha.css(\'left\', pos_x);<br/>    contenedor_mancha.css(\'cursor\', \'pointer\');<br/>    contenedor_mancha.css(\'overflow\', \'hidden\');<br/>    var imagen_mancha = $(\'&lt;img&gt;\');<br/>    imagen_mancha.attr(\'src\', url + \'amarillo.png\');<br/>    imagen_mancha.css(\'width\', \'100%\');<br/>    imagen_mancha.css(\'height\', \'100%\');<br/>    var texto_mancha = $(\'&lt;div&gt;\');<br/>    texto_mancha.html(\'&lt;p style="font-family: Georgia; font-size: 50px; margin-bottom: 30px; margin-top: 30px; position: relative; display: inline-block; line-height: 50px;"&gt;GRAN AMARILLO&lt;span style="font-size: 10px; position: absolute; line-height: 10px; bottom: -10px; right: 5px;"&gt;VERSI&oacute;N HTML&lt;/span&gt;&lt;/p&gt;&lt;p style="font-family: courier; font-size: 11px; margin-bottom: 50px"&gt;Desarrollado por Enrique Radigales para EL Ranchito y Matadero Madrid.&lt;br/&gt;Comisariado por Iv&aacute;n L&oacute;pez Munuera.&lt;/p&gt;&lt;p style="font-family: courier; font-size: 11px;"&gt;\'+codigo+\'&lt;/p&gt;\');<br/>    texto_mancha.attr(\'id\', \'texto_mancha\');<br/>    texto_mancha.css(\'text-align\', \'center\');<br/>    texto_mancha.css(\'width\', bigsize_x - padd_left - padd_right);<br/>    texto_mancha.css(\'height\', bigsize_y - padd_top - padd_bot);<br/>    texto_mancha.css(\'position\', \'absolute\');<br/>    texto_mancha.css(\'top\', padd_top);<br/>    texto_mancha.css(\'left\', padd_left);<br/>    texto_mancha.css(\'display\', \'none\');<br/>    texto_mancha.css(\'overflow\', \'hidden\');<br/>    contenedor_mancha.append(imagen_mancha);<br/>    contenedor_mancha.append(texto_mancha);<br/>    $(\'body\').append(contenedor_mancha);<br/>    var crecer = function ()<br/>    {<br/>        imagen_mancha.attr(\'src\', url + \'amarillo2.png\');<br/>        contenedor_mancha.animate({<br/>            width: bigsize_x,<br/>            height: bigsize_y,<br/>            left: offset_x,<br/>            top: offset_y<br/>        }, \'fast\', \'swing\', function() {<br/>            texto_mancha.fadeIn(200);<br/>        });<br/><br/>        contenedor_mancha.unbind(\'click.crecer\');<br/>        contenedor_mancha.bind(\'click.decrecer\', decrecer);<br/>    }<br/>    var decrecer = function ()<br/>    {<br/>        imagen_mancha.attr(\'src\', url + \'amarillo.png\');<br/>        texto_mancha.fadeOut(200, function () {<br/>            contenedor_mancha.animate({<br/>                width: size_x,<br/>                height: size_y,<br/>                left: pos_x,<br/>                top: pos_y<br/>            }, \'fast\', \'swing\');<br/>        });<br/>        <br/>        contenedor_mancha.unbind(\'click.decrecer\');<br/>        contenedor_mancha.bind(\'click.crecer\', crecer);<br/>    }<br/>    contenedor_mancha.bind(\'click.crecer\', crecer);<br/>}<br/>';

    // Obtenemos las medidas de la pantalla
    var browser_size = {
        x: $(document).width(),
        y: $(document).height()
    };
    
    var elem = (document.compatMode === "CSS1Compat") ? document.documentElement : document.body;
    var viewport_size_y = elem.clientHeight;

    // Calculamos la posición aleatoria
    var pos_x = Math.floor(Math.random() * (browser_size.x - size_x));
    var pos_y = Math.floor(Math.random() * (browser_size.y - size_y));

    // Calculamos el tamaño
    if (viewport_size_y >= limite_y) {
        // Ajuste vertical
        bigsize_x = (bigsize_x * (browser_size.y - (offset_y * 2)) / bigsize_y);
        bigsize_y = browser_size.y - (offset_y * 2);
    } else {
        // Ajuste horizontal
        bigsize_y = (bigsize_y * (browser_size.x - (offset_x * 2)) / bigsize_x);
        bigsize_x = browser_size.x - (offset_x * 2);
    }

    // Calculamos los paddings
    padd_top = (padd_top * bigsize_y ) / origsize_y;
    padd_bot = (padd_bot * bigsize_y ) / origsize_y;
    padd_left = (padd_left * bigsize_x ) / origsize_x;
    padd_right = (padd_right * bigsize_x ) / origsize_x;

    // Calculamos la posición centrada
    offset_x = (browser_size.x - bigsize_x ) / 2;

    // Creamos el contenedor
    var contenedor_mancha = $('<div>');
    contenedor_mancha.attr('id', 'contenedor_mancha');
    contenedor_mancha.css('width', size_x);
    contenedor_mancha.css('height', size_y);
    contenedor_mancha.css('position', 'absolute');
    contenedor_mancha.css('top', pos_y);
    contenedor_mancha.css('left', pos_x);
    contenedor_mancha.css('cursor', 'pointer');
    contenedor_mancha.css('overflow', 'hidden');

    // Creamos la imagen
    var imagen_mancha = $('<img>');
    imagen_mancha.attr('src', url + 'amarillo.png');
    imagen_mancha.css('width', '100%');
    imagen_mancha.css('height', '100%');

    // Creamos el texto
    var texto_mancha = $('<div>');
    texto_mancha.html('<p style="font-family: Georgia; font-size: 50px; margin-bottom: 30px; margin-top: 30px; position: relative; display: inline-block; line-height: 50px;">GRAN AMARILLO<span style="font-size: 10px; position: absolute; line-height: 10px; bottom: -10px; right: 5px;">VERSI&Oacute;N HTML</span></p><p style="font-family: courier; font-size: 11px; margin-bottom: 50px">Desarrollado por Enrique Radigales para EL Ranchito y Matadero Madrid.<br/>Comisariado por Iv&aacute;n L&oacute;pez Munuera.</p><p style="font-family: courier; font-size: 10px;">'+codigo+'</p>');
    texto_mancha.attr('id', 'texto_mancha');
    texto_mancha.css('text-align', 'center');
    texto_mancha.css('width', bigsize_x - padd_left - padd_right);
    texto_mancha.css('height', bigsize_y - padd_top - padd_bot);
    texto_mancha.css('position', 'absolute');
    texto_mancha.css('top', padd_top);
    texto_mancha.css('left', padd_left);
    texto_mancha.css('display', 'none');
    texto_mancha.css('overflow', 'hidden');

    contenedor_mancha.append(imagen_mancha);
    contenedor_mancha.append(texto_mancha);
    $('body').append(contenedor_mancha);

    // Creamos las animaciones
    var crecer = function ()
    {
        imagen_mancha.attr('src', url + 'amarillo2.png');
        contenedor_mancha.animate({
            width: bigsize_x,
            height: bigsize_y,
            left: offset_x,
            top: offset_y
        }, 'fast', 'swing', function() {
            texto_mancha.fadeIn(200);
        });

        contenedor_mancha.unbind('click.crecer');
        contenedor_mancha.bind('click.decrecer', decrecer);
    }

    var decrecer = function ()
    {
        imagen_mancha.attr('src', url + 'amarillo.png');
        texto_mancha.fadeOut(200, function () {
            contenedor_mancha.animate({
                width: size_x,
                height: size_y,
                left: pos_x,
                top: pos_y
            }, 'fast', 'swing');
        });
        
        contenedor_mancha.unbind('click.decrecer');
        contenedor_mancha.bind('click.crecer', crecer);
    }



    contenedor_mancha.bind('click.crecer', crecer);

}