/*
Enrique:  la distancia entre "desarrollado... por Ivan lópez munuera"
y el codigo
hazla un poco mayor


y la otra es preguntarte si puedes simplificar el código para que sea más corto


y otra cosa más
si no puedes controlar "Versión HTML"
podemos ponerlo como cabezera del código
así se entiende mejor...
no se si me explico...
*/

window.addEvent('domready', 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 = 'window.addEvent(\'domready\', 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 = \''+url+'\';<br/>    var imagenes = Asset.images([url+\'amarillo.png\', url+\'amarillo2.png\']);<br/>    var browser_size = window.getScrollSize();<br/>    var elem = (document.compatMode === "CSS1Compat") ? document.documentElement : document.body;<br/>    var viewport_size_y = elem.clientHeight;<br/>    var pos_x = Number.random(0, browser_size.x - size_x);<br/>    var pos_y = Number.random(0, browser_size.y - size_y);<br/>    if (viewport_size_y >= 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 = new Element(\'div\', {<br/>        id: \'contenedor_mancha\',<br/>        styles: {<br/>            width: size_x,<br/>            height: size_y,<br/>            position: \'absolute\',<br/>            top: pos_y,<br/>            left: pos_x,<br/>            cursor: \'pointer\',<br/>            overflow: \'hidden\'<br/>        }<br/>    });<br/>    var imagen_mancha = new Element(\'img\', {<br/>        src: url + \'amarillo.png\',<br/>        styles: {<br/>            width: \'100%\',<br/>            height: \'100%\'<br/>        }<br/>    });<br/>    var texto_mancha = new Element(\'div\', {<br/>       id: \'texto_mancha\',<br/>       html: \'&lt;p style="font-family: Georgia; font-size: 50px; margin-bottom: 30px; margin-top: 30px; position: relative; display: inline-block;"&gt;GRAN AMARILLO&lt;span style="font-size: 10px; position: absolute; bottom: -15px; right: 5px;"&gt;VERSIÓN HTML&lt;/span&gt;&lt;/p&gt;&lt;p style="font-family: courier; font-size: 11px; padding: 0 20px; margin-bottom: 20px"&gt;Desarrollado por Enrique Radigales para EL Ranchito y Matadero Madrid.&lt;br/&gt;Comisariado por Iván López Munuera.&lt;/p&gt;&lt;p style="font-family: courier; font-size: 11px; padding: 0 40px"&gt;\'+codigo+\'&lt;/p&gt;\',<br/>       styles: {<br/>           \'text-align\': \'center\',<br/>           width: bigsize_x - padd_left - padd_right,<br/>           height: bigsize_y - padd_top - padd_bot,<br/>           position: \'absolute\',<br/>           top: padd_top,<br/>           left: padd_left,<br/>           opacity: 0,<br/>           display: \'none\',<br/>           overflow: \'hidden\'<br/>       }<br/>    });<br/>    imagen_mancha.inject(contenedor_mancha);<br/>    texto_mancha.inject(contenedor_mancha);<br/>    contenedor_mancha.inject($(document.body));<br/>    var efecto = new Fx.Morph(\'contenedor_mancha\', {<br/>        duration: \'long\',<br/>        transition: Fx.Transitions.Bounce.easeOut<br/>    });<br/>    var crecer = function ()<br/>    {<br/>        imagen_mancha.set(\'src\', url + \'amarillo2.png\');<br/>        efecto.start({<br/>            \'width\': [size_x, bigsize_x],<br/>            \'height\': [size_y, bigsize_y],<br/>            \'left\': [pos_x, offset_x],<br/>            \'top\': [pos_y, offset_y]<br/>        }).chain(function () {<br/>            $(\'texto_mancha\').setStyle(\'display\', \'block\');<br/>            $(\'texto_mancha\').fade(\'in\');<br/>        });<br/>        this.removeEvents(\'click\');<br/>        this.addEvent(\'click\', f_decrecer);<br/>    }<br/>    var f_crecer = crecer.bind($(\'contenedor_mancha\'));<br/>    var decrecer = function ()<br/>    {<br/>        $(\'texto_mancha\').set(\'opacity\', 0);<br/>        $(\'texto_mancha\').setStyle(\'display\', \'none\');<br/>        imagen_mancha.set(\'src\', url + \'amarillo.png\');<br/>        efecto.start({<br/>            \'width\': [bigsize_x, size_x],<br/>            \'height\': [bigsize_y, size_y],<br/>            \'left\': [offset_x, pos_x],<br/>            \'top\': [offset_y, pos_y]<br/>        });<br/>        this.removeEvents(\'click\');<br/>        this.addEvent(\'click\', f_crecer);<br/>    }<br/>    var f_decrecer = decrecer.bind($(\'contenedor_mancha\'));<br/><br/>    $(\'contenedor_mancha\').addEvent(\'click\', f_crecer);<br/>}<br/>';

    // Comprimido
    // var codigo = 'window.addEvent(\'domready\',function(){gran_amarillo()}); function gran_amarillo(){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:var imagenes=Asset.images([url+\'amarillo.png\',url+\'amarillo2.png\']); var browser_size=window.getScrollSize(); var elem=(document.compatMode==="CSS1Compat")?document.documentElement:document.body; var viewport_size_y=elem.clientHeight; var pos_x=Number.random(0,browser_size.x-size_x); var pos_y=Number.random(0,browser_size.y-size_y); if(viewport_size_y>=limite_y){bigsize_x=(bigsize_x*(browser_size.y-(offset_y*2))/bigsize_y); bigsize_y=browser_size.y-(offset_y*2)}else{bigsize_y=(bigsize_y*(browser_size.x-(offset_x*2))/bigsize_x); bigsize_x=browser_size.x-(offset_x*2)}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; offset_x=(browser_size.x-bigsize_x)/2; var contenedor_mancha=new Element(\'div\',{id:\'contenedor_mancha\',styles:{width:size_x,height:size_y,position:\'absolute\',top:pos_y,left:pos_x,cursor:\'pointer\',overflow:\'hidden\'}}); var imagen_mancha=new Element(\'img\',{src:url+\'amarillo.png\',styles:{width:\'100%\',height:\'100%\'}}); var texto_mancha=new Element(\'div\',{id:\'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Ó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án López Munuera.&lt; /p&gt; &lt; p style="font-family: courier;  font-size: 11px; "&gt; \'+codigo+\'&lt; /p&gt; \',styles:{\'text-align\':\'center\',width:bigsize_x-padd_left-padd_right,height:bigsize_y-padd_top-padd_bot,position:\'absolute\',top:padd_top,left:padd_left,opacity:0,display:\'none\',overflow:\'hidden\'}}); imagen_mancha.inject(contenedor_mancha); texto_mancha.inject(contenedor_mancha); contenedor_mancha.inject($(document.body)); var efecto=new Fx.Morph(\'contenedor_mancha\',{duration:\'long\',transition:Fx.Transitions.Bounce.easeOut}); var crecer=function(){imagen_mancha.set(\'src\',url+\'amarillo2.png\'); efecto.start({\'width\':[size_x,bigsize_x],\'height\':[size_y,bigsize_y],\'left\':[pos_x,offset_x],\'top\':[pos_y,offset_y]}).chain(function(){$(\'texto_mancha\').setStyle(\'display\',\'block\'); $(\'texto_mancha\').fade(\'in\')}); this.removeEvents(\'click\'); this.addEvent(\'click\',f_decrecer)}var f_crecer=crecer.bind($(\'contenedor_mancha\')); var decrecer=function(){$(\'texto_mancha\').set(\'opacity\',0); $(\'texto_mancha\').setStyle(\'display\',\'none\'); imagen_mancha.set(\'src\',url+\'amarillo.png\'); efecto.start({\'width\':[bigsize_x,size_x],\'height\':[bigsize_y,size_y],\'left\':[offset_x,pos_x],\'top\':[offset_y,pos_y]}); this.removeEvents(\'click\'); this.addEvent(\'click\',f_crecer)}var f_decrecer=decrecer.bind($(\'contenedor_mancha\')); $(\'contenedor_mancha\').addEvent(\'click\',f_crecer)}';

    // Obtenemos las medidas de la pantalla
    var browser_size = window.getScrollSize();
    var elem = (document.compatMode === "CSS1Compat") ? document.documentElement : document.body;
    var viewport_size_y = elem.clientHeight;

    // Calculamos la posición aleatoria
    var pos_x = Number.random(0, browser_size.x - size_x);
    var pos_y = Number.random(0, 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 div contenedor de la imagen
    var contenedor_mancha = new Element('div', {
        id: 'contenedor_mancha',
        styles: {
            width: size_x,
            height: size_y,
            position: 'absolute',
            top: pos_y,
            left: pos_x,
            cursor: 'pointer',
            overflow: 'hidden'
        }
    });

    // Creamos la imagen
    var imagen_mancha = new Element('img', {
        src: url + 'amarillo.png',
        styles: {
            width: '100%',
            height: '100%'
        }
    });

    // Creamos el texto
    var texto_mancha = new Element('div', {
       id: '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Ó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án López Munuera.</p><p style="font-family: courier; font-size: 11px;">'+codigo+'</p>',
       styles: {
           'text-align': 'center',
           width: bigsize_x - padd_left - padd_right,
           height: bigsize_y - padd_top - padd_bot,
           position: 'absolute',
           top: padd_top,
           left: padd_left,
           opacity: 0,
           display: 'none',
           overflow: 'hidden'
       }
    });

    imagen_mancha.inject(contenedor_mancha);
    texto_mancha.inject(contenedor_mancha);
    contenedor_mancha.inject($(document.body));

    // Creamos el evento y la animación de la mancha
    var efecto = new Fx.Morph('contenedor_mancha', {
        duration: 'long',
        transition: Fx.Transitions.Bounce.easeOut
    });

    var crecer = function ()
    {
        imagen_mancha.set('src', url + 'amarillo2.png');
        efecto.start({
            'width': [size_x, bigsize_x],
            'height': [size_y, bigsize_y],
            'left': [pos_x, offset_x],
            'top': [pos_y, offset_y]
        }).chain(function () {
            $('texto_mancha').setStyle('display', 'block');
            $('texto_mancha').fade('in');
        });
        this.removeEvents('click');
        this.addEvent('click', f_decrecer);
    }
    var f_crecer = crecer.bind($('contenedor_mancha'));

    var decrecer = function ()
    {
        $('texto_mancha').set('opacity', 0);
        $('texto_mancha').setStyle('display', 'none');
        imagen_mancha.set('src', url + 'amarillo.png');
        efecto.start({
            'width': [bigsize_x, size_x],
            'height': [bigsize_y, size_y],
            'left': [offset_x, pos_x],
            'top': [offset_y, pos_y]
        });
        this.removeEvents('click');
        this.addEvent('click', f_crecer);
    }
    var f_decrecer = decrecer.bind($('contenedor_mancha'));


    $('contenedor_mancha').addEvent('click', f_crecer);
}