﻿// necesita la libreria de jquery "jquery.dimensions.min.js" para funcionar.
// necesita que la imagen target tenda Id = "Imagenator"
// lo unico malo (pero se puede agregar) es que hay que cablear el tamano original de la imagen, 
// es decir, las fuentes deben tener dimensiones fijas que se cablean en las variables $x y $y de este algoritmo.

//(function($) {
//    $.fn.LiguidImage = function(options) {
//        var __opts = $.extend($.fn.LiquidImage.defaults, options);
//        var __windowWidth = $(window).width(); // jquery.dimensions.min.js
//        var __windowHeight = $(window).height(); // jquery.dimensions.min.js

//        


//        function changeOpacity (opacity, id, imagefile) {
//            var image = document.getElementById(id);
//            if (opacity == 0) image.src = imagefile;
//            var object = document.getElementById(id).style;
//            object.opacity = (opacity / 100);
//            object.MozOpacity = (opacity / 100);
//            object.KhtmlOpacity = (opacity / 100);
//            object.filter = "alpha(opacity=" + opacity + ")";
//        }
//        
//        function blendImage(imageid, imagefile, millisec) {
//            var speed = Math.round(millisec / 100);
//            var timer = 0;
//            //fade in image
//            for (i = -100; i <= 100; i++) {
//                setTimeout("changeOpac(" + Math.abs(i) + ",'" + imageid + "','" + imagefile + "')", (timer * speed));
//                timer++;
//            }
//        }

//     }

//    $.fn.LiguidImage.defaults = {
//        ideal_width: 1024,
//        ideal_height: 768,
//        aspect_ratio_x: 4,
//        aspect_ratio_y: 3
//    };
//})(jQuery);


$(document).ready(function() {
    var $winwidth = $(window).width();
    var $winheight = $(window).height();
    var $x = 1280; // cambiar de acuerdo al requerimiento
    var $y = 720; // cambiar de acuerdo al requerimiento
    var $dx = 16; // radio de aspecto x
    var $dy = 9; // radio de aspecto y

    var $p = $winwidth / $dx;
    var $coef = 0;
    var $newwidth = 0;
    var $newheight = 0;

    if (($winheight / $dy) > $p) {
        // height predomina
        $coef = $winheight / $y;
        $newheight = $winheight;
        $newwidth = $x * $coef;
    } else {
        // width predomina            
        $coef = $winwidth / $x;
        $newwidth = $winwidth;
        $newheight = $y * $coef;
    }
    $("#Imagenator").attr({
        width: $newwidth
    });
    $("#Imagenator").attr({
        height: $newheight
    });


    $(window).bind("resize", function() {
        var $winwidth = $(window).width();
        var $winheight = $(window).height();
        var $x = 1280;
        var $y = 720;
        var $dx = 16; // radio de aspecto x
        var $dy = 9; // radio de aspecto y

        var $p = $winwidth / $dx;
        var $coef = 0;
        var $newwidth = 0;
        var $newheight = 0;

        if (($winheight / $dy) > $p) {
            // height predomina
            $coef = $winheight / $y;
            $newheight = $winheight;
            $newwidth = $x * $coef;
        } else {
            // widtg predomina            
            $coef = $winwidth / $x;
            $newwidth = $winwidth;
            $newheight = $y * $coef;
        }
        $("#Imagenator").attr({
            width: $newwidth
        });
        $("#Imagenator").attr({
            height: $newheight
        });
    });
});

//change the opacity for different browsers
function changeOpac(opacity, id, imagefile) {
    var image = document.getElementById(id);
    if (opacity == 0) image.src = imagefile;
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}
function blendimage(imageid, imagefile, millisec) {
    var speed = Math.round(millisec / 100);
    var timer = 0;
    //fade in image
    for (i = -100; i <= 100; i++) {
        setTimeout("changeOpac(" + Math.abs(i) + ",'" + imageid + "','" + imagefile + "')", (timer * speed));
        timer++;
    }
}
